Если вы импортируете стиль OL в styles.css, тогда вы решите свою проблему.
стиль. css
@import '~ol/ol.css';
Другой способ достижения этого это то, что @Mike предлагает в комментариях, добавив стиль OL к массиву styles в angular.json.
ОБНОВЛЕНИЕ
По сути, вам нужно две вещи для достижения что вы хотите:
- отключить по умолчанию
dblclick увеличить масштаб взаимодействия карты - прослушать карту
dblclick событие
Посмотрите на этом примере я сделал для вас,
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script>
<title>Add Markers</title>
</head>
<body>
<h2>Add Markers</h2>
<div class="map" id="map"></div>
<p id="log"></p>
<script type="text/javascript">
const vectorSource = new ol.source.Vector();
const vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: new ol.style.Style({
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({color: 'black'}),
stroke: new ol.style.Stroke({
color: 'white', width: 2
})
})
})
})
const map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
vectorLayer
],
view: new ol.View({
center: ol.proj.fromLonLat([-80, 35]),
zoom: 12
}),
interactions: ol.interaction.defaults({ doubleClickZoom: false })
});
map.on('dblclick', function(evt) {
const coord = map.getCoordinateFromPixel(evt.pixel);
vectorSource.addFeature(new ol.Feature({
geometry: new ol.geom.Point(coord)
}));
const coordll = ol.proj.toLonLat(coord);
document.getElementById('log').innerHTML +=
`Coord:${coordll[0].toFixed(2)} ${coordll[1].toFixed(2)}<br>`
console.log(`Coord:${coordll[0].toFixed(2)} ${coordll[1].toFixed(2)}`);
});
</script>
</body>
</html>