OpenLayers - Overlay简介 (八)

Overlay是什么

让HTML元素显示在地图上某个位置。他和控件很像都是在地图上添加可见元素,不同的是,它不是根据屏幕位置固定的,而是与地理坐标相关联,因此平移地图将移动 Overlay
常用的大致有三类,弹窗标注文本信息。每个覆盖物都会生成对应的HTML元素,所以我们也可以使用css来修改去样式。

overlay 常用属性

  • id,覆盖物的唯一标识 ,便于 getOverlayById 方法取得相应的 overlay
  • element,要添加到覆盖物元素。
  • offset,偏移量,像素为单位。overlay 相对于放置位置(position)的偏移量,默认值是 [0, 0],正值分别向右和向下偏移。
  • position,在地图所在的坐标系框架下,overlay 放置的位置。
  • positioningoverlay 对于 position 的相对位置,可能的值是'bottom-left''bottom-center''bottom-right''center-left''center-center''center-right''top-left''top-center',和'top-right'
  • stopEvent,是否应停止事件传播到地图视口。
  • autoPanAnimation,用于将叠加层平移到视图中的动画选项。此动画仅在autoPan启用时使用。可以提供Adurationeasing来自定义动画。如果autoPan作为对象提供,则弃用并忽略。
  • className,CSS 类名。

overlay 常用事件

  • change,当引用计数器增加时,触发;
  • change:elementoverlay 对应的 element 变化时触发;
  • change:mapoverlay 对应的 map 变化时触发;
  • change:offsetoverlay 对应的 offset 变化时触发;
  • change:positionoverlay 对应的 position 变化时触发;
  • change:positioningoverlay 对应的 positioning 变化时触发;
  • propertychangeoverlay 对应的属性变化时触发;
    绑定方式:
var overlay = new ol.Overlay({ // 创建 overlay});
// 事件 
overlay.on("change:element", function(){ console.log("获取变化"); })

overlay 常用方法

  • getElement,获取传入的元素节点。
  • getId,获取 overlay 的 id。
  • getMap,获取与 overlay 关联的 map对象。
  • getOffset,获取 offset 属性。
  • getPosition,获取 position 属性。
  • getPositioning,获取 positioning 属性。
  • setElement, 设置元素节点。
  • setMap,设置map对象。
  • setOffset,设置 offset
  • setPosition,设置 position 属性。
  • setPositioning,设置 positioning 属性。

使用overlay

初始化地图

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style type="text/css">
    .map {
      height: 500px;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.6.1/css/ol.css" />
  <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.6.1/build/ol.js"></script>
  <body>
    <div id="map" class="map"></div>
  </body>
  <script>
    var map = new ol.Map({
      target: 'map'
    })

    // 图层
    var layerTile = new ol.layer.Tile({
      source: new ol.source.XYZ({
        url: 'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
      })
    })
    // 视图
    var view = new ol.View({
      center: ol.proj.fromLonLat([130.41, 28.82]),
      zoom: 4
    })

    map.setView(view)
    map.addLayer(layerTile)
  </script>
</html>

添加元素

  • 直接在Overlay中添加一个元素节点,文本、动画都可以通过它添加到地图上。
   ...
   .tag {
      width: 30px;
      height: 30px;
      background-color: aquamarine;
      border-radius: 100%;
    }
    ...
    <div id="tag" class="tag">div>
    ...
    var tag = new ol.Overlay({
      position: ol.proj.fromLonLat([120.41, 28.82]),
      positioning: 'center-center',
      element: document.getElementById('tag'),
      stopEvent: false
    })
    map.addOverlay(tag)
    ...

OpenLayers - Overlay简介 (八)_第1张图片

添加事件

    document.getElementById('tag').onclick = function () {
      tag.setPosition(undefined)
      return false
    }
    map.on('singleclick', function (evt) {
      tag.setPosition(evt.coordinate) // 把 overlay 显示到指定的 x,y坐标
    })

  • 通过给元素添加监听事件,修改坐标位置,让元素离开地图。然后监听地图单击事件,修改元素坐标位置,实现在点击位置加载元素。

总结

覆盖物的使用方式非常简单,通过它我们可以实现很多功能。如在地图上添加云层移动的gif图片,实现动态效果等。不过它的缺点也比较明显,一个覆盖物最少需要一个元素,当数据量大时,元素节点过多会导致页面加载卡顿。大数据量的绘制图还是使用图层最好。

你可能感兴趣的:(地图学习,前端,javascript,html5)