调整大小之前，传单地图无法正确显示 [英] leaflet map does not appear correctly until resize

问题描述

我在Binding.scala上使用具有scalajs-leaflet外观的Leaflet，并且地图初始化/显示不正确.

为了重现该问题，我准备了一个与scalajs-leaflet类似的 lihaoyi/workbench 页面.

首先，从

EDIT 可能的解决方法看起来，地图元素的 clientWidth 属性在此过程中不可用.这是可以理解的，因为该文档尚未就绪".但是，css style.width 可用并且可以以px定义.在这种情况下，可以修补传单以在计算过程中考虑css样式的宽度.

如果以px为单位指定样式宽度，则可以使用.

  diff --git a/src/map/Map.js b/src/map/Map.js索引b94dd443..6544d7b7 100644--- a/src/map/Map.js+++ b/src/map/Map.js@@ -903,8 +903,9 @@ export var Map = Evented.extend({获取大小:函数(){如果(！this._size || this._sizeChanged){this._size = new Point(-this._container.clientWidth ||0，-this._container.clientHeight ||0);++ this._container.clientWidth ||parseInt(this._container.style.width.replace("px"，")，10)||0，^ M+ this._container.clientHeight ||parseInt(this._container.style.height.replace("px"，")，10)||0);; ^ Mthis._sizeChanged = false;} 

解决方案

也许 lmap.invalidateSize(true)的调用时间过早(DOM尚未准备就绪或重新粉刷).

确保不会发生这种情况.为了防止这种情况，我将这段代码包装为:

setTimeout(function () {mapid.invalidateSize(true);}，100); 

这必须在每次 DOM 重绘后完成.

I am using Leaflet with scalajs-leaflet facade on Binding.scala, and the map initializes/appears incorrectly.

In order to reproduce the issue, i have prepared a lihaoyi/workbench page similar to that in scalajs-leaflet.

First, download the forked scalajs-leaflet from https://github.com/mcku/scalajs-leaflet

Run sbt in scalajs-leaflet directory. Enter ~ example/fastOptJS in sbt. Now, a web server started at port 12345.

Open http://localhost:12345/example/target/scala-2.12/classes/leaflet2binding-dev.html in a browser

The problem is the map container appears but the content (tiles, etc) is not correct. Map becomes fine after a small resize on window, which triggers _onResize handler of leaflet.

The container is in the Leaflet2Binding.scala file and has its size already specified prior to initialization:

val mapElement = <div id="mapid" style="width: 1000px; height: 600px;
                       position: relative; outline: currentcolor none medium;"
                    class="leaflet-container leaflet-touch leaflet-fade-anim 
                    leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
                    data:tabindex="0"></div>.asInstanceOf[HTMLElement]

It is possible to insert a line lmap.invalidateSize(true) in the following line before returning the element https://github.com/mcku/scalajs-leaflet/blob/83b770bc76de450567ababf6c7d2af0700dd58c9/example/src/main/scala/example/Leaflet2Binding.scala#L39, but did not help in this case. Namely here:

@dom def renderMap = {
  val mapElement = ... (same element as above)

  .. some other initializations ..

  lmap.invalidateSize(true) // true means, use animation

  println("mapElement._leaflet_id " +mapElement.asInstanceOf[js.Dynamic]._leaflet_id) // prints non-null value, makes me think the container is initialized

  mapElement
}

Any ideas? This is binding.scala specific, but it may be a leaflet issue as well.

EDIT Possible workaround It looks like, the map element has its clientWidth property not available during the process. Which is understandable as the document is not "ready" yet. However, the css style.width is available and could be defined in px. In that case it is possible to patch leaflet to take css style width into account during computation.

it works if the style width is specified in px.

diff --git a/src/map/Map.js b/src/map/Map.js
index b94dd443..6544d7b7 100644
--- a/src/map/Map.js
+++ b/src/map/Map.js
@@ -903,8 +903,9 @@ export var Map = Evented.extend({
        getSize: function () {
                if (!this._size || this._sizeChanged) {
                    this._size = new Point(
-                               this._container.clientWidth || 0,
-                               this._container.clientHeight || 0);
+
+                               this._container.clientWidth || parseInt(this._container.style.width.replace("px",""),10) || 0,^M
+                               this._container.clientHeight || parseInt(this._container.style.height.replace("px",""),10) || 0);;^M

                        this._sizeChanged = false;
                }

解决方案

Maybe lmap.invalidateSize(true) is called too early (DOM is not ready or repainted).

Make sure this does not happen. To prevent that I wrap this code like:

setTimeout(function () {
   mapid.invalidateSize(true);
}, 100);

This must be done after every DOM repaint.

这篇关于调整大小之前，传单地图无法正确显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！