Highcharter地图Mapline连接不显示的技术排查求助

使用R的Highcharter包制作世界地图，目标是绘制圣保罗与十大出口目的地之间的mapline连接线条，但线条始终无法显示，已尝试调整数据格式仍未解决。

问题原因 #

Highcharts的mapline系列要求数据是GeoJSON格式的LineString对象，而不是自定义的from/to列表结构，原代码的数据格式不符合mapline的解析要求。

解决方案 #

1. 转换连接数据为GeoJSON LineString格式 #

将每个连接的起点（圣保罗）和终点（目的地）坐标，转换成标准的GeoJSON LineString结构，每个线条对应一个包含geometry和properties的对象。

2. 调整mapline系列配置 #

确保mapline系列的data参数接收正确的GeoJSON结构数据，同时可以添加基于出口额的线条宽度映射，提升可视化表达。

修正后的完整代码 #

# 数据集
top_destinations <- tibble(
  Cidade = rep("São Paulo - SP", 10),
  Nome_Pais = c("China", "Canadá", "Estados Unidos", "Itália", "Bélgica", 
                "Emirados Árabes Unidos", "Suíça", "Argentina", "Índia", "Argélia"),
  Lat_Municipio = rep(-23.6, 10),
  Long_Municipio = rep(-46.6, 10),
  Lat_PAIS = c(33.4, 59.1, 39.6, 42.7, 50.6, 23.5, 46.9, -35.4, 21.0, 28.2),
  Long_PAIS = c(107.0, -109.0, -98.6, 12.8, 4.66, 54.2, 7.91, -65.2, 78.5, 2.63),
  US_FOB = c(1e9, 3.46e8, 3.08e8, 2.26e8, 2.04e8, 1.63e8, 1.14e8, 1.08e8, 9.3e7, 8.12e7)
)

# 加载包
library(highcharter)
library(dplyr)

# 加载世界地图数据
worldgeojson <- get_data_from_map(download_map_data("https://code.highcharts.com/mapdata/custom/world.geo.json"))

# 准备目的地点数据
dest_points <- data.frame(
  lat = top_destinations$Lat_PAIS,
  lon = top_destinations$Long_PAIS,
  name = top_destinations$Nome_Pais,
  US_FOB = top_destinations$US_FOB
)

# 转换连接数据为GeoJSON LineString格式
connections <- lapply(1:nrow(top_destinations), function(i) {
  list(
    type = "Feature",
    geometry = list(
      type = "LineString",
      coordinates = list(
        c(top_destinations$Long_Municipio[i], top_destinations$Lat_Municipio[i]),
        c(top_destinations$Long_PAIS[i], top_destinations$Lat_PAIS[i])
      )
    ),
    properties = list(
      value = top_destinations$US_FOB[i],
      name = paste("São Paulo →", top_destinations$Nome_Pais[i])
    )
  )
})

# 创建地图
highchart(type = "map") %>%
  # 添加底图
  hc_add_series(
    mapData = worldgeojson,
    showInLegend = FALSE,
    nullColor = "#E0E0E0",
    borderWidth = 0
  ) %>%
  hc_mapNavigation(enabled = TRUE) %>%
  # 添加圣保罗起点
  hc_add_series(
    type = "mappoint",
    data = data.frame(
      lat = top_destinations$Lat_Municipio[1],
      lon = top_destinations$Long_Municipio[1],
      name = "São Paulo",
      color = "#3d9970",
      US_FOB = sum(top_destinations$US_FOB)
    ),
    marker = list(symbol = "circle", radius = 4),
    tooltip = list(pointFormat = "城市: {point.name}<br>总出口额: {point.US_FOB}")
  ) %>%
  # 添加目的地点
  hc_add_series(
    type = "mappoint",
    name = "目的地",
    data = dest_points,
    color = "#d35400",
    marker = list(symbol = "circle", radius = 3),
    tooltip = list(pointFormat = "国家: {point.name}<br>出口额: {point.US_FOB}")
  ) %>%
  # 添加mapline连接线条
  hc_add_series(
    type = "mapline",
    data = connections,
    lineWidth = JS("function() { return Math.max(1, this.point.properties.value / 2e8); }"),
    color = "#3498db",
    opacity = 0.7,
    showInLegend = FALSE,
    tooltip = list(pointFormat = "路线: {point.name}<br>出口额: {point.properties.value}")
  ) %>%
  # 标题和tooltip设置
  hc_title(text = "圣保罗主要出口目的地") %>%
  hc_tooltip(useHTML = TRUE)

关键修改说明 #

• 将connections转换为GeoJSON Feature格式，每个线条包含LineString类型的几何坐标（注意Highcharts使用**[经度, 纬度]**的坐标顺序）
• 给mapline添加了基于出口额的动态线条宽度，出口额越高线条越粗
• 保留了tooltip显示路线和出口额的功能

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