mapbox基础，style样式汇总，持续更新

已于 2025-01-10 14:16:29 修改
阅读量870 收藏 39
点赞数 42
分类专栏： mapbox 从入门到精通 文章标签： mapbox style 汇总
于 2025-01-10 14:12:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28419035/article/details/145038145
版权

👨‍⚕️ 主页： gis分享者
👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅!
👨‍⚕️ 收录于专栏：mapbox 从入门到精通

文章目录

一、🍀前言

style样式是mapbox的核心，本文详细介绍mapbox的style样式用法，方便查询使用。希望能帮助到您，感谢支持~

二、🍀根属性

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

"version": 8

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

"name": "myMap"

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

"metadata": {
	"mapbox:name":"demo"
}

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

"center": [116.4, 39.9]

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

"zoom": 8

bearing：地图的默认方位角（可选，表示 地图视口正上方中心点 在地图上 北偏东 的角度。默认值为 0）

"bearing": 0

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

"pitch": 0

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

sprite 的音译是 雪碧，直译是 精灵，表示不受地图旋转缩放影响的图标等，类似精灵漂浮在空中。
当有 layer 使用了 background-pattern、fill-pattern、line-pattern、fill-extrusion-pattern、icon-image 等属性时，sprite 必填。

"sprite": "mapbox://sprites/mapbox/bright-v8"

当指定了 sprite 后，mapbox 会自动生成雪碧图的完整请求地址，分别如下：

`${sprite}.png`
`${sprite}.json`

如果浏览器进行了缩放，则会加上缩放 DPI 因子 @2x，如下：

`${sprite}@2x.png`
`${sprite}@2x.json`

glyphs：字形符号（可选，用来指定加载以 PBF 格式设置的 有向距离场 字形的 URL 模板）
URL 模板必须带有占位符 {fontstack} 和 {range}。
当有 layer 使用了 text-field 属性时，glyphs 必填。

"glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf"

transition：全局的过渡动画属性（可选，用来作为所有过渡动画属性的默认值）

"transition": {
"duration": 300, // 过渡的持续时间（可选，单位：毫秒，默认值为 300）
"delay": 0 // 延迟多久开始过渡（可选，单位：毫秒，默认值为 0）
}

light：全局的光源（可选）

"light": {
	"anchor": "viewport", // 锚点，指定作用的目标（可选，可选值 map、viewport，默认值为 viewport）
	"position": [1.15,210,30], // 位置（可选，默认值为 [1.15,210,30]）
	"color": "white", // 颜色（可选，默认值为 #ffffff）
	"intensity": 0.5 // 强度（可选，取值范围为 0 ~ 1，默认值为 0.5）
}

2.1 sources 属性

sources：数据源集合（必填，用于包含一系列数据源 source，这些数据源提供了在地图上显示的数据）
sources 是对象 {} 的形式，其属性名就是 数据源的名称（或者说 数据源的 id），这样可以根据 数据源的名称（或者说 数据源的 id）快速获取数据源的信

"sources": {}

每个数据源 source 都有一个 type 属性，用于指定其具体的类型：

  • vector：矢量
  • raster：栅格
  • raster-dem：栅格化的数字高程模型
  • geojson： 数据源
  • image：图片
  • video：视频

2.1.1 vector

vector：矢量切片数据源

"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": "" // 属性信息（可选，用于地图展示时给用户看的一些信息）
	}
}

2.1.2 raster

raster：栅格切片数据源（相比 vector 多了一个属性 tileSize）

"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）
	}	
}

2.1.3 raster-dem

raster-dem：栅格化的数字高程模型（相比 raster 多了一个属性 encoding）

"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）
	}
}

2.1.4 geojson

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

"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 的值
	}
}

2.1.6 image

image：图片数据源

"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]
		]
	}
}

2.1.5 video

video：视频数据源

"sources": {
	"video-source": {
	"type": "video", // 类型（必填）
	"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]
		]
	}
}

2.2 layers 属性

layers：图层集合（必填，包含了一系列图层 layer，这些图层指定了如何渲染数据源提供的数据）
每个图层 layer 都有 id（具有唯一性）和 type 属性，其中 type 属性指定了其具体的渲染类型：

  • fill：填充
  • line：线
  • circle：圆点
  • symbol：符号
  • background：背景
  • raster：栅格
  • heatmap：热力图
  • hillshade：坡面阴影
  • fill-extrusion：三维填充
