如何从SVG文件制作可点击的地图? [英] How to make a clickable map from an SVG file?

问题描述

目前，我正在学习Javascript.

Currently I am learning Javascript.

我正在尝试制作一张可点击的德国地图，以显示数据. 就像此.

What I am trying is to make a clickable map of Germany displaying data. Just like this.

Amchart提供德国地图.但这似乎不像上面的那个.

Amchart provides Germany map . But it does not seem like the one above.

我有一些德国的数据，想像上面一样按地区显示.

I have some data of Germany and want to display it according to regions just like the above.

我知道我首先需要在html上加载jquery，但不知道如何处理德国SVG.

I know first I need to load jquery on html but have no idea how to do with the Germany SVG.

你能告诉我怎么做吗?预先谢谢你.

Could you tell me how to? Thank you in advance.

推荐答案

您可以轻松更改您引用的美国示例( https://www.amcharts.com/demos/us-heat-map/到德国.

You can easily change the USA example you cited (https://www.amcharts.com/demos/us-heat-map/) to Germany like this.

最重要，请参考德国数据:

Most important, reference the Germany data:

<script src="https://www.amcharts.com/lib/4/geodata/germanyLow.js"></script>

然后将地图定义行更改为:

Then change the map definition line to:

// Set map definition
  chart.geodata = window.am4geodata_germanyLow;

并使用德国州ID设置德国数据.您可以将数据更改为所需的数据:

And set the German Data with the german state IDs. You can change the data to what you want:

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>

这篇关于如何从SVG文件制作可点击的地图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！