Maputnik样式信息解析（Mapbox-GL样式）

具体可参考Mapbox-GL

当前Mapbox GL JS版本（v2.4.1），Style版本目前任然是8的版本

其他更改在以后的研究中逐渐总结，下面主要介绍新版的样式参考。样式文件为json结构，具体属性如下：

{"version": 8,"name": "ds-kye","metadata": {"mapbox:type": "template", "maputnik:renderer": "mbgljs"},"sources": {"openmaptiles": {"type": "vector","url": "https://openmaptiles.com/conf/jsons/data.json"},"image": {"type": "raster","tiles": ["https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}","https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}","https://webst03.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}","https://webst04.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}"],"minzoom": 0,"maxzoom": 18},"center_line": {"type": "vector","tiles": ["https://openmaptiles.com/maptile-dispatch/data/center_line/{z}/{x}/{y}.pbf"],"minZoom": 0,"maxzoom": 14}},"sprite": "https://openmaptiles.com/conf/styles/ds-kye/sprite","glyphs": "https://openmaptiles.com/conf/fonts/{fontstack}/{range}.pbf","layers": [{"id": "background","type": "background","minzoom": 0,"maxzoom": 24,"layout": {"visibility": "visible"},"paint": {"background-color": {"stops": [[6, "rgba(255, 255, 255, 1)"],[10, "rgba(245, 245, 245, 1)"]]}}},{"id": "park","type": "fill","source": "openmaptiles","source-layer": "park","minzoom": 16,"paint": {"fill-color": "#d8e8c8","fill-opacity": 0.7,"fill-outline-color": "rgba(95, 208, 100, 1)"}},{"id": "park_outline","type": "line","source": "openmaptiles","source-layer": "park","minzoom": 16,"filter": ["all",["==", "$type", "LineString"],["==", "class", "runway"]],"layout": {"line-cap": "round", "line-join": "round"},"paint": {"line-dasharray": [1, 1.5],"line-color": "rgba(228, 241, 215, 1)","line-opacity": 1,"line-width": {"base": 1.2, "stops": [[11, 3], [20, 16]]}}},{"id": "landcover_wood","type": "fill","metadata": {},"source": "openmaptiles","source-layer": "landcover","minzoom": 16,"filter": ["all", ["==", "class", "wood"]],"paint": {"fill-antialias": false,"fill-color": {"stops": [[6, "rgba(211, 232, 222, 1)"],[10, "rgba(203, 234, 200, 1)"]]},"fill-opacity": 1}}
}],"id": "osm-liberty"
}

一、sprite
Sprite属性提供了一个符号集，可以用于各种要素的渲染，包括background-pattern, fill-pattern, line-pattern, 和icon-image。sprite包含两个文件：

索引文件，json格式，描述每个单独符号的名称、大小、位置。例如一下描述了一个名为poi的符号：

{"poi": {"width": 32,"height": 32,"x": 0,"y": 0,"pixelRatio": 1}}

图像文件，一般png格式，包含符号的集合。
当指定一个sprite url以后，mapboxgl会自动在对应位置下载对应的json和png文件。
二、Sources
Sources属性提供地图数据，数据的格式由“type”指定，目前支持vector、raster、geojson、video四种，瓦片数据（矢量瓦片和栅格瓦片）必须指定对应的TileJSON文件，并在TileJSON中指定数据详情，有两种方式指定：

直接在属性中通过”tiles”,”minzoom”,”maxzoom”指定。

 "center_line": {"type": "vector","tiles": ["https://openmaptiles.com/maptile-dispatch/data/center_line/{z}/{x}/{y}.pbf"],"minZoom": 0,"maxzoom": 14}

指定一个TileJSON的url

"openmaptiles": {"type": "vector","url": "https://openmaptiles.com/conf/jsons/data.json"
}

vector
矢量瓦片数据源，必须为Mapbox矢量瓦片格式

"mapbox-streets": {"type": "vector","url": "mapbox://mapbox.mapbox-streets-v5"
}

raster
栅格瓦片数据源。

"mapbox-satellite": {"type": "raster","url": "mapbox://mapbox.satellite","tileSize": 256
}

geojson
Geojson数据源，数据通过一个”data”属性指定，值可以为url，也可以为geojson对象。

"geojson-marker": {"type": "geojson","data": {"type": "Feature","geometry": {"type": "Point","coordinates": [-77.0323, 38.9131]},"properties": {"title": "Mapbox DC","marker-symbol": "monument"}}
}

video
视频数据源，url是一个字符串数组，为了保证不同浏览器的兼容性，每个url都会创建一个视频元素的数据源。

"video": {"type": "video","url": ["https://www.mapbox.com/drone/video/drone.mp4","https://www.mapbox.com/drone/video/drone.webm"],"coordinates": [[37.56238816766053, -122.51596391201019],[37.56410183312965, -122.51467645168304],[37.563391708549425, -122.51309394836426],[37.56161849366671, -122.51423120498657]]
}

三、Layers
Layers的每个style layer都必须制定一个”type”属性，”type”属性的取值包括background, fill, line, symbol, raster，每个层有两种属性指定那些数据应该怎样渲染，分别是”layout”属性和”paint”属性。
layout属性会先于paint属性被处理，其定义了该层应该怎样传到GPU，某一层可以通过”ref”属性共享其它层layout。并且这是推荐的做法，因为这样可以减少处理时间，并且节省GPU存储空间。
两个参考其他层的layout属性的层可以有相互独立的paint属性。每个层的paint属性还能指定一个或多个class。

