学习目标掌握添加矢量瓦片源的实现方法理解相关API的使用能够独立完成类似功能开发 核心概念向地图添加矢量瓦片数据源。 完 整 代 码代码示例constmapnewmaplibregl.Map({container:map,style:https://tiles.openfreemap.org/styles/bright,zoom:13,center:[-122.447303,37.753574]});map.on(load,(){map.addSource(contours,{type:vector,url:https://api.maptiler.com/tiles/contours/tiles.json?keyget_your_own_OpIi9ZULNHzrESv6T2vL});map.addLayer({id:contour-lines,type:line,source:contours,source-layer:contour,layout:{line-join:round,line-cap:round},paint:{line-color:#ff69b4,line-width:1}});map.addLayer({id:contour-labels,type:symbol,source:contours,source-layer:contour,layout:{text-field:{height},symbol-placement:line,text-font:[Noto Sans Regular],},paint:{text-color:#ff69b4,}});});代码示例!DOCTYPEhtmlhtmllangenheadtitleAdd a vector tile source/titlemetapropertyog:descriptioncontent向地图添加矢量源。/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://tiles.openfreemap.org/styles/bright,zoom:13,center:[-122.447303,37.753574]});map.on(load,(){map.addSource(contours,{type:vector,url:https://api.maptiler.com/tiles/contours/tiles.json?keyget_your_own_OpIi9ZULNHzrESv6T2vL});map.addLayer({id:contour-lines,type:line,source:contours,source-layer:contour,layout:{line-join:round,line-cap:round},paint:{line-color:#ff69b4,line-width:1}});map.addLayer({id:contour-labels,type:symbol,source:contours,source-layer:contour,layout:{text-field:{height},symbol-placement:line,text-font:[Noto Sans Regular],},paint:{text-color:#ff69b4,}});});/script/body/html 代码解析1. 初始化地图使用new maplibregl.Map()创建地图实例配置基本参数。本示例中心点设置在美国旧金山附近。2. 添加矢量瓦片源使用map.addSource()添加vector类型数据源type: vector: 指定为矢量瓦片源url: 指向矢量瓦片的tiles.json文件3. 添加等高线图层创建line类型图层显示等高线source-layer: 指定矢量瓦片中的图层名称设置圆角连接和端点样式4. 添加等高线标签创建symbol类型图层显示高度标签text-field: 使用属性值{height}显示高度symbol-placement: line: 沿线条放置文字⚙️ 参数说明参数类型必填说明containerstring是地图容器IDstylestring是地图样式URLcenter[number, number]否初始中心点默认[0, 0]zoomnumber否初始缩放级别默认0矢量瓦片源配置属性类型说明typestring必须为 ‘vector’urlstringtiles.json 文件的URL图层属性属性类型说明source-layerstring矢量瓦片中的图层名称symbol-placementstring符号放置方式point/line 效果说明运行代码后地图显示美国旧金山区域中心点 -122.45°W, 37.75°N粉红色等高线叠加在地图上等高线上显示高度标签单位米用户可正常交互拖拽、缩放、旋转 常 见 问 题Q1: 如何获取矢量瓦片服务A:可以使用MapTiler、Mapbox等服务或自建瓦片服务器。需要申请API密钥。Q2: source-layer 是什么A:矢量瓦片可以包含多个图层source-layer指定使用哪个图层的数据。Q3: 如何查看矢量瓦片包含哪些图层A:使用MapLibre Inspector或查看tiles.json文件中的图层信息。 练习任务基础练习修改等高线颜色和线宽进阶挑战添加缩放级别控制只在高缩放级别显示等高线拓展思考如何根据高度值设置不同颜色的等高线 最佳实践API密钥管理: 不要将密钥硬编码在前端代码中性能优化: 矢量瓦片比GeoJSON更适合大数据量图层管理: 使用有意义的图层ID便于管理样式统一: 保持图层样式与底图风格协调 延伸阅读Map API文档MapLibre GL JS 官方文档[下一课预告]将继续学习地图图层的基础知识本文是MapLibre GL JS实践课程系列的一部分欢迎关注收藏