javascript - 如何从 SVG 文件制作可点击的地图?
问题描述
目前我正在学习 Javascript。
我正在尝试制作一张显示数据的德国可点击地图。就像这样。
Amchart 提供德国地图。但它似乎不像上面那个。
我有一些德国的数据,想像上面一样按地区显示。
我首先知道我需要在 html 上加载 jquery,但不知道如何处理德国 SVG。
你能告诉我怎么做吗?先感谢您。
解决方案
您可以像这样轻松地将您引用的美国示例 ( https://www.amcharts.com/demos/us-heat-map/ ) 更改为德国。
最重要的是,参考德国数据:
<script src="https://www.amcharts.com/lib/4/geodata/germanyLow.js"></script>
然后将地图定义行更改为:
// Set map definition
chart.geodata = window.am4geodata_germanyLow;
并使用德国州 ID 设置德国数据。您可以将数据更改为您想要的:
polygonSeries.data = [
{
id: "DE-BB",
value: 4447100
},
{
id: "DE-BE",
value: 626932
},
...
]
完整演示:https ://codepen.io/Alexander9111/pen/YzXRJWK
以及以下:
//<!-- Chart code -->
//console.log(window.am4core);
//console.log(window.am4geodata_germanyLow);
window.am4core.ready(function () {
// Themes begin
window.am4core.useTheme(am4themes_animated);
// Themes end
// Create map instance
var chart = window.am4core.create("chartdiv", window.am4maps.MapChart);
// Set map definition
chart.geodata = window.am4geodata_germanyLow;
// Set projection
//chart.projection = new window.am4maps.projections.Albers();
// Create map polygon series
var polygonSeries = chart.series.push(new window.am4maps.MapPolygonSeries());
//Set min/max fill color for each area
polygonSeries.heatRules.push({
property: "fill",
target: polygonSeries.mapPolygons.template,
min: chart.colors.getIndex(1).brighten(1),
max: chart.colors.getIndex(1).brighten(-0.3)
});
// Make map load polygon data (state shapes and names) from GeoJSON
polygonSeries.useGeodata = true;
// Set heatmap values for each state
polygonSeries.data = [
{
id: "DE-BB",
value: 4447100
},
{
id: "DE-BE",
value: 626932
},
{
id: "DE-BW",
value: 5130632
},
{
id: "DE-BY",
value: 2673400
},
{
id: "DE-HB",
value: 33871648
},
{
id: "DE-HE",
value: 4301261
},
{
id: "DE-HH",
value: 3405565
},
{
id: "DE-MV",
value: 783600
},
{
id: "DE-NI",
value: 15982378
},
{
id: "DE-NW",
value: 8186453
},
{
id: "DE-RP",
value: 1211537
},
{
id: "DE-SH",
value: 1293953
},
{
id: "DE-SL",
value: 12419293
},
{
id: "DE-SN",
value: 6080485
},
{
id: "DE-ST",
value: 2926324
},
{
id: "DE-TH",
value: 2688418
}
];
// Set up heat legend
let heatLegend = chart.createChild(window.am4maps.HeatLegend);
heatLegend.series = polygonSeries;
heatLegend.align = "right";
heatLegend.valign = "bottom";
heatLegend.width = window.am4core.percent(20);
heatLegend.marginRight = window.am4core.percent(4);
heatLegend.minValue = 0;
heatLegend.maxValue = 40000000;
// Set up custom heat map legend labels using axis ranges
var minRange = heatLegend.valueAxis.axisRanges.create();
minRange.value = heatLegend.minValue;
minRange.label.text = "Little";
var maxRange = heatLegend.valueAxis.axisRanges.create();
maxRange.value = heatLegend.maxValue;
maxRange.label.text = "A lot!";
// Blank out internal heat legend value axis labels
heatLegend.valueAxis.renderer.labels.template.adapter.add("text", function (
labelText
) {
return "";
});
// Configure series tooltip
var polygonTemplate = polygonSeries.mapPolygons.template;
polygonTemplate.tooltipText = "{name}: {value}";
polygonTemplate.nonScalingStroke = true;
polygonTemplate.strokeWidth = 0.5;
// Create hover state and set alternative fill color
var hs = polygonTemplate.states.create("hover");
hs.properties.fill = window.am4core.color("#3c5bdc");
}); // end am4core.ready()
#chartdiv {
width: 100%;
height: 500px
}
<!-- HTML -->
<div id="chartdiv"></div>
<!-- Resources -->
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/maps.js"></script>
<script src="https://www.amcharts.com/lib/4/geodata/germanyLow.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
推荐阅读
- postgresql - 如何在 JPA 实体管理器中提交事务,条件是检查数据库中的查询
- javascript - 使用 date-fns 解析多种格式
- bash - 如何使用 printf 获取颜色和宽度格式
- powerquery - 将列表字符串解析为列表类型
- twilio - 无法建立新连接:[Errno 110] - twilio 中的连接超时(间歇性)
- java - 在 groovy 文件 Java 11 中导入 Java 类的问题
- python - Ansible 导致分段错误
- angular - 无法使用翻译构建测试模块
- xml - Importxml 函数停止在谷歌表格上工作
- c# - 自动验证并检查用户名是否被使用。ASP 网络核心