vue3 使用antv地图：地球飞线、地图打点

本文介绍了如何使用AntV库在JavaScript中创建地球模式地图，加载并处理地球数据，添加线层、标记和点层，以及实现动态数据可视化的过程。

const initEarth = () => {
  earthScene = new Scene({
    id: "earth",
    map: new Earth({
      center: [154.113164, 25.570667],
      zoom: 3,
      // pitch: 50
    }),
  });

  // 地球模式下背景色默认为 #000 通过 setBgColor 方法我们可以设置可视化层的背景色
  earthScene.setBgColor("");
  const earthlayer = new EarthLayer()
    .source(earthPic, {
      parser: {
        type: "image",
      },
    })
    .color("#2E8AE6")
    .shape("fill")
    .style({
      opacity: 1.0,
      radius: 40,
      globalOptions: {
        ambientRatio: 0.6, // 环境光
        diffuseRatio: 0.4, // 漫反射
        specularRatio: 0.1, // 高光反射
      },
    })
    .animate(true);

  const atomLayer = new EarthLayer().color("#2E8AE6").shape("atomSphere");

  const bloomLayer = new EarthLayer().color("#fff").shape("bloomSphere").style({
    opacity: 0.7,
  });
  earthScene.on("loaded", () => {
    earthScene.addLayer(earthlayer);
    earthScene.addLayer(atomLayer);
    earthScene.addLayer(bloomLayer);
    Promise.all([
      fetch(
        // earthJson
        window.location.origin + "/json/earthJson.json"
      ).then((d) => d.json()),
      // fetch(
      // 	'/public/assets/antvMap/dot.json'
      // ).then(d => d.text()),
    ]).then(function onLoad([flyline, dot]) {
      const flydata = eval(flyline);
      const dotData = dot;
      // const dotPoint = new PointLayer({ zIndex: 999999