如何在openlayers中叠加高德地图,并且正确叠加WMS图层

如何在openlayers中叠加高德地图,并且正确叠加WMS图层,第1张

penLayers是一个用于开发WebGIS客户端的JavaScript包。OpenLayers实现访问地理空间数据的方法都符合行业标准。比如OpenGIS的WMS和WFS规范。OpenLayers采用面向对象方式开发,并使用来自Prototypejs和Rico中的一些组件。

通常需要在地图上标注出一些景点、建筑或者公共设施,可以选择使用矢量标注或者聚合标注。openlayers 添加矢量标注的原理是将标注添加到一个新建的矢量层上,再将矢量层添加到地图上叠加显示;聚合标注的原理同上,但它适用于标注的数据量非常大的场景,随着层级的放大,会展示更多的标注,缩小时,则将标注聚合显示,能够在大量加载标注时提高渲染性能。

1、矢量标注

2、聚合标注

openlayers 可以创建一个 Overlay 覆盖层,这个覆盖层能够展示自己写的 html 内容,从而实现添加各种所需的覆盖物。也可以通过这个方法来添加标注,但覆盖层添加的覆盖物会影响地图的拖动(即在覆盖物上进行滑动 *** 作时地图无法响应,虽然可以通过设置 stopEvent 将滑动事件传递到地图上,但这样会导致在IOS端的覆盖物无法进行点击 *** 作)。

因此如果要添加可以点击并且不影响地图拖动的标注时,建议使用矢量层标注,而如果要展示自定义的一些内容,如点击地图d出对话信息框、地图上的自定义按钮等则使用覆盖层更加合适。

1、加载覆盖层

2、添加地图点击监听事件

原理大致与添加矢量标注相同,都是添加在矢量图层上,不过这里添加的是线对象。

:一般情况下我用的最多的是"moveend"事件,为什么呢,有些时候请求的数据太多,几万甚至几十万几百万,这个时候不可能是把这些数据全部渲染到地图上,那么我们只需要渲染当前屏幕的数据就可以,也就是按需加载,移动完成一次就请求一次当前屏幕的数据渲染。

source 是 Layer 的重要组成部分,表示图层的来源,也就是服务地址。

除了在构造函数中指定外,还可以使用 layersetSource(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中叠加高德地图,并且正确叠加WMS图层全部的内容,包括:如何在openlayers中叠加高德地图,并且正确叠加WMS图层、openlayers添加标注(含聚合标注)、覆盖物、绘制路线、OpenLayers创建一个新的Vector图层并添加覆盖物,并监听图层事件等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9304318.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-27
下一篇 2023-04-27

发表评论

登录后才能评论

评论列表(0条)

保存