时间戳

首页 > 解决方案 > 显示标签并从地图中删除标记

angular - 显示标签并从地图中删除标记

问题描述

我在我的 Angular 6 应用程序中使用 openStreetMap，如下所示。向地图添加标记可以正常工作，但如果单击它不起作用，则显示标记的标签，实际上我不知道为什么。另外，我不知道如何删除此标记或单击单击标记时如何发送事件。有没有人暗示我该怎么做 - 我尝试了很多但没有成功。

ngOnInit() {
this.map = new ol.Map({
  target: 'map',
  controls: ol.control.defaults({
    attributionOptions: {
      collapsible: false
    }
  }),
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([this.latitude, this.longitude]),
    zoom: 10
  })
});

var that = this;
this.map.on('dblclick', function (args) {
  var lonlat = ol.proj.transform(args.coordinate, 'EPSG:3857', 'EPSG:4326');
  var lon = lonlat[0];
  var lat = lonlat[1]; 

  const feature1 = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.fromLonLat([lon, lat])),
    labelPoint: new ol.geom.Point(ol.proj.fromLonLat([lon, lat])),
    sname: 'My Marker 1'
  });
  const feature2 = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.fromLonLat([lon+1, lat+1])),
    labelPoint: new ol.geom.Point(ol.proj.fromLonLat([lon+1, lat+1])),
    sname: 'My Marker 2'
  });
  let features = [];
  features.push(feature1);
  features.push(feature2); 

  var layer = new ol.layer.Vector({
      source: new ol.source.Vector({
          features: features
        }),
      style: new ol.style.Style({
          image: new ol.style.Icon({
            anchor: [0.5, 0.5],
            anchorXUnits: "fraction",
            anchorYUnits: "fraction",
            src: "assets/img/marker.png"
          })
        })
    });
  that.map.addLayer(layer);
});
}

标签： angularopenstreetmap

解决方案

您将需要几个功能来实现您的目标，

  • 对于选择您可以使用的功能ol/interaction/Select，基本上让您在地图上捕获您选择的事件（单击、单击等），并让您在事件选择源的功能时进行监听。链接： OL API - 选择， OL 示例 - 选择功能
  • 对于您需要使用的信息弹出ol/overlay窗口，是绑定到地图中某个位置的小部件。链接： OL API - 覆盖， OL 示例 - 图标符号器

推荐阅读