Openlayers 3: невозможно выбрать функцию в приложении Angular 5 - PullRequest
Новая
       7

Openlayers 3: невозможно выбрать функцию в приложении Angular 5

0 голосов
/ 09 ноября 2018

Я бы хотел выбрать функцию в Openlayers 3 в своем приложении Angular 5. При нажатии на функцию я получаю странное сообщение:

core.js: 1449 ОШИБКА TypeError: Невозможно прочитать свойство 'call' из неопределенного

Я должен использовать Openlayers3 (а не более новую версию).

Мой HTML-код: 

<div #mapElement id="map" class="map"></div>

Код компонента: 

import {AfterViewInit, Component, ElementRef, ViewChild, OnInit} from '@angular/core';
declare var ol: any;

@Component({
  selector: 'app-taba-features',
  templateUrl: './taba-features.component.html',
  styleUrls: ['./taba-features.component.css']
})
export class TabaFeaturesComponent implements AfterViewInit {
  @ViewChild('mapElement') mapElement: ElementRef;
  public map: any;

  constructor() {
    // building a feature 'thing'
    const vectorSource = new ol.source.Vector({});
    const thing = new ol.geom.Polygon([[
      ol.proj.transform([6.12, 52.23], 'EPSG:4326', 'EPSG:3857'),
      ol.proj.transform([6.125, 52.24], 'EPSG:4326', 'EPSG:3857'),
      ol.proj.transform([6.13, 52.23], 'EPSG:4326', 'EPSG:3857')
    ]]);
    const featurething = new ol.Feature({
      name: 'Thing',
      geometry: thing
    });
    vectorSource.addFeature(featurething);
    // building the map
    const twello = ol.proj.transform([6.11, 52.23], 'EPSG:4326', 'EPSG:3857');
    const osmlayer = new ol.layer.Tile({
      source: new ol.source.OSM()
    });
    const view = new ol.View({
      center: twello,
      zoom: 15
    });
    this.map = new ol.Map({
      layers: [osmlayer,
        new ol.layer.Vector({
          source: vectorSource
        })],
      view: view
    });

    const that = this;
    this.map.on('click', function (evt) {
      const pixel = [evt.pixel];
      that.map.forEachFeatureAtPixel(pixel[0], pixel[1], function (feature, layer) {
        console.log('Hit'); // *** show feature name? 
      });
    });
  }

  ngAfterViewInit() {
    this.map.setTarget(this.mapElement.nativeElement.id);
  }
}

1 Ответ

0 голосов
/ 10 ноября 2018

Решение первое : 

const that = this;
this.map.on('click', function(evt) {
   const pixel = evt.pixel;
   let selectedFeatures = 'Features: ';
   that.map.forEachFeatureAtPixel(pixel, function(feature, layer) {
      selectedFeatures += ' Region: ' + feature.get('N3NM');
      });
   document.getElementById('status').innerHTML = selectedFeatures;
 });

A второе решение: 

const selectSingleClick = new ol.interaction.Select();
selectSingleClick.on('select', function (e) {
  let features = [];
  let selectedFeatures = 'Features: ';
  features = e.target.getFeatures().getArray();
  for (let i = 0; i < features.length; i++) {
     selectedFeatures += ' Region: ' + features[i].get('N3NM');
  }
  document.getElementById('status').innerHTML = selectedFeatures;
});
...