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

Question

有没有好的推荐的支持角度的6+库，可以用来完成以下任务？

我正在使用ngx-leaflet作为地图。 我希望使用矢量而不是栅格创建地图。 I know that Leaflet doesn’t support vector tiles by default，但是，您可以通过mapbox-gl-leaflet插件来完成。

有人可以推荐我一种方法或适当的库以使用angular 6+完成此任务吗？

Answer 1

您可以使用Leaflet.VectorGrid plugin。请参阅ngx-leaflet-starter和相关的demo。

1. 通过yarn add leaflet.vectorgrid
安装

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

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