// 绘制图形
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地图绘制圆形、椭圆、矩形或其他自定义图案
最新推荐文章于 2023-12-13 15:17:27 发布