Web端自定义地图样式配置详解-基于MapboxStyle规范的深入解析与应用资源-CSDN文库

需积分: 2 144 浏览量 2025-01-07 14:42:16 上传评论收藏 321KB PDF 举报

资源推荐

资源详情

资源评论

MapboxStyle规范规范

（）致⼒于打造全球最漂亮的个性化地图。

这⾥记录下其 Web 端 API 的地图样式规范的各个配置项：

必填项会加上 * ，⽅便根据⽬录进⾏查看

1. version *

version：版本号（必填，且值必须为 8）

2. name

name：名称（可选，⽤于给 style 取名，⽅便阅读）

3. metadata

metadata：元数据（可选，⽤于给 style 附加⼀些任意属性。为避免冲突，为避免冲突，建议添加前缀，如 mapbox:）

4. center

center：地图的默认中⼼点（可选，由经度和纬度构成）

5. zoom

zoom：地图的默认缩放层级（可选，值越⼤，越靠近地表。mapbox 采⽤的是⽆极缩放，范围⼀般为 0 ~ 24）

6. bearing

bearing：地图的默认⽅位⾓（可选，表⽰地图视⼝正上⽅中⼼点在地图上北偏东的⾓度。默认值为 0）

7. pitch

pitch：地图的默认倾斜⾓度（可选，默认值为 0，范围为 0 ~ 60）

8. sprite

sprite：雪碧图（可选，⽤来指定获取雪碧图及其元数据的 URL）

sprite 的⾳译是雪碧，直译是精灵，表⽰不受地图旋转缩放影响的图标等，类似精灵漂浮在空中。

当有 layer 使⽤了 background-pattern、fill-pattern、line-pattern、fill-extrusion-pattern、icon-image 等属性时，sprite 必填。

"version": 8

"name": "demo"

"metadata": {

"mapbox:name":"demo"

}

"center": [106.66339, 30.42628]

"zoom": 8

"bearing": 0

"pitch": 0

(2) raster

raster：栅格切⽚数据源（相⽐ vector 多了⼀个属性 tileSize）

(3) raster-dem

raster-dem：栅格化的数字⾼程模型（相⽐ raster 多了⼀个属性 encoding）

(4) geojson

geojson：数据源（数据必须通过 data 属性指定，data 属性值就是⼀个 GeoJSON 或者 GeoJSON 的请求地址）

