Показать метку и убрать маркер с карты - PullRequest
Новая
       4

Показать метку и убрать маркер с карты

0 голосов
/ 17 марта 2020

Я использую openStreetMap в моем приложении Angular 6, как показано ниже. Добавление маркера на карту работает нормально, но показывает метку маркера, если щелкнуть по нему не работает, и на самом деле я не знаю, почему. Также я понятия не имею, как удалить этот маркер или как отправляется событие, если маркер нажимается одним щелчком мыши. У кого-нибудь есть намеки, как я могу это сделать - я много пробовал, но безуспешно. 

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);
});
}

1 Ответ

0 голосов
/ 18 марта 2020

Для достижения цели вам понадобится пара функций:

  • . Для выбора функции вы можете использовать ol/interaction/Select, что позволит вам захватить событие по вашему выбору (один щелчок, щелчок, et c.), на карте и позволяет прослушивать, когда событие источника выбирается событием. Ссылки: OL API - выберите , OL. Примеры - выберите Функции
  • . Для всплывающего окна информации необходимо использовать ol/overlay, это виджет, привязанный к местоположению в карта. Ссылки: OL API - Наложения , Примеры OL - Icon Symbolizer
...