我在地图上做了一些标记，每个标记代表从该位置发送的报告。我想这样做，当我点击一个特定的标记时，我会在弹出窗口中看到它的信息。该信息存储在SQL数据库中，并且它包含Category、Title、Remarks(描述(、statUrgence(紧迫性(&CCD_ 5(路径(。您可以在代码中看到它为@_Data.Category。。。
代码：
<link rel="stylesheet" href="~/css/ol.css">
<link rel="stylesheet" href="~/css/ol-ext.css">
<script src="~/js/ol.js"></script>
<div id="map" style="position: fixed; top: 62.5px; left: 0; bottom: 65px; right: 0; z-index:-1"></div>
<style>
.ol-zoom {
top: 2.5%;
}
</style>
<script type="text/javascript">
var layers = [new ol.layer.Tile({ source: new ol.source.OSM() })];
var map = new ol.Map({
target: 'map',
view: new ol.View({
zoom: 5,
center: [166326, 5992663]
}),
interactions: ol.interaction.defaults({ altShiftDragRotate: false, pinchRotate: false }),
layers: layers
});
const options = {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
};
//Tried to make here that when a marker is clicked something will happen, wasn't much of a success
// Vector Feature Popup logic
map.on('click', function (e) {
map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
console.log(feature, layer);
})
})
</script>
@{
if (Model != null)
{
foreach (var _Data in Model)
{
@*Saving the data that needs to be in each marker*@
@*<div class="card" id="overlay-container-@_Data.Id" style="display:none;">
<div class="card-header">
<h3><u>Category</u>: @_Data.category</h3><br />
<h5><u>Title</u>: @_Data.title</h5>
</div><br />
<div class="card-body">
<p>
<u>Description</u>: <br />@_Data.remarks
</p><br />
<u>Urgence</u>: @_Data.statUrgence <br />
</div>
<div class="card-footer">
@_Data.path
</div>
</div>*@
<script>
markers = new ol.layer.Vector({
source: new ol.source.Vector(),
style: new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 1],
src: 'https://ucarecdn.com/4b516de9-d43d-4b75-9f0f-ab0916bd85eb/marker.png'
})
})
});
map.addLayer(markers);
var marker = new ol.Feature(new ol.geom.Point([parseFloat(@_Data.coordLat), parseFloat(@_Data.coordLong)]));
markers.getSource().addFeature(marker);
</script>
}
}
}
在弹出窗口中包含您需要的属性作为功能的属性，然后您可以根据需要将它们复制到弹出窗口中，如中的namehttps://openlayers.org/en/latest/examples/icon.html可以在中创建复杂的弹出窗口并设置其样式https://openlayers.org/en/latest/examples/popup.html
使用属性的简单子集而无需额外的css 的最终结果
<!DOCTYPE html>
<html>
<head>
<title>Popup</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@main/dist/en/v7.1.0/ol/ol.css" />
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@main/dist/en/v7.1.0/ol/dist/ol.js"></script>
<style>
html, body, .map {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.ol-popup {
position: absolute;
background-color: white;
-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
padding: 15px;
border-radius: 10px;
border: 1px solid #cccccc;
bottom: 12px;
left: -50px;
min-width: 280px;
}
.ol-popup:after, .ol-popup:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.ol-popup:after {
border-top-color: white;
border-width: 10px;
left: 48px;
margin-left: -10px;
}
.ol-popup:before {
border-top-color: #cccccc;
border-width: 11px;
left: 48px;
margin-left: -11px;
}
.ol-popup-closer {
text-decoration: none;
position: absolute;
top: 2px;
right: 8px;
}
.ol-popup-closer:after {
content: "✖";
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<div id="popup" class="ol-popup">
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
<div id="popup-content"></div>
</div>
<script>
/**
* Elements that make up the popup.
*/
const container = document.getElementById('popup');
const content = document.getElementById('popup-content');
const closer = document.getElementById('popup-closer');
/**
* Create an overlay to anchor the popup to the map.
*/
const overlay = new ol.Overlay({
element: container,
autoPan: {
animation: {
duration: 250,
},
},
});
/**
* Add a click handler to hide the popup.
* @return {boolean} Don't follow the href.
*/
closer.onclick = function() {
overlay.setPosition(undefined);
closer.blur();
return false;
};
const Model = [
{
category: 'Capital city',
title: 'London',
long: -0.12755,
lat: 51.507222,
description: 'UK capital',
},
{
category: 'Capital city',
title: 'Rome',
long: 12.5,
lat: 41.9,
description: 'Italy capital',
},
{
category: 'Capital city',
title: 'Bern',
long: 7.4458,
lat: 46.95,
description: 'Switzerland capital',
},
];
/**
* Create the map.
*/
const map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM(),
}),
],
overlays: [overlay],
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([7.5, 47]),
zoom: 3,
}),
});
const features = [];
for (key in Model)
{
const _Data = Model[key];
const feature = new ol.Feature({
geometry: new ol.geom.Point(
ol.proj.fromLonLat([parseFloat(_Data.long), parseFloat(_Data.lat)])
),
category: _Data.category,
title: _Data.title,
description: _Data.description,
});
features.push(feature);
}
const markers = new ol.layer.Vector({
source: new ol.source.Vector({
features: features,
}),
style: new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 1],
src: 'https://ucarecdn.com/4b516de9-d43d-4b75-9f0f-ab0916bd85eb/marker.png',
}),
}),
});
map.addLayer(markers);
map.on('click', function (evt) {
const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
return feature;
});
if (feature) {
const coordinates = feature.getGeometry().getCoordinates();
content.innerHTML =
'<p>Category:</p><code>' + feature.get('category') + '</code><br>' +
'<p>Title:</p><code>' + feature.get('title') + '</code><br>' +
'<p>Description:</p><code>' + feature.get('description') + '</code>'
overlay.setPosition(coordinates);
}
});
</script>
</body>
</html>