"layers": []

2.2.1 fill

fill：填充（用于给多边形 polygon 进行填充和描边）

"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-translate": [0, 0], // 填充的平移（可选，通过平移 [x, y] 达到一定的偏移量。默认值为 [0, 0]，单位：像素。）
		"fill-translate-anchor": "map" // 平移的锚点，即相对的参考物（可选，可选值为 map、viewport，默认为 map）
	}
	}	
]

2.2.2 line

line：线（用于绘制成一条条线）

"layers": [
	{
	"id": "line-id", // 唯一 id （必填）
	"type": "line", // 类型（必填）
	"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）
		"line-cap": "butt", // 线末端的显示样式（可选，可选值为 butt、round、square，默认值为 butt）
		//	--- butt：方型末端（仅绘制到线的端点）
		//	--- round：圆型末端（以线宽的 1/2 为半径，以线的端点为圆心，绘制圆型端点，会超出线的端点）
		//	--- square：方型末端（以线宽的 1/2 长度超出线的端点）
		"line-join": "miter", // 线交叉时的显示样式（可选，可选值为 bevel、round、miter，默认值为 miter）
		//	--- bevel：方型交点（以线宽的 1/2 长度超出线的交点）
		//	--- round：圆型交点（以线宽的 1/2 为半径，以线的交点为圆心，绘制圆型交点，会超出线的交点）
		//	--- miter：尖型交点（以两线段的外沿相交，超出交点绘制）
		"line-miter-limit": 2, // 最大斜接长度（可选，用来将 miter 尖型交点自动转为 bevel 方型交点，默认值为 2。只有 line-join 为 miter 时，才需要设置此属
		"line-round-limit": 1.05, // 最小圆角半径（可选，用来将 round 圆型交点自动转为 miter 尖型交点，默认值为 1.05。只有 line-join 为 round 时，才需要
	},
	"paint": { // 绘制类属性
		"line-opacity": 1, // 线的不透明度（可选，取值范围为 0 ~ 1，默认值为 1）
		"line-pattern": "", // 线用的图案（可选，这里填写在 sprite 雪碧图中图标名称。为了图案能无缝填充，图标的高宽需要是 2 的倍数）
		"line-color": "#000000", // 线的颜色（可选，默认值为 #000000。如果设置了 line-pattern，则 line-color 将无效）
		"line-translate": [0, 0], // 线的平移（可选，通过平移 [x, y] 达到一定的偏移量。默认值为 [0, 0]，单位：像素。）
		"line-translate-anchor": "map", // 线的平移锚点，即相对的参考物（可选，可选值为 map、viewport，默认为 map）
		"line-width": 1, // 线的宽度（可选，值 >= 0，默认值为 1，单位：像素）
		"line-gap-width": 0, // 线的外部间距宽度（可选，值 >= 0，默认值为 0，单位：像素。用来在线的外部再绘制一部分，此值表示内间距）
		"line-offset": 0, // 线的偏移（可选，默认值为 0，单位：像素。对于单线，则是向右的偏移量；对于多边形，正值为内缩 inset，负值为外突 outset）
		"line-blur": 0, // 线的模糊度（可选，值 >= 0，默认值为 0，单位：像素）
		"line-dasharray": [0, 0], // 虚线的破折号部分和间隔的长度（可选，默认值为 [0, 0]。如果设置了 line-pattern，则 line-dasharray 将无效）
		"line-gradient": "#000000", // 线的渐变色（可选。如果设置了 line-pattern 或 line-dasharray，则 line-gradient 将无效。只有数据源 source 的 type 为
	}
	}
]

2.2.3 circle

circle：圆点（用于绘制成一个个圆点）

