highcharts 在现有au-all.topo.jsonMap上绘制可单击形状

vql8enpb 于 2023-03-18 发布在 Highcharts

关注(0)|答案(1)|浏览(107)

我想在现有au-all.topo.jsonMap上绘制可单击形状
我有一张澳大利亚的Map，上面有各州的名字。我不想让任何一个部分被点击。
我想创建自定义形状（区域），它将与Map一起缩放，我可以单击/滚动。
这可能吗？
我已经看了澳大利亚的演示（https://code.highcharts.com/mapdata/），这是我想要的，但我不需要任何一个可以点击，我需要定义我自己的形状/多边形，可以与之交互（当点击时，将填充右侧的html区域的细节）。
谢谢马特

highcharts

来源：https://stackoverflow.com/questions/75670594/plot-clickable-shapes-ontop-of-an-existing-au-all-topo-json-map

1条答案

按热度按时间

wz3gfoph1#

在HighMaps中，可通过多种方式在现有Map上点击形状/多边形。
1.您可以添加另一个系列，其中的点具有路径。

series: [{
  ...australian map...
}, {
  mapData: [],
  data: [{
    path: 'M 5000 10000 H -1000 V 2000 H 5000'
  }]
}]

演示：https://jsfiddle.net/BlackLabel/q8n6b2xe/
API：https://api.highcharts.com/highmaps/series.map.data.path

1.另一种是使用geometry属性基于坐标（lat，lon）生成多边形

series: [{
  ...australian map...
}, {
  mapData: [],
  data: [{
    geometry: {
      type: 'Polygon',
      coordinates: [
        [
          [120.5859375, -30.6757154],
          [135.0878906, -29.9168522],
          [129.2871094, -18.1458518],
          [120.5859375, -30.6757154]
        ]
      ]
    },
  }]
}]

演示：https://jsfiddle.net/BlackLabel/qy12ut56/
API：https://api.highcharts.com/highmaps/series.map.data.geometry.type

1.还有一种方法被记录在官方网站的演示列表中，包括使用topo.json文件中的Map。

演示：https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/maps/demo/distribution

赞(0）回复(0）举报 2023-03-18