angular - 如何使用 ngx-leaflet( Angular 方式)创建矢量图 block map ？

Question

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

我正在使用 ngx-leaflet作为 map 。 我希望使用矢量而不是栅格 创建 map 。 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. 加载您的矢量图 block ，例如:

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