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)
        }
    };




转载于:https://www.cnblogs.com/dqygiser/p/9215842.html