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

 // 绘制图形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);}},

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

android+动态地图+效果图,Android百度地图绘制圆形，圆形半径可动态变化
问题:百度地图绘制圆形,圆形半径可随进度拖动条发生改变思路:圆形本身是一个覆盖物,可参考百度地图Demo中的OverlayDemo.java这个类进行实现.完成画圆之后,圆形半径如何随着进度条的拖动 ...
open cv轮廓周围绘制圆形和矩形
APIapproxPolyDP(精简多边形轮廓点数) 作用是把一个很多点的多边形变成一个点数适中的多边形在这个多边形里面找它的最小连接矩形和最小的圆 approxPolyDP ( InputArra ...
qt绘制一圈圆_Qt绘制圆形，矩形等图形绘制同心圆
原来Qt也可以绘制图形啊. 利用QPainter类来绘制,再辅以其他类,诸如QPen来说明绘制的画笔,QPoint来说明某个点,QPaletee来说明绘制的颜料等等.在QWidget类中来实现虚拟函数 ...
百度地图绘制地区的棱柱效果-定位-自定义点-文本标记-信息弹窗
文章目录百度地图webgl使用自定义地图样式地区镂面棱柱效果绘制点信息以及信息弹窗百度地图webgl使用在项目的index.html中引入 <script type="te ...
vue2+高德地图绘制多个圆形覆盖物和多边形覆盖物
vue2+高德地图绘制圆形覆盖物以及多边形覆盖物直接贴代码直接贴代码添加复选款 <el-checkbox v-model="checkedAri" @change=&q ...
H5画布 canvas（一）canvas简介、绘制圆形矩形、案例饼状图绘制
目录 1. canvas 简介 2. canvas 标签介绍 3. canvas 上下文 Context 4. 案例:在 canvas 画布中绘制表格 5. canvas 的 beginPath 状态 ...
H5画布 canvas（一）canvas简介、绘制圆形/矩形、案例饼状图绘制
目录 1. canvas 简介 2. canvas 标签介绍 3. canvas 上下文 Context 4. 案例:在 canvas 画布中绘制表格 5. canvas 的 beginPath 状态 ...
C# 绘制PDF图形——基本图形、自定义图形、色彩透明度
引言在PDF中我们可以通过C#程序代码来添加非常丰富的元素来呈现我们想要表达的内容,如绘制表格.文字,添加图形.图像等等.在本篇文章中,我将介绍如何在PDF中绘制图形,并设置图形属性的操作. 文章中 ...
vue 项目使用 openlayers根据半径绘制圆形、绘制多边形
vue 项目使用 openlayers根据半径绘制圆形.绘制多边形这个地方我就简单点写吧,因为一些东西比较乱,有的包啥的就按照官网API开发文档根据报错提示自己添加就可以了,我这个地方就不重复写了. ...

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

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

最新文章

热门文章