"layers": [
	{
	"id": "circle-id", // 唯一 id （必填）
	"type": "circle", // 类型（必填）
	"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": { // 绘制类属性
		"circle-opacity": 1, // 圆点的不透明度（可选，取值范围为 0 ~ 1，默认值为 1）
		"circle-radius": 5, // 圆点的半径（可选，值 >= 0，默认值为 5，单位：像素）
		"circle-color": "#000000", // 圆点的颜色（可选，默认值为 #000000）
		"circle-blur": 0, // 圆点的虚化（可选，默认值为 0。当值为 1 时，表示把圆虚化到只有圆心是不透明的）
		"circle-translate": [0, 0], // 圆点的平移（可选，通过平移 [x, y] 达到一定的偏移量。默认值为 [0, 0]，单位：像素。）
		"circle-translate-anchor": "map", // 圆点的平移锚点，即相对的参考物（可选，可选值为 map、viewport，默认为 map）
		"circle-pitch-scale": "map", // 地图倾斜时圆点的缩放（可选，可选值为 map、viewport，默认为 map。值为 viewport 时，圆点不会缩放）
		"circle-pitch-alignment": "map", // 地图倾斜时圆点的对齐方式（可选，可选值为 map、viewport，默认为 map）
		"circle-stroke-width": 0, // 圆点的描边宽度（可选，值 >= 0，默认值为 0，单位：像素）
		"circle-stroke-color": "#000000", // 圆点的描边颜色（可选，默认值为 #000000）
		"circle-stroke-opacity": 1 // 圆点的描边不透明度（可选，取值范围为 0 ~ 1，默认值为 1）
	}
	}
]

2.2.4 symbol

symbol：符号（用于绘制成一个个图标或者文本标签等）

