mapbox样式规范(style)

 [Mapbox](https://docs.mapbox.com/mapbox-gl-js/style-spec/)致力于打造全球最漂亮的个性化地图。
Mapbox样式由一组根属性组成,其中一些属性描述单个全局属性,有些属性包含嵌套属性。一些根属性(如版本-version名称-name元数据-metadata)对地图的外观或行为没有任何影响,但提供了与地图相关的重要描述性信息。其他要素(如图层-layers源-sources)至关重要,它们决定了哪些地图要素将显示在地图上以及它们的外观。一些属性(如中心-center缩放zoom俯仰pitch方位bearing)为地图渲染器提供了一组默认值,以在最初显示地图时使用。
 以下是记录使用中的各个配置:

一、根属性:

1.version

版本号(必填,且值为 8

version:8

2.name

name:名称(可选,用于给 style 取名,方便阅读)

name:mapbox-demo

3.sprite

sprite:雪碧图(可选,用来指定获取雪碧图及其元数据的 URL)

当有 layer 使用了 background-patternfill-patternline-patternfill-extrusion-patternicon-image 等属性时,sprite 必填

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

4.glyphs

glyphs:字形符号(可选,用来指定加载以 PBF 格式设置的 有向距离场 字形的 URL 模板)

URL 模板必须带有占位符 {fontstack} 和 {range}

当有 layer 使用了 text-field 属性时,glyphs 必填。

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

5.metadata

metadata:元数据(可选,用于给 style 附加一些任意属性)

 metadata: {

    bbox: '109.69387810762275,35.710626260892774,110.54619065096978,36.40224244890869',

    dataType: 'MULTIPOLYGON',

    layerName: 'xianjie7svukbfgg',

  },

6.sources 

sources数据源集合必填,用于包含一系列数据源 source,这些数据源提供了在地图上显示的数据)

sources 是对象 {} 的形式,其属性名就是 数据源的名称(或者说 数据源的 id),这样可以根据 数据源的名称(或者说 数据源的 id)快速获取数据源的信息。

"sources":{}

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

Sources | Style Specification | Mapbox GL JS | Mapbox

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

7.center

center:地图的默认中心点可选,由 经度 和 纬度 构成)

"center":[110.17541,36.05639]

8.zoom

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

"zoom":12

9.bearing

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

"bearing":0

10.pitch

pitch:地图的默认倾斜角度可选,默认值为 0范围为 0 ~ 60

"pitch":0

11.light

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)
}

二、其他要素

1.layers 

layers:图层集合(必填,包含了一系列图层 layer,这些图层指定了如何渲染数据源提供的数据

"layers ":[]

每个图层 layer 都有 id(具有唯一性)和 type 属性,其中 type 属性指定了其具体的渲染类型:

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

fill填充(用于给多边形 polygon 进行填充和描边)

"layers": [
    {
        "id": "fill-id", // 唯一 id (必填)
        "type": "fill", // 类型(必填)
        "metadata": {
            "mapbox:name": "test" // 元数据(可选,用于为 layer 附加任意的属性。)
        },
        "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)
        }
    }
]

line线(用于绘制成一条条线)

"layers": [
    {
        "id": "line-id", // 唯一 id (必填)
        "type": "line", // 类型(必填)
        "metadata": { // 元数据(可选,用于为 layer 附加任意的属性)
            "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 为 geojson ,且 source 的 lineMetrics 为 true 时,line-gradient 才有效)
        }
    }
]

circle圆点(用于绘制成一个个圆点)

"layers": [
    {
        "id": "circle-id", // 唯一 id (必填)
        "type": "circle", // 类型(必填)
        "metadata": { 
            "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)
        }
    }
]

symbol符号(用于绘制成一个个图标或者文本标签等)

"layers": [
    {
        "id": "symbol-id", // 唯一 id (必填)
        "type": "symbol", // 类型(必填)
        "metadata": {
            "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,默认值为 center)
            "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 Regular"])
            "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,默认值为 center)
            "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)
        }
    }
]

background背景(用于绘制成整个地图的背景或者图案)

"layers": [
    {
        "id": "background-id", // 唯一 id (必填)
        "type": "background", // 类型(必填)
        "metadata": { 
            "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) 
        }
    }
]

raster栅格(用于绘制栅格地图,比如卫星影像)

"layers": [
    {
        "id": "raster-id", // 唯一 id (必填)
        "type": "raster", // 类型(必填)
        "metadata": { 
            "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,单位:毫秒)
        }
    }
]

heatmap热力图(用于绘制成热力图的效果)

"layers": [
    {
        "id": "heatmap-id", // 唯一 id (必填)
        "type": "heatmap", // 类型(必填)
        "metadata": {
            "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"
            ]
        }
    }
]

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

"layers": [
    {
        "id": "hillshade-id", // 唯一 id (必填)
        "type": "hillshade", // 类型(必填)
        "metadata": { 
            "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)
        }
    }
]

fill-extrusion三维填充(用于给三维多边形进行填充和描边)

"layers": [
    {
        "id": "fill-extrusion-id", // 唯一 id (必填)
        "type": "fill-extrusion", // 类型(必填)
        "metadata": { 
            "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)
        }
    }
]

你可能感兴趣的:(地图,前端)