从GeoJson渲染标记

Posted 2021-04-13

我对这个问题有点绝望。我想在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"}}...]}

答案

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

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