Javascript でマップを操作するとき、私が本当に気に入っているツールは Leaflet です.

なんで?始めるのは本当に簡単で、必要に応じてたくさんのクールなことをすることができるからです!

リーフレットから始まる

初期化

リーフレットを開始するには、次の 3 つのものが必要です.

インポートを行います

CSS とスクリプトをインポートします

マップを含む div を定義します

幅と高さを持つ div ブロック

マップの初期化

プレイ開始！

最初にできることは、マップにマーカーを追加することです!

var marker = L.marker([51.5, -0.09]).addTo(mymap);

この短いコード行で十分です.



次に、円、多角形、ポップアップを追加できます!

さらに進む

興味のある方は、Leaflet の Web サイトに、ライブラリを使ってさらに多くのことを行うためのチュートリアルがたくさんあります.

Create custom markers

Using GeoJSON

Working with Map panes

...

リーフレットを使用する理由

まず、これはオープンソース プロジェクトです.そのため、一部の POC や最初のプロジェクトに最適なエントリーです!

第二に、ライブラリは多くのプロジェクトに十分な多くの機能を提供します.

それでは、オープンソースプロジェクトです!したがって、特定の機能を探している場合は、それを開発してコミュニティと共有できます!

リンク

リーフレット

ウェブサイト: https://leafletjs.com/examples/quick-start/

ギットハブ: https://github.com/Leaflet/Leaflet

チュートリアル:

https://leafletjs.com/examples/quick-start/

https://maptimeboston.github.io/leaflet-intro/

React 付きリーフレット : https://react-leaflet.js.org/

それがあなたを助けることを願っています!

この投稿は、リーフレット Web サイトとそのチュートリアルに基づいています.