ArcGIS API+Canvas +Vue框架 制作前端地图打印功能

简介

将ArcGIS Pro 桌面打印制图功能搬到前端页面上 实现BS端打印制图功能
需要实现：
1、地图框可随意拖拽布局、控制大小
2、指北针可随意拖拽布局
3、比例尺按照地图放大缩小 自动更改 可随意拖拽布局
4、图例 根据地图加载的图层进行展示，可随意拖拽布局，控制大小
5、支持预览、下载

地图框

冲突

地图需要在地图框内进行移动缩放等操作，与地图框的鼠标事件冲突，固地图框样式 pointer-events设置成none 关闭鼠标事件

拖拽

添加拖拽功能 ，使用vue的自定义指令 directives 创建drag指令，将v-drag 添加到div中，完成拖拽功能

 directives: {
   
   
   drag: {
   
   
            // 指令的定义
            bind: function (el) {
   
   
                let oDiv = el; // 获取当前元素
                oDiv.onmousedown = (e) => {
   
   
                    // 算出鼠标相对元素的位置
                    let oDiv = document.getElementById("地图框div"); // 获取当前元素
                    let disX = e.clientX - oDiv.offsetLeft;
                    let disY = e.clientY - oDiv.offsetTop;
                    document.onmousemove = (e) => {
   
   
                        // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
                        let left = e.clientX - disX;
                        let top = e.clientY - disY;
                        oDiv.style.left = left + 'px';
                        oDiv.style.top = top + 'px';
                    };
                    document.onmouseup = (e) => {
   
   
                        document.onmousemove = null;
                        document.onmouseup = null;
                    }

                }

            }

        },
     }

放大缩小

添加放大缩小功能，使用vue的自定义指令 directives 创建scale指令，将v-scale 添加到div中，完成拖拽功能

 directives: {
   
   
        scale: {
   
   
            // 指令的定义
            bind: function (el) {
   
   
                let oDiv = el; // 获取当前元素
                oDiv.onmousedown = (e