1

ClojureScript の react-leaflet を使用しようとしていますが、タイルのレンダリング方法に問題があります。

  • 一部のタイルが表示されない
  • 異なる都市で隣り合わせに表示されるタイルがあります

ここに私が持っているコードがあります:

(ns carder-devcards.map
  (:require [taoensso.timbre :as timbre]
            [cljsjs.react-leaflet] ;; js/ReactLeaflet
            )
  (:require-macros [devcards.core :as dc :refer [defcard]]))


(defn build
  ([component props]
   (build component props (array)))
  ([component props & children]
   (.createElement js/React
                   component
                   (clj->js props)
                   (array children))))


(def tile-layer (partial build js/ReactLeaflet.TileLayer))
(def leaflet-map (partial build js/ReactLeaflet.Map))
(def marker (partial build js/ReactLeaflet.Marker))
(def popup (partial build js/ReactLeaflet.Popup))



(defcard simple-leaflet
  (fn [state]
    (let [{:keys [pos zoom] :as st} @state
          tl (tile-layer {:url "http://{s}.tile.osm.org/{z}/{x}/{y}.png"
                          :attribution "&copy; <a href=\"http://osm.org/copyright\">OpenStreetMap</a> contributors"})
          mk (marker {:position pos})]
      (leaflet-map {:center pos :zoom zoom}
                   tl
                   mk
                   )))
  {:pos [51.505, -0.09]
   :zoom 13}
  {:header true})

そして、これが私がローカルで行った結果です。

めちゃくちゃなタイル

注: ブラウザのサイズを変更すると効果があるように見えるので、これも css の問題である可能性があります (?)。私は効果なしで以下を含めようとしました：

.leaflet-container {
  height: 400px;
  width: 100%;
}
4

2 に答える 2

1

@Chris Murphy からの回答で、同じエラーが発生したため、正しい軌道に乗ることができました。

leaflet.js の css ファイルが欠落していたことが判明し、それらを含めて問題が解決しました。

于 2016-07-13T21:24:32.810 に答える
1

私自身の非常にシンプルな最初のカットのリーフレットを投稿するだけで、それが役立つ可能性があります。

(def URL-OSM "http://{s}.tile.osm.org/{z}/{x}/{y}.png")

(defn create-map []
  (let [m (-> js/L
              (.map "mapid2")
              (.setView (array -33.8675 151.2070) 9))       ;; Sidney
        tile1 (-> js/L (.tileLayer URL-OSM
                                   #js{:maxZoom     16
                                       :attribution "OOGIS RL, OpenStreetMap &copy;"}))
        base (clj->js {"OpenStreetMap" tile1})
        ctrl (-> js/L (.control.layers base nil))]
    (.addTo tile1 m)
    (.addTo ctrl m)))

を使用して[cljsjs/leaflet "0.7.7-4"]います。

編集 そして、ここにマークアップのリーフレット中心のバージョンがあります:

(hiccup/html
  [:head
   [:meta {:charset "UTF-8"}]
   [:meta {:name "viewport" :content "width=device-width, initial-scale=1"}]
   [:link {:rel "stylesheet" :href "http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" :type "text/css"}]
   [:script {:src "http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js" :charset "utf-8"}]
  [:body
   [:div {:id "mapid"}]
   [:div {:id "main-app-area"}]
   [:script {:src "/reconnect/js/main.js" :type "text/javascript"}]])
于 2016-07-13T15:33:31.230 に答える