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

然后，我們需要借助maptalks.Polygon添加一些地圖區(qū)塊（Polygon示例）。雖然地圖看起來和長方體不太一樣，實(shí)際上這些區(qū)塊也不過是稍微復(fù)雜一些的點(diǎn)線集合而已。作為一切繪制的基礎(chǔ)，我們需要找一些GeoJson格式的數(shù)據(jù)（中國各省市級(jí)json，世界主要國家json）。觀察GeoJson，其中，的coordinates屬性，就是地圖邊界的集合。需要注意的是，區(qū)域type包含Polygon和MultiPolygon兩類，和maptalks的多邊形函數(shù)相對(duì)應(yīng)，在數(shù)組的層級(jí)上稍有區(qū)別。為了減少數(shù)據(jù)選取的麻煩，這里選擇使用MultiPolygon來進(jìn)行繪制。

drawPolygons(idx, coordinates, properties) {
    const polygon = new maptalks.MultiPolygon(coordinates, {
      symbol: {
        lineWidth: 1,
        lineColor: edgeColor,
        polygonFill: polygonColors[0],
        polygonOpacity: 0.5
      },
      properties: {
        id: properties.id,
        index: idx,
        properties: properties
      }
    })
    .on("mouseenter", function(e) {
      e.target.updateSymbol({
        polygonFill: polygonColors[1]
      });
    })
    .on("mouseout", function(e) {
      e.target.updateSymbol({
        polygonFill: polygonColors[0]
      });
    })
    this.polygons.push(polygon);
},
drawRegion() {
    const self = this
    $.getJSON("guizhou.json", "", function(mapData) {
      const features = mapData.features;
      features.forEach((g, i) => {
        const properties = g.properties;
        const coordinates = g.geometry.coordinates
        self.drawPolygons(i, coordinates, properties)
      });
      const polygonsLayer = new maptalks.VectorLayer(
        "vector-polygon",
        self.polygons,
      ).addTo(self.mapDom);
    })
},

到現(xiàn)在為止，一切還只是2d的樣子。不過，maptalks允許我們繪制3維的高度面（立體的線）。只需要引入一個(gè)altitude屬性，并在底圖上引入pitch屬性使視角稍稍偏移， 我們的2.5d地圖就畫出來了。

drawLimitLines(idx, coordinates, properties) {
  const outLine = new maptalks.MultiLineString(coordinates, {
    symbol: {
      lineColor: edgeColor,
      lineWidth: 1,
      textPlacement: "vertex"
    },
    properties: {
      altitude: altitude,
      index: idx,
      id: properties.id,
      properties: properties
    }
  });
  this.limitLines.push(outLine);
},
drawPolygons(idx, coordinates, properties) {
  const polygon = new maptalks.MultiPolygon(coordinates, {
    symbol: {
      lineWidth: 1,
      lineColor: edgeColor,
      polygonFill: polygonColors[0],
      polygonOpacity: 0.5
    },
    properties: {
      altitude: altitude,
      id: properties.id,
      index: idx,
      properties: properties
    }
  })
  .on("mouseenter", function(e) {
    e.target.updateSymbol({
      polygonFill: polygonColors[1]
    });
  })
  .on("mouseout", function(e) {
    e.target.updateSymbol({
      polygonFill: polygonColors[0]
    });
  })
  this.polygons.push(polygon);
},
drawRegion() {
  const self = this
  $.getJSON("guizhou.json", "", function(mapData) {
    const features = mapData.features;
    features.forEach((g, i) => {
      const properties = g.properties;
      const coordinates = g.geometry.coordinates
      self.drawPolygons(i, coordinates, properties)
      const pathCoordinates = g.geometry.type == "MultiPolygon" ? coordinates.map(d => { return d[0] }) : coordinates
      self.drawLimitLines(i, pathCoordinates, properties)
    });
    const polygonsLayer = new maptalks.VectorLayer(
      "vector-polygon",
      self.polygons,
      {
        enableAltitude: true
      }
    ).addTo(self.mapDom);
    const limitLinesLayer = new maptalks.VectorLayer(
      "vector-line",
      self.limitLines,
      {
        enableAltitude: true,
        drawAltitude: {
          polygonFill: edgeColor,
          polygonOpacity: 0.3,
          lineWidth: 0
        }
      }
    ).addTo(self.mapDom);
  })
},

2.數(shù)據(jù)和樣式處理
到這個(gè)時(shí)候，效果還是不太令人滿意?？h市間的邊界太丑，有沒有什么辦法把他去掉呢？很簡單，直接繪制地圖的外沿就好。不過，網(wǎng)上下載的貴州省邊界好像和現(xiàn)在帶有區(qū)縣劃分的精度不太一樣？那么，就來自己處理一下吧。根據(jù)問答如何合并區(qū)域邊界，訪問在線的地圖數(shù)據(jù)處理網(wǎng)站http://mapshaper.org/，給每個(gè)縣市取一個(gè)相同的別名，一番輸入輸出，我們就得到了貴州省的外邊界。

drawBorderLines(coordinates, properties) {
    const outLine = new maptalks.MultiLineString(coordinates, {
      symbol: {
        lineColor: edgeColor,
        lineWidth: 1,
        textPlacement: "vertex"
      },
      properties: {
        altitude: altitude,
        id: properties.id,
        properties: properties
      }
    });
    this.limitLines.push(outLine);
},
drawWall() {
    const self = this
    $.getJSON("guizhou-border.json", "", function(borderMapData) {
      const borderFeatures = borderMapData.features[0]
      const properties = borderFeatures.properties;
      const pathCoordinates = borderFeatures.geometry.coordinates.map(d => { return d[0] })
      self.drawBorderLines(pathCoordinates, properties)
      const limitLinesLayer = new maptalks.VectorLayer(
        "vector-line",
        self.limitLines,
        {
          enableAltitude: true,
          drawAltitude: {
            polygonFill: edgeColor,
            polygonOpacity: 0.3,
            lineWidth: 0
          }
        }
      ).addTo(self.mapDom);
    })
}

當(dāng)然，mapshaper的功效不止于此，簡直是區(qū)域數(shù)據(jù)處理的一大利器，非常值得探索。
另一個(gè)令人不太滿意的是地圖的底圖。打開mapbox，找到Studio然后Start With Basic,一個(gè)全新的自配地圖的世界等待著你。這里，就隨便先把英文的區(qū)縣名換成中文好了。

完成配置之后，點(diǎn)擊share，你會(huì)得到一個(gè)鏈接。不過，在用他替換掉Map的urlTemplate之前，還要按照格式進(jìn)行一下修整。

最后，就得到了本文開頭所示的地圖。相關(guān)源碼