我需要实现一个函数，通过将鼠标悬停在地图中的标记上，可以打开一个包含一些信息的弹出窗口。我使用的是openlayers 6，我试图遵循openlayers文档中的示例，但它不起作用。这就是我创建一个点的方式：
var lonLat = ol.proj.fromLonLat([Lon, Lat])
var layer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [
new ol.Feature({
geometry: new ol.geom.Point(lonLat)
})
]
}),
style: new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: pinPath,
scale: 1
})
})
});
layer.set("layerId", "Point");
if (this.map) {
this.map.addLayer(layer);
this.map.getView().animate({ zoom: Zoom, center: lonLat });
}
我该怎么办？
您有任何相关的代码吗？目前您是如何实现这一点的？
编辑：
这是一个有效的概念证明(顺便说一句，这就是你可以打开和关闭图层的方法(。
https://jsfiddle.net/ckxmueqb/7/
完整的示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style>
.map {
height: 100%;
width: 100%;
}
html, body {height:100%}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css">
</head>
<body>
<button onClick=switchLayer();>switch Layer</button>
<div id="map" class="map">
</div>
<div id="popup">
<span>Hello there</span>
</div>
<script type="text/javascript">
let map;
let vectorSource;
let vectorLayer;
document.addEventListener("DOMContentLoaded", function() {
drawMap();
});
function drawMap() {
const container = document.getElementById('popup');
const popupOverlay = new ol.Overlay({
element: container,
autoPan: {
animation: {
duration: 250,
},
},
});
const iconFeature = new ol.Feature({
geometry: new ol.geom.Point([809549.1064227211, 6908390.40501351]),
});
const osm = new ol.layer.Tile({
source: new ol.source.OSM({}),
});
vectorSource = new ol.source.Vector({
features: [
iconFeature,
],
});
vectorLayer = new ol.layer.Vector({
source: vectorSource,
});
map = new ol.Map({
target: 'map',
layers: [
osm,
vectorLayer,
],
view: new ol.View(),
});
map.addOverlay(popupOverlay);
map.on('pointermove', function(e) {
const pixel = map.getEventPixel(e.originalEvent);
const hit = map.hasFeatureAtPixel(pixel);
if (hit) {
//How to get all features you hover on.
//const featureArray = map.getFeaturesAtPixel(pixel);
popupOverlay.element.hidden = false;
popupOverlay.setPosition(e.coordinate);
} else {
popupOverlay.element.hidden = true;
}
});
map.getView().fit(vectorSource.getExtent(), map.getSize());
}
function switchLayer() {
vectorLayer.setVisible(!vectorLayer.getVisible());
}
</script>
</body>
</html>
我完成了以下示例：https://jsbin.com/nebidok/1/edit?html，js，输出
这就是我现在的做法：
this.popupOverlay = new ol.Overlay({
element: document.getElementById('popup'),
});
this.map.addOverlay(this.popupOverlay);
我创建了一个附加到id＝popup的DIV的覆盖对象，然后将其附加到地图上。
this.map.on("pointermove", function (evt) {
const element = this.popupOverlay.getElement();
var Coord = ol.proj.transform([evt.coordinate[0], evt.coordinate[1]], 'EPSG:900913', 'EPSG:4326');
$(element).popover('dispose');
this.popupOverlay.setPosition(Coord);
$(element).popover({
container: element,
placement: 'top',
animation: false,
html: true,
title:"PopUp",
content: '<p>The location you clicked was:</p><code>' + Coord[0] + '</code>'
});
$(element).popover('show');
}.bind(this));
然后当事件被触发时，我会这样做。使用开发工具，我可以看到DIV是正确创建的，里面有我在代码中写的信息，比如标题和内容，但它没有显示在地图中。