карта листовки не отображается правильно до изменения размера - PullRequest
Новая
       24

карта листовки не отображается правильно до изменения размера

0 голосов
/ 21 декабря 2018

Я использую Leaflet с фасадом scalajs-leaflet на Binding.scala, и карта инициализируется / отображается неправильно.

Чтобы воспроизвести проблему, я подготовил lihaoyi/workbench страницу, похожую на страницу в scalajs-листовке.

Сначала загрузите разветвленную листовку scalajs из https://github.com/mcku/scalajs-leaflet

Запустите sbt в каталоге scalajs-leaflet.Введите ~ example/fastOptJS в сб.Теперь веб-сервер запущен с портом 12345.

Открыть 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,, но в этом случае это не помогло.А именно здесь: 

@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
}

Есть идеи?Это специфично для binding.scala, но это может быть и проблема листовки.map before resize after resize

РЕДАКТИРОВАТЬ Возможное решение Похоже, элемент карты имеет свойство clientWidth, недоступное во времяпроцесс.Что понятно, так как документ еще не «готов».Однако css style.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;
                }

1 Ответ

0 голосов
/ 21 декабря 2018

Возможно lmap.invalidateSize(true) вызывается слишком рано (DOM не готов или перекрашен).

Убедитесь, что этого не происходит.Чтобы предотвратить это, я обертываю этот код следующим образом: 

setTimeout(100) {
  lmap.invalidateSize(true)        
}

Это должно быть сделано после каждой перерисовки DOM.

...