上一篇: 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