1. 程式人生 > >Mapbox-GL樣式參考

Mapbox-GL樣式參考

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

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