OSMとリーフレットを使用してカスタムフロアタイルにアイコンをレンダリングする

ビルツ

グーグルマップのいくつかの機能をリーフレットとOSMに変換する必要があります。私が持っているのは、カスタムタイル付きのグーグルマップを使用する屋内訪問者追跡アプリケーションです(屋内フロアプラン画像)。XY座標をLatLngに変換することにより、訪問者(屋内)の場所にマーカーをプロットします。それは

function findLatLangFromImagePixel(imgPixel) {
    var scalingRatio = ImageWidth / 256;
    var pixel = { x: ((imgPixel.X) / scalingRatio), y: ((imgPixel.Y) / scalingRatio) };

    var point = new google.maps.Point(pixel.x + 0.5, pixel.y + 0.5);
    return map.getProjection().fromPointToLatLng(point);
}

ここに画像の説明を入力してください

Leafletマップでは、同じ結果を達成するために次のコードを試しています(同じ画像/タイルを使用)。

var x = ImageXYLocation.X;
            var y = ImageXYLocation.Y;
            var scalingRatio = ImageWidth / 256;
            var pixel = { x: ((x) / scalingRatio), y: ((y) / scalingRatio) };
var pointXY = L.point(pixel.x + 0.5, pixel.y +0.5);

            latlng = map.layerPointToLatLng(pointXY);
latlng.lng += 180;

しかし、私は異なる結果を得ています。また、画面の解像度を変更すると、マーカーが屋内マップ上の位置を切り替えることを確認しました。マーカーの位置は、画面の解像度またはズームレベルに依存しているようです。ここに画像の説明を入力してください

そして2番目のズームレベル ここに画像の説明を入力してください

