OpenLayers 4 ol.source 详解

Posted 2023-05-08

参考技术A

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

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

矢量图层的数据源

包含四个事件， addfeature ， changefeature ， clear ， removefeature 。

addfeature ，当一个要素添加到 source 中触发。
changefeature ，当要素变化时触发。
clear ，当 source 的 clear 方法调用时候触发。
removefeature ，当要素移除时候触发。

接受的参数：

features 方法
假如有一个包含空间数据的字符串，geojsonObject，是GeoJSON字符串格式，那么可以用来初始化一个图层。

url + format 方法
如果有一个文件作为数据源，那么可以配置 url 属性来加载数据：

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

提供被切分为切片的图片地图数据
可配置的选项

与 vector 一样的选项就不介绍了，介绍与 vector 特有的选项：

接受的事件

提供单一的图片地图。
可以配置的选项

触发的事件

source 是 layer 中必须（required）的选项，定义了地图数据的来源，与数据有关的函数，如addfeature、getfeature等函数都定义在 source 中，而且数据源支持多种格式。

Openlayers创建热力图

1.使用es6模块化方式引入HeatMap和VectorSource

import Heatmap from ‘ol/layer/Heatmap‘
import VectorSource from ‘ol/source/Vector‘

 2.创建热力图图层并添加到map上

let heatMapLayer = new Heatmap({
    name: ‘heatLayer‘,
    source: new VectorSource(),
    gradient: [‘#00f‘, ‘#0ff‘, ‘#0f0‘, ‘#ff0‘, ‘#f00‘], //颜色
    blur: 25, // 模糊半径
    radius: 20 //半径
})

//当添加feature到热力图层上时，设置热力值
heatMapLayer.getSource().on(‘addfeature‘, function (event) {
    let num = event.feature.get(‘num‘) // 热力值，从feature的属性中读取
    let magnitude = parseFloat(num)
    event.feature.set(‘weight‘, magnitude)// 设置热力值
})

map.addLayer(heatMapLayer)

3.创建feature并添加到热力图图层上

let feature = null
if (data.pointWkt) { 
    feature = wkt.readFeature(data.pointWkt) //使用wkt格式个点坐标创建feature
    // 添加属性到feature中,用于保存相关数据
    for (let prop in data) {
        feature.set(prop, data[prop])
    }
}

// 将feaure添加到t热力图图层上
heatMapLayer.getSource().addFeature(feature)