您的位置:首页 > Web前端

openlayers3 pointermove onmousemove 显示feature信息

2017-07-26 17:42 239 查看
由于过渡到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)        }    };

                                            
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息