在现有的 au-all.topo.json 地图上绘制可点击的形状。

huangapple go评论150阅读模式
英文:

Plot clickable shapes ontop of an existing au-all.topo.json map

问题

I'd like to plot clickable shapes on top of an existing au-all.topo.json map.

I have a map of Australia, with the state names. I don't want any of that part clickable.

I'd like to create custom shapes (regions), which will scale with the maps, which I can click / roll-over.

Is this possible?

I've looked at the demo for Australia here (https://code.highcharts.com/mapdata/) which is kind of what I want, but I need none of that to be clickable, and I need to define my own shapes / polygons which can be interacted with (which when clicked, will populate an HTML area on the right with details).

Thanks, Matt

英文:

I'd like to plot clickable shapes ontop of an existing au-all.topo.json map

I have a map of Australia, with the state names. I don't want any of that part clickable.

I'd like to create custom shapes (regions), which will scale with the maps, which I can click / roll-over.

Is this possible?

I've looked at the demo for Australia here (https://code.highcharts.com/mapdata/) which is kind of what I want, but I need none of that to be clickable, and I need to defined my own shapes / polygons which can be interacted with (which when clicked, will populate an html area on the right with details).

Thanks,
Matt

答案1

得分: 1

在HighMaps中,可以通过几种方式实现在现有地图上添加可点击的形状/多边形。

  1. 您可以添加另一个具有路径的点系列。
series: [{
  ...澳大利亚地图...
}, {
  mapData: [],
  data: [{
    path: 'M 5000 10000 H -1000 V 2000 H 5000'
  }]
}]

演示: 点击此处 <br/>
API: 点击此处

  1. 另一种方法是使用几何属性基于坐标(纬度,经度)生成多边形。
series: [{
  ...澳大利亚地图...
}, {
  mapData: [],
  data: [{
    geometry: {
      type: 'Polygon',
      coordinates: [
        [
          [120.5859375, -30.6757154],
          [135.0878906, -29.9168522],
          [129.2871094, -18.1458518],
          [120.5859375, -30.6757154]
        ]
      ]
    },
  }]
}]

演示: 点击此处 <br/>
API: 点击此处

  1. 还有一种在官方站点的演示列表中记录的方式,使用来自topo.json文件的地图。

演示: 点击此处

英文:

Clickable shape/polygons ontop of an existing map can be achieved in several ways in HighMaps.

  1. You can add another series with a point having path.

<!-- language: lang-js -->

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

Demo: https://jsfiddle.net/BlackLabel/q8n6b2xe/ <br/>
API: https://api.highcharts.com/highmaps/series.map.data.path

  1. Another is to use the geometry property to generate a polygon based on the coordinates (lat, lon)

<!-- language: lang-js -->

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

Demo: https://jsfiddle.net/BlackLabel/qy12ut56/ <br/>
API: https://api.highcharts.com/highmaps/series.map.data.geometry.type

  1. There is one more way that is documented and listed in the demo list on the official site. Which consists in using the map from the topo.json file.

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

huangapple
  • 本文由 发表于 2023年3月8日 16:06:23
  • 转载请务必保留本文链接:https://go.coder-hub.com/75670594.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定