Angular - 开放层答案

【问题标题】：Angular - OpenlayersAngular - 开放层
【发布时间】：2020-04-05 20:00:08
【问题描述】：

我正在用有角度的 openlayers 构建地图，并且有一个问题是控制（用鼠标和鼠标双击缩放，放置标记）不起作用，代码 is here 我想放置单个标记并获得纬度和标记标记的经度我已经尝试过 ngx-openlayers 并且它解决了我提到的同样的控制问题我想知道除了 google 和 openlayers 之外是否有一个很好的带角度的地图 api，请告诉我并提供资源

【问题讨论】：

参见 github.com/openlayers/openlayers/issues/10732 将 "node_modules/ol/ol.css" 添加到 angular.json 的样式部分并删除 controls: [] 以便使用默认控件修复它。
在angular.json中添加bootstrap和ol.css后无法正常工作...可以edit保存
这对我有用stackblitz.com/edit/angular-q3hyay
感谢您的编辑...您建议如何放置标记并获取标记标记的纬度和经度
您可以查看 https://github.com/bayramucuncu/b3-ol-map 了解基于 openlayers 的 Angular 应用程序。

标签： angular openlayers

【解决方案1】：

如果你在styles.css中导入OL风格，那么你会解决你的问题。

style.css

@import '~ol/ol.css';

实现此目的的另一种方法是 @Mike 在 cmets 中建议的，将 OL 样式添加到 angular.json 中的 styles 数组。

更新

基本上，你需要两件事来实现你想要的：

禁用默认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>

【讨论】：

感谢您的建议，它工作正常...您建议如何放置标记并获取标记标记的纬度和经度？