矢量图层是指在客户端渲染的图层类型，服务器返回的数据或者文件会通过 OpenLayers 进行渲染，得到相应的矢量图层。其中添加的矢量数据是根据一定规则组成的，引用百度百科的话来说矢量数据结构是对矢量数据模型进行数据的组织。通过记录实体坐标及其关系，尽可能精确地表现点、线、多边形等地理实体，坐标空间设为连续，允许任意位置、长度和面积的精确定义。矢量数据结构直接以几何空间坐标为基础，记录取样点坐标。常用的矢量数据文件包括：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,用于创建矢量图层。
VectorSource，用于指定地图数据来源，这里使用的是矢量来源。

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

1.2添加矢量图层

创建地图时在指定图层的时候，可以添加一个VectorLayer图层，在VectorSource中指定矢量数据的来源，这里使用的是GeoJSON，创建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创建矢量图层

合建一个矢量图层后，并添加到地图上，如下所示：

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]
}));

创建好相关对象后，可以进行拖拽文件了，如下所示：

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
}));

创建好后然后就可以在地图上进行多边形的绘制了。

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静态样式

如果要为所有的要素使用相同的样式，要以使用静态样式，就是创建一个全局的样式，如下所示：

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

6.2动态样式

有静态样式就有动态样式，使用动态样式可以对不同的要素设置不同的样式，使用动态样式主要是使用一个函数来进行设置，如下所示：

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

个人博客

Openlayers指南-矢量数据