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

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 })
      // 	.source(dotData, {
      // 		// parser: {
      // 		// 	type: 'json',
      // 		// 	x: 'lng',
      // 		// 	y: 'lat'
      // 		// }
      // 	})
      // 	.shape('simple')
      // 	.color('#ffed11')
      // 	// .animate(true)
      // 	.size(940);

      // console.log(dotData,'---dotData');
      // dotData.forEach(i => {
      // 	const el = document.createElement("div");
      // 	el.innerHTML = ``;
      // 	const marker = new Marker({
      // 		element: el
      // 	}).setLnglat({
      // 		lng: i.lng,
      // 		lat: i.lat
      // 	});
      // 	earthScene.addMarker(marker);
      // })
      console.log(flydata, "---flydata");
      const flyLine = new LineLayer({ blend: "normal" })
        .source(flydata, {
          parser: {
            type: "json",
            coordinates: "coord",
          },
        })
        .color("#fadd3a")
        .shape("arc3d")
        .size("volumes")
        // .active(true)
        .animate({
          interval: 2,
          trailLength: 2,
          duration: 2,
        })
        .style({
          segmentNumber: 60,
          globalArcHeight: 10,
        });
      earthScene.addLayer(flyLine);
      // earthScene.addLayer(dotPoint);
    });
    // setTimeout(() => {
    // 	earthlayer.setEarthTime(4.0);
    // }, 500);
  });
};

构建dom实例

页面打开时执行init方法，即可

地球

let chinaScene = null;
const initMap = () => {
  chinaScene = new Scene({
    id: "mapChina",
    map: new Map({
      style: "dark",
      center: [104.113164, 25.570667],
      zoom: 3.8,
      pitch: 50,
    }),
  });
  chinaScene.on("loaded", () => {
    let lineDown, lineUp, textLayer;
    fetch(window.location.origin + "/json/china.json")
      .then((res) => res.json())
      .then((data) => {
        const texts = [];
        data.features.map((option) => {
          const { name, center } = option.properties;
          const [lng, lat] = center;
          texts.push({ name, lng, lat });
          return "";
        });
        textLayer = new PointLayer({ zIndex: 2 })
          .source(texts, {
            parser: {
              type: "json",
              x: "lng",
              y: "lat",
            },
          })
          .shape("name", "text")
          .size(14)
          .color("#0ff")
          .style({
            textAnchor: "center", // 文本相对锚点的位置 center|left|right|top|bottom|top-left
            spacing: 2, // 字符间距
            padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
            stroke: "#0ff", // 描边颜色
            strokeWidth: 0.2, // 描边宽度
            raisingHeight: 20000,
            textAllowOverlap: true,
          });
        chinaScene.addLayer(textLayer);
        lineUp = new LineLayer({ zIndex: 1 })
          .source(data)
          .shape("line")
          .color("#0DCCFF")
          .size(1)
          .style({
            raisingHeight: 20000,
          });
        chinaScene.addLayer(lineUp);
        return "";
      });

    fetch(window.location.origin + "/json/chinaNationalLayer.json")
      .then((res) => res.json())
      .then((data) => {
        const nationalLayer = new PolygonLayer({})
          .source(data)
          .size(20000)
          .shape("extrude")
          .color("#0DCCFF")
          // .active({
          // 	color: 'rgb(100,230,255)'
          // })
          .style({
            mapTexture: provinceImg, //如果想使用纹理贴图，shap必须为extrude
            heightfixed: true,
            pickLight: true,
            raisingHeight: 1,
            opacity: 0.8,
            sourceColor: "#333", //抬高高度的颜色
            targetColor: "#fff",
            // sourceColor: "#333", //抬高高度的颜色
          });

        chinaScene.addLayer(nationalLayer);
      });

    fetch(window.location.origin + "/json/chinaFlyLine.json")
      .then((res) => res.json())
      .then((data) => {
        const flyLine = new LineLayer({ blend: "normal", zIndex: 3 })
          .source(data, {
            parser: {
              type: "json",
              coordinates: "coord",
            },
          })
          .color("#fadd3a")
          .shape("arc3d")
          .size("volumes")
          // .active(true)
          .animate({
            interval: 1,
            trailLength: 2,
            duration: 2,
          })
          .style({
            segmentNumber: 60,
            globalArcHeight: 30,
          });
        chinaScene.addLayer(flyLine);
      });
    fetch(window.location.origin + "/json/dot.json")
      .then((res) => res.json())
      .then((data) => {
        data.forEach((i) => {
          const el = document.createElement("div");
          el.innerHTML = ``;
          const marker = new Marker({
            element: el,
          }).setLnglat({
            lng: i.lng,
            lat: i.lat,
          });
          chinaScene.addMarker(marker);
        });
        // const dotPoint = new PointLayer()
        // 	.source(data, {
        // 		parser: {
        // 			type: 'json',
        // 			x: 'lng',
        // 			y: 'lat'
        // 		}
        // 	})
        // 	.shape('circle')
        // 	.color('#ffed11')
        // 	.animate(true)
        // 	.size(840);
        // 	chinaScene.addLayer(dotPoint);
      });
  });
};