OpenLayers之图层

225 阅读 0 评论 149 点赞

我是靠谱客的博主自觉煎饼，最近开发中收集的这篇文章主要介绍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"

  }

}]