Leaflet JS TypeError: Невозможно прочитать свойство 'addLayer' из null

Question

Я создаю карту на Leaflet JS + Mapbox.Пытаюсь выделить мои регионы визуально.У меня есть код, который закрашивает мои регионы моим geoJSON, который я создал.Но когда я написал код для выделения моих регионов при mousover, у меня возникла ошибка TypeError: Cannot прочитать свойство addLayer, равное null.

Мой код

Попытка рефакторинга моего кода с помощью листовки.

import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {Subscription} from 'rxjs';
import {MapService} from '../../src/app/core/shared/services/map.service'

import * as L from 'leaflet';
import 'leaflet-routing-machine';
import 'leaflet-providers';
import {style} from "@angular/animations";

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

  @ViewChild('mapWrapper')
  mapWrapper: ElementRef;

  zoom = 6;

  /* Regions */
  regionsGeoJsonSubscription$: Subscription;
  regionsGeoJson: any;


  constructor(private mapService: MapService) {
  }

  title = 'leaflet-routing-sample';

  private map: L.Map = null;
  private geojson = null;


  style(featurecollection) {
    return {
      fillColor: '#99d8c9' ,
      weight: 2,
      opacity: 1,
      color: 'white',
      dashArray: '3',
      fillOpacity: 0.7
    };
  }

  ngOnInit() {

    this.regionsGeoJsonSubscription$ = this.mapService.getRegionsGeoJson()
      .subscribe(regionsGeoJson => {
          this.regionsGeoJson = regionsGeoJson;
          //this.regionsGeoJsonLoaded = Object.keys(this.regionsGeoJson).length > 0;
          //this.statisticsEnabled = true;
        this.map = L.map('map')
          .setView([55.744100, 37.627027], 13);

        L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=mytoken', {
          id: 'mapbox.light',
          attribution: null
        }).addTo(this.map)

        L.geoJson(this.regionsGeoJson, {style: this.style}).addTo(this.map);
        }
      );

    function highlightFeature(e) {
      this.layer = e.target;

      this.layer.setStyle({
        weight: 5,
        color: '#666',
        dashArray: '',
        fillOpacity: 0.7
      });

      if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
        this.layer.bringToFront();
      }
    }

    function resetHighlight(e) {
      this.geojson.resetStyle(e.target);
    }

    function zoomToFeature(e) {
      this.map.fitBounds(e.target.getBounds());
    }



    function onEachFeature(feature, layer) {
      this.layer.on({
        mouseover: highlightFeature,
        mouseout: resetHighlight,
        click: zoomToFeature
      });
    }

    this.geojson = L.geoJson(this.regionsGeoJson, {
      style: style,
      onEachFeature: onEachFeature
    }).addTo(this.map);

  }

}

Моя карта и DevTools

Answer 1

Благодаря Жюльен Метрал , он направил меня к моему решению.Итак, вот оно:

ngOnInit() {

this.regionsGeoJsonSubscription$ = this.mapService.getRegionsGeoJson()
  .subscribe(regionsGeoJson => {
      this.regionsGeoJson = regionsGeoJson;
    this.map = L.map('map')
      .setView([55.744100, 37.627027], 6);

    function highlightFeature(e) {

      const layer = e.target;

      layer.setStyle({
        weight: 5,
        color: '#666',
        dashArray: '',
        fillOpacity: 0.7
      });

      if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
        layer.bringToFront();
      }
    }

    function resetHighlight(e) {
      this.geojson.resetStyle(e.target);
    }

    function zoomToFeature(e) {
      this.map.fitBounds(e.target.getBounds());
    }


    function onEachFeature(feature, layer) {
      layer.on({
        mouseover: highlightFeature,
        mouseout: resetHighlight,
        click: zoomToFeature
      });
    }

    this.geojson = L.geoJson(this.regionsGeoJson, {
      style: this.style,
      onEachFeature: onEachFeature
    }).addTo(this.map);

    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=mytoken', {
      id: 'mapbox.light',
      attribution: null
    }).addTo(this.map)

    }
  );
}

Answer 2

до onEachFeature у вас есть:

this.geojson = L.geoJson(this.regionsGeoJson, {
    style: style,
    onEachFeature: onEachFeature
}).addTo(this.map);

На данный момент эта карта не инициализирована и является нулевой, а когда вы вызываете метод addTo, она внутренне делает map.addLayer(this);

РЕДАКТИРОВАТЬ:

Вы пропустили что-то в вашей onEachFeature функции:

function onEachFeature(feature, layer) {
    layer.on({
        mouseover: highlightFeature,
        mouseout: resetHighlight,
        click: zoomToFeature
    });
}

это layer.on не this.layer.on, потому что у вас нет никакой переменнойслой в вашем текущем классе, это переменная слоя, которая передается в функцию.