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"
}- 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。
四、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"]
]