[英]OpenLayers 3 and Geoserver: Create popup on marker click
我的Geoserver中有一個帶有WMS圖層的OpenLayers 3地圖。 我試圖用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);
});
};
});
但是,這總是給我帶來Uncaught TypeError的錯誤:popup.show不是function 。 我添加了ol-popup js和css文件,仍然沒有。 如果有人可以提供幫助,我將非常感激。
根據您的JsFiddle,我發現了兩個問題:
ol.Overlay
上沒有“顯示”方法 您已經在問題中提到了OpenLayers 3,盡管您的JsFiddle使用的是4.6.5。 我已經在4.6.5下嘗試過該解決方案,它也應該可以在3下使用。
<div id="popup"></div>
popup.setPosition(ol.Coordinate)
替換popup.show
的用法,並用element.innerHTML
更新彈出窗口的內容 popup.setPosition(evt.coordinate);
element.innerHTML = info;
例如,這是一個更新的JsFiddle: http : //jsfiddle.net/swnykzgq/1/
以下是一些來自OpenLayers的疊加示例: https ://openlayers.org/en/latest/examples/overlay.html
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.