0

我在这个例子中使用了ngx-leaflet 教程中的模板。我是 Angular 的初学者，对 Leaflet.js 知之甚少，仅供参考。

我有一个大型的多多边形 geoJSON 文件，我想在地图上显示并最终添加交互性。我已将assets目录中的文件保存为china_adm1.geojson.

app.component.html好像：

<div class="map"
     leaflet
     [leafletOptions]="options"
     [leafletLayers]="china"
     [leafletLayersControl]="layersControl"
>
</div>

看起来app.component.ts像：

import { Component } from '@angular/core';
import { geoJSON, latLng, tileLayer } from 'leaflet';
import { adm1 } from '../assets/china_adm1';

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

  china = geoJSON(adm1);

  // Define our base layers so we can reference them multiple times
  googleMaps = tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
    maxZoom: 20,
    subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
    detectRetina: true
  });

  googleHybrid = tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}', {
    maxZoom: 20,
    subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
    detectRetina: true
  });

  options = {
    layers: [ this.googleMaps ],
    zoom: 3, 
    center: latLng(0, 0)
  };

  layersControl = {
    baseLayers: {
      "Google": this.googleMaps,
      "Hybrid": this.googleHybrid
    },
    overlays: {
      "China Polygon": this.china
    }
  };
}

当我使用上面的代码运行应用程序时，Google 底图显示得很好，但是没有 layersControl 面板。当我删除 layersControl 代码的整个overlays部分时，控制面板会按预期显示。关于加载/显示中国地区 geoJSON，我缺少一些东西。请注意，在 中import { adm1 } from '../assets/china_adm1，我是任意定义adm1的，所以也许这就是问题所在。我也尝试过this.china在图层选项中包含this.googleMaps.

在leaflet.js 中，它就像L.geoJson(adm1).addTo(map);我定义adm1的那样简单

var adm1 = {"type": "FeatureCollection",
"name": "china_adm1", ...}

在geojson文件中。我不确定如何正确定义和引用 ngx-leaflet 中的 geojson 文件。

4

0 回答 0