使用maptalks加载geojson数据，完成彩色地图渲染。

---

1. 创建一个地图实例

    //创建一个地图实例
    var map = new maptalks.Map('map', {
        center: [115.45302, 38.87137],
        //缩放等级
        zoom: 20,
        centerCross : true, 
        baseLayer: new maptalks.TileLayer('base', {
        	//底图风格滤镜
            urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
            // urlTemplate: 'https://{s}.basemaps.cartocdn.com/dark_nolabels/{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>'
        }),
    });

---

2. 将osm转成geojosn，再将geojosn数据转换为几何图形后。

2.1 关于如何将osm转成geojosn:

http://tyrasd.github.io/osmtogeojson/

2.2 将geojosn数据转换为几何图形

 //geojson数据
    var data ={};
    //将获取到的geojosn数据 转换为几何图形后，赋值给collection
      var collection = maptalks.GeoJSON.toGeometry(data);
      console.log(collection);

---

3. 创建一个新的图层将collection 添加到地图

 //创建一个新的图层，名为vector ， 可使用getLayer获取该图层，或使用removeLayer删除该图层
     //将collection 添加到地图实例中
      var vectorLayer=new maptalks.VectorLayer('vector',collection).addTo(map);

---

4. 使用for循环设置颜色（需要在geojson数据中有colour这个属性）

 //渲染全部房间染色
      for (var i = 0; i < collection.length; i++) {
         if (collection[i].type=="Polygon") {
             //在collection中properties设置cunt属性
             collection[i].properties.cunt=i;
             console.log(collection[i].properties.name)
             console.log(collection[i].properties.colour)
             console.log(collection[i].properties.cunt)
             //渲染染色
             vectorLayer.setStyle(
                     {
                         'filter': ['==', 'cunt', i],
                         'symbol': getSymbol(collection[i].properties.colour,collection[i].properties.name)
                     }
                 );
         }
      }
       //设置线和面的属性（设置颜色,设置文字）
         function getSymbol(colour,name) {
             return [
                 {
                    'polygonFill': colour,
                     'lineColor':'#999',
                    // 'lineColor':colour,
                },
                 {
                     'textName' : name,
                     'textSize' : 10,
                     'textFill' : '#000'
                 }
             ];
         }

4.1 关于显示

https://maptalks.org/examples/cn/map/load/#map_load

4.2 VectorLayer: 批量设置图形样式

https://maptalks.org/examples/cn/layer/vectorlayer-style/#layer_vectorlayer-style