无法在R Shiny应用中集成Leaflet-labeler插件的技术求助
在R Shiny中使用leaflet-labeler插件渲染带碰撞避免的标签问题
我需要在R Shiny的Leaflet地图中实现leaflet-labeler插件,目前进展不顺。我的GeoJSON数据是点图层FeatureCollection,每个要素包含用于显示为标签的HTML格式label属性(通过jsonlite::fromJSON读取),目标是实现插件的标签碰撞避免功能,达到类似GitHub示例的效果。
数据(dput(geojson)输出)
list(type = "FeatureCollection", features = list(list(type = "Feature", properties = list(punto = 1L, unicode = "štéĭnle̤", html = "s&#x030C;te&#x0301;i&#x0306;nle&#x324;", label = "<em style=\"color:#ec008d\">1</em> s&#x030C;te&#x0301;i&#x0306;nle&#x324;"), geometry = list(type = "Point", coordinates = list(8.423711786, 46.38731673))), list(type = "Feature", properties = list( punto = 229L, unicode = "s̓as̓ét", html = "s&#x313;as&#x313;e&#x0301;t", label = "<em style=\"color:#ec008d\">229</em> s&#x313;as&#x313;e&#x0301;t"), geometry = list(type = "Point", coordinates = list(11.00240679, 46.1641373))), list(type = "Feature", properties = list( punto = NULL, unicode = NULL, html = NULL, label = "<em style=\"color:#ec008d\">NA</em> "), geometry = list(type = "Point", coordinates = list(13.30003463, 42.79799721))), list(type = "Feature", properties = list( punto = NULL, unicode = NULL, html = NULL, label = "<em style=\"color:#ec008d\">NA</em> "), geometry = list(type = "Point", coordinates = list(13.3426341, 41.6396009))), list(type = "Feature", properties = list( punto = 941L, unicode = "na pet̬ři̍d̰d̰a", html = "na&#x20;pet&#x032C;r&#x030C;i&#x30d;d&#x0330;d&#x0330;a", label = "<em style=\"color:#ec008d\">941</em> na&#x20;pet&#x032C;r&#x030C;i&#x30d;d&#x0330;d&#x0330;a"), geometry = list(type = "Point", coordinates = list(16.31308204, 39.31875679))), list(type = "Feature", properties = list( punto = 214L, unicode = "s̓as̓ẹdẹli̍n", html = "s&#x313;as&#x313;e&#x0323;de&#x0323;li&#x30d;n", label = "<em style=\"color:#ec008d\">214</em> s&#x313;as&#x313;e&#x0323;de&#x0323;li&#x30d;n"), geometry = list(type = "Point", coordinates = list(10.88553927, 46.33220307))), list(type = "Feature", properties = list( punto = 828L, unicode = "u vrəččə͐tíe͐ddə", html = "u&#x20;vr&#x0259;c&#x030C;c&#x030C;<sup>&#x0259;</sup>ti&#x0301;<sup>e</sup>dd&#x0259;", label = "<em style=\"color:#ec008d\">828</em> u&#x20;vr&#x0259;c&#x030C;c&#x030C;<sup>&#x0259;</sup>ti&#x0301;<sup>e</sup>dd&#x0259;"), geometry = list(type = "Point", coordinates = list(16.4131601, 41.1534886))), list(type = "Feature", properties = list( punto = 764L, unicode = "perdiǧèd̰ḏ͐a", html = "perdig&#x030C;e&#x0300;d&#x0330;<sup>d&#x0330;</sup>a", label = "<em style=\"color:#ec008d\">764</em> perdig&#x030C;e&#x0300;d&#x0330;<sup>d&#x0330;</sup>a"), geometry = list(type = "Point", coordinates = list(9.655999729, 39.92658912))), list(type = "Feature", properties = list( punto = NULL, unicode = NULL, html = NULL, label = "<em style=\"color:#ec008d\">NA</em> "), geometry = list(type = "Point", coordinates = list(14.1635845, 42.347886))), list(type = "Feature", properties = list( punto = 806L, unicode = "pətrəččòla , vrəččo̍dda", html = "p&#x0259;tr&#x0259;c&#x030C;c&#x030C;o&#x0300;la&#x20;,&#x20;vr&#x0259;c&#x030C;c&#x030C;o&#x30d;dda", label = "<em style=\"color:#ec008d\">806</em> p&#x0259;tr&#x0259;c&#x030C;c&#x030C;o&#x0300;la&#x20;,&#x20;vr&#x0259;c&#x030C;c&#x030C;o&#x30d;dda"), geometry = list(type = "Point", coordinates = list(15.63804725, 41.71244172)))))
尝试的实现代码
UI部分
library(shiny) library(leaflet) library(leaflet.extras) library(htmltools) library(htmlwidgets) ui <- fluidPage( tags$head( tags$script(src = "leaflet-labeler.js"), tags$link(src = "leaflet-labeler.css") ), leafletOutput("map") )
SERVER部分
server <- function(input, output, session) { labeler <- htmlDependency( name = "leaflet-labeler", version = "1.0.0", src = c(file = normalizePath("app\\www")), script = "leaflet-labeler.js", stylesheet = "leaflet-labeler.css" ) registerPlugin <- function(map, plugin) { map$dependencies <- c(map$dependencies, list(plugin)) map } leaflet() %>% addTiles()%>% #addGeoJSON(geojson_data) %>% works up to here registerPlugin(labeler) %>% onRender( " function(el, x, geojson) { const layer = L.labeler(geojson, { labelProp: 'label', labelPos: 'auto' }).addTo(this); ", data = geojson) }
问题现状
目前地图上没有渲染任何标签内容;但添加GeoJSON图层时标记能正常显示,说明数据本身无问题。由于完全不熟悉JavaScript,无法排查插件应用中的细节问题,恳请提供技术建议。
内容的提问来源于stack exchange,提问作者eazyezy
相关产品推荐
相关产品推荐

