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 回答