"layers": [
	{
	"id": "symbol-id", // 唯一 id （必填）
	"type": "symbol", // 类型（必填）
	"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）
		"symbol-placement": "point", // 符号的位置（可选，可选值为 point、line、line-center，默认值为 point）
		//	--- point：符号在几何形状的点上
		//	--- line：符号在几何形状的线上（几何形状只能为 LineString 或 Polygon）
		//	--- line-center：符号在几何形状的线的中心点上（几何形状只能为 LineString 或 Polygon）
		"symbol-spacing": 250, // 符号之间的距离（可选，值 >= 1，默认值为 250，单位：像素。只有 symbol-placement 为 line 时才有效）
		"symbol-avoid-edges": false, // 是否避免边缘冲突（可选，默认值为 false。当为 true 时，符号不会超过切片的边缘）
		"symbol-sort-key": 1, // 排序的参考值（可选，无默认值。值越大，越在上方）
		"symbol-z-order": "auto", // z 轴上的顺序控制（可选，可选值为 auto、viewport-y、source，默认值为 auto）
		//	图标类属性（需要设置 icon-image）
		"icon-image": "", // 图标的图片（可选，这里填写在 sprite 雪碧图中图标名称）
		"icon-size": 1, // 图标的大小（可选，值 >= 0，默认值为 1。这里实际上是图标对应的原始图片的大小的缩放比例。值为 1 表示图标大小为原始图片的大
		"icon-padding": 2, // 图标的外边距（可选，值 >= 0，默认值为 2。可用于碰撞检测）
		"icon-offset": [0, 0], // 图标的偏移量（可选，默认值为 [0, 0]）
		"icon-anchor": "center", // 图标与锚点的位置关系（可选，可选值为 center、left、right、top、bottom、top-left、top-right、bottom-left、bottom-right
		"icon-rotation": 0, // 图标的顺时针旋转角度（可选，默认值为 0，单位：角度）
		"icon-allow-overlap": false, // 是否允许图标重叠（可选，默认值为 false。当值为 true 时，图标即使和其他符号触碰也会显示）
		"icon-ignore-placement": false, // 是否忽略图标位置（可选，默认值为 false。当值为 true 时，其他符号即使与此图标触碰也会显示）
		"icon-optional": false, // 图标是否可不显示（可选，默认值为 false。当值为 true 时，如果图标与文本标签碰撞，则显示文本标签）
		"icon-text-fit": "none", // 图标与文本的大小适应关系（可选，可选值为 none、width、height、both，默认值为 none）
		//	--- none：图标按其本身的比例显示
		//	--- width：图标在 x 轴上缩放以适应文本的宽度
		//	--- height：图标在 y 轴上缩放以适应文本的高度
		//	--- both：图标在 x 和 y 轴上缩放以适应文本的宽高
		"icon-text-fit-padding": [0, 0, 0, 0], // 图标与文本的内边距（可选，默认值为 [0,0,0,0]，单位：像素）
		"icon-keep-upright": false, // 当 icon-rotation-alignment 为 map，且 symbol-placement 为 line 或者 line-center 时，设置为 true 的话，可以避免图标
		"icon-rotation-alignment": "auto", // 地图旋转时图标的对齐方式（可选，可选值为 map、viewport、auto，默认值为 auto）
		//	--- map：当 symbol-placement 为 point 时，图标与地图的东西方向对齐；当 symbol-placement 为 line 时，图标的 x 轴和线对齐
		//	--- viewport：图标的 x 轴和视口的 x 轴对齐
		//	--- auto：当 symbol-placement 为 point 时，和 viewport 一致；当 symbol-placement 为 line 时，和 map 一致
		"icon-pitch-alignment": "auto", // 地图倾斜时图标的对齐方式（可选，可选值为 map、viewport、auto，默认值为 auto）
		//	--- map：图标的 x 轴与地图平面对齐
		//	--- viewport：图标的 x 轴和视口的 x 轴对齐
		//	--- auto：当 symbol-placement 为 point 时，和 viewport 一致；当 symbol-placement 为 line 时，和 map 一致
		//	文本类属性（需要指定 text-field）
		"text-rotation-alignment": "auto", // 与 icon-rotation-alignment 类似
		"text-pitch-alignment": "auto", // 与 icon-pitch-alignment 类似
		"text-field": "", // 文本所对应的字段（可选，默认值为 ""）
		"text-font": ["Open Sans Regular","Arial Unicode MS Regular"], // 文本的字体集合（可选，默认值为 ["Open Sans Regular","Arial Unicode MS Regul
		"text-size": 16, // 文本的大小（可选，默认值为 16，单位：像素）
		"text-max-width": 10, // 文本的最大宽度，超过则折行（可选，默认值为 10，单位：ems）
		"text-line-height": 1.2, // 文本的行高（可选，默认值为 1.2，单位：ems）
		"text-letter-spacing": 0, // 文本的字符间距（可选，默认值为 0，单位：ems）
		"text-justify": "center", // 文本的水平对齐方式（可选，可选值为 auto、left、center、right。默认值为 center）
		"text-anchor": "center", // 文本与锚点的位置关系（可选，可选值为 center、left、right、top、bottom、top-left、top-right、bottom-left、bottom-right
		"text-variable-anchor": "center", // 与 text-anchor（优先级更高） 类似，有点不懂
		"text-max-angle": 45, // 当 symbol-placement 为 line 或 line-center 时，文本相邻字符的最大夹角，默认 45 度
		"text-rotate": 0, // 文本的顺时针旋转角度（可选，默认值为 0，单位：角度）
		"text-padding": 2, // 文本的外边距（可选，值 >= 0，默认值为 2。可用于碰撞检测）
		"text-keep-upright": false, // 当 icon-rotation-alignment 为 map，且 symbol-placement 为 line 或者 line-center 时，设置为 true 的话，可以避免文本上
		"text-transform": "none", // 文本大小写转换（可选，可选值为 none、uppercase、lowercase，默认值为 none）
		"text-offset": [0, 0], // 图标的偏移量（可选，默认值为 [0, 0]）
		"text-radial-offset": 0, // 文本的径向偏移量，优先级比 text-offset 高
		"text-allow-overlap": false, // 是否允许文本重叠（可选，默认值为 false。当值为 true 时，文本即使和其他符号触碰也会显示）
		"text-ignore-placement": false, // 是否忽略文本位置（可选，默认值为 false。当值为 true 时，其他符号即使与此文本触碰也会显示）
		"text-optional": false // 文本是否可不显示（可选，默认值为 false。当值为 true 时，如果文本与图标碰撞，则显示图标）
	},
	"paint": { // 绘制类属性
		 //	图标类属性（需要设置 icon-image）
		"icon-opacity": 1, // 图标的不透明度（可选，取值范围为 0 ~ 1，默认值为 1）
		"icon-color": "#000000", // 图标的颜色（可选，默认值为 #000000）
		"icon-halo-color": "rgba(0,0,0,0)", // 图标的光晕颜色（可选，默认值为 rgba(0,0,0,0)）
		"icon-halo-width": 0, // 图标的光晕宽度（可选，值 >= 0，默认值为 0，单位：像素）
		"icon-halo-blur": 0, // 图标的光晕模糊宽度（可选，值 >= 0，默认值为 0，单位：像素）
		"icon-translate": [0, 0], // 图标的平移（可选，通过平移 [x, y] 达到一定的偏移量。默认值为 [0, 0]，单位：像素。）
		"icon-translate-anchor": "map", // 图标的平移锚点，即相对的参考物（可选，可选值为 map、viewport，默认为 map）
		//	文本类属性（需要设置 text-field）
		"text-opacity": 1, // 文本的不透明度（可选，取值范围为 0 ~ 1，默认值为 1）
		"text-color": "#000000", // 文本的颜色（可选，默认值为 #000000）
		"text-halo-color": "rgba(0,0,0,0)", // 文本的光晕颜色（可选，默认值为 rgba(0,0,0,0)）
		"text-halo-width": 0, // 文本的光晕宽度（可选，值 >= 0，默认值为 0，单位：像素）
		"text-halo-blur": 0, // 文本的光晕模糊宽度（可选，值 >= 0，默认值为 0，单位：像素）
		"text-translate": [0, 0], // 文本的平移（可选，通过平移 [x, y] 达到一定的偏移量。默认值为 [0, 0]，单位：像素。）
		"text-translate-anchor": "map", // 文本的平移锚点，即相对的参考物（可选，可选值为 map、viewport，默认为 map）
	}
	}
]

