Как создать векторную карту тайлов с помощью ngx-leaflet (Angular way)?

Question

Какие-нибудь хорошие рекомендованные библиотеки угловых 6+, которые можно использовать для выполнения следующей задачи?

Я использую ngx-leaflet в качестве карты.Я хочу создать карту с векторами, а не растрами . Я знаю, что Leaflet по умолчанию не поддерживает векторные плитки , однако вы можете выполнить это с помощью плагина mapbox-gl-leaflet .

Может кто-нибудь порекомендовать мне подходили соответствующую библиотеку для выполнения этой задачи, используя угловой 6 +?

Answer 1

Вы можете использовать Leaflet.VectorGrid плагин .См. ngx-leaflet-starter и соответствующую demo .

1. Установите его с помощью yarn add leaflet.vectorgrid

2. Создать связующий файл 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);
       });
   }