使用 CLUSTERS 时如何让 GeoJSON 属性出现在 openlayers 3 弹出窗口中?
How to get GeoJSON properties to appear in openlayers 3 popup when using CLUSTERS?
我构建了一个相对简单的 openlayers 地图,我试图让我的 geoJSON 属性出现在我的点击弹出窗口中,但无论我尝试什么,它要么 returns 几何名称 object Object
或 Undefined
。我认为 openlayers 将集群数据存储为一组特征而不是多个单独的特征?这是我的点击功能的代码:
var
container = document.getElementById('popup'),
content_element = document.getElementById('popup-content'),
closer = document.getElementById('popup-closer');
closer.onclick = function() {
overlay.setPosition(undefined);
closer.blur();
return false;
};
var overlay = new ol.Overlay({
element: container,
positioning: 'bottom-center',
stopEvent: false
});
map.addOverlay(overlay);
// display popup on click
map.on('click', function(evt) {
var feature = map.forEachFeatureAtPixel(evt.pixel,
function(feature, layer) {
return feature;
});
if (feature) {
var geometry = feature.getGeometry();
var coord = geometry.getCoordinates();
var content =coord;
//------------------------------------------------------------------------------
content += '<h5>' + feature.get('MMSI') + '</h5>';
//--------^^^^^^^ This does not work for clusters ^^^^^^------------------------
//------------------------------------------------------------------------------
content_element.innerHTML = content;
overlay.setPosition(coord);
} else {
}
我不需要实际聚类的属性,但我确实需要单个点的属性(一旦放大,聚类就会分离成单独的点)。非常感谢任何帮助!
试试这个方法:
map.on('click', function(evt) {
var ft = map.forEachFeatureAtPixel(evt.pixel, function(f, l){return f;});
if (ft) {
var features = ft.get('features'); //this is from the official examples
features.forEach(function(feature){
//assumption there is a 'name' property
console.info(feature.get('name'));
});
}
});
我构建了一个相对简单的 openlayers 地图,我试图让我的 geoJSON 属性出现在我的点击弹出窗口中,但无论我尝试什么,它要么 returns 几何名称 object Object
或 Undefined
。我认为 openlayers 将集群数据存储为一组特征而不是多个单独的特征?这是我的点击功能的代码:
var
container = document.getElementById('popup'),
content_element = document.getElementById('popup-content'),
closer = document.getElementById('popup-closer');
closer.onclick = function() {
overlay.setPosition(undefined);
closer.blur();
return false;
};
var overlay = new ol.Overlay({
element: container,
positioning: 'bottom-center',
stopEvent: false
});
map.addOverlay(overlay);
// display popup on click
map.on('click', function(evt) {
var feature = map.forEachFeatureAtPixel(evt.pixel,
function(feature, layer) {
return feature;
});
if (feature) {
var geometry = feature.getGeometry();
var coord = geometry.getCoordinates();
var content =coord;
//------------------------------------------------------------------------------
content += '<h5>' + feature.get('MMSI') + '</h5>';
//--------^^^^^^^ This does not work for clusters ^^^^^^------------------------
//------------------------------------------------------------------------------
content_element.innerHTML = content;
overlay.setPosition(coord);
} else {
}
我不需要实际聚类的属性,但我确实需要单个点的属性(一旦放大,聚类就会分离成单独的点)。非常感谢任何帮助!
试试这个方法:
map.on('click', function(evt) {
var ft = map.forEachFeatureAtPixel(evt.pixel, function(f, l){return f;});
if (ft) {
var features = ft.get('features'); //this is from the official examples
features.forEach(function(feature){
//assumption there is a 'name' property
console.info(feature.get('name'));
});
}
});