2.2.5 background

background：背景（用于绘制成整个地图的背景或者图案）

"layers": [
	{
	"id": "background-id", // 唯一 id （必填）
	"type": "background", // 类型（必填）
	"metadata": { // 元数据（可选，用于为 layer 附加任意的属性。为避免冲突，建议添加前缀，如 mapbox:）
		"mapbox:name": "test"
	},
	"minzoom": 0, // 最小层级（可选，取值范围为 0 ~ 24。当 style 的 zoom 小于此 minzoom 时，layer 将被隐藏）
	"maxzoom": 24, // 最大层级（可选，取值范围为 0 ~ 24。当 style 的 zoom 大于此 maxzoom 时，layer 将被隐藏）
	"layout": { // 布局类属性
		"visibility": "visible", // 可见性（可选，可选值为 none、visible，默认值为 visible）
	},
	"paint": { // 绘制类属性
		"background-color": "#000000", // 背景颜色（可选，默认值为 #000000。如果设置了 background-pattern，则 background-color 将无效）
		"background-pattern": "", // 背景图案（可选，这里填写在 sprite 雪碧图中图标名称。为了背景图案能无缝填充，图标的高宽需要是 2 的倍数）
		"background-opacity": 1 // 背景不透明度（可选，取值范围为 0 ~ 1，默认值为 1）
	}
	}
]

2.2.6 raster

raster：栅格（用于绘制栅格地图，比如卫星影像）

"layers": [
	{
	"id": "raster-id", // 唯一 id （必填）
	"type": "raster", // 类型（必填）
	"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": { // 绘制类属性
		"raster-opacity": 1, // 图片的不透明度（可选，取值范围为 0 ~ 1，默认值为 1）
		"raster-hue-rotate": 0, // 在色轮上旋转色相的角度（可选，默认值为 0，单位：角度）
		"raster-brightness-min": 0, // 图片的最小亮度（可选，取值范围为 0 ~ 1，默认值为 0）
		"raster-brightness-max": 1, // 图片的最大亮度（可选，取值范围为 0 ~ 1，默认值为 1）
		"raster-saturation": 0, // 图片的饱和度（可选，取值范围为 -1 ~ 1，默认值为 0）
		"raster-contrast": 0, // 图片的对比度（可选，取值范围为 -1 ~ 1，默认值为 0）
		"raster-resampling": "linear", // 采样方式（可选，可选值为 linear、nearest，默认值为 linear）
		"raster-fade-duration": 300 // 切换瓦片时的渐隐时间（可选，默认值为 300，单位：毫秒）
	}
	}
]

2.2.7 heatmap

heatmap：热力图（用于绘制成热力图的效果）

