Leaflet JS TypeError：无法读取null的属性“addLayer”

Question

我正在Leaflet JS + Mapbox上创建地图。试图在视觉上突出我的区域。我有代码，用我创建的geoJSON绘制我的区域。但是当我编写用于在mousover上突出显示我的区域的代码时，我有一个TypeError：无法读取null的属性'addLayer'。

我的守则

尝试使用传单doc重构我的代码。

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

  }

}

My map and DevTools

Answer 1

在onEachFeature之前你有：

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

在这一刻，这个地图没有被初始化并且是null，当你调用addTo方法时，它是internaly做map.addLayer(this);

编辑：

你在onEachFeature函数中错过了一些东西：

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

它是layer.on而不是this.layer.on，因为你当前的类中没有任何变量图层，它是传递给函数的图层变量。

Answer 2

感谢Julien Metral，他指导我解决问题。所以，这里是：

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)

    }
  );
}