更新:マップ初期化コードは以下のとおりです。

 if (map != null) {
            map.remove();
        }
        $("#map_canvas").html("");

        map = L.map('map_canvas', {
            minZoom: 1,
            maxZoom: 4,
            center: [0, 0],
            zoom: 1,
            crs: L.CRS.Simple,
        });
        var w = 6095,
            h = 3410;
        var southWest = map.unproject([0, h], map.getMaxZoom() - 1);
        var northEast = map.unproject([w, 0], map.getMaxZoom() - 1);
        var bounds = new L.LatLngBounds(southWest, northEast);
        L.tileLayer('./tiles/{z}/{x}/{y}.png', {
            maxZoom: 16,
            minZoom: 0,
            continuousWorld: false,
            bounds: bounds,
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        map.setZoom(5);
        map.setMaxBounds(bounds);

        map.zoomControl.setPosition('bottomright');

アップデート2:

ここに画像の説明を入力してください

ビルツ

ご指導ありがとうございます。私は解決策を見つけることができました。次のコードを使用して、正しいLatLngを取得しました

var x = ImageXYLocation.X;
var y = ImageXYLocation.Y;
var scalingRatio = ImageWidth / 256;
var pixel = { x: ((x / scalingRatio) * Math.pow(2, map.getZoom())), y: ((y / scalingRatio) * Math.pow(2, map.getZoom())) };

var pointXY = L.point(pixel.x + 0.5, pixel.y +0.5);

latlng = map.unproject(L.point(pixel.x, pixel.y));

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

リーフレットのカスタムアイコンをgeojsonファイルに追加する

分類Dev

CSSグリッドレイアウトを使用して、スティッキーヘッダーとフッターを持つコンテンツのスクロールバーを取得するにはどうすればよいですか?

分類Dev

テキストファイルをクリーンアップし、Pythonでパンダデータフレームとしてインポートする

分類Dev

フルカレンダー:カスタムボタンに「リンク」アイテムを追加する方法

分類Dev

角度のあるマテリアルコントロールをレンダリングするときにスタイルが欠落している

分類Dev

カスタムアラートダイアログをフルスクリーンにする方法

分類Dev

カスタムリンク構造を使用してSquarespaceにファイルをアップロードする

分類Dev

HTMLアンカータグonclickをクリックしてフォームを送信し、hrefリンクにリダイレクトします

分類Dev

xamlを使用してカスタムユーザーコントロールをレンダリングする

分類Dev

カスタムレンダリングを使用してアイテムを動的に更新を選択する

分類Dev

一致するフィールドセットを使用してZF2コレクションをカスタムレンダリングする方法

分類Dev

アイコン、プレースホルダーラベル、湾曲したコーナーのある境界線を使用してカスタムXamarinフォームエントリを作成するにはどうすればよいですか?

分類Dev

値のJavaの8ストリームとstartwithアレイを使用してリストをフィルタリングする方法

分類Dev

カイロとフリータイプを使用したフォントのレイアウトとレンダリング

分類Dev

Golangはdir全体のコンカレントリターンを多数の開いているファイルにアップロードします

分類Dev

角度グリッドには、インライン剣道グリッドのエディターテンプレート(リアクティブフォーム)を含む列があります。テンプレートコントロール(テキストボックス)とフォームはリンクしません

分類Dev

カスタムボタンをクリックする前にファイルをアップロードし、ajaxを使用してそれをコントローラーアクションメソッドに送信する方法はありますか?

分類Dev

ラムダを使用してリストアイテムをインデックスでフィルタリングすることはできません

分類Dev

マルチレベルインデックスを使用してPandasデータフレームでグループ化とローリングウィンドウを実行すると、インデックスエントリが重複します

分類Dev

シェルスクリプトを使用してディレクトリからホームディレクトリにファイルを移動すると、スタンドアロンコマンドとして機能します(.shファイルの外部と同様)。

分類Dev

レイヤーリストの背景ドローアブルを使用したカスタムビューは、黒い画面をレンダリングします

分類Dev

iOS-プログラムでカレンダーに保存されているイベントにアプリのカスタムURIを追加します

分類Dev

Phalcon phpMicroアプリケーションとカスタムルーティングを使用してインデックスにリダイレクトする方法

分類Dev

ネットワークがアップした後にサービスを開始しているときに、「クライアントクリティカルインターフェイスeth0 / 2がダウンしているか、リンクローカルアドレスがありません」

分類Dev

ネットワークがアップした後にサービスを開始しているときに、「クライアントクリティカルインターフェイスeth0 / 2がダウンしているか、リンクローカルアドレスがありません」

分類Dev

フローティングアクションボタン、スワイプリフレッシュレイアウトとコーディネーターレイアウト、およびツールバーレイアウト動作を一緒に使用する

分類Dev

コマンドのstdoutとstderrをリアルタイムで出力しながら、コンソールとログファイルの両方にリダイレクトするにはどうすればよいですか?

分類Dev

セカンダリインデックスのリストを使用してPandasデータフレームにインデックスを付ける方法は?

分類Dev

フラットアイテム/リストをパンダデータフレームに変換する方法

Related 関連記事

  1. 1

    リーフレットのカスタムアイコンをgeojsonファイルに追加する

  2. 2

    CSSグリッドレイアウトを使用して、スティッキーヘッダーとフッターを持つコンテンツのスクロールバーを取得するにはどうすればよいですか?

  3. 3

    テキストファイルをクリーンアップし、Pythonでパンダデータフレームとしてインポートする

  4. 4

    フルカレンダー:カスタムボタンに「リンク」アイテムを追加する方法

  5. 5

    角度のあるマテリアルコントロールをレンダリングするときにスタイルが欠落している

  6. 6

    カスタムアラートダイアログをフルスクリーンにする方法

  7. 7

    カスタムリンク構造を使用してSquarespaceにファイルをアップロードする

  8. 8

    HTMLアンカータグonclickをクリックしてフォームを送信し、hrefリンクにリダイレクトします

  9. 9

    xamlを使用してカスタムユーザーコントロールをレンダリングする

  10. 10

    カスタムレンダリングを使用してアイテムを動的に更新を選択する

  11. 11

    一致するフィールドセットを使用してZF2コレクションをカスタムレンダリングする方法

  12. 12

    アイコン、プレースホルダーラベル、湾曲したコーナーのある境界線を使用してカスタムXamarinフォームエントリを作成するにはどうすればよいですか?

  13. 13

    値のJavaの8ストリームとstartwithアレイを使用してリストをフィルタリングする方法

  14. 14

    カイロとフリータイプを使用したフォントのレイアウトとレンダリング

  15. 15

    Golangはdir全体のコンカレントリターンを多数の開いているファイルにアップロードします

  16. 16

    角度グリッドには、インライン剣道グリッドのエディターテンプレート(リアクティブフォーム)を含む列があります。テンプレートコントロール(テキストボックス)とフォームはリンクしません

  17. 17

    カスタムボタンをクリックする前にファイルをアップロードし、ajaxを使用してそれをコントローラーアクションメソッドに送信する方法はありますか?

  18. 18

    ラムダを使用してリストアイテムをインデックスでフィルタリングすることはできません

  19. 19

    マルチレベルインデックスを使用してPandasデータフレームでグループ化とローリングウィンドウを実行すると、インデックスエントリが重複します

  20. 20

    シェルスクリプトを使用してディレクトリからホームディレクトリにファイルを移動すると、スタンドアロンコマンドとして機能します(.shファイルの外部と同様)。

  21. 21

    レイヤーリストの背景ドローアブルを使用したカスタムビューは、黒い画面をレンダリングします

  22. 22

    iOS-プログラムでカレンダーに保存されているイベントにアプリのカスタムURIを追加します

  23. 23

    Phalcon phpMicroアプリケーションとカスタムルーティングを使用してインデックスにリダイレクトする方法

  24. 24

    ネットワークがアップした後にサービスを開始しているときに、「クライアントクリティカルインターフェイスeth0 / 2がダウンしているか、リンクローカルアドレスがありません」

  25. 25

    ネットワークがアップした後にサービスを開始しているときに、「クライアントクリティカルインターフェイスeth0 / 2がダウンしているか、リンクローカルアドレスがありません」

  26. 26

    フローティングアクションボタン、スワイプリフレッシュレイアウトとコーディネーターレイアウト、およびツールバーレイアウト動作を一緒に使用する

  27. 27

    コマンドのstdoutとstderrをリアルタイムで出力しながら、コンソールとログファイルの両方にリダイレクトするにはどうすればよいですか?

  28. 28

    セカンダリインデックスのリストを使用してPandasデータフレームにインデックスを付ける方法は?

  29. 29

    フラットアイテム/リストをパンダデータフレームに変換する方法

ホットタグ

アーカイブ