• 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技术分享
  • 相关阅读:
    05-浮动/css
    04-选择器/css
    03-样式表/css
    02-html标签&表格&表单
    01-html基础&标签
    vue分页组件重置到首页问题
    VUE通过索引值获取数据不渲染的问题
    常见IE8兼容性问题及解决
    Ajax
    sea.js模块化工具
  • 原文地址:https://www.cnblogs.com/dqygiser/p/9215842.html
Copyright © 2020-2023  润新知