地理院地図で引いた線(GeoJSON)をReact-Leafletで表示する

国土地理院の地理院地図では線や面を引いたり, ポイントを追加する機能があります. そして, この内容をGISデータとして保存までできます.

GeoJSON形式はLeafletも対応しているので, これをReact-Leafletで表示してみます.

地図に作図する

地理院地図の使い方は少し古いですが, こちらのサイトが詳しいです.

https://www.lab-nemoto.jp/299/

とはいえ, 「ツール」を開けばすぐ使える程度には簡単です.

とりあえず東京駅周辺に適当に線を引いてみます.

作図した後にファイルへ保存しますが, 今回は保存形式をGeoJSONにします.

React-Leafletで表示する

保存した情報をReact-Leafletで表示するには, GeoJSONコンポーネントを使います.

ここではデータ取得にSWRを使っています.

import { MapContainer, TileLayer, GeoJSON } from 'react-leaflet'
import useSWR from 'swr'

export default function MainMap() {
  const fetcher = url => fetch(url).then(r => r.json())

  // GeoJSONを取得する
  const geoDataJSON = useSWR('data/sample_regulation.geojson', fetcher)
  if (geoDataJSON.error) return <div>情報の読み込みに失敗しました</div>
  if (!geoDataJSON.data) return <div>loading...</div>

  const style = {
    color: "#ff0000",
    weight: 5,
    opacity: 0.6
  }

  return (
    <MapContainer
      center={[35.6809591, 139.7673068]}
      zoom={13}
      style={{ height: "100vh", width: "100%" }}
      maxZoom={15}
      zoomControl={false}
    >
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <GeoJSON
        key="sample"
        data={geoDataJSON.data}
        style={style}
      />
    </MapContainer>
  )
}

これでこんな感じで表示されます.