vue地图绘制圆形、椭圆、矩形或其他自定义图案

vue地图绘制圆形、椭圆、矩形或其他自定义图案_vue绘制图形_不想学习只想玩的博客-CSDN博客

 // 绘制图形
        draw() {
            var layer = new maptalks.VectorLayer('vectordraw').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("draw", param.geometry.toGeoJSON().geometry.coordinates);
                resultList.push(param.geometry.toGeoJSON().geometry.coordinates);

                console.log(resultList.length);

                layer.addGeometry(param.geometry);

            });

            var items = [
                {code:'Point',name:"点"}, 
                {code:'LineString',name:"线"}, 
                {code:'Polygon',name:"几何面"}, 
                {code:'Circle',name:"圆"}, 
                {code:'Ellipse',name:"椭圆"}, 
                {code:'Rectangle',name:"矩形"}, 
                {code:'FreeHandLineString',name:"自由绘制"}, 
                {code:'FreeHandPolygon',name:"任意几何面"}].map(function (value) {
                return {
                    item: value.name,
                    click: function () {
                        drawTool.setMode(value.code).enable();
                    }
                };
            });

            var toolbar = new maptalks.control.Toolbar({
                items: [{
                    item: '绘制工具',
                    children: items
                }, {
                    item: '禁用',
                    click: function () {
                        drawTool.disable();
                    }
                }, {
                    item: '清除最后一个',
                    click: function () {
                        layer.removeGeometry(layer.getLastGeometry())
                        resultList.pop();
                        console.log(resultList.length, resultList);
                    }
                }, {
                    item: '下载图形经纬度坐标',
                    click: function () {
                        console.log(resultList.length)
                        //调用方法
                        download("polygon-list.txt", JSON.stringify(resultList));
                        resultList = [];
                    }
                }, {
                    item: '清除所有',
                    click: function () {
                        console.log(resultList.length)
                        layer.clear();
                        resultList = [];
                    }
                }]
            }).addTo(this.map);
            function download(name, data) {
                var urlObject = window.URL || window.webkitURL || window;

                var downloadData = new Blob([data]);

                var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
                save_link.href = urlObject.createObjectURL(downloadData);
                save_link.download = name;
                fake_click(save_link);
            }
            function fake_click(obj) {
                var ev = document.createEvent("MouseEvents");
                ev.initMouseEvent(
                    "click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null
                );
                obj.dispatchEvent(ev);
            }
        },