Highmaps 正确显示地图点但不是地图线

Question

我需要用Highmaps在地图上显示点、线等信息... 显示初始地图和一些地图点（具有 latitude/longitude 坐标）效果很好。但是当我在地图上已经显示的 2 个点之间添加一条简单的地图线（线串）时，地图线没有被绘制出来。这是一个例子：https://jsfiddle.net/vegaelce/4L928trp/ 2 个地图点正确放置在地图上，数据如下：

data: [{
                name: 'Paris',
                geometry: {
                    type: 'Point',
                    coordinates: [2.34,48.86]
                }
            }, {
                name: 'Orly',
                geometry: {
                    type: 'Point',
                    coordinates: [2.40,48.75]
                }
            }]

但是添加到 link 2 个点的地图线（名为“道路”）未显示以下数据：

data: [{
                geometry: {
                    type: 'LineString',
                    coordinates: [
                        [2.34,48.86], // Paris
                        [2.40,48.75] // Orly
                    ]
                }
            }],

我还需要添加其他内容吗？

Answer 1

如果您使用 TopoJSON 地图，您尝试做的事情就会奏效。 https://jsfiddle.net/blaird/y1Ld6bgs/1/

(async () => {

  const topology = await fetch(
    'https://code.highcharts.com/mapdata/countries/fr/fr-idf-all.topo.json'
  ).then(response => response.json());

  // Prepare demo data. The data is joined to map using value of 'hc-key'
  // property by default. See API docs for 'joinBy' for more info on linking
  // data and map.
  var data = [
    ["fr-idf-se", 69699],
    ["fr-idf-hd", 14200],
    ["fr-idf-ss", 17301],
    ["fr-idf-vo", 14350],
    ["fr-idf-vm", 29728],
    ["fr-idf-vp", 28610],
    ["fr-idf-yv", 21667],
    ["fr-idf-es", 16494]
  ];

  // Create the chart
  Highcharts.mapChart('container', {
    chart: {
      map: topology
    },

    title: {
      text: 'Highcharts Maps basic demo'
    },

    subtitle: {
      text: 'Source map: <a href="http://code.highcharts.com/mapdata/countries/fr/fr-idf-all.topo.json">Île-de-France</a>'
    },



    series: [{
      mapData: Highcharts.maps["countries/fr/fr-idf-all"],
      data: data,
      name: "States",
      borderColor: "#ffffff",
      joinBy: ["hc-key", "CODE_REGION"],
      keys: ["CODE_REGION", "value"]
    }, {
      type: 'mapline',
      data: [{
        geometry: {
          type: 'LineString',
          coordinates: [
            [2.34, 48.86], // Paris
            [2.40, 48.75] // Orly
          ]
        }
      }],
      showInLegend: true,
      lineWidth: 2,
      name: "Road",
      nullColor: '#f00',
      color: '#f00',
      enableMouseTracking: false
    }, {
      type: 'mappoint',
      color: '#333',
      name: "Towns",
      showInLegend: true,
      data: [{
        name: 'Paris',
        geometry: {
          type: 'Point',
          coordinates: [2.34, 48.86]
        }
      }, {
        name: 'Orly',
        geometry: {
          type: 'Point',
          coordinates: [2.40, 48.75]
        }
      }],
      enableMouseTracking: false
    }]
  });

})();

在添加点和线文档中：https://www.highcharts.com/docs/maps/adding-points-and-lines

Prior to v10, the coordinate system used in most of our maps was a custom one, where both the X and Y values ranged from 0 to some thousands. This still applies when loading GeoJSON maps rather than TopoJSON maps from the Map Collection. With the support of the proj4js library, points could be placed by the lon and lat options. Without proj4.js, points were added as x, y pairs on the same coordinate system as the map. Maplines however were given as paths.

说明如果不使用地形数据，则必须转换坐标，或者使用与地图相同的坐标系来绘制线。

P.S。不确定为什么设置行的 color 不起作用，但设置 nullColor 可以。但是，这就是我必须做的才能使这条线变红

Answer 2

深入研究后，我认为这是一个错误，我在 Highcharts Github 问题频道上报告了它，您可以在其中关注此主题：https://github.com/highcharts/highcharts/issues/17086

Highmaps 正确显示地图点但不是地图线

Highmaps display correctly mappoints but not maplines

highcharts