Фрагмент кода ниже загружает три точечных объекта на карте и накладывает SVG-элемент, если щелкнуть один из точечных объектов (путевых точек).SVG должен быть центрирован (позиционирование: центр-центр) по нажатым координатам.У меня есть две проблемы:
- Когда я уменьшаю масштаб и объекты Point находятся под SVG, я не могу изменить положение SVG, потому что он маскирует карту, событие click не получаетдо базовой карты, поэтому пользователь не может далее взаимодействовать с «замаскированными» точечными объектами.Есть ли способ решить эту проблему?
Когда я впервые загружаю страницу, элемент SVG не позиционируется должным образом, он отображается прямо под нажатой путевой точкой.Затем он перемещается в правильное положение после некоторого взаимодействия с картой (например, увеличение или уменьшение масштаба).Это происходит только с первого клика.Когда я нажимаю на другую путевую точку, SVG располагается правильно, она центрируется на нажатой путевой точке.
На следующем снимке экрана показано, как это выглядит после первой загрузки (неправильно):
На следующем снимке экрана показано правильное расположение, это происходит после взаимодействия с картой или второго щелчка:
const c1 = ol.proj.fromLonLat([29.630329200, 36.204621700]);
const c2 = ol.proj.fromLonLat([29.630280100, 36.204555700]);
const c3 = ol.proj.fromLonLat([29.630290700, 36.204584000]);
const line = [c1, c2, c3];
const features = [
new ol.Feature({
geometry: new ol.geom.Point(c1),
type: 'waypoint'
}),
new ol.Feature({
geometry: new ol.geom.Point(c2),
type: 'waypoint'
}),
new ol.Feature({
geometry: new ol.geom.Point(c3),
type: 'waypoint'
}),
new ol.Feature({
geometry: new ol.geom.LineString(line),
type: 'track',
}),
];
const baseOSM = new ol.layer.Tile({
source: new ol.source.OSM()
});
const view = new ol.View({
center: ol.proj.fromLonLat([29.630329200, 36.204621700]),
zoom: 14
});
const sailingTrack = new ol.layer.Vector({
source: new ol.source.Vector({
features: features
})
});
const map = new ol.Map({
target: 'map',
layers: [baseOSM, sailingTrack],
view: view
});
const overlay = new ol.Overlay({
element: document.getElementById('svg'),
positioning: 'center-center'
});
map.getView().fit(sailingTrack.getSource().getExtent());
function drawIcon(feature, coord) {
const svg = overlay.getElement();
overlay.setPosition(coord);
map.addOverlay(overlay);
}
map.on('singleclick', function(event) {
let features = new Array;
var pixel = event.pixel;
var coord = event.coordinate;
if (map.hasFeatureAtPixel(pixel, {
hitTolerance: 10
})) {
features = map.getFeaturesAtPixel(pixel, {
hitTolerance: 10
});
}
for (let feature of features) {
if (feature.get('type') == 'waypoint') {
drawIcon(feature, coord);
}
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 800px;
}
svg#svg {
margin: 10px;
border: 1px solid blue;
background-color: rgba(255, 0, 0, .2);
width: 100px;
height: 100px;
}
</style>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
<svg id="svg" viewBox="0 0 400 400" preserveAspectRatio="xMidYMid meet"></svg>
<script type="text/javascript" src="js/map.js"></script>
</body>
</html>