从GeoJson渲染标记

Question

我对这个问题有点绝望。我想在我的地图标记中显示来自GeoJSON(一个有效的GeoJson，它在 geojson.io 中工作(。这似乎很容易，但我看不出我的错误在哪里。我正在使用ngx-leaflet，我的代码是这样的：

map.component.html

<div leaflet
  [leafletOptions]="leafletOptions"
  [leafletBaseLayers]="baseLayers"
  [leafletLayersControlOptions]="layersControlOptions"
  (leafletMapReady)="onMapReady($event)">
</div>

map.component.ts

import { Component, OnInit } from '@angular/core';
import { MapService } from './services';
import * as L from 'leaflet';
import { Alteracion } from './dto/alteracion';
const layOsm: L.TileLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  maxZoom: 19,
  attribution: false,
  detectRetina: true
});
@Component({
  selector: 'map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss']
})
export class MapComponent implements OnInit {
  leafletOptions: L.MapOptions = {
    zoom: 6,
    center: L.latLng(40.4166395, -3.7046087)
  };
  baseLayers: {[layerName: string]: L.Layer} = {
    'OSM': layOsm
  };
  layersControlOptions: L.ControlOptions = { position: 'topright' };
  constructor(private mapService: MapService) { }
  ngOnInit() { }
  onMapReady(map: L.Map) {
    // L.Icon.Default.imagePath = 'assets/img/theme/vendor/leaflet/';
    setTimeout(() => {
      map.invalidateSize();
    }, 0);
    let alteraciones: any[];
      this.mapService.getListAlteraciones(11, 30).subscribe(
        result => {
          alteraciones = result;
        },
        err => console.log(err)
      );
    L.geoJSON(alteraciones, {pointToLayer: function (feature, latlng) {
        return L.marker([latlng]);
      }
    }).addTo(map);
  }
}

我在编译或控制台中没有收到任何错误.log，但我不知道我做错了什么。我尝试复制我在官方存储库中找到的一些示例，但我无法做到这一点。任何帮助将不胜感激。提前感谢！

编辑这是来自服务器的GeoJson的一部分：

{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[-6.40463,36.680111]},"properties":{"id_alteracion":"11_3210","tipo_alteracion":"11"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-6.374478,36.658933]},"properties":{"id_alteracion":"11_3127","tipo_alteracion":"14"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-6.359779,36.619801]},"properties":{"id_alteracion":"11_3172","tipo_alteracion":"11"}}...]}

Answer 1

最后，我发现了错误。事实证明，GeoJSON 是在服务器响应到达之前加载的，因此它没有绘制任何点。这样做终于奏效了。

   this.mapService.getListAlteraciones(11, 30).subscribe(
      result => {
        this.alteraciones = result;
        console.log(result);
        L.geoJSON(this.alteraciones).addTo(map); // <====
      },
      err => console.log(err)
    );