Threejs中地图标记点(波浪效果)实现

上一篇： threejs创建3D地图

视频链接：【完结】three.js炫酷地图(地图流光，飞线，水印动画，高光)

在constant.js中创建标记点省份数组

//飞线坐标
export const flylineAddress = [
    "湖北省",
    "甘肃省",
    "内蒙古自治区",
    "山东省",
    "河南省",
    "陕西省",
    "青海省",
    "辽宁省",
    "山西省",
  ];

//飞机坐标
export const airplaneAddress = [
  "新疆维吾尔自治区",
  "西藏自治区",
  "黑龙江省",
  "广东省",
  "云南省",
];

export const centerAddress='北京市'

2.在index.vue中引入

import { flylineAddress, airplaneAddress, centerAddress } from "../constant";

3.createMap方法中

let centerCoord = null;
      if (province.properties.name == centerAddress) {
        let address = createSprite(province, "/光圈.png", true);
        centerCoord = address;
      }

  if (centerCoord) {
    res.features.forEach((province) => {
      if (flylineAddress.indexOf(province.properties.name) != -1) {
        let address = createSprite(province, "/circle.png");
        //连线
        func_flylineAddress(centerCoord, address);
      }
      if (airplaneAddress.indexOf(province.properties.name) != -1) {
        let address = createSprite(province, "/circle.png");
        createSprite(province, "/圆圈.png", true, 3);
        //飞机
        airlines(centerCoord, address, province.properties.name);
      }
    });
  }

4.在createSprite方法中

let animCircle = [];
function createSprite(
  province,//省份信息
  imageurl,//图片路径
  needanim = false,//是否需要动画
  scaleparam = 2.5,//缩放参数
  opacityparam = 10.0,//透明度参数
  speed = 0.015//速度
) {
  let [x, y] = projection(province.properties.center);
  const map = texture.load(imageurl);
  let material;
  material = new THREE.MeshBasicMaterial({
    map,
    transparent: true,
    depthWrite: false,
    depthTest: false,
    blending: THREE.AdditiveBlending,
  });
  let prite = new THREE.Sprite(material);
  if (needanim) {
    animCircle.push({
      circle: prite,
      offset: 0, //偏移
      speed, //速度
      scaleparam, //缩放参数
      opacityparam, //透明度参数
    });
  }
  prite.position.set(x, -y, 1);
  chinaObj.add(prite);
  return [x, -y, 1];
}

5.在update代码中更新

animCircle.forEach((val) => {
    val.circle.material.opacity =
      val.opacityparam * (1 - val.offset) * (1 - val.offset);
    val.circle.scale.set(
      val.offset * val.scaleparam,
      val.offset * val.scaleparam,
      val.offset * val.scaleparam
    );
    val.offset += val.speed;
    val.offset %= 1;
  });

完整教程链接：https://ke.qq.com/course/6033012#term_id=106263170