"sources":{

"vector-source": {

"type": "vector", // 类型（必填）

"url": "mapbox://mapbox.mapbox-streets-v6" // TileJSON 的请求地址（可选）

"tiles": [ // ⽤于指定⼀个或多个切⽚数据源的请求地址（可选，和 TileJSON 中的 tiles 属性⼀致）

"http://a.example.com/tiles/{z}/{x}/{y}.pbf",

"http://b.example.com/tiles/{z}/{x}/{y}.pbf"

"bounds": [-180,-85.051129,180,85.051129], // 边界坐标点（可选，⽤于限定切⽚的显⽰范围，默认值为 [-180,-85.051129,180,85.051129]）

"scheme":"xyz", // 切⽚坐标系⽅案（可选，可选值为 xyz、tms，默认值为 xyz）

"minzoom": 0, // 最⼩层级（可选，默认值为 0）

"maxzoom": 22, // 最⼤层级（可选，默认值为 22）

"attribution": "" // 属性信息（可选，⽤于地图展⽰时给⽤户看的⼀些信息）

}

"sources":{

"raster-source": {

"type": "raster", // 类型（必填）

"url": "mapbox://mapbox.satellite" // TileJSON 的请求地址（可选）

"tiles": [ // ⽤于指定⼀个或多个切⽚数据源的请求地址（可选，和 TileJSON 中的 tiles 属性⼀致）

"http://a.example.com/tiles/{z}/{x}/{y}.pbf",

"http://b.example.com/tiles/{z}/{x}/{y}.pbf"

"bounds": [-180,-85.051129,180,85.051129], // 边界坐标点（可选，⽤于限定切⽚的显⽰范围，默认值为 [-180,-85.051129,180,85.051129]）

"scheme":"xyz", // 切⽚坐标系⽅案（可选，可选值为 xyz、tms，默认值为 xyz）

"minzoom": 0, // 最⼩层级（可选，默认值为 0）

"maxzoom": 22, // 最⼤层级（可选，默认值为 22）

"attribution": "", // 属性信息（可选，⽤于地图展⽰时给⽤户看的⼀些信息）

"tileSize": 256 // 切⽚的最⼩展⽰尺⼨（可选，单位：像素，默认值为 512，即 1024/2）

}

"sources":{

"raster-dem-source": {

"type": "raster-dem", // 类型（必填）

"url": "mapbox://mapbox.terrain-rgb" // TileJSON 的请求地址（可选）

"tiles": [ // ⽤于指定⼀个或多个切⽚数据源的请求地址（可选，和 TileJSON 中的 tiles 属性⼀致）

"http://a.example.com/tiles/{z}/{x}/{y}.pbf",

"http://b.example.com/tiles/{z}/{x}/{y}.pbf"

"bounds": [-180,-85.051129,180,85.051129], // 边界坐标点（可选，⽤于限定切⽚的显⽰范围，默认值为 [-180,-85.051129,180,85.051129]）

"scheme":"xyz", // 切⽚坐标系⽅案（可选，可选值为 xyz、tms，默认值为 xyz）

"minzoom": 0, // 最⼩层级（可选，默认值为 0）

"maxzoom": 22, // 最⼤层级（可选，默认值为 22）

"attribution": "", // 属性信息（可选，⽤于地图展⽰时给⽤户看的⼀些信息）

"tileSize": 256, // 切⽚的最⼩展⽰尺⼨（可选，单位：像素，默认值为 512，即 1024/2）

"encoding": "mapbox" // 编码（可选，可选值为 terrarium、mapbox，默认值为 mapbox）

}

(5) image

image：图⽚数据源

(6) video

video：视频数据源

13. layers *

layers：图层集合（必填，包含了⼀系列图层 layer，这些图层指定了如何渲染数据源提供的数据）

每个图层 layer 都有 id（具有唯⼀性）和 type 属性，其中 type 属性指定了其具体的渲染类型：

"sources": {

"geojson-source": {

"type": "geojson", // 类型（必填）

"data": { // 数据（可选，值必须为⼀个 GeoJSON 或者 GeoJSON 的请求地址）

"type": "Feature",

"geometry": {

"type": "Point",

"coordinates": [-77.0323, 38.9131]

"properties": {

"title": "Mapbox DC",

"marker-symbol": "monument"

}

// "data": "./lines.geojson",

"maxzoom": 22, // 最⼤层级（可选，默认值为 22）

"attribution": "", // 属性信息（可选，⽤于地图展⽰时给⽤户看的⼀些信息）

"buffer": 128, // 切⽚缓存区⼤⼩（可选，取值范围为 0 ~ 512，默认值为 128，如果取值为 512 则代表和切⽚⼤⼩⼀样）

"tolerance": 0.375, // 简化⼒度（可选，值越⼤简化⼒度越强，⼏何顶点越少，加载速度越快，默认值为 0.375）

"cluster": false, // 是否开启聚类（可选，⽤于将多个点聚类到⼀个个的群组，默认值为 false）

"clusterRadius": 50, // 每个群组的的半径（可选，默认值为 50）

"clusterMaxZoom": 12, // 每个群组的最⼤层级（⼤于指定的层级将不显⽰聚类的群组）

"lineMetrics": false, // 是否计算线的距离度量（额，有点不能理解，需要 layer 指定 line-gradient）

"generateId": false // 是否⾃动⽣成每个要素⽣成属性 id 的值

}

"sources": {

"image-source": {

"type": "image", // 类型（必填）

"url": "https://docs.mapbox.com/mapbox-gl-js/assets/radar.gif", // 图⽚的请求地址（必填）

"coordinates": [ // 坐标点集合（必填，指定要显⽰图⽚的坐标点）

[-80.425, 46.437],

[-71.516, 46.437],

[-71.516, 37.936],

[-80.425, 37.936]

]

}

"sources": {

"video-source": {

"type": "image", // 类型（必填）

"urls": [ // ⼀个或多个视频的请求地址（必填，指定多个是为了⽀持多种视频格式，按优先顺序排序）

"https://static-assets.mapbox.com/mapbox-gl-js/drone.mp4",

"https://static-assets.mapbox.com/mapbox-gl-js/drone.webm"

"coordinates": [ // 坐标点集合（必填，指定要显⽰视频的坐标点）

[-80.425, 46.437],

[-71.516, 46.437],

[-71.516, 37.936],

[-80.425, 37.936]

]

}

"layers": []

fill：填充

line：线

circle：圆点

symbol：符号

background：背景

raster：栅格

heatmap：热⼒图

hillshade：坡⾯阴影

fill-extrusion：三维填充

(1) fill

fill：填充（⽤于给多边形 polygon 进⾏填充和描边）

(2) line

line：线（⽤于绘制成⼀条条线）

"layers": [

{

"id": "fill-id", // 唯⼀ id （必填）

"type": "fill", // 类型（必填）

"metadata": { // 元数据（可选，⽤于为 layer 附加任意的属性。为避免冲突，建议添加前缀，如 mapbox:）

"mapbox:name": "test"

"source": "source-name", // 数据源的名称（除了 layer 的 type 为 background 外，source 必填）

"source-layer": "source-layer-name", // 数据源的图层（只有数据源 source 的 type 为 vector 时，才能设置 source-layer，其他类型的不可以设置）

"minzoom": 0, // 最⼩层级（可选，取值范围为 0 ~ 24。当 style 的 zoom ⼩于此 minzoom 时，layer 将被隐藏）

"maxzoom": 24, // 最⼤层级（可选，取值范围为 0 ~ 24。当 style 的 zoom ⼤于此 maxzoom 时，layer 将被隐藏）

"filter": [], // 过滤（可选，⽤特定的表达式过滤指定的数据源的要素。具体的表达式详见 expression）

"layout": { // 布局类属性

"visibility": "visible", // 可见性（可选，可选值为 none、visible，默认值为 visible）

"paint": { // 绘制类属性

"fill-antialias": true, // 填充时是否反锯齿（可选，默认值为 true）

"fill-opacity": 1, // 填充的不透明度（可选，取值范围为 0 ~ 1，默认值为 1）

"fill-pattern": "", // 填充⽤的图案（可选，这⾥填写在 sprite 雪碧图中图标名称。为了图案能⽆缝填充，图标的⾼宽需要是 2 的倍数）

"fill-color": "#000000", // 填充的颜⾊（可选，默认值为 #000000。如果设置了 fill-pattern，则 fill-color 将⽆效）

"fill-outline-color": "#000000", // 描边的颜⾊（可选，默认和 fill-color ⼀致。如果设置了 fill-pattern，则 fill-outline-color 将⽆效。为了使⽤此属性，还需要设置 fill-antialias 为 true）

"fill-translate": [0, 0], // 填充的平移（可选，通过平移 [x, y] 达到⼀定的偏移量。默认值为 [0, 0]，单位：像素。）

"fill-translate-anchor": "map" // 平移的锚点，即相对的参考物（可选，可选值为 map、viewport，默认为 map）

}

]

剩余20页未读，继续阅读

评论收藏

内容反馈

gis分享者

粉丝: 8161
资源: 76

Web端自定义地图样式配置详解-基于Mapbox Style 规范的深入解析与应用

最新资源

Web端自定义地图样式配置详解-基于Mapbox Style 规范的深入解析与应用

ol-mapbox-style:将Mapbox样式对象与OpenLayers一起使用

windjs-over-mapbox:在实时地图上显示风图

mapbox style样式文件，从mapbox studio下载的矢量地图样式配置

Offline-MapBox-App-master_map_

掌握地图可视化：深入学习Mapbox文档

Mapbox glyphs 开源方案搭建可离线的精美矢量切片地图服务-Mapbox之.pbf字体库-附件资源

基于javaScript从高德地图爬虫获取建筑轮廓，生成geojson文件，mapbox定制自定义地图，echarts-gl生成

奥维8种新版自定义地图包括Google地图.zip

18.（leaflet篇）leaflet自定义地图样式地图（插件实现).zip

Mapbox 自定义图层 加载百度切片

mapbox-gl-draw-cut-polygon-mode:MapboxGL Draw的自定义模式，用于切割多边形

Android开发 自定义mapbox地图比例尺

Antv L7 + mapbox 实现简单地图场景

前端项目-mapbox-gl.zip

前端项目-angular-mapboxgl-directive.zip

Mapbox加载天地图CGCS2000瓦片地图服务

mapbox-style.rar

MapBox 加载百度切片（自定义图层）

notepad++免费安装版本，免激活

六音音源pc端js文件，版本1.2.0

echarts 全国地图json数据

element-ui v2.15.13离线文档.rar

axure谷歌浏览器插件

个人网页制作 大学生个人网页设计 个人网站模板 简单静态HTML个人网页作品 个人博客

13款echarts可视化大屏源码+效果图，适用于多个行业可视化大屏，免费下载

微信小程序登录注册界面代码，包含当前界面的所有源码，使用手机验证码注册或账号登录

marktext0.17.1中文版本-【免费资源未商用不存在版权问题】-【请审核大大放过】.zip

超星学习通学习专用浏览器

Vue3项目练习静态资源assets

最新资源

Mapbox 自定义图层加载百度切片

Android开发自定义mapbox地图比例尺

个人网页制作大学生个人网页设计个人网站模板简单静态HTML个人网页作品个人博客