AntV:https://antv.antgroup.com/

简述：AntV 是蚂蚁金服为数据可视化开放的框架，其包含了多种可视化方案。

在这里我使用的是 L7·蚂蚁地理空间数据可视化。

这是一个前端的地图工具，可以自由的创建图层，并在此基础上进行所需要的操作。

下面是代码示例：

import { LarkMap, BubbleLayer } from "@antv/larkmap";
import React, { useState, useEffect } from "react";
import style from "./index.module.scss";
import ModalBox from "../../components/ModalBox/ModalBox.jsx";

const config = {
  mapType: "Gaode",
  mapOptions: {
    style: "light",
    center: [108.210792, 34.246026],
    zoom: 4,
    token: "你自己的Token",// 这里是用的高德地图
  },
};

const bubbleLayerOptions = {
  autoFit: true,
  radius: {
    field: "temperature",
    value: ({ temperature }) => temperature,
  },
  fillColor: {
    field: "temperature",
    value: ["#0f9960", "#33a02c", "#377eb8"],
  },
  opacity: 0.4,
  strokeColor: "blue",
  lineWidth: 1,
  state: {
    active: { strokeColor: "red", lineWidth: 2, lineOpacity: 1 },
  },
  label: {
    field: "temperature",
    visible: true,
    style: {
      fill: "#454d64",
      fontSize: 18,
      stroke: "#fff",
      strokeWidth: 2,
      textOffset: [0, -20],
    },
  },
};

export default () => {
  const [layerOptions, setLayerOptions] = useState(bubbleLayerOptions);
  const [source, setSource] = useState({
    data: [],
    parser: { type: "json", x: "lng", y: "lat" },
  });
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [title, setTitle] = useState("");
  useEffect(() => {
    fetch(
      "https://gw.alipayobjects.com/os/antfincdn/Lx96%24Pnwhw/city-weather.json"
    )
      .then((response) => response.json())
      .then((data) => {
        setSource((prevState) => ({ ...prevState, data }));
      });
  }, []);

  const bandClick = (e) => {
    console.log(e);
    console.log(source);
    setIsModalOpen(true);
    setTitle(e.feature.name);
  };
  const closeModal = () => {
    setIsModalOpen(false);
  };

  return (
    <LarkMap mapType="Gaode" {...config} className={style.map}>
      <BubbleLayer {...layerOptions} source={source} onClick={(e) => bandClick(e)} />
      <ModalBox
        title={title}
        closeModal={closeModal}
        isModalOpen={isModalOpen}
      ></ModalBox>
    </LarkMap>
  );
};