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

You may also like...

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

CAPTCHAis initialing...
退出移动版