2025Mapbox零基础入门教程(8)geojson加载点要素
加载点线面数据
1. 在OpenLayers中,可以通过创建Feature对象来绘制点、线和面。 2. 通常通过加载GeoJSON数据来绘制点、线和面,因为GeoJSON对象中包含type属性,可以表达点线面的关系。在点上添加标
在当前位置标记一个点,并添加位置标记。在OpenLayers中,通过创建点Feature并设置style来添加标记,如icon、image或text。
// 绘制点要素 在当前位置上标记一个点(geojson) 这个点上添加一个位置标记
const data = {type: "FeatureCollection",features: [{type: "Feature",properties: {},geometry: {type: "Point",coordinates: [114.406893, 30.464766],},},{type: "Feature",properties: {},geometry: {type: "Point",coordinates: [114.407306, 30.464432],},},],
};
使用map.loadImage方法加载图标,并在图片加载完成后使用map.addImage将图标添加到地图实例中。
map.loadImage("https://docs.mapbox.com/mapbox-gl-js/assets/custom_marker.png",(e, image) => {if (e) throw e;console.log(image);map.addImage("marker", image);map.addSource("points-source", {type: "geojson",data: data,});}
);
添加数据源和图层,将点数据和图标显示在地图上。
// 点要素的图层
map.addLayer({id: "points-layer",type: "symbol",source: "points-source",layout: {"icon-image": "marker",},
});