"layers": [
	{
	"id": "heatmap-id", // 唯一 id （必填）
	"type": "heatmap", // 类型（必填）
	"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": { // 绘制类属性
		"heatmap-opacity": 1, // 热力图的不透明度（可选，取值范围为 0 ~ 1，默认值为 1）
		"heatmap-radius": 30, // 一个热力图点的影响半径（可选，值 >= 1，默认值为 30，单位：像素）
		"heatmap-weight": 1, // 一个热力图点的权重（可选，值 >= 0，默认值为 1）
		"heatmap-intensity": 1, // 热力图的强度，控制了所有的热力图点（可选，值 >= 0，默认值为 1）
		"heatmap-color": [ // 热力图的颜色变化（可选，默认值如下）
			"interpolate", ["linear"], ["heatmap-density"],
			0, "rgba(0, 0, 255, 0)",
			0.1, "royalblue",
			0.3, "cyan",
			0.5, "lime",
			0.7, "yellow",
			1, "red"
		]
	}
	}
]

2.2.8 hillshade

hillshade：坡面阴影（基于 DEM 数字高程模型进行坡面阴影的可视化渲染）

"layers": [
	{
	"id": "hillshade-id", // 唯一 id （必填）
	"type": "hillshade", // 类型（必填）
	"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": { // 绘制类属性
		"hillshade-illumination-direction": 335, // 光照的方向（可选，取值范围为 0 ~ 359，默认值为 335，单位：角度）
		"hillshade-illumination-anchor": "viewport", // 光照的锚点（可选，可选值为 map、viewport，默认值为 viewport）
		"hillshade-exaggeration": 0.5, // 阴影的强度（可选，取值范围为 0 ~ 1，默认值为 0.5）
		"hillshade-shadow-color": "#000000", // 阴影的颜色（可选，默认值为 #000000）
		"hillshade-highlight-color": "#ffffff", // 光照部分的颜色（可选，默认值为 #ffffff）
		"hillshade-accent-color": "#000000" // 用于强调地形的颜色（可选，默认值为 #000000）
	}
	}
]

2.2.9 fill-extrusion

fill-extrusion：三维填充（用于给三维多边形进行填充和描边）

"layers": [
	{
	"id": "fill-extrusion-id", // 唯一 id （必填）
	"type": "fill-extrusion", // 类型（必填）
	"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-extrusion-opacity": 1, // 三维填充的不透明度（可选，取值范围为 0 ~ 1，默认值为 1）
		"fill-extrusion-pattern": "", // 三维填充的图案（可选，这里填写在 sprite 雪碧图中图标名称。为了图案能无缝填充，图标的高宽需要是 2 的倍数）
		"fill-extrusion-color": "#000000", // 三维填充的颜色（可选，默认值为 #000000）
		"fill-extrusion-translate": [0, 0], // 三维填充的平移（可选，通过平移 [x, y] 达到一定的偏移量。默认值为 [0, 0]，单位：像素。）
		"fill-extrusion-translate-anchor": "map", // 平移的锚点，即相对的参考物（可选，可选值为 map、viewport，默认为 map）
		"fill-extrusion-height": 0, // 三维填充的高度（可选，值 >= 0，默认值为 0，单位：米）
		"fill-extrusion-base": 0, // 三维填充的底部高度（可选，值 >= 0，默认值为 0，单位：米。值必须小于等于 fill-extrusion-height）
		"fill-extrusion-vertical-gradient": true, // 是否开启垂直渐变（可选，默认值为 true）
	}
	}
]

三、🍀总结

当前style样式基于mapbox V2.* 版本的， V3.* mapbox新增了很多特性，后面持续更新。感谢支持~

