openlayers6【五】地图图层数据来源 source 详解

68 阅读 0 评论 45 点赞

我是靠谱客的博主自然菠萝，最近开发中收集的这篇文章主要介绍openlayers6【五】地图图层数据来源 source 详解，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

文章目录

- 1. 写在前面
- 2. source 数据源都有哪些类型
- 2. source 用法实例
- - 2.1 ol.source.Vector 的使用（矢量图层的数据来源）
  - 2.2 ol.source.Image的使用（提供单一的图片地图）
- 3. 写在后面

1. 写在前面

在 openlayers 6【二】vue 初始化map地图详解中，我们讲了初始化一个地图，必不可少的三要素。target，view，layers。在前面的两片文章中也讲了 view 和 layers 是什么。source 是 Layer 的重要组成部分。当然，layers图层里面也是有一个必不可少的属性，那就是 source 数据源，如果没有数据源你就不能渲染处地图的底图，也就没有任何含义 (这里的必不不是说是必须有，没有这属性也能显示)

2. 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，触发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；

2. source 用法实例

可以看到，source 存在很多种，我们也不可能都去讲一遍，下面挑几个大家常用的来写

2.1 ol.source.Vector 的使用（矢量图层的数据来源）

2.1.1 基本事件(重要)
addfeature，当一个要素添加到 source 中触发；
removefeature，当要素移除时候发生；
changefeature，当要素变化时触发；
clear，当 source 的 clear 方法调用时候触发；
2.1.2 接受的参数(重要)

/**
 * @typedef {{attributions: (Array.<ol.Attribution>|undefined),
 *     features: (Array.<ol.Feature>|undefined),
 *     format: (ol.format.Feature|undefined),
 *     loader: (ol.FeatureLoader|undefined),
 *     logo: (string|olx.LogoOptions|undefined),
 *     strategy: (ol.LoadingStrategy|undefined),
 *     url: (string|undefined),
 *     wrapX: (boolean|undefined)}}
 * @api
 */

attribution，地图右下角的 logo 包含的内容；
features，地理要素，从字符串读取的数据；
format，url属性设置后，加载要素使用的数据格式，采用异步的 AJAX 加载；
loader，加载要素使用的加载函数；
logo，logo包含的内容；
strategy，加载要素使用的策略，默认是一次性加载所有要素；
url，要素数据的地址；
wrapX，是否在地图水平坐标轴上重复，默认是 true。

2.1.3 实例
2.1.3.1 features 方法实现
这里是一个中国地图的geoJson数据。格式也是GeoJSON字符串格式。那么我们可以用来初始化一个图层。（这里只是贴了核心的部分代码，完整的请看后面博客会写）

import areaGeo from "@/geoJson/china.json";

var vectorSource = new ol.source.Vector({
    features: (new ol.format.GeoJSON()).readFeatures(areaGeo )
});
var vectorLayer = new ol.layer.Vector({
    source: vectorSource,
    style: style
});
map.addLayer(vectorLayer);

在这里插入图片描述
2.1.3.2 url + format 方法实现

var vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector({
    url: '../geoJson/china.json',
    format: new ol.format.GeoJSON()
  })
});

这两种方法中都会指定数据来源格式，矢量数据源支持的格式包含很多：gml、EsriJSON、geojson、gpx、igc、kml、osmxml、ows、polyline、topojson、wfs、wkt、wms capabilities（兼容 wms 的格式）、 wms getfeatureinfo、 wmts capabilities、xlink、xsd等格式。这些格式都有readFeatures、readFeature和readGeometry方法用于读取数据。

2.2 ol.source.Image的使用（提供单一的图片地图）

2.2.1 基本事件
imageloadstart，图片地图开始加载触发的事件；
imageloadend，图片地图加载完毕触发的事件；
imageloaderror，图片地图加载出错时触发的事件。
2.2.2 接受的参数

/**
	* @typedef {{attributions: (Array.<ol.Attribution>|undefined),
	* 	extent: (null|ol.Extent|undefined),
	*   logo: (string|olx.LogoOptions|undefined),
	*   projection: ol.proj.ProjectionLike,
	*   resolutions: (Array.<number>|undefined),
	*   state: (ol.source.State|undefined)}}
 */

resolutions，地图分辨率。其他的选项都与以上的一样。