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

}

我在编译或 console.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)
    );

从 GeoJson 渲染标记

Render markers from GeoJson

geojson

leaflet

angular

ngx-leaflet