如何使用 ngx-leaflet(Angular 方式)创建矢量图块地图? [英] How to create a vector tiles map with ngx-leaflet (Angular way)?

问题描述

有什么好的推荐的 Angular 6+ 支持库，可用于完成以下任务?

Any good recommended angular 6+ supported libraries which can be used to accomplish the following task?

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

I'm using ngx-leaflet as the Map. I wish to create the map with Vectors rather than Rasters. I know that Leaflet doesn’t support vector tiles by default, however, you can accomplish via mapbox-gl-leaflet plugin.

谁能推荐我一种方法或适当的库来使用 Angular 6+ 完成这项任务?

Can anyone recommend me an approach or an appropriate library to accomplish this task using angular 6+?

推荐答案

你可以使用 Leaflet.VectorGrid 插件.参见 ngx-leaflet-starter 以及相关的demo.

You may use Leaflet.VectorGrid plugin. See ngx-leaflet-starter and the associated demo.

1. 通过 yarn add leaflet.vectorgrid
安装

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

1. Install it via yarn add leaflet.vectorgrid

2. Create binding file src/typings/leaflet.vectorgrid.d.ts defining API you want to use, eg:

import * as L from "leaflet";

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

加载您的矢量图块，例如:

Load your vector tiles, for instance:

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

这篇关于如何使用 ngx-leaflet(Angular 方式)创建矢量图块地图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！