反応リーフレットで使用するためにラップされた Leaflet.VectorTileLayer。オーバーレイにはこれらのタイル レイヤーが多数あり、他のいくつかのレイヤーは、react-leaflet の GeoJSON コンポーネントを使用して直接 json データをインポートします。すべてが正常に機能しますが、最初に geojson レイヤーを読み込むと、ベクター タイル レイヤーの対話性が失われます。レイヤーの読み込みは正常ですが、クリック可能ではないか、その他のスタイル オプションがマップにレンダリングされません。geojson レイヤーをロードしなくても、機能しています。
コードでの簡単な使用法:
<Overlay name="Turkey Counties">
<TRCountiesGeoJSON ref="TRCountiesGeoJSON" />
</Overlay>
<Overlay name="Sentinel-2 Grid">
<WrappedVectorTileLayer {...sentineloptions}
// onClick={function (layer) {
// console.log("layer: ", layer);
// }}
onClick={(e) => this.handleSentinelGridClick(e)}
url={this.state.geojsonUrl + "/sentinel2grid/{z}/{x}/{y}.pbf"}
/>
</Overlay>
ベクター タイルの実装は @willfalconer のリポジトリから取得しました