【openlayers-4】事件

WXG1011

已于 2024-01-15 17:50:31 修改

阅读量1.4k

点赞数 7

分类专栏： GIS中心文章标签： html 前端 javascript

于 2023-12-30 20:03:13 首次发布

本文链接：https://blog.csdn.net/WXG1011/article/details/135308013

版权

GIS中心专栏收录该内容

18 篇文章 6 订阅

订阅专栏

1、常用鼠标事件

地图鼠标左键单击事件，对应的类为ol.Map，事件名为singleclick。
地图鼠标左键双击事件，对应的类为ol.Map，事件名为dblclick。
地图鼠标点击事件，对应的类为ol.Map，事件名为click。
地图鼠标移动事件，对应的类为ol.Map，事件名为pointermove。
地图鼠标拖拽事件，对应的类为ol.Map，事件名为pointerdrag。
地图移动事件，对应的类为ol.Map，事件名为moveend。

<div id="info" style="background-color: #999;">触发事件提示信息</div>

。。。

map.on('singleclick', function(event){
	document.getElementById('info').innerHTML = '触发了ol.Map的单击事件：singleclick';
});

2、非直接交互事件

地图缩放事件，对应的类为ol.View，事件名为change:resolution。

地图中心改变事件，对应的类为ol.View，事件名为change:center。

<div id="info" style="background-color: #999;">触发事件提示信息</div>

。。。

view.on('change:center', function(event)
{
  document.getElementById('info').innerHTML = '触发了ol.view的地图缩放事件';
});

3、监听事件

使用openlayer自带的注册事件函数ol.map.on(‘click’,function(e))时，map.getEventCoordinate(event)，返回的x、y都是NaN。

// 监听singleclick事件
map.on('click', function(event){
	alert(ol.proj.transform(event.coordinate, 'EPSG:4326', 'EPSG:3857'))
});

4、点击弹窗

1）创建div元素，作为弹窗的内容

<div id="popup" class="ol-popup">
    <div id="popup-content"></div>
</div>

2）使用overlay创建弹窗

var anchor = new ol.Overlay({
  element: document.getElementById('popup')
});
map.addOverlay(anchor);

3）监听map的click事件，获取点击的坐标，然后使用overlay显示弹窗

map.on('click', function (evt) {
  var coordinate = evt.coordinate;
  var content = '<p>You clicked here:</p><code>' + ol.coordinate.toStringXY(coordinate, 'EPSG:3857', 2) + '</code>';
  console.log(content);
  document.getElementById('popup-content').innerHTML = content;
  anchor.setPosition(coordinate);
});

完整代码

<!DOCTYPE HTML
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>坐标添加点</title>

  <script src="https://cdn.jsdelivr.net/npm/ol@v7.2.2/dist/ol.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.2.2/ol.css">
  <style>
    .ol-zoomslider {
      top: 7.5em;
    }
  </style>
</head>

<body>
  <div id="mapCon" style="width: 100%; height: 100%; position: absolute;">
    <div id="popup" class="ol-popup">
      <div id="popup-content"></div>
    </div>
  </div>
  <script type="text/javascript">
    var url = 'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}';
    var map = new ol.Map({
      // 设置地图图层
      layers: [
        new ol.layer.Tile({ source: new ol.source.XYZ({ url: url }) })
      ],
      // 设置显示地图的视图
      view: new ol.View({
        center: [117.23, 36.43],
        zoom: 10,
        projection: 'EPSG:4326'//设置坐标系，地图本身3857坐标系，即横轴墨卡托投影，因为中心点用的度，所以设置成wgs84代号是4326
      }),
      // 让id为map的div作为地图的容器
      target: 'mapCon',
    });

    const ZoomToExtent = new ol.control.ZoomToExtent({
      extent: [116, 30, 120, 40]
    })
    map.addControl(ZoomToExtent);

    const ZoomSlider = new ol.control.ZoomSlider()
    map.addControl(ZoomSlider);

    const FullScreen = new ol.control.FullScreen()
    map.addControl(FullScreen);

    // 把上面的图标附加到地图上，需要一个ol.Overlay
    var anchor = new ol.Overlay({
      element: document.getElementById('popup')
    });
    map.addOverlay(anchor);

    map.on('click', function (evt) {
      var coordinate = evt.coordinate;
      var content = '<p>You clicked here:</p><code>' + ol.coordinate.toStringXY(coordinate, 'EPSG:3857', 2) + '</code>';
      console.log(content);
      document.getElementById('popup-content').innerHTML = content;
      anchor.setPosition(coordinate);
    });

  </script>
</body>

</html>