OpenLayers之 图层

OpenLayers主要包括以下几种图层

从渲染发生的地方来看，openlayers的图层主要分为两类：Vector（矢量）和Raster（栅格），矢量图层是指在渲染发生在浏览器的图层，source返回的数据类型是矢量，如geojson的坐标串；栅格图层(只有Tile图层)则是由服务器渲染，返回到浏览器的是一张张的瓦片图片，栅格图层主要是展示

图层

import { 
    TileLayer, 
    VectorLayer, 
    ImageLayer, 
    LayerGroup, 
    VectorTileLayer 
} from 'ol/layer'

数据源

import {
  XYZ,
  TileImage,
  Raster,
  TileArcGISRest,
  Vector,
  ImageWMS,
  ImageStatic,
  WMTS,
  VectorTile
} from 'ol/source'

source 是 Layer 的重要组成部分，表示图层的来源，也就是服务地址。除了在构造函数中制定外，可以使用 layer.setSource(source) 稍后指定。
一、包含的类型

ol.source.BingMaps ，必应地图的切片数据，继承自ol.source.TileImage；
ol.source.Cluster，聚簇矢量数据，继承自ol.source.Vector；
ol.source.ImageCanvas，数据来源是一个 canvas 元素，其中的数据是图片，继承自 ol.source.Image；
ol.source.ImageMapGuide，Mapguide 服务器提供的图片地图数据，继承自 ol.source.Image，fire ol.source.ImageEvent；
ol.source.ImageStatic，提供单一的静态图片地图，继承自ol.source.Image；

ol.source.ImageVector，数据来源是一个 canvas 元素，但是其中的数据是矢量来源 ol.source.Vector，继承自 ol.source.ImageCanvas；
ol.source.ImageWMS，WMS 服务提供的单一的图片数据，继承自 ol.source.Image，触发 ol.source.ImageEvent；
ol.source.MapQuest，MapQuest 提供的切片数据，继承自 ol.source.XYZ；
ol.source.OSM，OpenStreetMap 提供的切片数据，继承自 ol.source.XYZ；
ol.source.Stamen，Stamen 提供的地图切片数据，继承自 ol.source.XYZ；
ol.source.TileVector，被切分为网格的矢量数据，继承自 ol.source.Vector；
ol.source.TileDebug，并不从服务器获取数据，而是为切片渲染一个网格，继承自 ol.source.Tile；
ol.source.TileImage，提供切分成切片的图片数据，继承自 ol.source.Tile，触发 ol.source.TileEvent；
ol.source.TileUTFGrid，TileJSON 格式 的 UTFGrid 交互数据，继承自 ol.source.Tile；
ol.source.TileJSON，TileJSON 格式的切片数据，继承自 ol.source.TileImage；
ol.source.TileArcGISRest，ArcGIS Rest 服务提供的切片数据，继承自 ol.source.TileImage；
ol.source.WMTS，WMTS 服务提供的切片数据。继承自 ol.source.TileImage；
ol.source.XYZ，XYZ 格式的切片数据，继承自 ol.source.TileImage；
ol.source.Zoomify，Zoomify 格式的切片数据，继承自 ol.source.TileImage。

上面介绍的都是可以实例化的类，还有一部分基类，不能被实例化，只负责被继承，有：

ol.source.Image，提供单一图片数据的类型，直接继承自 ol.source.Source；
ol.source.Tile，提供被切分为网格切片的图片数据，继承自 ol.source.Source；
ol.source.Vector，提供矢量图层数据，继承自 ol.source.Source；

一、TitleLayer: 切片图层，用于加载切片数据。切片是指利用网格将一幅地图切成大小相等的小正方形。切片尺寸一般是256*256或者512*512

二、ImageLayer:图片图层，主要用于服务器渲染的图像，

三、VectorLayer:矢量图层，是指在客户端渲染的图层类型

四、VectorTileLayer:矢量切片图层，和栅格切片一样的思路。

function createTileLayer(options) {

  let { title, opacity, maxResolution, minResolution,minZoom ,maxZoom ,zIndex ,visible } = options

  return new TileLayer({
    title: title,
    opacity: opacity,
    zIndex: zIndex || 0,
    visible: visible || false,
    minResolution: minResolution, // 可见的最小分辨率
    maxResolution: maxResolution, // 可见的最大分辨率
    minZoom: minZoom || 1,        // 最小视图缩放级别(独占)，高于此层将可见。
    maxZoom: maxZoom || 17,       // 该层可见的最大视图缩放级别(包括)
    source: new TileArcGISRest({
      crossOrigin: 'anonymous',
      url: options.url
    })
  })
},

function createVectorLayer(options) {
  const style = new Style({
    stroke: new Stroke({
      color: strokeLineObj.color,
      width: strokeLineObj.width
    }),
    fill: new Fill({
      color: fillObj.color
    })
  })

  const esriJsonFormat = new EsriJSON()
  const features = esriJsonFormat.readFeatures(esriJsonData, {
    dataProjection: 'EPSG:3857'
  })

  const geoJsonFormat = new GeoJSON()
  const features = geoJsonFormat.readFeatures(geoJsonData, {
    dataProjection: 'EPSG:3857',
    featureProjection: 'EPSG:3857'
  })

  features[0].setProperties({ ...properties, layerNm: layerTitle }, false)

  const sourceData = new VectorSource({
    features: features
  })

  let { title, opacity, maxResolution, minResolution,minZoom ,maxZoom ,zIndex ,visible } = options
   return new VectorLayer({
    title: title,
    opacity: opacity,
    zIndex: zIndex || 0,
    visible: visible || false,
    minResolution: minResolution, // 可见的最小分辨率
    maxResolution: maxResolution, // 可见的最大分辨率
    minZoom: minZoom || 1,        // 最小视图缩放级别(独占)，高于此层将可见。
    maxZoom: maxZoom || 17, 
    style: style,
    source: sourceData,
  })
}

function getLayerStyle({textStyle={}, type=''}) {
 const styleOption = {
    text: new Text(textStyle)
  }
 if(type === 'icon') {
  styleOption.image = {
    image: new Icon({
      src: iconSrc,
      size: iconSize,
      offset: [0, 0],
      crossOrigin: 'anonymous',
      rotation: rotation || 0
    })
   }
  } else if (type === 'circle') {
    // 绘制 图标
    styleOption.image = new Circle({
      radius: 3.5,
      size: 10,
      offset: [0, 0],
      fill: new Fill({
        color: customCircleColor
      })
    }
  } else if(type === 'line') {
    styleOption.stroke = new Stroke({
      color: '#fff',
      width: 10
    })
  } else if(type === 'fill') {
    styleOption.stroke= new Stroke({
      color: '#fff',
      width: 5
    }),
    styleOption.fill= new Fill({
      color: '#fff'
    })
  }
 return new Style(styleOption) 
}

一个标准的GeoJSON格式有的样子如下

[{

  "type": "Feature",

  "geometry": {

    "type": "Point",

    "coordinates": [Lon, Lat]

  },

  "properties": {

    "name": "beijing"

  }

}]