MapboxGL系列（二）Style介绍

最新推荐文章于 2024-03-28 11:32:36 发布
最新推荐文章于 2024-03-28 11:32:36 发布
阅读量4.5k 收藏 30
点赞数 10
分类专栏： mapbox gis 文章标签： javascript gis web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37731856/article/details/127004316
版权
gis 同时被 2 个专栏收录
10 篇文章 3 订阅
订阅专栏
mapbox
4 篇文章 5 订阅
订阅专栏

Mapbox Style样式文件介绍

文章目录

前言

Mapbox style的内容是定义地图视觉效果的文档，决定了地图绘制什么样的数据，以怎样的顺序绘制，以及绘制出什么样式的效果。可以简单的理解为mapbox的style文件就是自定义地图的配置文件，可通过该文件来画一副自定义风格的地图。

一、style是什么？

mapbox style 为地图核心配置文件，每个地图在系统加载过程中都会请求返回一个style.json，本章节主要解释该地图配置文件的参数。

下面初始化一个map对象也就是加载一个地图对象时需要填入参数style，该参数的请求返回的则是一个标准的style对象

    var map = new mapboxgl.Map({
        container: 'map',
        style: './style.json'
    });

内容格式：

{
  "version": 8, //版本号（必填，且值必须为 8）
  "name": "blank", // 地图名称（可选，用于给 style 取名，方便阅读）
  "metadata": {
  	"gis:name":"cesi"
  }, //元数据（可选，用于给 style 附加一些任意属性。为避免冲突建议添加前缀，如 gis:）
  "center": [   //地图的默认中心点（可选，由 经度 和 纬度 构成的数组）
    116.403119,
    39.915599
  ],
  "zoom": 5, //地图的默认缩放层级（可选，值越大，越靠近地表。mapbox 采用的是无极缩放，范围一般为 0 ~ 24）
  "bearing": 0, //地图的默认方位角（可选，表示地图视口正上方中心点 在地图上北偏东的角度。默认值为 0）
  "pitch": 0, //地图的默认倾斜角度（可选，默认值为 0，范围为 0 ~ 60）
  "sources": {}, //数据源集合（必填，用于包含一系列数据源 source，这些数据源提供了在地图上显示的数据）
  "sprite": "", //雪碧图（可选，用来指定获取雪碧图及其元数据的 URL）如果有图标图层使用了图标该参数必填
  "glyphs": "", //字形符号（可选，用来指定加载以PBF格式设置的有向距离场字形的URL模板）
  "layers": [] //图层集合（必填，包含了一系列图层 layer，这些图层指定了如何渲染数据源提供的数据）
}

二、重点参数讲解

1.sprite

参数介绍：
雪碧图，就是用于存储地图上的图标的（不受地图旋转缩放影响的图标）
当指定了 sprite 后，mapbox 会自动生成雪碧图的完整请求地址，分别如下：
${sprite}.png
${sprite}.json
如果浏览器进行了缩放，则会加上缩放 DPI 因子 @2x，如下：
${sprite}@2x.png
${sprite}@2x.json

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

在这里插入图片描述

代码如下（示例）：

 "sprite": "http://localhost:8080/mapdata/sprite/sprite"

雪碧图离线本地化参考地址：https://blog.csdn.net/xm_w_xm/article/details/124247464

2.glyphs

参数介绍：
字体库路径，这里需要填入字体库文件存放的对应服务url

注：URL 模板必须带有占位符 {fontstack} 和 {range}。   当有 layer 使用了 text-field 属性时，glyphs 必填。

代码如下（示例）：

 "glyphs": "http://localhost:8080/mapdata/glyphs/{fontstack}/{range}.pbf"

字体库离线本地化参考地址：https://blog.csdn.net/hfpjl/article/details/108406454

3.sources

参数介绍：
sources 是对象 {} 的形式，其属性名就是 数据源的名称（或者说 数据源的 id），这样可以根据 数据源的名称（或者说 数据源的 id）快速获取数据源的信息。

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

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

代码如下（示例）：

