gpt4 book ai didi

javascript - 显示来自 shapefile 数据的弹出窗口

转载 作者:行者123 更新时间:2023-12-02 23:11:00 24 4
gpt4 key购买 nike

我正在使用 openlayers 库和 geoserver 在网页上显示 map 。我想从 map [ 这是一个 ImageWMS 文件 ] 中获取数据,并在用户单击 map 上的任何点时显示为弹出功能。我正在使用地理服务器图层来显示 map ,我想在每个 map 点上以弹出窗口的形式显示该图层的详细信息。

我创建了一个构造函数 map 函数,然后使用它添加了谷歌地图。然后使用 ol.addLayer 方法添加一个包含数据的新层。之后,我为单击事件创建了一个选择变量,并为显示弹出窗口创建了一个变量弹出窗口。有人请帮我显示以下网址中的数据。

<!DOCTYPE html>
<html>
<head>
<title>Overlay</title>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div id="map" class="map">
</div>

<script>

var map = new ol.Map({
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([76.6927, 11.8083]),
minZoom: 4,
zoom: 12,
interactions: ol.interaction.defaults({ altShiftDragRotate:false, pinchRotate:false })
})
});

var format = 'image/png';

map.addLayer(new ol.layer.ImageWMS({
source: new ol.source.ImageWMS({
ratio:1,
projection:'EPSG:4326',
url:'url',
params:{'FORMAT':format,
'VERSION':'1.1.1',
STYLES:'',
LAYERS:'layer',
}
}),
style: function(f) {
return new ol.style.Style({
image: new ol.style.RegularShape({
radius: 5,
radius2: 0,
points: 4,
stroke: new ol.style.Stroke({ color: "#000", width:1 })
}),
text: new ol.style.Text ({
text: f.get('id').toString(),
font: 'bold 11px sans-serif',
}),
stroke: new ol.style.Stroke({
width: 1,
color: [255,128,0]
}),
fill: new ol.style.Fill({
color: [255,128,0,.2]
})
})
}
}));
//Interaction
var select = new ol.interaction.Select({
hitTolerance: 5,
multi: true,
condition: ol.events.condition.singleClick
});
map.addInteraction(select);


//Select control

var popup = new ol.Overlay.PopupFeature({
popupClass: 'default anim',
select: select,
canFix: true,
template: {
title:
function(f) {
return f.get('gwl')+' ('+f.get('id')+')';
}
}
});



map.addOverlay (popup);



</script>
</body>
</html>

每当用户尝试单击 shapefile 上的任何点时,我都需要显示一个弹出窗口。

最佳答案

对于 WMS 源,您可以使用类似于以下的 GetFeatureInfo https://openlayers.org/en/master/examples/getfeatureinfo-image.html但您不会在 map 下方显示信息,而是在类似于 https://openlayers.org/en/master/examples/popup.html 的弹出窗口中显示信息。要更好地控制显示的数据,请使用 {'INFO_FORMAT': 'application/json'}

您链接的 ol-ext 示例使用矢量图层。您可以使用其 WFS 服务从服务器而不是 WMS 获取矢量数据,请参阅 https://openlayers.org/en/master/examples/vector-wfs.html

关于javascript - 显示来自 shapefile 数据的弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57362899/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com