当前位置：首页 > news >正文

MapLibre GL JS第34课：使用addProtocol转换要素属性

news 2026/5/30 20:57:57

📌 学习目标

掌握使用addProtocol转换要素属性的实现方法
理解相关API的使用
能够独立完成类似功能开发

🎯 核心概念

在纯JavaScript中使用addProtocol反转国家名称。

💻 完整代码

代码示例

importProtobuffrom'https://unpkg.com/pbf@4.0.1/index.js';import{VectorTile}from'https://esm.run/@mapbox/vector-tile@2.0.3/index.js';importtileToProtobuffrom'https://esm.run/vt-pbf@3.1.3/index.js';constprotocol='reverse';maplibregl.addProtocol(protocol,(request)=>{consturl=request.url.replace(protocol+'://','');returnfetch(url).then((response)=>response.arrayBuffer()).then((data)=>newVectorTile(newProtobuf(data))).then((tile)=>({layers:Object.entries(tile.layers).reduce((acc,[layerId,layer])=>({...acc,[layerId]:{...layer,feature:(index)=>{constfeature=layer.feature(index);if(feature.properties&&typeoffeature.properties['NAME']==='string'){feature.properties['NAME']=feature.properties['NAME'].split('').reverse().join('');}if(feature.properties&&typeoffeature.properties['ABBREV']==='string'){feature.properties['ABBREV']=feature.properties['ABBREV'].split('').reverse().join('');}returnfeature;}}}),{})})).then((tile)=>tileToProtobuf(tile).buffer).then((data)=>({data}));});constmap=newmaplibregl.Map({container:'map',style:'https://demotiles.maplibre.org/style.json',center:[8,47],zoom:5,hash:'map'});map.setTransformRequest((url,resourceType)=>{if(url.startsWith('https://demotiles.maplibre.org/tiles/')&&resourceType==='Tile'){return{url:protocol+'://'+url};}returnundefined;});

代码示例

<!DOCTYPEhtml><htmllang="en"><head><title>Use addProtocol to Transform Feature Properties</title><metaproperty="og:description"content="使用纯 JavaScript 的 addProtocol 反转国家名称。"/><metaproperty="og:created"content="2025-06-25"/><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href="https://unpkg.com/maplibre-gl@5.24.0/dist/maplibre-gl.css"/><scriptsrc="https://unpkg.com/maplibre-gl@5.24.0/dist/maplibre-gl.js"></script><style>body{margin:0;padding:0;}html, body, #map{height:100%;}</style></head><body><divid="map"></div><scripttype="module">importProtobuffrom'https://unpkg.com/pbf@4.0.1/index.js';import{VectorTile}from'https://esm.run/@mapbox/vector-tile@2.0.3/index.js';importtileToProtobuffrom'https://esm.run/vt-pbf@3.1.3/index.js';constprotocol='reverse';maplibregl.addProtocol(protocol,(request)=>{consturl=request.url.replace(protocol+'://','');returnfetch(url).then((response)=>response.arrayBuffer()).then((data)=>newVectorTile(newProtobuf(data))).then((tile)=>({layers:Object.entries(tile.layers).reduce((acc,[layerId,layer])=>({...acc,[layerId]:{...layer,feature:(index)=>{constfeature=layer.feature(index);if(feature.properties&&typeoffeature.properties['NAME']==='string'){feature.properties['NAME']=feature.properties['NAME'].split('').reverse().join('');}if(feature.properties&&typeoffeature.properties['ABBREV']==='string'){feature.properties['ABBREV']=feature.properties['ABBREV'].split('').reverse().join('');}returnfeature;}}}),{})})).then((tile)=>tileToProtobuf(tile).buffer).then((data)=>({data}));});constmap=newmaplibregl.Map({container:'map',style:'https://demotiles.maplibre.org/style.json',center:[8,47],zoom:5,hash:'map'});map.setTransformRequest((url,resourceType)=>{if(url.startsWith('https://demotiles.maplibre.org/tiles/')&&resourceType==='Tile'){return{url:protocol+'://'+url};}returnundefined;});</script></body></html>

