时间戳

首页 > 解决方案 > 在 Clojurescipt 代码中部分加载 React-leaflet 映射

leaflet - 在 Clojurescipt 代码中部分加载 React-leaflet 映射

问题描述

我正在使用 react-leaflet、clojurescript 和 hx 在网页上绘制地图。但只是部分加载。我在一个命名空间中创建组件，但在另一个命名空间中调用它。我还尝试仅在初始化后才安装地图。

;; In the map name space

(hx/defnc draw-map [props]
(let [!ref (react/useRef nil)
    [!map-view map-view-update-fn] (react/useState nil)]

(hooks/useEffect
 (fn []
   (when-not !map-view (let [m (-> js/L
                                 (.map !ref.current)
                                 (.setView #js [-26.718 30.384] 8))
                             tile1 (-> js/L
                                     (.tileLayer tile-layer-url
                                       #js{:maxZoom     13
                                           :attribution "&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors"}))])

             geo-json-data (-> js/L (.geoJSON (clj->js data/geojson))))

   (.addTo tile1 m)
   (.addTo geo-json-data m)
   (.bindPopup geo-json-data get-loc-name)
   (.invalidateSize m)
   (.setView m #js[-26.718 30.384] 8)
   (fn create-map-cleanup []
     (.remove m)))
 [!ref])
[:div {:ref !ref} "Map loading ..."]))

在一个单独的命名空间中，我创建了一个用于渲染地图的新 hx 组件。

(hx/defnc map-view [props]
   [map/draw-map])

标签： leafletclojurescriptreact-leaflet

解决方案

在我的索引文件中添加 react-leaflet 样式表，我添加了：

[:link {:rel "stylesheet"
                     :href "https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
                     :integrity "sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
                     :crossorigin ""}]]

推荐阅读