学习目标掌握绘制GeoJSON点的实现方法理解相关API的使用能够独立完成类似功能开发 核心概念在地图上绘制GeoJSON点。 完 整 代 码代码示例constmapnewmaplibregl.Map({container:map,style:https://demotiles.maplibre.org/style.json,center:[0,0],zoom:1});map.on(load,async(){// 添加图像作为自定义标记图标constimageawaitmap.loadImage(https://maplibre.org/maplibre-gl-js/docs/assets/osgeo-logo.png);map.addImage(custom-marker,image.data);// 添加一个GeoJSON源包含15个点的map.addSource(conferences,{type:geojson,data:{type:FeatureCollection,features:[{type:Feature,geometry:{type:Point,coordinates:[100.4933,13.7551]},properties:{year:2004}},{type:Feature,geometry:{type:Point,coordinates:[6.6523,46.5535]},properties:{year:2006}},{type:Feature,geometry:{type:Point,coordinates:[-123.3596,48.4268]},properties:{year:2007}},{type:Feature,geometry:{type:Point,coordinates:[18.4264,-33.9224]},properties:{year:2008}},{type:Feature,geometry:{type:Point,coordinates:[151.195,-33.8552]},properties:{year:2009}},{type:Feature,geometry:{type:Point,coordinates:[2.1404,41.3925]},properties:{year:2010}},{type:Feature,geometry:{type:Point,coordinates:[-104.8548,39.7644]},properties:{year:2011}},{type:Feature,geometry:{type:Point,coordinates:[-1.1665,52.9539]},properties:{year:2013}},{type:Feature,geometry:{type:Point,coordinates:[-122.6544,45.5428]},properties:{year:2014}},{type:Feature,geometry:{type:Point,coordinates:[126.974,37.5651]},properties:{year:2015}},{type:Feature,geometry:{type:Point,coordinates:[7.1112,50.7255]},properties:{year:2016}},{type:Feature,geometry:{type:Point,coordinates:[-71.0314,42.3539]},properties:{year:2017}},{type:Feature,geometry:{type:Point,coordinates:[39.2794,-6.8173]},properties:{year:2018}},{type:Feature,geometry:{type:Point,coordinates:[26.0961,44.4379]},properties:{year:2019}},{type:Feature,geometry:{type:Point,coordinates:[-114.0879,51.0279]},properties:{year:2020}}]}});// 添加一个符号图层自定义标记map.addLayer({id:conferences,type:symbol,source:conferences,layout:{icon-image:custom-marker,// 从源的year属性中获取年份text-field:[get,year],text-font:[Noto Sans Regular],text-offset:[0,1.25],text-anchor:top}});});代码示例!DOCTYPEhtmlhtmllangenheadtitleDraw GeoJSON points/titlemetapropertyog:descriptioncontent将 GeoJSON 集合中的点绘制到地图上。/metapropertyog:createdcontent2025-06-25/metacharsetutf-8metanameviewportcontentwidthdevice-width, initial-scale1linkrelstylesheethrefhttps://unpkg.com/maplibre-gl5.24.0/dist/maplibre-gl.css/scriptsrchttps://unpkg.com/maplibre-gl5.24.0/dist/maplibre-gl.js/scriptstylebody{margin:0;padding:0;}html, body, #map{height:100%;}/style/headbodydividmap/divscriptconstmapnewmaplibregl.Map({container:map,style:https://demotiles.maplibre.org/style.json,center:[0,0],zoom:1});map.on(load,async(){// 添加一个图像作为自定义标记constimageawaitmap.loadImage(https://maplibre.org/maplibre-gl-js/docs/assets/osgeo-logo.png);map.addImage(custom-marker,image.data);// 添加一个包含15个点的GeoJSON源map.addSource(conferences,{type:geojson,data:{type:FeatureCollection,features:[{type:Feature,geometry:{type:Point,coordinates:[100.4933,13.7551]},properties:{year:2004}},{type:Feature,geometry:{type:Point,coordinates:[6.6523,46.5535]},properties:{year:2006}},{type:Feature,geometry:{type:Point,coordinates:[-123.3596,48.4268]},properties:{year:2007}},{type:Feature,geometry:{type:Point,coordinates:[18.4264,-33.9224]},properties:{year:2008}},{type:Feature,geometry:{type:Point,coordinates:[151.195,-33.8552]},properties:{year:2009}},{type:Feature,geometry:{type:Point,coordinates:[2.1404,41.3925]},properties:{year:2010}},{type:Feature,geometry:{type:Point,coordinates:[-104.8548,39.7644]},properties:{year:2011}},{type:Feature,geometry:{type:Point,coordinates:[-1.1665,52.9539]},properties:{year:2013}},{type:Feature,geometry:{type:Point,coordinates:[-122.6544,45.5428]},properties:{year:2014}},{type:Feature,geometry:{type:Point,coordinates:[126.974,37.5651]},properties:{year:2015}},{type:Feature,geometry:{type:Point,coordinates:[7.1112,50.7255]},properties:{year:2016}},{type:Feature,geometry:{type:Point,coordinates:[-71.0314,42.3539]},properties:{year:2017}},{type:Feature,geometry:{type:Point,coordinates:[39.2794,-6.8173]},properties:{year:2018}},{type:Feature,geometry:{type:Point,coordinates:[26.0961,44.4379]},properties:{year:2019}},{type:Feature,geometry:{type:Point,coordinates:[-114.0879,51.0279]},properties:{year:2020}}]}});// 添加一个符号图层map.addLayer({id:conferences,type:symbol,source:conferences,layout:{icon-image:custom-marker,// 从源的year属性获取年份text-field:[get,year],text-font:[Noto Sans Regular],text-offset:[0,1.25],text-anchor:top}});});/script/body/html 代码解析1. 初始化地图使用new maplibregl.Map()创建地图实例配置基本参数。本示例中心点设置在全球视图[0, 0]。2. 加载自定义图标使用map.loadImage()异步加载远程图片然后通过map.addImage()将其注册为自定义标记图标。3. 添加GeoJSON数据源通过map.addSource()添加包含15个点的GeoJSON数据源每个点代表一个会议举办地点包含年份属性。4. 添加符号图层使用symbol类型图层配置icon-image: 使用自定义图标text-field: 使用表达式[get, year]从属性获取年份text-offset: 文字偏移避免与图标重叠⚙️ 参数说明参数类型必填说明containerstring是地图容器IDstylestring是地图样式URLcenter[number, number]否初始中心点默认[0, 0]zoomnumber否初始缩放级别默认0symbol 图层 layout 属性属性类型说明icon-imagestring使用的图标名称text-fieldstring/expression显示的文字内容text-fontarray字体名称数组text-offset[number, number]文字偏移 [x, y]text-anchorstring文字锚点位置 效果说明运行代码后地图显示全球视图中心点 [0, 0]缩放级别115个会议地点以自定义图标标记显示每个标记下方显示对应的年份文字用户可正常交互拖拽、缩放、旋转 常 见 问 题Q1: 如何使用自定义图标A:先使用map.loadImage()加载图片再用map.addImage()注册最后在图层中引用constimageawaitmap.loadImage(path/to/icon.png);map.addImage(custom-marker,image.data);Q2: 如何从GeoJSON属性获取值A:使用表达式[get, propertyName]text-field:[get,year]Q3: 如何调整文字位置A:使用text-offset属性调整偏移使用text-anchor设置锚点。 练习任务基础练习修改自定义图标的URL更换为其他图标进阶挑战根据年份属性设置不同颜色的标记拓展思考如何添加点击事件显示详细信息 最佳实践图标预加载: 在地图加载完成后再加载图标避免异步问题表达式使用: 使用表达式动态获取属性值提高代码灵活性性能优化: 大量点数据时考虑使用聚类(cluster)功能响应式设计: 根据缩放级别调整图标大小和文字显示 延伸阅读Map API文档MapLibre GL JS 官方文档[下一课预告]将继续学习地图图层的基础知识本文是MapLibre GL JS实践课程系列的一部分欢迎关注收藏