highcharts 高分辨率Map可正确显示Map点，但不能显示Map线

zy1mlcev 于 2022-11-11 发布在 Highcharts

关注(0)|答案(2)|浏览(183)

我需要使用Highmaps在Map上显示一些信息，如点、线...显示初始Map和一些Map点（带纬度/经度坐标）工作得很好。但是当我在Map上已经显示的两个点之间添加一条简单的Map线（线串）时，Map线没有绘制出来。下面是一个示例：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]
                }
            }]

但是，添加以链接这2个点的Map线（名为“road”）不会与以下数据一起显示：

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

我还需要补充什么吗？

highcharts

来源：https://stackoverflow.com/questions/71439566/highmaps-display-correctly-mappoints-but-not-maplines

2条答案

按热度按时间

wpx232ag1#

如果您使用TopoJSONMap，则您尝试执行的操作将正常工作。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
在v10之前，我们的大多数Map使用的坐标系都是自定义的，X和Y值的范围从0到几千。当从Map集合加载GeoJSONMap而不是TopoJSONMap时，这仍然适用。在proj4js库的支持下，可以通过lon和lat选项放置点。如果没有proj4.js，点将作为x添加。y对与Map在同一个坐标系上。然而，Mapline被给出为路径。
它解释了如果不使用地形数据，则必须转换坐标，或者使用与Map相同的坐标系来表示直线。
P.S.不知道为什么设置color行不起作用，但设置nullColor行。但是，这是我必须做的，使行红色

赞(0）回复(0）举报 2022-11-11

yqyhoc1h2#

在深入研究后，我认为这是一个bug，我在Highcharts Github问题频道上报告了它，在那里你可以按照这个线程：https://github.com/highcharts/highcharts/issues/17086

赞(0）回复(0）举报 2022-11-11