https://jin-igarashi.me/ja/tags/javascript/JavaScriptWowchemy (https://wowchemy.com)ja-JP©Jin IGARASHI 2026Sun, 01 Sep 2024 00:00:00 +0900https://jin-igarashi.me/media/icon_hua67609e7cec176748a23eb15cc956f1a_21755_512x512_fill_lanczos_center_2.pnghttps://jin-igarashi.me/ja/tags/javascript/https://jin-igarashi.me/ja/project/202409-maplibre-gl-terradraw/Sun, 01 Sep 2024 00:00:00 +0900https://jin-igarashi.me/ja/project/202409-maplibre-gl-terradraw/<p><strong>期間:</strong> 2024年9月 〜 現在</p> <p><strong>リンク:</strong> <a href="https://github.com/watergis/maplibre-gl-terradraw" target="_blank" rel="noopener">GitHub (watergis/maplibre-gl-terradraw)</a> · <a href="https://github.com/JamesLMilner/terra-draw" target="_blank" rel="noopener">Terra Draw</a> · <a href="https://workshops.terradraw.water-gis.com/" target="_blank" rel="noopener">Terra Drawワークショップ</a></p> <h2 id="背景">背景</h2> <p>MapboxとMapLibreでは長い間、描画機能に<a href="https://github.com/mapbox/mapbox-gl-draw" target="_blank" rel="noopener">mapbox-gl-draw</a>が使われてきました。しかし現在は活発にメンテナンスされておらず、MapLibreで使うことが難しくなってきています。<a href="https://github.com/JamesLMilner/terra-draw" target="_blank" rel="noopener">Terra Draw</a>は主要なWeb地図ライブラリ（MapLibre、Mapbox、Leaflet、OpenLayers、Google Maps、ArcGIS）に対して統一されたAPIを持つ描画ライブラリですが、その機能をMapLibreで最大限に活用するには多くの設定が必要です。</p> <h2 id="開発したもの">開発したもの</h2> <p>1行のコードで設定済みの描画機能を追加できるMapLibreプラグイン <strong>maplibre-gl-terradraw</strong> を開発しました。</p> <pre><code class="language-js">map.addControl(new MaplibreTerradrawControl()) </code></pre> <ul> <li>アイコン設定済みのTerra Drawの全描画モード（ポイント、ライン、ポリゴン、矩形、円、フリーハンドなど）</li> <li>地物の選択・編集・削除、描画した地物のダウンロード</li> <li>Terra Drawのオプションやスタイルのカスタマイズ</li> <li><strong>計測コントロール</strong>: ラインの距離やポリゴンの面積の計測、ラスタDEM（MapLibre Terrain、TerrainRGB、Terrarium）からの標高取得</li> </ul> <p>Terra Draw本体へのコントリビュートや、開発者向けハンズオンワークショップ教材のメンテナンスも行っています。</p> <h2 id="発表ワークショップ">発表・ワークショップ</h2> <ul> <li><a href="../../talk/20250718_foss4g2025/">FOSS4G Europe 2025 Mostar: maplibre-gl-terradraw - new drawing plugin for maplibre-gl-js</a></li> <li><a href="../../talk/20251118_foss4g2025_terradraw_workshop/">FOSS4G 2025 Auckland: Terra Drawワークショップ</a></li> <li><a href="../../talk/20251119_foss4g2025_maplibre-gl-terradraw/">FOSS4G 2025 Auckland: maplibre-gl-terradraw - new drawing plugin for maplibre-gl-js</a></li> <li><a href="../../talk/20260831_foss4g2026_terradraw_workshop/">FOSS4G 2026 Hiroshima: Terra Drawワークショップ</a></li> <li><a href="../../talk/20260903_foss4g2026_terradraw/">FOSS4G 2026 Hiroshima: Terra Draw - bring drawing feature to all map applications</a></li> </ul> <h2 id="技術スタック">技術スタック</h2> <p>TypeScript, MapLibre GL JS, Terra Draw, Vite</p>