カスタムマッピングライブラリを探していますが、実際の地理的領域を表示するのではなく、カスタムフロアプランを表示しています。私はしばらくの間探していましたが、私が見つけた解決策のほとんどは地理的な領域のためのものです。
いくつかのズームレベル(おそらく3レベル)をカスタマイズし、理想的にはJavaScript、HTML5(キャンバス、SVG)ソリューションを探しています。
誰か提案はありますか?
カスタムマッピングライブラリを探していますが、実際の地理的領域を表示するのではなく、カスタムフロアプランを表示しています。私はしばらくの間探していましたが、私が見つけた解決策のほとんどは地理的な領域のためのものです。
いくつかのズームレベル(おそらく3レベル)をカスタマイズし、理想的にはJavaScript、HTML5(キャンバス、SVG)ソリューションを探しています。
誰か提案はありますか?
回答:
私は自分の写真マップを使用して、独自のマップアプリを作成しています。私たちの大学は新しいキャンパスに移行し、手書きの地図から5階ズームで7階(屋内)をマッピングしています。
リーフレットは、カスタムマップタイルを使用できます!私はこのガイド(omarriott.com/aux/leaflet-js-non-geographical-imagery)に従いましたが、ズームレベル番号で試行錯誤を行って、マップが表示されることを確認しました(ガイドに従っていませんでした)私のために働く)。
Leaflet Indoorというプラグインがありますが、geoJsonに依存していますが、私は持っていませんでした。私が持っているのは、カスタム画像座標と自分のカスタムJsonです。とにかく、リーフレットはunprojectメソッドとprojectメソッドを使用して画像座標を緯度経度に変換できます(逆も同様です)。
別のフロアを作成するために行ったのは、代わりにレイヤーコントロールを使用することでした。もちろん、APIを把握し、すべてが正常に機能することを確認するには時間がかかります。たとえば、フロアごとにマーカーをグループ化し、さまざまなズームレベルでマーカーを適切にレンダリングする方法をコーディングしました。また、別のフロアをロードするには、ハンドラーもマーカーを正しくロードする必要があります。
Leafletには地理マップに依存する多くの例があり、私たちのような人々を暗闇の中に置いているかもしれないことを知っていますが、カスタムマップに対してそれが可能であることを保証したいと思います。画像が必要で、正しく(正しい名前で)タイル表示し、AmazonなどのCDNにロードしてから、Leaflet APIを使用します。
ユースケースがわからない場合は、データの視覚化のためにD3.jsライブラリ(データドリブンドキュメント)を調べてください。「ズームレベル」自体をサポートしているかどうかはわかりませんが、ズーム可能なマップはサポートしています。
ここで彼らの多くの例を見てみましょう:https : //github.com/mbostock/d3/wiki/Gallery