VUE地图基础操作放大、缩小、测距、测面、复位、切换地图底图，清除作图痕迹，画矩形框圆形等自定义图案

VUE地图基础操作：放大、缩小、测距、测面、复位、切换地图底图，清除作图痕迹，画矩形框圆形等自定义图案

data() {
        return {
            map: null,
            size: 7,
            markerLayer: null,  //地点图层
            toolLayer: null,
            layer: null,  //绘图图层
            coordinate: [   //地点经纬度坐标
                { x: 117, y: 37, name: "a" },
                { x: 118, y: 38, name: "b" },
                { x: 117.5, y: 37.5, name: "c" },
                { x: 116.5, y: 36.5, name: "d" },
                { x: 118, y: 37.5, name: "e" },
                { x: 117.5, y: 38, name: "f" }],
            flag: false,   //测距离标志
            areaflag: false,  //测面积标志
            drawflag: false,  //绘图标志
            areaTool: null,  //测面积工具
            distanceTool: null,  //测距离工具
            tool:null,   //绘图工具
            drawTool:null,
            detail: {   //弹窗
                dialogVisible: false,
                model: {

                }
            },
        }
    },

 mounted() {
        this.init()
        this.start()
        this.drawpic()
       }

 init() {
            this.map = new maptalks.Map('yzMap', {
                center: [117.174955, 37.941390], //地图的初始中心
                zoom: this.size, //地图的初试缩放
                pitch: 45,
                // zoomControl: true, // add zoom control
                scaleControl: true, // add scale control
                // overviewControl: true, // add overview control
                dragPitch: true, //是否可以倾斜（Ctrl 鼠标操作实现）
                dragRotate: true, //是否可以旋转
                dragRotatePitch: false, //是否旋转倾斜可以同时操作
                baseLayer: new maptalks.GroupTileLayer('yzMap', [
                    new WMTSTileLayer('WMTS', {
                        urlTemplate: 'https://t5.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=自己申请的',
                        subdomains: ["a", "b", "c", "d"],
                    }),
                    new maptalks.TileLayer("dark-map", {
                        urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
                        subdomains: [0, 1, 2],
                        visible: false,
                    }),
                ]),
            });
            },
            start() {
            // 测量距离
            this.distanceTool = new maptalks.DistanceTool({
                'symbol': {
                    'lineColor': '#34495e',
                    'lineWidth': 2
                },
                'vertexSymbol': {
                    'markerType': 'ellipse',
                    'markerFill': '#1bbc9b',
                    'markerLineColor': '#000',
                    'markerLineWidth': 3,
                    'markerWidth': 10,
                    'markerHeight': 10
                },

                'labelOptions': {
                    'textSymbol': {
                        'textFaceName': 'monospace',
                        'textFill': '#fff',
                        'textLineSpacing': 1,
                        'textHorizontalAlignment': 'right',
                        'textDx': 15,
                        'markerLineColor': '#b4b3b3',
                        'markerFill': '#000'
                    },
                    'boxStyle': {
                        'padding': [6, 2],
                        'symbol': {
                            'markerType': 'square',
                            'markerFill': '#000',
                            'markerFillOpacity': 0.9,
                            'markerLineColor': '#b4b3b3'
                        }
                    }
                },
                'clearButtonSymbol': [{
                    'markerType': 'square',
                    'markerFill': '#000',
                    'markerLineColor': '#b4b3b3',
                    'markerLineWidth': 2,
                    'markerWidth': 15,
                    'markerHeight': 15,
                    'markerDx': 20
                }, {
                    'markerType': 'x',
                    'markerWidth': 10,
                    'markerHeight': 10,
                    'markerLineColor': '#fff',
                    'markerDx': 20
                }],
                'language': 'en-US',
                // once: true
            }).addTo(this.map);
            this.distanceTool.disable()
            // 测量面积
            this.areaTool = new maptalks.AreaTool({
                'symbol': {
                    'lineColor': '#1bbc9b',
                    'lineWidth': 2,
                    'polygonFill': '#fff',
                    'polygonOpacity': 0.3
                },
                'vertexSymbol': {
                    'markerType': 'ellipse',
                    'markerFill': '#34495e',
                    'markerLineColor': '#1bbc9b',
                    'markerLineWidth': 3,
                    'markerWidth': 10,
                    'markerHeight': 10
                },
                'labelOptions': {
                    'textSymbol': {
                        'textFaceName': 'monospace',
                        'textFill': '#fff',
                        'textLineSpacing': 1,
                        'textHorizontalAlignment': 'right',
                        'textDx': 15
                    },
                    'boxStyle': {
                        'padding': [6, 2],
                        'symbol': {
                            'markerType': 'square',
                            'markerFill': '#000',
                            'markerFillOpacity': 0.9,
                            'markerLineColor': '#b4b3b3'
                        }
                    }
                },
                'clearButtonSymbol': [{
                    'markerType': 'square',
                    'markerFill': '#000',
                    'markerLineColor': '#b4b3b3',
                    'markerLineWidth': 2,
                    'markerWidth': 15,
                    'markerHeight': 15,
                    'markerDx': 22
                }, {
                    'markerType': 'x',
                    'markerWidth': 10,
                    'markerHeight': 10,
                    'markerLineColor': '#fff',
                    'markerDx': 22
                }],
                language: '',
                // once: true
            }).addTo(this.map);
            this.areaTool.disable()
           
        },
        // 测量距离
        distance() {
            this.flag = !this.flag
            if (this.flag) {
                this.areaflag = false
                this.drawflag = false
                this.areaTool.disable()
                this.tool.disable()
            }
            // this.toolLayer.addGeometry(this.distanceTool).addTo(this.map)
            if (this.flag) {
                this.distanceTool.enable()

                console.log("距离3", this.flag);
                console.log("面积3", this.areaflag);
            } else {
                this.distanceTool.disable()
                this.distanceTool.clear()   //不再测量距离的时候清除痕迹
                console.log("距离4", this.flag);
                console.log("面积4", this.areaflag);
            }

            console.log("添加");

        },
        // 测量面积
        area() {
            this.areaflag = !this.areaflag
            if (this.areaflag) {
                this.flag = false
                this.drawflag = false
                this.distanceTool.disable()
                this.tool.disable()
            }
            if (this.areaflag) {
                this.areaTool.enable()
                console.log("面积1", this.areaflag);
                console.log("距离1", this.flag);
            } else {
                this.areaTool.disable()
                this.areaTool.clear()   //不再测量面积的时候清除痕迹
                console.log("面积2", this.areaflag);
                console.log("距离2", this.flag);
            }

        },
        // 放大地图
        add() {
            this.map.setZoom(this.size  = 1)
            console.log(this.size);
        },
        // 缩小地图
        jian() {
            this.map.setZoom(this.size -= 1)
            console.log(this.size);
        },
        // 复位
        reset() {
            let view = {
                center: [117.174955, 37.941390]
            }
            this.map.setView(view);
            this.map.setZoom(7)
        },
        // 清除作图痕迹
        clear() {
            if (this.areaTool != null) {
                this.areaTool.clear()
                console.log("面积清除", typeof this.areaTool);
            }
            if (this.distanceTool != null) {
                this.distanceTool.clear()
                console.log("距离清除", this.distanceTool);
            }
            if (this.layer != null) {
                this.layer.clear()
                console.log("绘图清除");
            }
            

        },
        // 切换地图底图
        change() {
            var baseLayer = this.map.getBaseLayer()
            baseLayer.layers.forEach((layer) => {
                if (layer.getId() === 'WMTS') {
                    layer.hide()
                } else {
                    layer.show()
                }
            })
            console.log(baseLayer);
        },
        // 详情弹窗
        devDisplay(x, y, name) {

            this.detail.model.name = name
            this.detail.model.x = x
            this.detail.model.y = y
            this.detail.dialogVisible = true
            // alert(this.detail.model.y)
            // console.log(e);
        },
        
        // 按钮绘制图形1，与2联合使用
        drawpic(){
            var layer = new maptalks.VectorLayer('draw').addTo(this.map);

            var resultList = [];
            var drawTool = new maptalks.DrawTool({
                mode: 'Polygon',
                symbol: {
                    'lineColor': '#000',
                    'lineWidth': 2
                }
            }).addTo(this.map).disable();

            drawTool.on('drawend', function (param) {
                console.log("按钮画图", param.geometry.toGeoJSON().geometry.coordinates[0][2][0]); //获取坐标
                resultList.push(param.geometry.toGeoJSON().geometry.coordinates);

                console.log(resultList.length);

                layer.addGeometry(param.geometry);

            });
            this.tool=drawTool
            this.layer=layer
            // layer.addGeometry(drawTool)
            // layer.addGeometry(drawTool.setMode("Rectangle").enable());
            // drawTool.setMode("Rectangle").enable();
        },
        // 按钮绘制图形2，与1联合使用
        pic(){
            this.drawflag=!this.drawflag
            if (this.drawflag) {
                this.areaflag = false
                this.flag = false
                this.distanceTool.disable()
                this.areaTool.disable()
                this.tool.setMode("Rectangle").enable();
            }else{
                this.tool.disable()
                console.log("绘图：",this.drawflag);
            }

        }

这篇好文章是转载于：学新通技术网