Bootstrap

openlayers6 踩坑系列(四)关于Overlay类讲解

重要:博客内使用地图全替换为WMap,想使用的请参考我这篇博客(WMap

说到覆盖物类,可以说在地图中用到很多,基本需要传自定义Dom或者html字符串的地方都要用到Overlay,如果不用传dom的话,Feature类就足够了,这次来说说Overlay类:

首先是Overlay的基本参数详解:

id: 相当于这个覆盖物的编号,在初始化的时候传入
// 用法: 一般用于在地图中删除这个覆盖物
// 调用方式:
 Map.getOverlayById(id) => Overlay
// 常用方法:
new Overlay.getId() // 获取初始化传入的id

element: 我们用overlay主要用的就是这个参数,这参数可以传入dom,
也可以传入html字符串来生成dom, 其实如果不使用自定义的东西的话,
建议使用Feature来生成覆盖物
// 用法: 来生成覆盖物中的自定义弹框或者图片等
// 调用方式:
new Overlay({
    element: document.querySelector('#popup')
})
// 常用方法:
new Overlay.setElement(dom) // 设置自定义dom
new Overlay.getElement() // 获取你之前所设置的自定义dom

position:是指你传入的经纬度的位置,其他参数默认的话,那就会将overlay
定位到你当前的这个位置
// 常用方法:
new Overlay.getPosition() // 获取当前的经纬度位置
new Overlay.setPosition(position) // 设置经纬度位置

positioning: 这个理解有点畸形,默认这个值是 'top-left', 你可以这么想:
dom都是矩形的,而我们element传入的就是dom,所以 element是相对于传入的
position位置的左上角, 这个从实例化Overlay也可以看的出来,有个absolute定位,
所以你就可以根据需求传'center-center'或者'center-bottom'等来第一次对element
进行排版,然后下一步就根据offset来进行第二次排版
// 常用方法:
getPositioning() // 获取排版位置
setPositioning(positioning) // 设置排版位置

offset:跟字面意思一样,就是偏移像素大小,默认是[0, 0], 注意哦,
这里的偏移,是指element元素相当于你传入的(position和positioning)
过后的偏移,来进行第二次排版
// 常用方法:
setOffset(offset) // 设置偏移
getOffset() // 获取偏移

stopEvent: 这个就跟原生js里的stopPropagation一样,阻止事件冒泡到父元素上,一般就使用默认的true

className:overlay实例化后的总的dom的类名,一般都用默认的,不在此加入新的样式,当然这还是根据你的需求来变

auto...: 这几个参数,相当于就是给overlay增加了个外边距,一般不用管它,或者当你需要对此覆盖物四周进行逻辑处理时,再去研究也不迟

insertFirst: 这个就很巧妙了,要着重讲一下:

insertFirst(此参数我只写我对它的理解)

这个参数默认是true,意思就是直接插入到地图上,当你在代码中实例化多个overlay时,那么就跟常规的一样,一个一个按顺序添加到地图上,然后你f12看元素时,也是一样的按顺序排列,但是如果改成false,那么为true的元素会优先为false的元素插入上去,这就跟字面意思一样,但是有个很有意思的地方,就是: 你的地图上有很多标记覆盖物,然后你的需求就是你点击每个覆盖物时,要在这覆盖物上层显示弹框,并且弹框要位于覆盖物dom上层。

就如上图中所示,弹框也是overlay,标记覆盖物也是overlay,那应该怎么做呢? 只需将弹框覆盖物的 insertFirst 设置为 false,标记覆盖物用默认的true,就可以实现,其他的参数不用变,如果你想通过修改z-index来改变层级,那么仅修改 overlay的getElement()获取的dom的样式,是没有用处的,只有修改最外层 className, 增加新的class名,才有作用,但是你都要修改样式名了,那为啥不改个insertFirst ,对吧。

关于在地图中常用的overlay方法:

new Map().addOverlay(overlay) // 添加覆盖物

new Map().getOverlayById(id) // 根据id获取覆盖物

new Map().getOverlays // 获取地图上所有覆盖物

new Map().removeOverlay(overlay) // 移除覆盖物

// map类中对overlay的方法,也就这几种,相比较于feature类,那可是少的太多,
// 那么这是为啥呢, 因为overlay是更多用作dom来直接添加到地图中的,所以通俗
// 来说,是没有图层一说的,但Feature就不一样了,要先添加图层(VetorLayer),
// 然后添加图层数据源(VectorSource),然后在进行增删操作;

;