【发布时间】：2020-10-03 02:22:13
【问题描述】：
我是 openlayers 的新手，对他们的 nodejs 风格有点困惑，由于我的原因，我不能使用 nodejs，我正在努力寻找一些好的文档来实现我的目标而不使用 NodejS，基本上我需要单击一个标记并获得一个与该标记相关的弹出窗口，以显示有关该标记的一些信息，例如城市名称和人口数量，所有这些信息都是由从服务器接收到的 jSon 提供给我的。这是我的 Javascript 脚本和 Html 的一小部分，任何人都可以用一个例子来解释一下吗？
HTML
<div id="mapdiv" style="height: 500px;width: 100%;"><div id="popup"></div></div>
JAVASCRIPT
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script>
@Scripts.Render("~/Scripts/jquery-3.3.1.js");
<script>
var jsonObject = { "coords": [] };
$.ajax({
url: '@Url.Action("GetPlaces", "Place")', //Indirizzo controller.
type: 'GET',
success: function (data) {
for (var i = 0; i < data.length; i++) {
var descr = data[i].descrizione;
var coord = data[i];
//var coordObj = JSON.stringify(coord);
jsonObject['coords'].push(coord);
}
//var temp = JSON.stringify(data);
//geojsonObject = JSON.parse(data);
},
async: false
});
const features = [];
for (const coord of jsonObject.coords) {
features.push(new ol.Feature({
geometry: new ol.geom.Point(
ol.proj.fromLonLat([coord.longitude, coord.latitude]),
'XY'
)
}));
}
const style = new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 0.5],
size: [2400, 2400],
offset: [52, 0],
opacity: 1,
scale: 0.012,
src: "http://localhost:22950/Assets/pin-png-39460.png"
})
});
const vectorSource = new ol.source.Vector({
features
});
const vectorLayer = new ol.layer.Vector({
source: vectorSource,
style
});
const map = new ol.Map({
target: 'mapdiv',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
vectorLayer
],
view: new ol.View({
center: ol.proj.fromLonLat([45.32, 8.41]),
zoom: 3
})
});
</script>
上面的代码运行良好，因为我能够在地图上正确显示标记。
【问题讨论】：
-
@geocodezip 是的！非常好的和干净的解决方案，非常感谢！如果您还有一个关于 ho 的示例，可以在弹出窗口中添加来自 url 的图片，这会非常甜蜜。附言。如果您回答，我会将其设置为正确的解决方案。
标签： javascript html openlayers openlayers-6