Openlayers API-Overlay

2020-02-15  本文已影响0人  写前端的大叔

Overlay可以将一个html元素添加到地图上,跟Control类似,相当于地图的一个控件,不过Overlay添加的元素不是固定的,而是可以随着地图移动而移动的。创建一个Overlay对象比较简单,在创建Overlay对象的时候指定一个元素,然后再设置Overlay显示的坐标点,并将Overlay添加到地图上。

import Overlay from 'ol/Overlay';
var popup = new Overlay({
  element: document.getElementById('popup')
});
popup.setPosition(coordinate);
map.addOverlay(popup);

属性

  • id:设置Overlay的ID,可以使用mapgetOverlayById获取到指定的Overlay
  • element:设置Overlay的元素。
  • offset:用于设置元素的偏移量,参数为一个数组,数组中的第一个值表示水平方向的偏移,第二个值表示垂直方向的偏移。
  • position:设置Overlay显示的坐标点。
  • positioning:设置Overlayposition处的位置,可以设置的位置包括:bottom-leftbottom-centerbottom-rightcenter-leftcenter-centercenter-righttop-lefttop-centertop-right,默认为top-left
  • stopEvent:阻止事件冒泡。
  • insertFirst:如果设置为true,当同一容器中添加了Overlay和控件时,将Overlay显示在控件的下边。
  • autoPan:平移时,如果超出了地图一点点,将自动设置Overlay显示在地图范围类。
  • autoPanAnimation:设置autoPan时的动画。
  • autoPanMargin:设置autoPan生效时距地图边界的距离。
  • className:设置OverlayCSS类名。

方法

  • getElement:获取Overlay的元素对象。
  • getId:获取Overlay设置的ID。
  • getMap:获取Overlay所在的地图。
  • getOffset:获取Overlay的偏移量。
  • getPosition:获取Overlay的位置。
  • getPositioning:获取Overlay设置位置的方向。
  • setElement:设置Overlay的元素。
  • setMap:设置添加Overlay的地图。
  • setOffset:设置Overlay的偏移量。
  • setPosition:设置Overlay的位置。
  • setPositioning:设置Overlay位置的方向。
    个人博客
上一篇 下一篇

猜你喜欢

热点阅读