首页 > 解决方案 > geojson-vt 与 react-leaflet

问题描述

有没有人有一个使用 geojson-vt 的 react-leaflet 项目的准系统 repo 的例子?

我有一个有 13 MB geoJSON 文件的 react-leaflet 项目。我不知道如何使用 react-leaflet 的 geojson 标签让它更快地呈现。我希望 geojson-vt 是答案。

标签: reactjsleafletgeojsonreact-leaflet

解决方案


/**
 * @file Component to render geojson as vector tile with `geojson-vt`.
 * @name GeoJSONVtLayer.js
 */
import L from "leaflet";
import {
  createTileLayerComponent,
  updateGridLayer,
  withPane,
} from "@react-leaflet/core";
import geojsonvt from "geojson-vt";
window.geojsonvt = geojsonvt;
// eslint-disable-next-line import/first
import {} from "leaflet-geojson-vt";

export const GeoJSONVtLayer = createTileLayerComponent(function createGridLayer(
  { geoJSON, ...options },
  context
) {
  return {
    instance: L.gridLayer.geoJson(geoJSON, withPane(options, context)),
    context
  };
},
updateGridLayer);

演示


推荐阅读