使用 React 和 AmMaps 创建地图

Question

我正在使用 ReactJs 通过 AmCharts 库创建美国地图。我想要的正是：https://www.amcharts.com/demos/us-heat-map/。当您检查它在 fiddle 上的代码时，您会注意到他们在脚本标记中为美国地图使用了一个单独的库。

我在此处查看了 amcharts 文档和 React https://github.com/amcharts/amcharts3-react，但发现它没有太大帮助。我如何使用 React 实现此地图或任何其他县级地图？我应该在我的 index.html 文件中包含美国图书馆吗？我试过这种方法，但我看到一个没有任何错误的空屏幕。检查下面的代码：

import React, {Component} from 'react';
import AmCharts from "@amcharts/amcharts3-react";

export default class Map extends Component {
    render(){
    return(
    <div>
    <AmCharts.React style={{width: "100%",height: "500px"}}
        options={{
          "type": "serial",
          "theme": "light",
          "dataProvider": {
            "map": "usaLow",
            "areas": [ {
              "id": "US-AL",
              "value": 4447100
            }, {
              "id": "US-AK",
              "value": 626932
            }, {
              "id": "US-AZ",
              "value": 5130632
            }, {
              "id": "US-AR",
              "value": 2673400
            }, {
              "id": "US-CA",
              "value": 33871648
            }, {
              "id": "US-CO",
              "value": 4301261
            }, {
              "id": "US-CT",
              "value": 3405565
            }, {
              "id": "US-DE",
              "value": 783600
            }, {
              "id": "US-FL",
              "value": 15982378
            }, {
              "id": "US-GA",
              "value": 8186453
            }, {
              "id": "US-HI",
              "value": 1211537
            }, {
              "id": "US-ID",
              "value": 1293953
            }, {
              "id": "US-IL",
              "value": 12419293
            }, {
              "id": "US-IN",
              "value": 6080485
            }, {
              "id": "US-IA",
              "value": 2926324
            }, {
              "id": "US-KS",
              "value": 2688418
            }, {
              "id": "US-KY",
              "value": 4041769
            }, {
              "id": "US-LA",
              "value": 4468976
            }, {
              "id": "US-ME",
              "value": 1274923
            }, {
              "id": "US-MD",
              "value": 5296486
            }, {
              "id": "US-MA",
              "value": 6349097
            }, {
              "id": "US-MI",
              "value": 9938444
            }, {
              "id": "US-MN",
              "value": 4919479
            }, {
              "id": "US-MS",
              "value": 2844658
            }, {
              "id": "US-MO",
              "value": 5595211
            }, {
              "id": "US-MT",
              "value": 902195
            }, {
              "id": "US-NE",
              "value": 1711263
            }, {
              "id": "US-NV",
              "value": 1998257
            }, {
              "id": "US-NH",
              "value": 1235786
            }, {
              "id": "US-NJ",
              "value": 8414350
            }, {
              "id": "US-NM",
              "value": 1819046
            }, {
              "id": "US-NY",
              "value": 18976457
            }, {
              "id": "US-NC",
              "value": 8049313
            }, {
              "id": "US-ND",
              "value": 642200
            }, {
              "id": "US-OH",
              "value": 11353140
            }, {
              "id": "US-OK",
              "value": 3450654
            }, {
              "id": "US-OR",
              "value": 3421399
            }, {
              "id": "US-PA",
              "value": 12281054
            }, {
              "id": "US-RI",
              "value": 1048319
            }, {
              "id": "US-SC",
              "value": 4012012
            }, {
              "id": "US-SD",
              "value": 754844
            }, {
              "id": "US-TN",
              "value": 5689283
            }, {
              "id": "US-TX",
              "value": 20851820
            }, {
              "id": "US-UT",
              "value": 2233169
            }, {
              "id": "US-VT",
              "value": 608827
            }, {
              "id": "US-VA",
              "value": 7078515
            }, {
              "id": "US-WA",
              "value": 5894121
            }, {
              "id": "US-WV",
              "value": 1808344
            }, {
              "id": "US-WI",
              "value": 5363675
            }, {
              "id": "US-WY",
              "value": 493782
            } ]
          }
        }} />
   </div>
   );
 }
}

我将 http://jsfiddle.net/api/post/library/pure/ 中的以下库添加到我的 index.html 文件

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script src="https://www.amcharts.com/lib/3/ammap.js"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/usaLow.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js">
</script>

如果这不是正确的方法，请告诉我正确的方法。

Answer 1

在普通的 create-react-app 中，只需将此代码放入您的 App.js

import React, { Component } from 'react';
import AmCharts from "@amcharts/amcharts3-react";

class App extends Component {
render(){
 //config as same as yours but inside const
  const config = {
    "type": "map",
    "theme": "light",
    "colorSteps": 10,
    "dataProvider": {
        "map": "usaLow",
        "areas": [{
            "id": "US-AL",
            "value": 4447100
        },{//..all areas mentioned in question}]
    },
    "areasSettings": {
        "autoZoom": true
    },
    "valueLegend": {
        "right": 10,
        "minValue": "little",
        "maxValue": "a lot!"
    },
    "listeners": [{
        "event": "descriptionClosed",
        "method": function(ev) {
            ev.chart.selectObject();
        }
    }]
};

  return (
    <div className="App">
        <AmCharts.React style={{ width: "100%", height: "500px" }} options={config} />
    </div>);
   }
 }

足以将这些包含到 index.html

<link href="https://www.amcharts.com/lib/3/ammap.css" rel="stylesheet">
<script src="https://www.amcharts.com/lib/3/ammap.js"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/usaLow.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>

使用 React 和 AmMaps 创建地图

Using React to create Maps with AmMaps

reactjs

amcharts

ammap