🔍 代码解析

初始化地图

使用new maplibregl.Map()创建地图实例，配置基本参数。本示例的核心特色是展示如何使用maplibregl.addProtocol()方法创建自定义协议，在瓦片加载过程中转换要素属性。

constmap=newmaplibregl.Map({container:'map',style:'https://demotiles.maplibre.org/style.json',center:[8,47],// 欧洲中部zoom:5,hash:'map'});

关键配置项

container: 地图容器的 DOM 元素 ID
style: 使用 MapLibre 官方样式https://demotiles.maplibre.org/style.json
center: 地图初始中心点[8, 47]（欧洲中部，德国附近）
zoom: 初始缩放级别为 5，显示中等区域范围
hash: 设置为'map'，启用 URL hash 导航，便于分享地图状态

依赖导入

importProtobuffrom'https://unpkg.com/pbf@4.0.1/index.js';import{VectorTile}from'https://esm.run/@mapbox/vector-tile@2.0.3/index.js';importtileToProtobuffrom'https://esm.run/vt-pbf@3.1.3/index.js';

本示例使用三个关键库：

pbf: 用于解析 Protocol Buffers 格式数据
@mapbox/vector-tile: 用于解析矢量瓦片数据
vt-pbf: 用于将数据转换回 Protocol Buffers 格式

自定义协议实现

constprotocol='reverse';maplibregl.addProtocol(protocol,(request)=>{// 1. 提取原始 URL（移除自定义协议前缀）consturl=request.url.replace(protocol+'://','');returnfetch(url)// 2. 获取瓦片数据（ArrayBuffer 格式）.then((response)=>response.arrayBuffer())// 3. 解析为 VectorTile 对象.then((data)=>newVectorTile(newProtobuf(data)))// 4. 转换要素属性（反转国家名称）.then((tile)=>({layers:Object.entries(tile.layers).reduce((acc,[layerId,layer])=>({...acc,[layerId]:{...layer,feature:(index)=>{constfeature=layer.feature(index);// 反转 NAME 属性（国家名称）if(feature.properties&&typeoffeature.properties['NAME']==='string'){feature.properties['NAME']=feature.properties['NAME'].split('').reverse().join('');}// 反转 ABBREV 属性（国家缩写）if(feature.properties&&typeoffeature.properties['ABBREV']==='string'){feature.properties['ABBREV']=feature.properties['ABBREV'].split('').reverse().join('');}returnfeature;}}}),{})}))// 5. 转换回 Protocol Buffers 格式.then((tile)=>tileToProtobuf(tile).buffer)// 6. 返回处理后的数据.then((data)=>({data}));});

自定义协议工作流程：

拦截带有reverse://前缀的请求
提取原始 URL 并发起网络请求
解析矢量瓦片数据
修改要素属性（本示例中反转国家名称）
将修改后的数据转换回原始格式
返回处理后的数据供地图渲染

请求转换配置

map.setTransformRequest((url,resourceType)=>{// 将特定 URL 转换为自定义协议if(url.startsWith('https://demotiles.maplibre.org/tiles/')&&resourceType==='Tile'){return{url:protocol+'://'+url};}returnundefined;});

作用：将符合条件的瓦片请求重写为使用自定义协议，使得这些请求被我们注册的处理器拦截和处理。

⚙️ 参数说明

地图初始化参数

参数	类型	必填	默认值	说明
container	string	是	-	地图容器元素的 ID
style	string/object	是	-	地图样式 URL 或内联样式对象
center	[number, number]	否	`[0, 0]`	初始中心点坐标，格式为`[经度, 纬度]`
zoom	number	否	`0`	初始缩放级别，范围 0-22
hash	string/boolean	否	-	启用 URL hash 导航

addProtocol 参数

参数	类型	必填	说明
protocol	string	是	自定义协议名称（如 ‘reverse’），用于标识协议前缀
handler	function	是	处理请求的回调函数，接收 request 对象并返回 Promise