如何在highcharts中组合多个地图

Question

我正在制作地图高图表，其想法是在背景中有一张世界地图，在“前面”有一些自定义多边形，用户可以单击并选择。 问题是，由于某种原因，我无法让“背景”地图留在后台，而是它一直显示在前面，因此自定义地图根本不显示。一旦我删除背景系列，它就起作用了。

我尝试过更改zIndex等设置，但似乎没有任何效果。

演示小提琴：https://jsfiddle.net/dLju3z6s/1/

(async () => {
  const geo = await fetch(
    'https://code.highcharts.com/mapdata/custom/world-continents.geo.json'
  ).then(response => response.json());
  const europe = await fetch(
    'https://raw.githubusercontent.com/leakyMirror/map-of-europe/master/TopoJSON/europe.topojson').then(response => response.json());

  // Initialize the chart
  Highcharts.mapChart('container', {
    title: {
      text: 'Multiple map'
    },
    mapNavigation: {
      enabled: true,
      buttonOptions: {
        verticalAlign: 'bottom'
      }
    },
    plotOptions: {
      map: {
      }
    },
    series: [{
      name: 'globe',
      mapData: geo,joinBy: ['NAME', 'code'],
      data: []
    }, {
      name: 'UTC',
      data: ['Azerbaijan', 'Albania', 'Austria'].map(code => ({code})),
      mapData: europe,
      joinBy: ['NAME', 'code']
    }]
  });
})();

有没有办法让它与多个重叠的地图一起工作，或者是否可以只放置正确调整大小的静态图像？

Answer 1

根据此教程，看起来多个地图源只能使用 TopoJSON 组合在同一个 Highcharts 地图中。由于您的背景地图采用 GeoJSON 格式，因此您可以使用 geo2topo 之类的工具将其转换为 TopoJSON。但我不太确定这是否有效，因为该地图投影是米勒圆柱投影，而您的欧洲地图具有兰伯特等角圆锥投影。它们也有不同的布局。似乎更容易的是简单地找到 TopoJSON 格式的类似背景地图：

(async () => {

  const geo = await fetch(
    'https://code.highcharts.com/mapdata/custom/world.topo.json'
  ).then(response => response.json());

  const europe = await fetch(
    'https://raw.githubusercontent.com/leakyMirror/map-of-europe/master/TopoJSON/europe.topojson').then(response => response.json());

  // Initialize the chart
  Highcharts.mapChart('container', {
    title: {
      text: 'Multiple map'
    },

    mapNavigation: {
      enabled: true,
      buttonOptions: {
        verticalAlign: 'bottom'
      }
    },

    series: [{
      name: 'globe',
      mapData: geo,
      joinBy: null,
      data: []
    }, {
      name: 'UTC',
      data: ['Azerbaijan', 'Albania', 'Austria'].map(code => ({code})),
      mapData: europe,
      joinBy: ['NAME', 'code']
    }]
  });
})();

结果：