Я определил указанный ниже маркер, как я могу сделать следующее: - Добавление прослушивателя onclick - Отображение всплывающего окна после запуска прослушивателя onclick
var marker = new ol.Feature({
name: 'TRUCK TR1',
population: 4000,
rainfall: 500,
geometry: new ol.geom.Point(
ol.proj.fromLonLat([-74.006,40.7127]) // new Point([0, 0])
), // Cordinates of New York's Town Hall
});
Вы можете использовать мой код, просто используйте событие click вместо pointermove. Вот ссылка: всплывающее окно при клике
<!DOCTYPE html>
<html>
<head>
<style>
.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: 180px;
}
.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;
}
</style>
<meta name="description" content="Display popup on features">
<link href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.css"></link>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.js"></script>
<script>
var straitSource;
var map;
</script>
</head>
<body>
<div id="map" style="height:600px;width:1024px;"></div>
<div id="popup" title="myproject" class="ol-popup"><a href="#" id="popup-closer" class="ol-popup-closer"></a><div id="popup-content"></div></div>
</body>
<script>
content = document.getElementById('popup-content');
var center = ol.proj.transform([76.26, 9.93], 'EPSG:4326', 'EPSG:3857'); //initial position of map
var view = new ol.View({
center: center,
zoom: 2
});
//raster layer on map
var OSMBaseLayer = new ol.layer.Tile({
source: new ol.source.OSM()
});
straitSource = new ol.source.Vector({ wrapX: true });
var straitsLayer = new ol.layer.Vector({
source: straitSource
});
map = new ol.Map({
layers: [OSMBaseLayer, straitsLayer],
target: 'map',
view: view,
controls: [new ol.control.FullScreen(), new ol.control.Zoom()]
});
// Popup showing the position the user clicked
var container = document.getElementById('popup');
var popup = new ol.Overlay({
element: container,
autoPan: true,
autoPanAnimation: {
duration: 250
}
});
map.addOverlay(popup);
/* Add a pointermove handler to the map to render the popup.*/
map.on('pointermove', function (evt) {
var feature = map.forEachFeatureAtPixel(evt.pixel, function (feat, layer) {
return feat;
}
);
if (feature && feature.get('type') == 'Point') {
var coordinate = evt.coordinate; //default projection is EPSG:3857 you may want to use ol.proj.transform
content.innerHTML = feature.get('desc');
popup.setPosition(coordinate);
}
else {
popup.setPosition(undefined);
}
});
var data=[{"Lon":19.455128,"Lat":41.310575},{"Lon":19.455128,"Lat":41.310574},{"Lon":19.457388,"Lat":41.300442},{"Lon":19.413507,"Lat":41.295189},{"Lon":16.871931,"Lat":41.175926},{"Lon":16.844809,"Lat":41.151096},{"Lon":16.855165,"Lat":45}];
function addPointGeom(data) {
data.forEach(function(item) { //iterate through array...
var longitude = item.Lon,
latitude = item.Lat,
iconFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([longitude, latitude], 'EPSG:4326',
'EPSG:3857')),
type: 'Point',
desc: '<pre> <b>Waypoint Details </b> ' + '<br>' + 'Latitude : ' + latitude + '<br>Longitude: ' + longitude + '</pre>'}),
iconStyle = new ol.style.Style({
image: new ol.style.Circle({
radius: 5,
stroke: new ol.style.Stroke({
color: 'blue'
}),
fill: new ol.style.Fill({
color: [57, 228, 193, 0.84]
}),
})
});
iconFeature.setStyle(iconStyle);
straitSource.addFeature(iconFeature);
});
}// End of function showStraits()
addPointGeom(data);
</script>
</html>
