angular - 如何使用 ngx-leaflet（Angular 方式）创建矢量图块地图？

Question

有什么好的推荐的 Angular 6+ 支持的库可以用来完成以下任务吗？

我使用ngx-leaflet作为地图。我希望使用Vectors 而不是 Rasters创建地图。我知道 Leaflet 默认不支持矢量图块，但是，您可以通过mapbox-gl-leaflet插件来完成。

任何人都可以向我推荐一种方法或适当的库来使用 Angular 6+ 完成这项任务吗？

Answer 1

您可以使用Leaflet.VectorGrid 插件。请参阅ngx-leaflet-starter和相关的演示。

1. 通过安装它yarn add leaflet.vectorgrid

2. 创建定义要使用的 API 的绑定文件，例如： src/typings/leaflet.vectorgrid.d.ts

   import * as L from "leaflet";
   
   declare module "leaflet" {
     namespace vectorGrid {
       export function slicer(data: any, options?: any): any;
     }
   }
   

3. 加载您的矢量图块，例如：

   // add import statement
   import * as L from "leaflet";
   // then call...
   loadGeojson() {
       this.http.get("assets/airports.min.geojson").subscribe(result => {
               this.vtLayer = L.vectorGrid.slicer(result, {
                 zIndex: 1000
               });
               this.vtLayer.addTo(this.map);
       });
   }