(1) vector
vector：矢量切片数据源

 "sources":{
        "vector-source": {
            "type": "vector", // 类型（必填）
            "tiles": [ // 用于指定一个或多个切片数据源的请求地址（可选，和 TileJSON 中的 tiles 属性一致）
                "http://localhost:8080/mapdata/{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) raster
raster：栅格切片数据源（相比 vector 多了一个属性 tileSize）

    "sources":{
        "raster-source": {
            "type": "raster", // 类型（必填）
            "tiles": [ // 用于指定一个或多个切片数据源的请求地址（可选，和 TileJSON 中的 tiles 属性一致）
                "http://locahost:8080/mapdata/{z}/{x}/{y}.png"
            ],
            "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）
        }
    }

(3) geojson
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": "cesi map",
                    "marker-symbol": "monument"
                }
            },
            // "data": "http://localhost:8080/mapdata/GYJ_8F1KHc5B.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 的值
        }
    }

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

    "sources":{
        "raster-dem-source": {
            "type": "raster-dem", // 类型（必填）
            //"url": "mapbox://mapbox.terrain-rgb" // TileJSON 的请求地址（可选）
            "tiles": [ // 用于指定一个或多个切片数据源的请求地址（可选，和 TileJSON 中的 tiles 属性一致）
                "http://localhost:8080/mapdata/{z}/{x}/{y}.png"
            ],
            "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）
        }
    }

(5) image
image：图片数据源

    "sources": {
        "image-source": {
            "type": "image", // 类型（必填）
            "url": "http://www.mapbox.cn/static/upload/image/20210816/%E8%93%9D.png", // 图片的请求地址（必填）
            "coordinates": [ // 坐标点集合（必填，指定要显示图片的坐标点）
                [-80.425, 46.437],
                [-71.516, 46.437],
                [-71.516, 37.936],
                [-80.425, 37.936]
            ]
        }
    }

(6) video
video：视频数据源

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

4.layers

参数介绍：
layers 是数组 [] 的形式,用于存放图层的渲染内容，图层的加载顺序就是数组的下标顺便从下到上叠加。

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

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

代码如下（示例）：

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

    "layers": [
        {
            "id": "fill-id", // 唯一 id （必填）
            "type": "fill", // 类型（必填）
            "metadata": { // 元数据（可选，用于为 layer 附加任意的属性。为避免冲突，建议添加前缀，如 citms:）
                "citms: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）
            }
        }
    ]

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

    "layers": [
        {
            "id": "line-id", // 唯一 id （必填）
            "type": "line", // 类型（必填）
            "metadata": { // 元数据（可选，用于为 layer 附加任意的属性。为避免冲突，建议添加前缀，如 citms:）
                "citms: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 才有效）
            }
        }
    ]

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

    "layers": [
        {
            "id": "circle-id", // 唯一 id （必填）
            "type": "circle", // 类型（必填）
            "metadata": { // 元数据（可选，用于为 layer 附加任意的属性。为避免冲突，建议添加前缀，如 citms:）
                "citms: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）
            }
        }
    ]

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

 "layers": [
        {
            "id": "symbol-id", // 唯一 id （必填）
            "type": "symbol", // 类型（必填）
            "metadata": { // 元数据（可选，用于为 layer 附加任意的属性。为避免冲突，建议添加前缀，如 citms:）
                "citms: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）
            }
        }
    ]

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

    "layers": [
        {
            "id": "background-id", // 唯一 id （必填）
            "type": "background", // 类型（必填）
            "metadata": { // 元数据（可选，用于为 layer 附加任意的属性。为避免冲突，建议添加前缀，如 citms:）
                "citms: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） 
            }
        }
    ]

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

    "layers": [
        {
            "id": "raster-id", // 唯一 id （必填）
            "type": "raster", // 类型（必填）
            "metadata": { // 元数据（可选，用于为 layer 附加任意的属性。为避免冲突，建议添加前缀，如 citms:）
                "citms: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，单位：毫秒）
            }
        }
    ]

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

    "layers": [
        {
            "id": "fill-extrusion-id", // 唯一 id （必填）
            "type": "fill-extrusion", // 类型（必填）
            "metadata": { // 元数据（可选，用于为 layer 附加任意的属性。为避免冲突，建议添加前缀，如 citms:）
                "citms: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）
            }
        }
    ]

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

    "layers": [
        {
            "id": "heatmap-id", // 唯一 id （必填）
            "type": "heatmap", // 类型（必填）
            "metadata": { // 元数据（可选，用于为 layer 附加任意的属性。为避免冲突，建议添加前缀，如 citms:）
                "citms: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"
                ]
            }
        }
    ]

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

    "layers": [
        {
            "id": "hillshade-id", // 唯一 id （必填）
            "type": "hillshade", // 类型（必填）
            "metadata": { // 元数据（可选，用于为 layer 附加任意的属性。为避免冲突，建议添加前缀，如 citms:）
                "citms: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）
            }
        }
    ]
