地图绘制初探——基于maptalks的2.5D地图绘制

进行图形可视化，难免会遇到地理数据的可视化需求。通常情况下，直接使用echarts对配置项进行处理，就可以满足大部分需求。当然，更加复杂的定制化需求，可能就需要借助d3、Three.js等工具。如果对详细的地图背景有要求的话，又需要将图形库与leaflet、maptalks等地图引擎相结合。
不过也许你的需求和我一样，没有那么复杂的交互需求，但对显示效果却有一些想法。那么就可以尝试阅读本文，使用一种比较偷懒的方法，仅基于maptalks本身，来绘制可交互的伪3d地图。
下面，以贵州省的伪3d地图为例，进行代码的编写和相应数据的简单处理。

1.基本的地图绘制
maptalks（maptalks的git）的官方范例写得相当亲切，我们可以从中找到所有绘制伪3d地图需要的元素。
首先，从地图底图开始。（官方入门示例）

initMapTalk() {
  let map = new maptalks.Map('mapDom', {
    center: [121.345, 31.2088],
    zoom: 9,
    baseLayer: new maptalks.TileLayer('base', {
      urlTemplate: 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
      subdomains: ['a','b','c','d'],
      attribution: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>'
    })
  });
}

需要注意的是，除了maptalks.js以外，maptalks.css也是必须引入的。

然后，我们需要借助maptalks.Polygon添加一些地图区块（