MapLibreで距離・面積計測コントロールを作成

1. はじめに

地図上で距離や面積を計測できるツールは、地理情報を扱う上で非常に便利です。今回は、MapLibreを用いて簡単に距離・面積を計測する機能を作成し、その使い方を紹介します。この計測ツールは以下のページからお試しいただけます。

2. 便利なポイント

直感的操作: 地図上をクリックするだけで簡単に距離や面積を計測可能。

地理院地図と統合: 国土地理院の淡色地図を利用して、正確な測定を実現。

リアルタイム更新: 測定結果がすぐに表示されるため、即座に確認できます。

3. 機能説明

以下の機能を備えています。

距離計測: 任意の地点をクリックし、直線距離を測定。

面積計測: 三点以上を選択して多角形の面積を計算。

クリア機能: 計測結果をリセットし、再測定可能。

4. HTMLコード

HTML・CSS・JSダウンロード:
ダウンロード

<div id="map"></div>

<div id="panel">

    <button id="toggle-panel">計測メニュー</button>

    <div id="panel-content">

        <div id="tabs">

            <button id="tab-distance" class="active">距離計測</button>

            <button id="tab-area">面積計測</button>

        </div>

        <div id="distance-content" class="content active">

            <p>距離: <span id="distance">0 m</span></p>

            <button id="clear-distance">クリア</button>

        </div>

        <div id="area-content" class="content">

            <p>面積: <span id="area">0 m²</span></p>

            <p>周長: <span id="perimeter">0 m</span></p>

            <button id="clear-area">クリア</button>

        </div>

    </div>

</div>

5. JavaScriptコード

const map = new maplibregl.Map({

    container: 'map',

    style: {

        version: 8,

        sources: {

            "gsi-blank": {

                type: "raster",

                tiles: ["https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png"],

                tileSize: 256,

                attribution: "地図データ © 国土地理院"

            }

        },

        layers: [{

            id: "gsi-blank-layer",

            type: "raster",

            source: "gsi-blank"

        }]

    },

    center: [139.6917, 35.6895],

    zoom: 5

});



// 距離計測の更新関数

function updateLine() {

    if (lineCoordinates.length > 1) {

        const line = turf.lineString(lineCoordinates);

        const distance = turf.length(line, { units: 'meters' });

        distanceDisplay.innerText = `${distance.toFixed(2)} m`;

    }

}



// 面積計測の更新関数

function updatePolygon() {

    if (polygonCoordinates.length > 2) {

        const polygon = turf.polygon([[...polygonCoordinates, polygonCoordinates[0]]]);

        const area = turf.area(polygon);

        const perimeter = turf.length(turf.lineString([...polygonCoordinates, polygonCoordinates[0]]), { units: 'meters' });

        areaDisplay.innerText = `${area.toFixed(2)} m²`;

        perimeterDisplay.innerText = `${perimeter.toFixed(2)} m`;

    }

}

6. CSSコード

body {

    margin: 0;

    padding: 0;

}

#map {

    position: absolute;

    top: 0;

    bottom: 0;

    width: 100%;

}

#panel {

    position: absolute;

    top: 10px;

    left: 10px;

    z-index: 100;

}

#toggle-panel {

    background: #0078d7;

    color: white;

    border: none;

    padding: 10px;

    cursor: pointer;

    border-radius: 5px;

}

7. 結論

この計測ツールを活用することで、MapLibreを使った地図操作がさらに便利になります。特に距離や面積の計測を直感的に行いたい場合に役立ちます。
#MapLibre #距離計測 #面積計測 #地図ツール #国土地理院 #GIS #WebGIS #地理情報 #JavaScript #地図開発 #オープンソース