zyy_pipi
关注
  • 10
    点赞
  • 踩
  • 30
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
篇1：Mapbox Style Specification
席木木的博客
05-31 263
篇1：Mapbox Style Specification，结合具体实例，介绍MapBox Style样式规范。
004：Mapbox GL设定不同的style，更换底图形态
大剑师兰特的GIS世界
04-13 803
第004个本示例的目的是介绍演示如何在vue+mapbox中设定不同的style,更换底图形态。
Mapbox GL基础（十五）：初始化地图时的style
最新发布
weixin_43724098的博客
03-28 300
本文针对初始化地图时的style的加载位置与时间可能发生的问题与解决方案进行了说明，以后如果遇到新的功能再进行补充，接下来的章节将继续探索Mapbox。欢迎关注星林社区，文章将同步更新在星林社区中！
mapbox 样式
u012551120的博客
07-04 604
【代码】mapbox 样式。
mapbox-gl的Style文件规范详解
qq_37987033的博客
08-15 2414
mapbox-gl的Style文件规范详解
Mapbox Style Specification—Expressions
不平凡之路
11-21 2746
最近在弄mapbox的js框架，maobox的框架还是很不错的，把官方文档看了多遍也渐渐有了许多的感觉，之前弄是用android SDK，在android中利用mapbox框架，因为公司有业务牵扯到前台展示，之前的前端是用canvas，没用任何地图框架，这种办法无疑是很累的，而且实现的效果也一般，之前在搞android的时候就看了js的框架的例子，感觉效果很棒，最近就开始研究一下，将自己的需求动态...
mapbox样式规范(style)
Mozifei73的博客
01-16 7992
mapbox样式规范(style)
Mapbox Style 规范(layout geojson等等)
牧xin的博客
02-24 1240
https://my.oschina.net/u/3185947/blog/4819218 中文官网包括英文官网的API,对于mapbox的各种属性规范,并没有很详细的描述,或者较为难理解,终于从网上扒了个大佬的文章.
MapboxGL本地化部署方法
01-12
MapboxGL本地化部署方法
mapboxgl对接wms自定义服务
10-03
在Mapbox GL JS中，我们可以使用`mapboxgl.Source`类型来定义WMS源，其配置参数包括： 1. `type`：设置为`raster`，表示这是一个栅格图层。 2. `tiles`：定义WMS服务的URL模板。通常，这个URL会包含`{z}`、`{x}`和`...
mapbox-gl 2.7.0 去token
01-12
在IT行业中，地图服务是许多应用的核心组成部分，Mapbox GL是一个流行的地图渲染库，它提供了交互式、高性能的2D和3D地图展示。本文将深入探讨Mapbox GL 2.7.0版本中“去token”的概念及其相关知识点。 Mapbox GL的...
vue+mapboxgl 鹰眼展示
05-25
运用vue加mapboxgl,编写的鹰眼图，全局视图，通过小图查看大图的展示功能 1、首先要有两个地图 大图，小图，鹰眼范围图（简称鹰眼） 2、大图移动，放大缩小的时候要相应的放大和缩小 3、小图不动，鹰眼图放大和缩小...
mapboxgl-heatmap:MapBoxGL 插件渲染热图
07-12
用法：var mapboxgl_heatmap = require('mapboxgl-heatmap');var heatmap;function msgRec(msg) { var latlng = new mapboxgl.LatLng(msg.lat, msg.lng); var point = map.project(latlng); heatmap.addPoint(point...
mapbox 地图样式规范
qq_42038997的博客
09-26 965
Mapbox 样式文件定义的是地图所呈现的视觉外观，包括：需要绘制哪些数据、绘制的顺序、以及绘制数据时如何进行符号化。样式文档是以 JSON对象中的属性字段进行组织的。
Mapbox: style样式规范——图层篇
weixin_48189070的博客
06-24 7682
Mapbox的style是定义地图视觉效果的文档，决定了地图绘制什么样的数据，以怎样的顺序绘制，以及以怎样的样式绘制。 本文详细解释了样式文件中常用图层属性的参数以及使用方法。
MapBox加载不同风格的地图
weixin_42562567的博客
03-12 3242
初始化MapBox地图： var map = new mapboxgl.Map({ container: 'map', zoom: 3, center: [105, 34], //此处更改地图风格 style: 'mapbox://styles/mapbox/satellite-v9', hash: false, }); 1.基础地图（mapbox://style
vue+ mapbox 添加geojson图层,点击图层 通过设置filter属性 使某个图层高亮）
m0_47114387的博客
11-10 897
3.图层点击事件 拿到图层信息 赋值 ，然后点击对应的河流 对应的河流就会高亮。2.通过addLayer 添加geoserver服务器上的geojson图层。本例子 添加两个图层分别是 河流面 以及河流高亮面 图层。1. 初始化地图，引入sprite、glyphs文件。let sprite = "图标文件";let glyphs = "字体文件";
进阶mapbox GL之paint和filter
LZUGIS
03-28 5916
概述 通过前面的文章初识mapbox GL我们对mapbox GL有了一个相对比较全面的认识，本节结合一些示例，重点讲述一下mapbox GL里面的filter和paint的用法。 说明 本文中的示例数据源是北京的区边界数据，格式为geojson，数据字段与详情如下： filter filter是layer里面的一个属性，通过一些条件表达式实现仅显示与过滤器匹配的要素，即图层的过滤显示，其官方说...
Style.json详解
Zxs021310的专栏
04-21 1962
在mapbox-gl地图开发过程中，style无疑是最重要的结构。它是数据驱动地图的核心，地图依据此绘制加载；同时它也是地图诊断问题的核心，地图上图层出不来，图标没加载，文字标识不存在，无不基于此作为最终解决手段 加载简单地图 地图加载最简单的结构如下，我们核心的style是一个json对象，我们初始化时设置给地图，并且在添加，删除，更新图层时，都是在操作此对象 this.mapStyle = require('./static/map.json'); this.map = new mapb
mapboxgl style离线资源
09-28
MapboxGL的样式（style）包含了地图的外观、标记、图层等信息，可以用于定制化地图的显示效果。而离线资源（offline resources）是指在没有网络连接的情况下使用MapboxGL样式所需的相关数据资源。 MapboxGL样式的离线资源主要包括两方面：矢量瓦片数据（vector tile data）和样式文件本身。 1. 矢量瓦片数据：MapboxGL使用矢量瓦片（vector tiles）来呈现地图数据，这些瓦片包含了地图的底图、道路、建筑等要素。为了实现离线使用，可以提前将地图所需的矢量瓦片数据下载下来保存在本地，然后在没有网络连接的情况下加载这些离线的矢量瓦片数据来显示地图。通过离线矢量瓦片数据的使用，可以实现在没有网络连接的环境下依然能够使用MapboxGL样式绘制地图。 2. 样式文件本身：MapboxGL样式文件（style file）是一个描述地图外观和标记的JSON文件。这个文件可以包含各种样式配置，如底图背景、图层叠加、标注样式等。为了离线使用，可以将这个样式文件保存在本地，然后在没有网络连接的情况下加载这个离线的样式文件来渲染地图。通过离线样式文件的使用，可以实现在没有网络连接的环境下依然能够使用MapboxGL样式来自定义地图。 总结起来，MapboxGL样式的离线资源主要包括矢量瓦片数据和样式文件本身。通过提前下载并保存这些离线资源，可以在没有网络连接的情况下使用MapboxGL样式来绘制地图，实现离线地图的显示效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值