Поместите всплывающее окно в точку, полученную из запроса на выборку (ответ GeoJSON) - PullRequest
Новая
       8

Поместите всплывающее окно в точку, полученную из запроса на выборку (ответ GeoJSON)

0 голосов
/ 01 июня 2018

Я программирую карту с помощью OpenLayers (4.6.5) и Angular (6).Я использую французский API , который позволяет строить запросы следующим образом: https://api-adresse.data.gouv.fr/reverse/?lon=2.37&lat=48.357.Моя цель - заменить lon и lat реальными координатами клиента с помощью геолокации браузера.То, что я могу сделать.

Я использовал в предыдущем проекте некоторые функции, позволяющие мне создавать всплывающее окно с информацией, содержащейся в статическом файле GeoJSON (без адаптируемых запросов), и это работало, но в этом случаеэто не.Я предполагаю, что файл GeoJSON не используется функцией, потому что я получаю эту ошибку:

ERROR TypeError: Cannot set property 'innerHTML' of null

Код: 

import { Component, OnInit } from '@angular/core';

import Map from 'ol/map';
import WMS from 'ol/source/tilewms';
import TileLayer from 'ol/layer/tile';
import View from 'ol/view';
import OSM from 'ol/source/osm';
import VectorLayer from 'ol/layer/vector';
import VectorSource from 'ol/source/vector';
import Geolocation from 'ol/geolocation';
import GeoJSON from 'ol/format/geojson';
import proj from 'ol/proj';
import Style from 'ol/style/style';
import IconStyle from 'ol/style/icon';
import $ from 'jquery';
import Overlay from 'ol/overlay';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

map: Map;
view: View;
locationSource: VectorSource;
vectorLayerLocation: VectorLayer;
loc: Style;
popup: Overlay;

  constructor() {
  }

  getLocation() {

    var geolocation = new Geolocation({
      projection: this.view.getProjection()
    });

    geolocation.setTracking(true);

    geolocation.on('change:position', () => {
      var [longitude, latitude] = proj.toLonLat(geolocation.getPosition());
      fetch(`https://api-adresse.data.gouv.fr/reverse/?lon=${longitude}&lat=${latitude}`).then(response => response.json())
        .then(json => {
          var features = (new GeoJSON()).readFeatures(json, <any> {
            featureProjection: 'EPSG:3857'
          })
          var coordinates = geolocation.getPosition();
          this.locationSource.clear();
          this.locationSource.addFeatures(features);
          var pos = geolocation.getPosition();
          this.view.setCenter(pos);
          console.log(this.locationSource.getFeatures()[0].getProperties());
        });
    });
  }

  ngOnInit() {

    this.loc = new Style({
      image: new IconStyle(({
        anchor: [0.5, 46],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        src: 'assets/image/adresse.png'
      }))
    });

    this.view = new View({
      center: [0, 0],
      maxZoom: 19,
      zoom: 10
    });

    this.map = new Map({
      target: 'map',
      layers: [
        new TileLayer({
           source: new OSM()
        })
      ],
      view: this.view

    });

    this.locationSource = new VectorSource();

    this.vectorLayerLocation = new VectorLayer({
      source: this.locationSource,
      style: this.loc
    });

    this.map.addLayer(this.vectorLayerLocation);

    $('#bouton_loc').on('click', function(){
      $('#bouton_loc').attr("disabled", true);
    });

    //popup

    var element = document.getElementById('popup');

    this.popup = new Overlay({
      element: element,
      autoPan: true,
      offset: [0, -30]
    });

    //Display popups

    var content_element = document.getElementById('popup-content');

    this.map.on('click', evt => {

    var feature = this.map.forEachFeatureAtPixel(evt.pixel,
      function(feature) {
        return feature;
      });
    if (feature) {
      var geometry = feature.getGeometry();
      var coord = geometry.getCoordinates();

      if(feature.get('label') != null) {
        var content = '<h2>' + 'Adress : ' + feature.get('label') + '</h2>';
      }

      if(feature.get('context') != null) {
        content += '<h2>' + 'Region : ' + feature.get('context') + '</h2>';
      }

      content_element = document.getElementById('popup-content');
      content_element.innerHTML = content;
      this.popup.setPosition(coord);

      var closer = document.getElementById('popup-closer');

      closer.onclick = () => {
        this.popup.setPosition(undefined);
        closer.blur();
        return false;
      };
    }
  });

    this.map.on('pointermove', (e) => {
    if (e.dragging) {
      return;
    };
    var pixel = this.map.getEventPixel(e.originalEvent);
    var hit = this.map.hasFeatureAtPixel(pixel);

    this.map.getViewport().style.cursor = hit ? 'pointer' : '';
    });

  }

}

1 Ответ

0 голосов
/ 01 июня 2018

ERROR TypeError: Cannot set property 'innerHTML' of null

Эта ошибка означает, что элемент, который вы пытаетесь установить innerHTML, не существует.

Наложение всплывающего окна определено, но никогда не добавляется на карту.

...