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技术分享
  • 相关阅读:
    ODBC是什么
    node学习连接和网站
    MongoDB--连接客户端和服务
    css页面布局--三栏(两边固定中间自适应&两边自适应中间固定)
    MongoDB--搭建mongodb服务器
    MongoDB--编译文件
    MongoDB--运行环境
    Ubuntu下搜狗输入法乱码
    从命令行控制计算机屏幕
    CPU风扇转速异常
  • 原文地址:https://www.cnblogs.com/dqygiser/p/9215842.html
Copyright © 2011-2022 走看看