国外卫星地图mapbox的图形绘制

今天我继续说在线地图mapbox的其他基本操作，之前已经讲过如何引入mapbox,token的获取，语言的设置及绘制多边形等；现在我们再来学些其他的基本操作

1.添加多边形

如下列代码所示，就是添加一个多边形到地图上的操作

map.on('load', function () {//地图加载完成后才添加多边形
 
map.addLayer({
'id': 'maine',//图层id
'type': 'fill',
'source': {
'type': 'geojson',
'data': {//数据
'type': 'Feature',
'geometry': {
'type': 'Polygon',//数据类型，点，边，还是多边形
'coordinates': [[[-67.13734351262877, 45.137451890638886],//地块坐标
[-66.96466, 44.8097],
[-68.03252, 44.3252],
[-69.06, 43.98],
[-70.11617, 43.68405],
[-70.64573401557249, 43.090083319667144],
[-70.75102474636725, 43.08003225358635],
[-70.79761105007827, 43.21973948828747],
[-70.98176001655037, 43.36789581966826],
[-70.94416541205806, 43.46633942318431],
[-71.08482, 45.3052400000002],
[-70.6600225491012, 45.46022288673396],
[-70.30495378282376, 45.914794623389355],
[-70.00014034695016, 46.69317088478567],
[-69.23708614772835, 47.44777598732787],
[-68.90478084987546, 47.184794623394396]]]
}
}
},
'layout': {},
'paint': {
'fill-color': '#088',//地块填充颜色
 'fill-outline-color': 'white',//边框颜色
'fill-opacity': 0.8//透明度
}
});
});

如果需要在一个图层上添加多个多边形，可以将数据如下所示展示，设置type类型FeatureCollection,，设置features存储多个多边形数据

map.addLayer({
'id': 'main',//图层id
'type': 'fill',
'source': {
'type': 'geojson',
'data': {//数据
type: "FeatureCollection",
 features:[
    {
        "geometry": {
            "type": "Polygon",
            "coordinates": [
                [
                    [
                        "81.0323153892823",
                        "43.867122542534446"
                    ],
                    [
                        "81.03308633464815",
                        "43.866656168177315"
                    ],
                    [
                        "81.03133505134792",
                        "43.865311772708935"
                    ],
                    [
                        "81.03044275347077",
                        "43.86579718275408"
                    ],
                    [
                        "81.0323153892823",
                        "43.867122542534446"
                    ]
                ]
            ]
        },
        "id": 1,
        "properties": {
       		 "id":1
        },
        "type": "Feature"
    },
    {
        "geometry": {
            "type": "Polygon",
            "coordinates": [
                [
                    [
                        "81.03044275347077",
                        "43.86579718275408"
                    ],
                    [
                        "81.03133505134792",
                        "43.865311772708935"
                    ],
                    [
                        "81.02823937257932",
                        "43.862906137632024"
                    ],
                    [
                        "81.02756122619263",
                        "43.86308459720749"
                    ],
                    [
                        "81.02756122619263",
                        "43.863346337918244"
                    ],
                    [
                        "81.0273470747021",
                        "43.86351290018848"
                    ],
                    [
                        "81.03044275347077",
                        "43.8657971"
                    ]
                ]
            ]
        },
        "id": 2,
        "properties": {
          "id":2
        },
        "type": "Feature"
    },
    {
        "geometry": {
            "type": "Polygon",
            "coordinates": [
                [
                    [
                        "81.0363140735027",
                        "43.86915936115537"
                    ],
                    [
                        "81.03761325921175",
                        "43.86910225409122"
                    ],
                    [
                        "81.03599641545827",
                        "43.86781377595673"
                    ],
                    [
                        "81.03520405494328",
                        "43.86829561681037"
                    ],
                    [
                        "81.0363140735027",
                        "43.86915936115537"
                    ]
                ]
            ]
        },
        "id": 3,
        "properties": {
        	"id":3
        },
        "type": "Feature"
    }
]
}
},
'layout': {},
'paint': {
'fill-color': '#088',//地块填充颜色
 'fill-outline-color': 'white',//边框颜色
'fill-opacity': 0.8//透明度
}
});

2.点击多边形出现弹窗,设置图层id为main的图层点击事件，点击时，会出现弹窗，显示properties里面的信息

   map.on('click', 'main', function(e) {
          var coordinates = e.features[0].geometry.coordinates[0].slice();
          var description = e.features[0].properties.id;
          new mapboxgl.Popup()
                        .setLngLat(coordinates[0])//设置弹窗显示位置
                        .setHTML(description)//设置显示的内容，可以使用html代码
                        .setMaxWidth("300px")//设置弹窗最大宽度
                        .addTo(map);
                });

3.设置中心点击和缩放级别

 map.setCenter(71.03406310742923, 43.86852343165151);
 map.setZoom(10);