Mapbox-gl-js - マップにCSSトランスフォームを適用した後にマウスイベントがオフになる

Question

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変換を補正できますか？

Answer 1

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

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