【Mapbox】建築向量切片拾取、高亮、資訊彈窗
阿新 • • 發佈：2021-07-17
1、資料來源載入
map.addSource('building', {
type: 'vector',
tiles: ['http://192.168.182.1:6767/{z}/{x}/{y}.pbf']
})
2、建築圖層載入
map.addLayer({ "id": "guanzhou", "type": "fill-extrusion","source": "building", "source-layer": "廣州", 'layout': {}, 'paint': { 'fill-extrusion-color': [ "interpolate", ["exponential", 0.99], ["get", "Floor"], 0, "#FFF6B7", 100, "#F6416C" ], 'fill-extrusion-height': [ "interpolate", ["linear"], ["zoom"], 15, 0, 15.05, ["get", "Floor"] ], 'fill-extrusion-base': 0, 'fill-extrusion-opacity': 0.6 } });
3、拾取圖層載入
map.addLayer({ 'id': 'layerHighlight', 'type': 'fill-extrusion', 'source': "building", "source-layer": "廣州", 'paint': { 'fill-extrusion-color': '#088', 'fill-extrusion-height': [ "interpolate", ["linear"], ["zoom"], 15, 0, 15.05, ["get", "Floor"] ], 'fill-extrusion-base': 0, 'fill-extrusion-opacity': 0.6 }, "filter": ["in", "Id", ""] });
4、建築圖層點選
map.on('click', 'guanzhou', function(e) {
var feature = e.features[0];
map.setFilter('layerHighlight', ['in', 'Id', feature.properties.Id]);
var popup = new mapboxgl.Popup({
closeButton: true,
closeOnClick: true,
});
popup.setLngLat(feature.geometry.coordinates[0][0])
.setHTML('<strong> Id: </strong>' + feature.properties.Id +
'<p> <strong> Floor: </strong>' + feature.properties.Floor + '</p>')
.addTo(map);
});
5、效果顯示
6、向量切片描述檔案
source：mapbox中的source的Id，此處為building
source-layer：圖層ID
Id、Floor：為原資料的欄位
guanzhou：建築切片圖層Id
layerHighlight：拾取高亮顯示圖層Id
部落格地址： http://www.cnblogs.com/defineconst/部落格版權： 本文以學習、研究和分享為主，歡迎轉載和各類爬蟲，但必須在文章頁面明顯位置給出原文連結。 如果文中有不妥或者錯誤的地方還望高手的您指出，以免誤人子弟。如果您有更好的建議，不如留言一起討論，共同進步！ 再次感謝您耐心的讀完本篇文章。