英文:
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中,可以通过几种方式实现在现有地图上添加可点击的形状/多边形。
- 您可以添加另一个具有路径的点系列。
series: [{
...澳大利亚地图...
}, {
mapData: [],
data: [{
path: 'M 5000 10000 H -1000 V 2000 H 5000'
}]
}]
- 另一种方法是使用几何属性基于坐标(纬度,经度)生成多边形。
series: [{
...澳大利亚地图...
}, {
mapData: [],
data: [{
geometry: {
type: 'Polygon',
coordinates: [
[
[120.5859375, -30.6757154],
[135.0878906, -29.9168522],
[129.2871094, -18.1458518],
[120.5859375, -30.6757154]
]
]
},
}]
}]
- 还有一种在官方站点的演示列表中记录的方式,使用来自topo.json文件的地图。
演示: 点击此处
英文:
Clickable shape/polygons ontop of an existing map can be achieved in several ways in HighMaps.
- You can add another series with a point having path.
<!-- language: lang-js -->
series: [{
...australian map...
}, {
mapData: [],
data: [{
path: 'M 5000 10000 H -1000 V 2000 H 5000'
}]
}]
Demo: https://jsfiddle.net/BlackLabel/q8n6b2xe/ <br/>
API: https://api.highcharts.com/highmaps/series.map.data.path
- 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: 'Polygon',
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
- 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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论