Question

我正在使用highcharts-react，这是highcharts的包装。我所期望的是：https://jshare.com.cn/highmaps/hhhhAf 我需要一张地图，并在地图上画点。现在很简单。区别在于我要使用美国地图。到目前为止，我到了这里：一张纯净的美国地图，我尝试在地图中添加一些点。但这不起作用。

代码在这里：

import React from "react";
import { Component } from "react";
import { render } from "react-dom";
import Highcharts from "highcharts";
import HC_map from "highcharts/modules/map";
import HighchartsReact from "highcharts-react-official";
import mapData from "./mapdata.js";
import usaMapData from "./UsaMapData.js";
import usaBubbleData from "./usaBubbleData";

HC_map(Highcharts);

const mapOptions = {
    title: {
        text: "Map-Demo"
    },
    tooltip: {
        formatter: function() {
            return (
                this.point.capital +
                ", " +
                this.point.parentState +
                "<br>Lat: " +
                this.point.lat +
                " Lon: " +
                this.point.lon +
                "<br>Population: " +
                this.point.population
            );
        }
    },
    mapNavigation: {
        enabled: false
    },
    series: [
        {
            name: "Basemap",
            mapData: usaMapData,
            borderColor: "#606060",
            nullColor: "rgba(200, 200, 200, 0.2)",
            showInLegend: false
        },
        {
            type: "mappoint",
            name: "Cities",
            color: "#7cb5ec",
            data: [
                {
                    name: "Montgomery",
                    lat: 32.38012,
                    lon: -86.300629
                },
                {
                    name: "Juneau",
                    lat: 58.29974,
                    lon: -134.406794
                },
                {
                    name: "Phoenix",
                    lat: 33.44826,
                    lon: -112.075774
                },
                {
                    name: "Little Rock",
                    lat: 34.748655,
                    lon: -92.274494
                }
            ]
        }
        // {
        //   type: "mappoint",
        //   dataLabels: {
        //     enabled: true,
        //     format: "{point.capital}"
        //   },
        //   name: "Cities",
        //   data: usaBubbleData,
        //   maxSize: "15%",
        //   color: "#7cb5ec"
        // }
    ]
};

export default class Mapdemo extends Component {
    // eslint-disable-next-line no-useless-constructor
    constructor(props) {
        super(props);
    }

    render() {
        console.dir(usaBubbleData);
        return (
            <div>
                <HighchartsReact
                    highcharts={Highcharts}
                    constructorType={"mapChart"}
                    options={mapOptions}
                />
            </div>
        );
    }
}

有人可以帮助我吗？

Answer 1

我已经通过使用proj4修复了此问题

第一步：安装proj4 npm install proj4

Step2：导入到项目中 import proj4 from "proj4";

Step3：将proj4绑定到窗口： window.proj4 = proj4;

现在纬度/经度可以正确的方式工作。

如何用高图反应绘制点？

1 个答案: