我在 Binding.scala 上使用带有 scalajs-leaflet 外观的 Leaflet,并且地图初始化/显示不正确。
为了重现这个问题,我准备了一个lihaoyi/workbench
页面类似于 scalajs-leaflet 中的页面。
首先,从以下位置下载分叉的 scalajs-leaflethttps://github.com/mcku/scalajs-leaflet https://github.com/mcku/scalajs-leaflet
Run sbt
in scalajs-leaflet
目录。
进入~ example/fastOptJS
无论如何。现在,Web 服务器在端口 12345 启动。
Open
http://localhost:12345/example/target/scala-2.12/classes/leaflet2binding-dev.html http://localhost:12345/example/target/scala-2.12/classes/leaflet2binding-dev.html在浏览器中
问题是地图容器出现,但内容(图块等)不正确。在窗口上小幅调整大小后,地图会变得很好,这会触发_onResize
传单的处理者。
该容器位于Leaflet2Binding.scala
文件并在初始化之前已指定其大小:
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]
可以插入一行lmap.invalidateSize(true)
在返回元素之前的以下行中https://github.com/mcku/scalajs-leaflet/blob/83b770bc76de450567ababf6c7d2af0700dd58c9/example/src/main/scala/example/Leaflet2Binding.scala#L39 https://github.com/mcku/scalajs-leaflet/blob/83b770bc76de450567ababf6c7d2af0700dd58c9/example/src/main/scala/example/Leaflet2Binding.scala#L39,但在这种情况下没有帮助。即这里:
@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可能的解决方法
看起来,地图元素有它的clientWidth
在此过程中不可用的属性。这是可以理解的,因为该文件尚未“准备好”。然而,CSSstyle.width
可用并且可以以 px 为单位定义。在这种情况下,可以修补传单以在计算过程中考虑 css 样式宽度。
如果样式宽度以 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;
}