Mapbox-GL样式参考

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wan_yanyan528/article/details/48465403

MapboxGL最近发布了新的版本(0.11.0),其样式文件也由版本7升级到了版本8,如果升级了mapbox-gl模块,那么以前版本的样式文件已经无法使用,对于新的版本主要更改有以下几个方面:
①地图初始化时,地图中心坐标由以前的[纬度,经度]变成了[经度,纬度],可能是为了保持与Geojson格式的统一;
②样式表升级到8,取消了常量constants属性;
③线和面的layout属性以及paint属性都有相应的增删,具体参考https://www.mapbox.com/mapbox-gl-style-spec
其他更改在以后的研究中逐渐总结,下面主要介绍新版的样式参考。样式文件为json结构,具体属性如下:

{
 "version": 8,
 "sprite": "mapbox://sprites/mapbox/bright-v8",
 "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
 "sources": {
  "mapbox-streets": {
    "type": "vector",
    "url": "mapbox://mapbox.mapbox-streets-v5"
  }
 },
"layers": [
  {
    "id": "water",
    "source": "mapbox-streets",
    "source-layer": "water",
    "type": "fill",
    "paint": {
      "fill-color": "#00ffff"
    }
  }
 ],
"transition": {
  "duration": 300,
  "delay": 0
 }
}

一、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”指定。
"mapbox-streets": {
  "type": "vector",
  "tiles": [
    "http://a.example.com/tiles/{z}/{x}/{y}.pbf",
    "http://b.example.com/tiles/{z}/{x}/{y}.pbf"
  ],
  "maxzoom": 14
}
  • 指定一个TileJSON的url。
"mapbox-streets": {
  "type": "vector",
  "url": "http://api.example.com/tilejson.json"
}
  1. vector
    矢量瓦片数据源,必须为Mapbox矢量瓦片格式
"mapbox-streets": {
  "type": "vector",
  "url": "mapbox://mapbox.mapbox-streets-v5"
}
  1. raster
    栅格瓦片数据源。
"mapbox-satellite": {
  "type": "raster",
  "url": "mapbox://mapbox.satellite",
  "tileSize": 256
}
  1. 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"
    }
  }
}
  1. 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。

  1. background
  2. fill
  3. line
  4. symbol
  5. 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"]
]
阅读更多

没有更多推荐了,返回首页