前端实现地图省市县区块划分显示（通过poi数据实现）

1.引入对应地图（应该都可以，有多边形绘制功能就行）

2.进入POI数据网站找到需要的省市县，下载对应的GeoJson文件 ，此处为poi数据网站链接

3.处理geoJson数据，可以直接新建json文件，将下载的geojson内容复制进入也可以使用。也可以在项目内webpack配置文件中修改，同时确保安装了json-loader。我一般都用前者就足够了

npm install json-loader --save-dev

module: {
  rules: [
    {
      test: /\.geojson$/,
      loader: 'json-loader'
    }
  ]
}

4.将文件放入项目内，从组件中引入json文件

import areaList from "../../map/beijing.json";

5.在地图初始化后，通过json中的点数据进行绘制多边形

 mapArea() {
      let polygon;
      var points = [];
      //areaList为引入的json文件，features为点的数组
      areaList.features.forEach((i) => {
        points = [];
        i.geometry.coordinates[0][0].forEach((item) => {
          points.push(new T.LngLat(item[0], item[1]));
        });
        //此处用的天地图api，其他地图要修改 T.---，根据使用地图修改即可，
        //T.LngLat是根据数据创造经纬度对象，T.Polygo是根据点制作多边形
        polygon = new T.Polygon(points, {
          color: "#13BBD0",
          weight: 3,
          opacity: 0.9,
          fillColor: "#2F8AB3",
          fillOpacity: 0.4,
        });
        this.map.addOverLay(polygon);
      });
    },

6.效果预览