OpenLayers 3 和地理服务器:在标记单击时创建弹出窗口

Question

我有一张 OpenLayers 3 地图，其中包含来自我的地理服务器的 WMS 图层。我正在尝试使用来自 WFS GetFeature 方法的弹出窗口内容数据在标记单击(从 WMS 图层(时创建一个弹出窗口。我这里有一个JsFiddle。

该代码相当简单，并且基于其他SO帖子。

var baselayer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var layer1 = new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://88.99.13.199:8080/geoserver/agristats/wms',
params: {
'LAYERS': 'agriculture:megaladimosia',
'STYLES': 'point',
'TILED': true
},
serverType: 'geoserver'
})
});
var map = new ol.Map({
layers: [baselayer, layer1],
controls: ol.control.defaults().extend([
new ol.control.ScaleLine({
units: 'metric'
}),
new ol.control.FullScreen()
]),
target: 'mymap',
view: new ol.View({
center: [2687148, 4556999],
zoom: 6.5
})
});
var element = document.getElementById('popup');
var popup = new ol.Overlay({
element: element,
positioning: 'bottom-center',
stopEvent: false
});
map.addOverlay(popup);
map.on('click', function(evt) {
var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
return feature;
});
if (feature) {
var coord = feature.getGeometry().getCoordinates();
var props = feature.getProperties();
var info = "<h2>bvnvb</h2>";
// Offset the popup so it points at the middle of the marker not the tip
popup.setOffset([0, -22]);
popup.show(coord, info);
} else {
var url = layer1
.getSource()
.getGetFeatureInfoUrl(
evt.coordinate,
map.getView().getResolution(),
map.getView().getProjection(), {
'INFO_FORMAT': 'application/json',
'propertyName': 'total_budget'
}
);
reqwest({
url: url,
type: 'json',
}).then(function(data) {
var feature = data.features[0];
var props = feature.properties;
console.log(props.total_budget);
var info = "<h2>" + props.total_budget + "</h2>";
console.log(info);
popup.show(evt.coordinate, info);
});
};
});

但是，这总是给我一个未捕获的类型错误：popup.show 不是一个函数。 我添加了ol-popup js和css文件，但仍然什么都没有。如果有人能帮忙，我将不胜感激。

Answer 1

我根据您的 JsFiddle 发现了两个问题：

1. ID 为"popup"的元素尚未在您的 HTML 中定义
2. ol.Overlay没有"显示"方法

您在问题中提到了OpenLayers 3，尽管您的JsFiddle使用的是4.6.5。我已经用 4.6.5 尝试了下面的解决方案，它也应该适用于 3。

1. 添加"弹出窗口"元素

<div id="popup"></div>

2. 将popup.show的用法替换为popup.setPosition(ol.Coordinate)，并使用element.innerHTML更新弹出窗口的内容

popup.setPosition(evt.coordinate);
element.innerHTML = info;

例如，这是一个更新的 JsFiddle： http://jsfiddle.net/swnykzgq/1/

以下是来自OpenLayers的一些叠加示例： https://openlayers.org/en/latest/examples/overlay.html