R Leaflet接入ESRI矢量瓦片服务失败问题求助

我正在构建一个Shiny Leaflet应用，想使用本组织的ESRI矢量瓦片地图。Leaflet能成功连接（属性信息正确），但瓦片加载不出来。试过esri.leaflet包的不同选项，甚至导入JavaScript插件都没解决问题。

初始代码 #

library(shiny)
library(leaflet)
library(sf)
library(dplyr)
library(here)
library(leaflet.extras)
library(leaflet.esri)
library(bcmaps)
library(rmapshaper)
library(htmltools)
library(htmlwidgets)

ha <- bcmaps::health_ha() %>% 
  ms_simplify(., keep = 0.05, keep_shapes = TRUE) %>% 
  rename_with(tolower, everything()) %>% 
  select(ha_code = hlth_authority_code, 
         ha_name = hlth_authority_name, 
         geometry) %>% 
  st_transform(crs = 4326) %>% 
  mutate(color = c("#3891A7",
                   "#C3860D",
                   "#C42E2E",
                   "#67A63C",
                   "#914FAB"))

ui <- fluidPage(
  leafletOutput("main_map")
)

server <- function(input, output, session) {
  output$main_map <- renderLeaflet({
    leaflet() %>%
    addEsriFeatureLayer(
      url = "https://tiles.arcgis.com/tiles/ubm4tcTYICKBpist/arcgis/rest/services/BC_BASEMAP_20240307/VectorTileServer",
      useServiceSymbology = TRUE
    ) %>% 
      addPolygons(data = ha,
                  stroke = TRUE,
                  weight = 1,
                  color = ~color,
                  opacity = 0.5,
                  fillColor = ~color,
                  fillOpacity = 0.3)
  })
}

shinyApp(ui, server)

修改后的代码（参考建议后） #

library(dplyr)
library(leaflet)
library(htmltools)
library(htmlwidgets)

esriLeafletPlugin <- htmlDependency(
  "esri-leaflet", "3.0.12",
  src = "https://cdn.jsdelivr.net/npm/esri-leaflet@3.0.12/dist/esri-leaflet.min.js",
  script = "EsriLeaflet.min.js")

esriVectorTilesPlugin <- htmlDependency(
  "esri-leaflet-vector", "4.2.3",
  src = "https://cdn.jsdelivr.net/npm/esri-leaflet-vector@4.2.3/dist/esri-leaflet-vector-debug.min.js",
  script = "VectorTileLayer.min.js")

registerPlugin <- function(map, plugin) {
  map$dependencies <- c(map$dependencies, list(plugin))
  map}

leaflet() %>%
  registerPlugin(esriLeafletPlugin) %>% 
  registerPlugin(esriVectorTilesPlugin) %>% 
  onRender("function(el, x) {
       L.esri.Vector.vectorTileLayer(
       'https://tiles.arcgis.com/tiles/ubm4tcTYICKBpist/arcgis/rest/services/BC_BASEMAP_20240307/VectorTileServer'
       ).addTo(this);
       }")

报错信息 #

Failed to load resource: the server responded with a status of 404 (Not Found)
VM13:3 Uncaught TypeError: Cannot read properties of undefined (reading 'Vector')
    at e.eval (eval at tryEval (htmlwidgets.js:252:16), <anonymous>:3:15)
    at Object.eval (eval at tryEval (htmlwidgets.js:252:16), <anonymous>:6:11)
    at htmlwidgets.js:240:18
    at Array.forEach (<anonymous>)
    at forEach (htmlwidgets.js:55:14)
    at evalAndRun (htmlwidgets.js:230:7)
    at htmlwidgets.js:653:11
    at Array.forEach (<anonymous>)
    at forEach (htmlwidgets.js:55:14)
    at htmlwidgets.js:574:7

解决方案 #

问题根源 #

1. 404错误：htmlDependency的src和script参数设置错误，CDN路径指向了具体文件却又额外指定script子路径，导致请求不存在的资源。
2. TypeError：矢量瓦片插件未正确加载，L.esri.Vector对象未定义，无法调用vectorTileLayer方法。

修复后的代码 #

library(shiny)
library(leaflet)
library(sf)
library(dplyr)
library(bcmaps)
library(rmapshaper)
library(htmltools)
library(htmlwidgets)

ha <- bcmaps::health_ha() %>% 
  ms_simplify(., keep = 0.05, keep_shapes = TRUE) %>% 
  rename_with(tolower, everything()) %>% 
  select(ha_code = hlth_authority_code, 
         ha_name = hlth_authority_name, 
         geometry) %>% 
  st_transform(crs = 4326) %>% 
  mutate(color = c("#3891A7",
                   "#C3860D",
                   "#C42E2E",
                   "#67A63C",
                   "#914FAB"))

# 修复插件依赖定义
esriLeafletPlugin <- htmlDependency(
  name = "esri-leaflet",
  version = "3.0.12",
  src = list(href = "https://cdn.jsdelivr.net/npm/esri-leaflet@3.0.12/dist/"),
  script = "esri-leaflet.min.js"
)

esriVectorTilesPlugin <- htmlDependency(
  name = "esri-leaflet-vector",
  version = "4.2.3",
  src = list(href = "https://cdn.jsdelivr.net/npm/esri-leaflet-vector@4.2.3/dist/"),
  script = "esri-leaflet-vector.min.js"
)

registerPlugin <- function(map, plugin) {
  map$dependencies <- c(map$dependencies, list(plugin))
  map
}

ui <- fluidPage(
  leafletOutput("main_map")
)

server <- function(input, output, session) {
  output$main_map <- renderLeaflet({
    leaflet() %>%
      registerPlugin(esriLeafletPlugin) %>% 
      registerPlugin(esriVectorTilesPlugin) %>% 
      # 初始化矢量瓦片图层
      onRender("function(el, x) {
        L.esri.Vector.vectorTileLayer('https://tiles.arcgis.com/tiles/ubm4tcTYICKBpist/arcgis/rest/services/BC_BASEMAP_20240307/VectorTileServer')
          .addTo(this);
      }") %>%
      addPolygons(data = ha,
                  stroke = TRUE,
                  weight = 1,
                  color = ~color,
                  opacity = 0.5,
                  fillColor = ~color,
                  fillOpacity = 0.3)
  })
}

shinyApp(ui, server)

关键修复点 #

• 调整htmlDependency的src为CDN目录路径，script设为目录下的具体文件名，确保资源能正确加载。
• 使用生产环境的esri-leaflet-vector.min.js替代调试版本，减少体积并避免潜在问题。
• 将插件注册和瓦片初始化整合回原Shiny应用逻辑，保留健康区域多边形图层。

内容的提问来源于stack exchange，提问作者PhDavey