openlayers6【十二】地圖矢量圖層 Vector 詳解

1. 認識什麼是矢量地圖

在 GIS 中,地圖一般分爲兩大類:柵格地圖和矢量地圖

柵格地圖:它們有一個共同特徵,就是它們都是由很多個像素組成,像素大小是一致的,行高和列寬是一致的,從這個角度看,一幅遙感影像就像柵格。我們可以把一幅柵格圖像考慮爲一個矩陣,矩陣中的任一元素對應於圖像中的一個點,而相應的值對應於該點的灰度級,數字矩陣中的元素叫做像素。

矢量地圖:矢量圖使用直線和曲線來描述圖形,這些圖形的元素是一些點、線、矩形、多邊形、圓和弧線等等,矢量地圖放大和縮小不會失真。爲了便於存儲,傳遞,使用,矢量地圖會按照一定的格式來表達,比如常見的GeoJSON,TopoJSON,GML,KML,ShapeFile等等。 除了最後一個ShapeFile,其他幾個格式的矢量地圖OpenLayers 都支持,使用起來也是非常的簡單。利用矢量地圖可以實現非常多的功能,如 動態標繪、調用 WFS 服務、編輯要素、可點擊的要素、動態加載要素 等等

2. 矢量圖層的構成

構成一個矢量圖層的包含一個數據(source)和一個樣式(style),數據構成矢量圖層的要素,樣式規定要素顯示的方式和外觀。一個初始化成功的矢量圖層包含一個到多個要素(feature),每個要素由地理屬性(geometry)和多個其他的屬性,可能包含名稱等。結構如下圖:
在這裏插入圖片描述
在這裏插入圖片描述

3. 矢量圖層的常用參數

在初始化矢量圖層時,可以有很多選項配置矢量圖層的行爲和外觀,常用的有:(紅色的最常用的)

  • brightness、contrast,圖層亮度和對比度,都是一個數值;
  • renderOrder,一個指定規則的函數 (function(ol.Feature, ol.Feature));
  • hue,色調,是一個數值;
  • minResolution,可見的最小分辨率;
  • maxResolution,可見的最大分辨率;
  • opacity,圖層的透明度,0~1之間的數值,1表示不透明;
  • saturation,飽和度;
  • source,圖層數據來源;
  • style,圖層樣式,一個ol.style.Style或者一個ol.style.Style數組,或者一個返回 ol.style.Style 的函數;
  • visible,圖層可見性,默認爲 true。

4. 初始化一個矢量圖層

4.1 初始化一個矢量圖層

var vector = new ol.layer.Vector({
  source: new ol.source.Vector({
    url: 'data/china.geojson',
    projection: 'EPSG:3857',
    format: new ol.format.GeoJSON({
        extractStyles: false
    })
  }),
  style: style
});

例中的 source url 設置了數據的來源,projection 設置了地理座標系,format 設置 數據的解析器,因爲 url 規定的數據來源是 geojson 格式,所以解析器也是 geojson 解析器 new ol.format.GeoJSON。

4.2 取得要素
那麼,在一個矢量圖層中怎麼取得它的某個 feature 呢,一般的想法是 vector.getFeature(),其實不是的,vector 的數據包含在 source 中,要取得 vector 的 feature 數據,要在 source 中,例如 vector.getSource().getFeatures(),該函數會返回一個 feature array,直接使用 [ ],取用即可,或者根據要素的 ID 取得getFeatureById()

同樣的,只要數據相關的操作,都要得到 vector 的 source 實例,然後進行操作,例如 添加要素addFeature、刪除要素removeFeature,對每個要素進行相同的操作forEachFeature

4.3 取得要素的 geometry
利用 getGeometry() 可以獲得要素的地理屬性,這個函數當然返回要素包含的 geometry,geometry 包含很多類型,主要有 point、multi point、linear ring、line string、multi line string、polygon、multi polygon、circle。

取得 geometry 後,就可以獲得要素的座標了,可以根據座標做一些地理判斷,比如判斷 一個座標是否位於要素內(containsCoordinate(coordinate) 或者 containsXY(x, y)),取得要素的中心座標等。

5. 總結

使用矢量圖層,可以實現很多功能,比如動態加載矢量數據、調用 WFS 服務、動態標繪、編輯要素,分別是在圖層級別和要素級別進行的操作。 例如可以實現,在矢量圖層上繪製不同的圖形,並添加屬性,然後更新至數據庫,即動態標繪系統;或者動態加載要素級數據,比如跟蹤汽車的軌跡。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章