mapbox加载矢量数据
时间: 2025-03-07 09:12:38 浏览: 51
### 如何在 Mapbox 中加载和显示矢量数据
#### 创建地图实例
为了在 Mapbox GL JS 中加载和显示矢量数据,首先需要创建一个 `mapboxgl.Map` 对象来初始化地图[^1]。
```javascript
// 初始化地图
var map = new mapboxgl.Map({
container: 'map', // 容器ID
style: 'https://api.tianditu.gov.cn/v2/tilesets/vec_c/wmts?service=wmts&request=GetTile&version=1.0.0&layer=vec&style=default&tilematrixset=c&format=tiles&Service=WMTS&tk=您的密钥',
center: [116.4, 39.9], // 设置中心点坐标
zoom: 10 // 初始缩放级别
});
```
此代码片段展示了如何通过指定容器 ID 和样式 URL 来构建一个新的地图实例。这里使用的是天地图提供的矢量切片服务作为底图风格。
#### 添加矢量源
要向地图添加来自 GeoJSON 或其他来源的矢量数据,则需定义一个矢量源:
```javascript
map.addSource('example-source-id', {
type: 'vector',
url: 'mapbox://examples.8j4rscjm' // 替换成自己的矢量瓦片URL
});
```
这段 JavaScript 语句说明了怎样利用 `addSource()` 方法给现有地图增加名为 `'example-source-id'` 的新矢量源,并指定了该源的数据位置。
#### 绘制矢量图层
最后一步是在地图上渲染这些矢量特征。这可以通过调用 `addLayer()` 函数完成,它接受两个参数——一个是描述目标图层属性的对象;另一个可选参数用于控制插入顺序:
```javascript
map.addLayer({
id: 'example-layer-id',
type: 'line',
source: 'example-source-id',
'source-layer': 'example-source-layer-name',
layout: {},
paint: {
'line-color': '#ff0000',
'line-width': 2
}
});
```
上述脚本解释了如何设置线型 (`type`) 图层及其外观特性 (颜色、宽度),并将它们绑定到之前创建的矢量源之上。
阅读全文
相关推荐


















