tsxを使ってreact-leafletのGeoJSONを使う
tsxを使わなければ問題は起きないと思います。
データ
geo jsonは以下から取得しました。
やったこと
単純に以下のようにすると動かないです。
import topo_data from './res/tokyo_topo.json'; // 中略 export const GeoJSONLayer = (props: Props) => { return ( <GeoJSON data={props.data} /> ); };
問題自体に関してはissueのほうが詳しいです。
試しに以下を
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0b5bfba2994c91a099cd5bcfd984f6c4c39228e5/types/geojson/index.d.ts#L58
以下のように変更すると、正常にGeoJSONのレイヤーが表示されます。
type: GeoJsonTypes|string;
Widening Literal Typesが原因のようです。
どのみちgeo jsonでは重すぎるのでtopojsonにしたいので、以下のようにしました。
export const TopoJSONLayer = (props: Props) => { return ( <MapConsumer> {(map) => { const layer = L.geoJSON().addTo(map); if (props.data.type != "Topology") { return null; } for (const key in props.data.objects) { if (!props.data.objects.hasOwnProperty(key)) { continue; } const geojson: GeoJsonObject = topojson.feature(props.data, props.data.objects[key]); layer.addData(geojson); } return null; }} </MapConsumer> ); };