Maptalks画多边形并保存所画的多边形数据

  近期因为需要做一些特殊计算的缘故，想到使用Maptalks 画一些多边形作为基础物理地块( 至于为什么要使用maptalks？因为刚好看了下Maptalks的3D展示Linestring、Polygon的效果图，并根据官网Demo做了一些编辑，加了自己需要的数据来展示效果， Maptalks加载地图也很快)。

  一下做的一些修改都是基于Maptalks官网的Demo做的一些修改：https://maptalks.org/examples/cn/interaction/draw-tool/

官网的绘制工具Demo:

  上面提到，我不仅需要绘制一些多边形，还要保存数据，所以我加了 下载按钮。在画图期间其实我也遇到了因为拖动地图不小心触发画多边形的事件，导致不得不画一个多边形， 所以我又加了个删除刚画的多边形的按钮 : Clear Last Draw.

效果图：

1、画几个多边形，最下面那个随便画的，会删除

2、点击Clear-last-draw删除最后画的那个

3、点击Download Geometries下载页面上展示的三个多边形数据。 数据会以Array的形式保存到txt文件里。在这里我是用node.js读取这个txt文件，并以需要的格式入库。

  关键部分，js代码：

var map = new maptalks.Map('map', {
  center: [121.726616,31.106884],
  zoom: 14,
  baseLayer: new maptalks.TileLayer('base', {
    urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
    subdomains: ['a', 'b', 'c', 'd'],
    attribution: '© <a href="http://osm.org" target="_blank" rel="external nofollow" >OpenStreetMap</a>  contributors, © <a href="https://carto.com/" target="_blank" rel="external nofollow" >CARTO</a> '
  })
});

var layer = new maptalks.VectorLayer('vector').addTo(map);

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

drawTool.on('drawend', function(param) {
  console.log(param.geometry.toGeoJSON().geometry.coordinates);
  resultList.push(param.geometry.toGeoJSON().geometry.coordinates);
  
  console.log(resultList.length);
  
  layer.addGeometry(param.geometry);
  
});

var items = ['Point', 'LineString', 'Polygon', 'Circle', 'Ellipse', 'Rectangle', 'FreeHandLineString', 'FreeHandPolygon'].map(function(value) {
  return {
    item: value,
    click: function() {
      drawTool.setMode(value).enable();
    }
  };
});

var toolbar = new maptalks.control.Toolbar({
  items: [{
    item: 'Shape',
    children: items
  }, {
    item: 'Disable',
    click: function() {
      drawTool.disable();
    }
  }, {
    item: 'Clear-last-draw',
    click: function() {
      layer.removeGeometry(layer.getLastGeometry())
      resultList.pop();
      console.log(resultList.length, resultList);
    }
  }, {
    item: 'Download Geometries',
    click: function() {
      console.log(resultList.length)
      //调用方法
      download("polygon-list.txt",  JSON.stringify(resultList));
      resultList = [];
    }
  }, {
    item: 'Clear All',
    click: function() {
      console.log(resultList.length)
      layer.clear();
      resultList = [];
    }
  }]
}).addTo(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);
}