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

89 篇文章 1 订阅
84 篇文章 1 订阅
 // 绘制图形
        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);
            }
        },
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值