篇1：Mapbox Style Specification
席木木的博客
05-31 503
篇1：Mapbox Style Specification，结合具体实例，介绍MapBox Style样式规范。
MapBox 实现自定义地图样式配置（包含本地静态引入）
lz5211314121的博客
06-26 1850
还有一种方法，我们如果不想把自己的样式暴露在互联网上，不想让别人也访问到。引入的方式有很多种，直接读取 json 或者变成 js 再引入都可以，看自己的喜好。你可以点击右上角的 share 按钮，然后在弹出的窗口中往下滚动。建议各位配置的样式都是基于已有的样式进行改动，不建议自己建立空白样式。点击按钮之后我们就来到了配置的页面，选择右上角的 new style。然后复制这里的 style url 你就可以直接加载你配置的地图了。这样就可以随心所欲的改变样式玩转地图了。这就需要我们要有自己配置地图的能力了。
mapbox style样式文件，从mapbox studio下载的矢量地图样式配置
09-24
mapbox style样式文件，从mapbox studio下载的矢量地图样式配置
【Mapbox】介绍及基本使用
最新发布
zhenshu_guo的博客
03-15 2272
Mapbox 介绍及基本使用
mapbox样例
02-18
用于开发自已的地图服务的一个简单样例，因为要用于国外，所以不能调用百度的接口
mapbox样式规范(style)
热门推荐
Mozifei73的博客
01-16 1万+
mapbox样式规范(style)
mapbox 样式
u012551120的博客
07-04 751
【代码】mapbox 样式。
Mapbox: style样式规范——图层篇
weixin_48189070的博客
06-24 9753
Mapbox的style是定义地图视觉效果的文档，决定了地图绘制什么样的数据，以怎样的顺序绘制，以及以怎样的样式绘制。 本文详细解释了样式文件中常用图层属性的参数以及使用方法。
Mapbox系列 - 实现常用的四种的地图样式（区域、气泡、热力、迁徙）
qq_18196779的博客
02-16 2908
getLayer: 获取图层: 删除涂层: 设置、更新绘制类属性: 设置、更新布局类属性: 加载自定义图片: 移除导航条addControl: 添加导航条及其位置resize: 刷新。
mapbox基础，expressions表达式汇总
我哎GIS博客
01-13 318
expressions表达式是mapbox灵活性的核心来源，可以根据数据源属性、属性值、地图缩放级别等渲染地图数据内容和样式，本文详细介绍mapbox的expressions表达式用法，方便查询使用。希望能帮助到您，感谢支持~
mapbox 从入门到精通 - 目录
我哎GIS博客
02-13 1447
欢迎大家来到gis分享者的《mapbox 从入门到精通》专栏。博主列出学习大纲，如果有什么问题，欢迎留言。
mapbox设计方案
12-18
mapbox的设计书，官方发布的，对地图设计者来说可以参考
mapbox中文地图_vue 地图可视化（2）mapbox篇
weixin_28744601的博客
02-01 1526
MapBox项目中用到MapBox也是偶然的机会，项目中需要采用3D地图，当现有的工具(百度地图)无法满足我们的需求，我们肯定需要更高级开源的地图，无奈谷歌地图无法在国内使用，已是便找到Leafle，一开始惊艳于leafle的开源程度和其与众不同的地图风格，后来顺藤摸瓜，找到一个商业性地图，它便是我们的主角-MapBox作为国外的一款地图，看到其效果时便一发不可收拾由于项目主要采用3d GL，国内...
Mapbox在移动端应用开发中的集成与优化实践
Mapbox是一个提供地图制作、定制和在线展示的平台，开发者可以通过Mapbox API来集成地图及相关服务到自己的应用中。Mapbox主要提供地图渲染、地理编码、导航、定位等功能，是一个功能强大的地图服务提供商。 ## 1.2...
Mapbox 教程: 改变地图样式
pyluyuan的专栏
04-12 2047
在Mapbox中，要添加一个图层，需要首先addSource添加数据源，然后再addLayer添加图层，就像是数据库里面，先指定数据源，再指定表名和查询条件，来获取数据。修改代码调整line-emissive-strength的值，在光照调整为夜晚的情况下，line-emissive-strength0.8和0.1的区别如下，图中埃菲尔铁塔到特洛卡代罗花园的连线亮度变化明显。点击交互组件上与属性关联的按钮，调用setConfigPropety方法来修改属性关联的样式，basemap关键字指代标准样式。
[mapbox] style样式规范——图层篇
qq_14993591的博客
11-17 659
Mapbox: style样式规范——图层篇
【MAPBOX基础功能】03、底图加载 - mapbox预定义底图
汪同学丶的博客
06-22 1148
底图加载 - mapbox预定义底图
mapbox修改样式
weixin_41886421的博客
12-13 870
mapbox修改样式
mapbox 地图样式规范
qq_42038997的博客
09-26 1168
Mapbox 样式文件定义的是地图所呈现的视觉外观，包括：需要绘制哪些数据、绘制的顺序、以及绘制数据时如何进行符号化。样式文档是以 JSON对象中的属性字段进行组织的。
评论 38
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

gis分享者

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值