0

mapbox-gl-js を使用して、レスポンシブ コンテナー内にマップを表示しています。

レスポンシブ コンテナーのサイズに関係なく、ウィンドウのサイズを変更してもマップの境界やズーム レベルに影響を与えず、静的な画像であるかのようにマップを単純にスケーリングするように、マップで同じ解像度を維持したいと考えています。

これを実現するには、倍率を動的に計算し、CSS 変換を介してコンテナーに適用します。

#map {
    width: 100%;
    height: 100%;
}
#map-scaler {
    width: 1280px;
    height: 1280px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transform-origin: 0 0;
}
#map-container {
    background-color: #fff;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    width: 100%;
    height: 100%;
}


    <div id="map-container">
        <div id="map-scaler">
           <div id="map"></div>
        </div>
    </div>


    // Get size of map container for display
    var mapContainer = $("#map-container");
    var mcWidth = mapContainer.width();
    var mcHeight = mapContainer.height();

    // Get size of scaler container
    var scaleContainer = $("#map-scaler");
    var sWidth = scaleContainer.width();
    var sHeight = scaleContainer.height();

    var scaleWidth = mcWidth / sWidth;
    var scaleHeight = mcHeight / sHeight;

    $("#map-scaler").css("transform", "scale(" + scaleWidth + ", " + scaleHeight + ")");

これにより、目的の結果が視覚的に得られます。たとえば、500x500 コンテナー内に 1280x1280 のマップを表示できます。

問題は、すべてのマウス イベントが「オフ」になっていることです。たとえば、マップ クリックまたはスクロール ズームを試みると、マップはマウス イベントをマップの間違った領域に適用します。

マウス イベントがユーザーがクリックした場所を正確に反映するように、CSS 変換を補正するにはどうすればよいですか?

4

1 に答える 1

0

リサイズ方法を試してみませんか？ドキュメントに記載されているように、メソッドは div の幅と高さを見て、マップのサイズを変更します。イベントも更新する必要があります。

https://www.mapbox.com/mapbox-gl-js/api/#Map#resize

于 2016-05-23T10:21:51.800 に答える