background
fill
line
symbol
raster
四、Values（样式表中用到的数据类型）
① 可支持多种颜色指定方式

{"line-color": "#ff0","line-color": "#ffff00","line-color": "rgb(255, 255, 0)","line-color": "rgba(255, 255, 0, 1)","line-color": "hsl(100, 50%, 50%)","line-color": "hsla(100, 50%, 50%, 1)","line-color": "yellow"
}

② Enum
内部已定义好的字符串值

{"text-transform": "uppercase"
}

③ String
String对象可以为任何字符串，一般来说就是文本，并可通过{}指定矢量瓦片的某一个字段。

{"text-field": "{MY_FIELD}"
}

④ Boolean
布尔值，true或者false

{"fill-enabled": true
}

⑤ Number
数值，不需要引号，整数浮点数均可

{"text-size": 24
}

⑥ Array
数组，例如当需要绘制虚线时需要制定虚线间隔，以下代码表示绘制2px，间隔4px。

{"line-dasharray": [2, 4]
}

⑦ Function
所有layout属性和paint属性的值都可以通过函数指定，允许根据地图当前级别动态计算对应的值。函数通过一组stops数组给出，每个元素包含一个两元素的数组：一个zoom，一个value。stops中zoom级别必须是从小到大。
一些属性支持插值函数，插值函数的结果是相邻两个stop之间的内插值。默认情况下为线性插值，也可以通过”base”属性指定插值指数的基底。如果当前地图级别小于第一个级别或者大于最后一个级别，将会取临界值。
对于不支持插值函数的属性，将会取小于当前级别并与之最接近的stop。

{"line-width": {"base": 1.5,"stops": [[5, 1], [7, 2], [11, 3]]}
}

⑧ Filter
表示过滤条件，根据指定条件选出指定的要素，是一个数组，主要有以下几种形式。

["==", key, value]  等于: key = value
["!=", key, value]  不等于: key ≠ value
[">", key, value]   大于: key > value
[">=", key, value]  大于等于: key ≥ value
["<", key, value]   小于: key < value
["<=", key, value]  小于等于: key ≤ value
["in", key, v0, ..., vn]  包含关系: key ∈ {v0, ..., vn}
["!in", key, v0, ..., vn] 不包含关系: key ∉ {v0, ..., vn}
["all", f0, ..., fn]   逻辑与: f0 ∧ ... ∧ fn
["any", f0, ..., fn]   逻辑或: f0 ∨ ... ∨ fn
["none", f0, ..., fn]  逻辑非: ¬f0 ∧ ... ∧ ¬fn["==", "$type", "LineString"]
["in", "class", "street_major", "street_minor", "street_limited"]
["all",["==", "class", "street_limited"],[">=", "admin_level", 3],["!in", "$type", "Polygon"]
]

Maputnik样式信息解析（Mapbox-GL样式）相关推荐

Mapbox矢量瓦片pbf文件信息解析
Mapbox由于配合其矢量瓦片pbf格式文件,有突出的渲染性能,被很多公司和开发者所使用.矢量瓦片的格式有很多种,其中pbf格式是一种二进制文件,直接把数据信息压缩位二进制了. 矢量瓦片优势主要优势 ...
Java导出PDF样式详细解析（步骤+代码）
一.文章说明此篇文章将解决itextpdf转PDF遇到的以下问题: 1.中文不显示问题 2.表格或者图片超宽问题 3.pdf样式问题 4.Markdown引用样式在PDF中正常显示 5.转换HTML ...
mapbox 地图样式规范
mapbox 地图样式规范 Mapbox 样式文件定义的是地图所呈现的视觉外观,包括:需要绘制哪些数据.绘制的顺序.以及绘制数据时如何进行符号化.样式文档是以 JSON对象中的属性字段进行组织的. { ...
android Style(样式)的解析
先说下为啥要使用样式吧,举个例子来说吧当要做这样的一个布局的时候每个标签都要写的话,会感觉怎样 <LinearLayoutandroid:layout_width="match_p ...
GIS开发：推荐Mapbox gl解决方案
在二维地图的开发中,实现类似于百度.高德地图那样加载简体的模型,使用mapbox gl是一个比较好的解决方案. https://docs.mapbox.com/mapbox-gl-js/api/ 类似 ...
Mapbox GL JS介绍及使用
Mapbox GL JS介绍及使用:(以web端基本交互实现为例) Mapbox GL JS 是一个 JavaScript 库,它使用 WebGL,以 vector tiles 和 Mapbox st ...
Mapbox GL JS本地化实践
最近在搞android Mapbox SDK,一直想要本地化,看到这篇文章,赶紧转载一下,后面要用,非常感谢作者! 作者:猿基地链接:https://www.jianshu.com/p/693f38 ...
Mapbox GL JS 表达式概述
表达式(expressions)是Mapbox GL JS的一个高级功能,它为数据的添加和渲染展示提供了更多的灵活性. 表达式的功能包括: 数据驱动样式:根据一个或多个数据属性指定样式规则. 算术:对 ...
Mapbox GL JS 地图英文转中文的解决办法
Mapbox GL JS地图框架的使用者已经越来越多了.不仅仅是因为它支持矢量瓦片,它里面内置了一些非常精美的地图,并且支持自定义搭配地图.对于个人开发者而言,一般都不具备自己搭建地图服务的硬件资源, ...

Maputnik样式信息解析（Mapbox-GL样式）

Maputnik样式信息解析（Mapbox-GL样式）相关推荐

最新文章

热门文章