zoukankan      html  css  js  c++  java
  • openlayers3 pointermove onmousemove 显示feature信息

    由于过渡到openlayers3 4版本后,整体结构接口有些变化,导致很多原来用过的功能使用方式发生了改变。比如:鼠标移动到图层上,获取feature属性,弹出信息。

      官网例子地址:vector-layer pointmove

      根据例子实际项目应用:

    1.添加需要查询的vector图层,

    var vectorLayer = new ol.layer.Vector({
            source: new ol.source.Vector({
              url: 'https://openlayers.org/en/v4.2.0/examples/data/geojson/countries.geojson',
              format: new ol.format.GeoJSON()
            })
          });

    2.map绑定鼠标移动事件,查询

     map.on('pointermove', function(evt) {
            if (evt.dragging) {
              return;
            }
           
            displayFeatureInfo(evt);
          });

    3.通过pupup展示feature属性信息(注:popup实例点击打开链接http://openlayers.org/en/latest/examples/popup.html)    

     var displayFeatureInfo = function (evt) {
            var pixel = map.getEventPixel(evt.originalEvent);
            var feature = map.forEachFeatureAtPixel(pixel, function (feature) { return feature; });//查询方式有很多 
            if (feature) {
                content.innerHTML = feature.getId() + ': ' + feature.get('name');
                overlay.setPosition(evt.coordinate)
            } else {
                content.innerHTML = ' ';
                overlay.setPostion(undefined)
            }
        };





    GIS开发https://www.giserdqy.comGIS,WebGIS,ArcGIS,OpenLayers,Leaflet,Geoserver,PostGIS,BIM,空间大数据,GeoAI技术分享
  • 相关阅读:
    close 不弹出对话框
    ASP.NET会话(Session)保存模式
    ASP.NET页面刷新后滚动条保留在刷新前的位置 MaintainScrollPositionOnPostback
    CSS实现垂直居中的5种方法
    ExpandStackTrace
    HttpTunnel
    PropertyAccess类 Linq.Expressions 实现
    DatagramResolver
    AsyncUdpClient 类
    C# LockFreeStack类
  • 原文地址:https://www.cnblogs.com/dqygiser/p/9215842.html
Copyright © 2011-2022 走看看