Как рисовать точки с высокими картами-реагировать?

Question

Я использую highcharts-реакции, это обертка 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

Шаг 1: установите proj4 npm install proj4

Шаг 2: импортируйте в проект import proj4 from "proj4";

Шаг 3: привяжите proj4 к окну:window.proj4 = proj4;

и теперь широта / долгота могут работать правильно.