矢量圖層是指在客戶端渲染的圖層類型，服務器返回的數據或者文件會通過 OpenLayers 進行渲染眉反，得到相應的矢量圖層琅轧。其中添加的矢量數據是根據一定規(guī)則組成的律歼，引用百度百科的話來說矢量數據結構是對矢量數據模型進行數據的組織。通過記錄實體坐標及其關系弄唧，盡可能精確地表現(xiàn)點适肠、線、多邊形等地理實體候引，坐標空間設為連續(xù)侯养，允許任意位置、長度和面積的精確定義澄干。矢量數據結構直接以幾何空間坐標為基礎逛揩，記錄取樣點坐標。常用的矢量數據文件包括：txt傻寂，excel息尺，csv，json疾掰，xml搂誉，sql字段，kml静檬、shpfile炭懊、gpx等并级。添加矢量圖層后可以進行修改、下載侮腹，美化等操作嘲碧，下面主要介紹加載GeoJSON，拖拽文件父阻、編輯要素愈涩、繪制要素、下載要素加矛、要素樣式履婉。

1.加載GeoJSON

GeoJSON數據主要是通過加載.json文件，Openlayers地圖通過地圖引擎來解析加載回來的json數據斟览，然后再將json數據添加到地圖上毁腿，加載GeoJSON數據的步驟如下所示：

1.1引入相關對象

加載GeoJSON數據需要引入GeoJSON，VectorLayer,VectorSource苛茂。

GeoJSON已烤，用于加載json數據。
VectorLayer,用于創(chuàng)建矢量圖層妓羊。
VectorSource胯究，用于指定地圖數據來源，這里使用的是矢量來源侍瑟。

import GeoJSON from 'ol/format/GeoJSON';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';

1.2添加矢量圖層

創(chuàng)建地圖時在指定圖層的時候唐片，可以添加一個VectorLayer圖層，在VectorSource中指定矢量數據的來源涨颜，這里使用的是GeoJSON费韭，創(chuàng)建GeoJSON的時候指定json文件的url地址，就可以將矢量數據疊加在地圖上了庭瑰。

ew Map({
  target: 'map-container',
  layers: [
    new VectorLayer({
      source: new VectorSource({
        format: new GeoJSON(),
        url: './data/countries.json'
      })
    })
  ],
  view: new View({
    center: [0, 0],
    zoom: 2
  })
});

如下為疊加矢量數據的效果圖：

geojson.png

2.拖拽文件

除了根據url來加載數據外星持，還可以使用拖拽的方式來加載數據，拖拽一個文件到地圖上弹灭，將自動讀取文件里的數據督暂，使用拖拽功能需要借助DragAndDrop這個類。使用步驟如下所示：

2.1引用DragAndDrop

import DragAndDrop from 'ol/interaction/DragAndDrop';

2.2創(chuàng)建矢量圖層

合建一個矢量圖層后穷吮，并添加到地圖上逻翁，如下所示：

const source = new VectorSource();
const layer = new VectorLayer({
  source: source
});
map.addLayer(layer);

2.3添加拖拽事件

使用地圖的addInteraction方法，為地圖添加一個拖拽文件的事件捡鱼，在formatConstructors指定數據格式八回，如下所示：

map.addInteraction(new DragAndDrop({
  source: source,
  formatConstructors: [GeoJSON]
}));

創(chuàng)建好相關對象后，可以進行拖拽文件了，如下所示：

drag-n-drop.png

3.編輯要素

Openlayers除了添加矢量數據的方法缠诅，也添加了編輯要素的方法溶浴，可以使用Modify進行要素編輯。使用步驟如下所示：

3.1引入對象

先使用import引入Modify

import Modify from 'ol/interaction/Modify';

3.2添加編輯功能

使用地圖的addInteraction方法來添加Modify對象管引。

map.addInteraction(new Modify({
  source: source
}));

然后在地圖上點擊時就可以編輯要素了士败。

4.繪制要素

使用Draw可以進行要素繪制，下面以繪制多邊形為例：

4.1引入對象

先使用import引入Draw

import Draw from 'ol/interaction/Draw';

4.2 添加繪制功能

使用地圖的addInteraction方法來添加Draw對象褥伴。

map.addInteraction(new Draw({
  type: 'Polygon',
  source: source
}));

創(chuàng)建好后然后就可以在地圖上進行多邊形的繪制了谅将。

5.下載要素

通過使用GeoJSON的writeFeatures方法，可以將要素寫入json文件中重慢，具體下載方法如下所示：

const format = new GeoJSON({featureProjection: 'EPSG:3857'});
const download = document.getElementById('download');
source.on('change', function() {
  const features = source.getFeatures();
  const json = format.writeFeatures(features);
  download.href = 'data:text/json;charset=utf-8,' + json;
});

6.要素樣式

前面已經介紹了矢量數量的導入戏自、編輯，導出等方法伤锚，但添加的要素使用的是默認樣式，為了讓添加的矢量變得更好看志衣，可以對要素進行美化屯援，其樣式美化的類主要是在style下面∧罡可以使用如下方式進行引入：

import {Style, Fill, Stroke} from 'ol/style';

6.1靜態(tài)樣式

如果要為所有的要素使用相同的樣式狞洋，要以使用靜態(tài)樣式，就是創(chuàng)建一個全局的樣式绿店，如下所示：

const layer = new VectorLayer({
  source: source,
  style: new Style({
    fill: new Fill({
      color: 'red'//填充顏色
    }),
    stroke: new Stroke({
      color: 'white'//邊框顏色
    })
  })
});

6.2動態(tài)樣式

有靜態(tài)樣式就有動態(tài)樣式吉懊，使用動態(tài)樣式可以對不同的要素設置不同的樣式，使用動態(tài)樣式主要是使用一個函數來進行設置假勿，如下所示：

const layer = new VectorLayer({
  source: source,
  style: function(feature, resolution) {
    const name = feature.get('name').toUpperCase();
    return name < "N" ? style1 : style2; 
  }
});

個人博客

Openlayers指南-矢量數據