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);
}