Angular - 开放层

Question

I'm building map with openlayers in angular and there's a problem that controls (zoom with mouse and mouse double click, put marker) don't work and the code is here i want to put single marker and get latitude and longitude of marked marker I have tried ngx-openlayers and it does the same problem of controls i mention I was wonder if there is a good map api with angular except google and openlayers tell me and a resource to it please我正在使用 angular 中的 openlayers 构建 map 并且存在控制问题（用鼠标和鼠标双击缩放，放置标记）不起作用，代码在这里我想放置单个标记并获取标记标记的纬度和经度我已经尝试过 ngx-openlayers 并且它确实有同样的控制问题我提到我想知道是否有一个好的 map api 和 angular 除了请告诉我谷歌和打开资源

Answer 1

If you import OL style in styles.css then you will solve you problem.如果你在styles.css中导入 OL 风格，那么你会解决你的问题。

style.css样式.css

@import '~ol/ol.css';

Another way of achieving this is what @Mike suggest in the comments, adding the OL style to styles array in angular.json .实现此目的的另一种方法是@Mike 在评论中建议，将 OL 样式添加到styles angular.json中。

UPDATE更新

Basically, you need two things to achieve what you want:基本上，你需要两件事来实现你想要的：

disable default dblclick zoom-in interaction of the map禁用 map 的默认dblclick放大交互
listen to map dblclick event监听 map dblclick事件

Take a look at this example I made for you,看看我为你做的这个例子，

 <: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>

Angular - 开放层

问题描述

1 个解决方案

解决方案1
0 2020-04-04 01:59:36

Angular - 开放层

问题描述

1 个解决方案

解决方案1 0 2020-04-04 01:59:36

解决方案1
0 2020-04-04 01:59:36