Javascript (C3, D3_地図のお試し02)

■国土地理院サイトのGMLのxmlファイルから表示。
国土地理院のサイトに基盤地図情報という地図データを公開しているところがあったので、そのデータから表示ができない試してみた。GML（Geography Markup Language）形式というxmlベースのデータになる。

まず、ユーザ登録してデータをダウンロード。日本をメッシュ状に分割した区画ごとにデータをダウンロードすることができるけど、日本全体では大量のデータになるので1区画だけ。ファイル名は、FG-GML-523607-Cstline-20250701-0001.xmlのような感じ（これは海岸線のデータ）。

次にGMLデータをGeojson拡張子のファイルに変換。GDALというソフトをダウンロードして下のコマンドを実行する。インストール先は C:\Program Files\GDAL 配下にしたので、ここにパスを通す（環境設定からPathへ登録）。他にもPROJ_LIBなどの環境変数を設定。

ogr2ogr -f GeoJSON -t_srs EPSG:4326 output.geojson FG-GML-513777-AdmPt-20250701-0001.xml

これで output.geojson ファイルが出力されたので、さらに下のコードのスクリプトで読み込み（コードはChat GPTで生成）。

<script>
(async function () {
    const width = 800, height = 1000;

    const svg = d3.select("#map")
        .append("svg")
        .attr("viewBox", [0, 0, width, height]);

    // GeoJSON 読み込み
    // const geoRaw = await d3.json("admpt4.geojson");
    const geoRaw = await d3.json("output.geojson");

    // 座標が存在するものだけを処理
    const geo = {
        type: "FeatureCollection",
        features: geoRaw.features
            .filter(f => f.geometry && f.geometry.coordinates)
            .map(f => {
                const geom = f.geometry;
                // LineString と Point の場合
                if (geom.type === "LineString") {
                    return {
                        ...f,
                        geometry: {
                            ...geom,
                            coordinates: geom.coordinates.map(coord => [coord[1], coord[0]])
                        }
                    };
                } else if (geom.type === "Point") {
                    return {
                        ...f,
                        geometry: {
                            ...geom,
                            coordinates: [geom.coordinates[1], geom.coordinates[0]]
                        }
                    };
                } else {
                    // MultiLineString などはそのまま返す
                    return f;
                }
            })
    };

    // 投影と path 作成
    const projection = d3.geoMercator()
        .fitSize([width, height], geo);

    const path = d3.geoPath().projection(projection);

    // 線を描画
    svg.append("g")
        .selectAll("path")
        .data(geo.features)
        .join("path")
        .attr("d", path)
        .attr("fill", "none")
        .attr("stroke", "blue")
        .attr("stroke-width", 1);
})();
</script>

結果が下。

上の図は愛知県の赤枠部分あたり。

これだけ細かい地図表示ができれば便利だろうけど、すべての区画をダウンロード、処理しては時間がかかりすぎる。
別の方法として、地理院地図Vectorというサイトで地図の編集を行いjsonデータとして保存もできるよう。このデータから表示ができないか見てみたい。