关键代码部分：
<template>
<div class="center-map-box" id="contant"></div>
</template>
<script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import {
CSS2DRenderer,
CSS2DObject,
} from "three/addons/renderers/CSS2DRenderer.js";
import * as d3 from "d3";
import jsondata from "@/api/420000_full.json";
let textureLoader = new THREE.TextureLoader(); //纹理贴图加载器
let WaveMeshArr = []; //所有波动光圈集合
let rotatingApertureMesh, rotatingPointMesh;
export default {
data() {
return {
scene: null,
camera: null,
renderer: null,
contant: null,
spotLight: null,
map: null,
centerPos: [114.255221, 30.619014], // 地图中心经纬度坐标
raycaster: null, // 光线投射 用于进行鼠标拾取
mouse: null, // 鼠标位置
labelRenderer: null, //CSS2DRenderer渲染器对象
};
},
mounted() {
// 第一步新建一个场景
this.scene = new THREE.Scene();
this.contant = document.getElementById("contant");
// 辅助线
const axesHelper = new THREE.AxesHelper(10);
this.scene.add(axesHelper);
//环境光
const ambient = new THREE.AmbientLight("#ffffff", 4);
this.scene.add(ambient);
this.setCamera();
this.setRenderer();
this.generateGeometry();
this.setClickFn();
this.setController();
this.animate();
window.onresize = () => {
this.renderer.setSize(
this.contant.clientWidth,
this.contant.clientHeight
);
this.camera.aspect = this.contant.clientWidth / this.contant.clientHeight;
this.camera.updateProjectionMatrix();
};
this.initFloor();
},
methods: {
// 新建透视相机
setCamera() {
this.camera = new THREE.PerspectiveCamera(
45,
this.contant.clientWidth / this.contant.clientHeight,
0.1,
1000
);
// 设置相机位置
this.camera.position.set(20, 20, 20);
},
// 设置渲染器
setRenderer() {
this.renderer = new THREE.WebGLRenderer();
// 设置画布的大小
this.renderer.setSize(
this.contant.clientWidth,
this.contant.clientHeight
);
this.contant.appendChild(this.renderer.domElement);
// 创建CSS2DRenderer渲染器(代替鼠标射线检测)
this.labelRenderer = new CSS2DRenderer();
// 设置labelRenderer渲染器宽高
this.labelRenderer.setSize(
this.contant.clientWidth,
this.contant.clientHeight
);
this.labelRenderer.domElement.style.position = "absolute";
this.labelRenderer.domElement.style.top = "0px";
this.labelRenderer.domElement.style.pointerEvents = "none";
// 将渲染器添加到页面
this.contant.appendChild(this.labelRenderer.domElement);
},
render() {
this.renderer.render(this.scene, this.camera);
this.labelRenderer.render(this.scene, this.camera);
},
generateGeometry() {
// 创建环境贴图
let textureMap = textureLoader.load(require("./mapimg/gz-map.jpeg"));
let texturefxMap = textureLoader.load(require("./mapimg/gz-map-fx.jpeg"));
textureMap.wrapS = THREE.RepeatWrapping; //纹理水平方向的平铺方式
textureMap.wrapT = THREE.RepeatWrapping; //纹理垂直方向的平铺方式
textureMap.flipY = texturefxMap.flipY = false; // 如果设置为true，纹理在上传到GPU的时候会进行纵向的翻转。默认值为true。
textureMap.rotation = texturefxMap.rotation =
THREE.MathUtils.degToRad(45); //rotation纹理将围绕中心点旋转多少度
const scale = 0.01;
textureMap.repeat.set(scale, scale); //repeat决定纹理在表面的重复次数
texturefxMap.repeat.set(scale, scale);
textureMap.offset.set(0.5, 0.5); //offset贴图单次重复中的起始偏移量
texturefxMap.offset.set(0.5, 0.5);
// 初始化一个地图对象
this.map = new THREE.Object3D();
// 地理坐标数据 转换为3D坐标数据
// 墨卡托投影转换
const projection = d3
.geoMercator()
.center(this.centerPos)
.scale(200)
.translate([0, 0]);
jsondata.features.forEach((elem) => {
//this.renderer.render(this.scene, this.camera);
const coordinates = elem.geometry.coordinates;
//这里创建光柱、文字坐标
this.initLightPoint(elem.properties, projection);
// 循环坐标数组
coordinates.forEach((multiPolygon) => {
multiPolygon.forEach((polygon, index) => {
const province = new THREE.Object3D();
// 创建一个多边形轮廓
const shape = new THREE.Shape();
// 线材质对象 创建地图边界线 白色
const lineMaterial = new THREE.LineBasicMaterial({
color: "white",
});
// 创建一个空的几何体对象
const lineGeometry = new THREE.BufferGeometry();
const pointsArray = new Array();
// 循环多边形坐标数组 polygon是地图区块的经纬度坐标数组
for (let i = 0; i < polygon.length; i++) {
const [x, y] = projection(polygon[i]);
if (i === 0) {
shape.moveTo(x, -y);
}
shape.lineTo(x, -y);
// 三维向量对象 用于绘制边界线
pointsArray.push(new THREE.Vector3(x, -y, 4.02));
}
// setFromPoints方法从pointsArray中提取数据改变几何体的顶点属性vertices
// 如果几何体是BufferGeometry，setFromPoints方法改变的是.attributes.position属性
lineGeometry.setFromPoints(pointsArray);
// 拉伸参数
const extrudeSettings = {
depth: 1, // 拉伸度 （3D地图厚度）
bevelEnabled: false, // 是否使用倒角
};
// 将多边形 拉伸扫描成型 //shape二维轮廓 //extrudeSettings拉伸参数
const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
// 创建高光材质
const material = new THREE.MeshPhongMaterial({
map: textureMap, //颜色贴图
normalMap: texturefxMap, //用于创建法线贴图的纹理
// normalScale: new THREE.Vector2(12.2, 2.2),//法线贴图对材质的影响程度
color: "#7bc6c2",
combine: THREE.MultiplyOperation, //如何将表面颜色的结果与环境贴图
transparent: true,
opacity: 1,
});
// 创建基础网格材质
const material1 = new THREE.MeshBasicMaterial({
color: "#3480C4",
transparent: true,
opacity: 0.4,
});
// 多边形添加材质
const mesh = new THREE.Mesh(geometry, [
material, //表面材质
material1, //侧面材质
]);
mesh.rotateX(-Math.PI / 2); //x轴旋转
mesh.position.set(0, 1.5, -3); //设置放置位置
const line = new THREE.Line(lineGeometry, lineMaterial);
//this.materialArr.push(material);
province.properties = elem.properties;
province.add(mesh);
line.rotateX(-Math.PI / 2); //x轴旋转
line.position.set(0, -1.5, -3); //设置放置位置
province.add(line);
this.map.add(province);
this.render();
});
});
});
this.map.position.set(4, 0, 6);
this.scene.add(this.map);
//this.spotLight.target = this.map;
//this.camera.position.set(0, -0.7, 2.5);
this.renderer.render(this.scene, this.camera);
},
/**
* @description // 创建光柱
* @param {*} x d3 - 经纬度转换后的x轴坐标
* @param {*} z d3 - 经纬度转换后的z轴坐标
* @param {*} heightScaleFactor
*/
createLightPillar(x, z, heightScaleFactor = 1) {
let group = new THREE.Group();
// 柱体高度
const height = heightScaleFactor;
// 柱体的geo,6.19=柱体图片高度/宽度的倍数
const geometry = new THREE.PlaneGeometry(height / 6.219, height);
// 柱体旋转90度，垂直于Y轴
// geometry.rotateX(Math.PI / 2)
// 柱体的z轴移动高度一半对齐中心点
geometry.translate(0, height / 2, 0);
// 柱子材质
const material = new THREE.MeshBasicMaterial({
map: textureLoader.load(require("./mapimg/光柱.png")),
color: 0x00ffff,
transparent: true,
depthWrite: false,
// depthTest:false,
side: THREE.DoubleSide,
});
// 光柱01
let light01 = new THREE.Mesh(geometry, material);
light01.renderOrder = 2;
light01.name = "createLightPillar01";
// 光柱02：复制光柱01
let light02 = light01.clone();
light02.renderOrder = 2;
light02.name = "createLightPillar02";
// 光柱02，旋转90°，跟 光柱01交叉
light02.rotateY(Math.PI / 2);
// 创建底部标点
const bottomMesh = this.createPointMesh(0.5);
// 创建光圈
const lightHalo = this.createLightHalo(0.5);
WaveMeshArr.push(lightHalo);
// 将光柱和标点添加到组里
group.add(bottomMesh, lightHalo, light01, light02);
// 设置组对象的姿态
// group = setMeshQuaternion(group, R, lon, lat)
group.position.set(x, 2.6, z);
return group;
},
/**
* @description 创建底部标点
* @param {number} size 缩放大小
*/
createPointMesh(size) {
// 标记点：几何体，材质，
const geometry = new THREE.PlaneGeometry(1, 1);
const material = new THREE.MeshBasicMaterial({
map: textureLoader.load(require("./mapimg/标注.png")),
color: 0x00ffff,
side: THREE.DoubleSide,
transparent: true,
depthWrite: false, //禁止写入深度缓冲区数据
});
let mesh = new THREE.Mesh(geometry, material);
mesh.renderOrder = 2;
mesh.rotation.x = Math.PI / 2;
mesh.name = "createPointMesh";
// 缩放
const scale = 1 * size;
mesh.scale.set(scale, scale, scale);
return mesh;
},
/**
* @description 创建底部标点的光圈
* @param {number} size 缩放大小
*/
createLightHalo(size) {
// 标记点：几何体，材质，
const geometry = new THREE.PlaneGeometry(1, 1);
const material = new THREE.MeshBasicMaterial({
map: textureLoader.load(require("./mapimg/标注光圈.png")),
color: 0x00ffff,
side: THREE.DoubleSide,
opacity: 0,
transparent: true,
depthWrite: false, //禁止写入深度缓冲区数据
});
let mesh = new THREE.Mesh(geometry, material);
mesh.renderOrder = 2;
mesh.name = "createLightHalo";
mesh.rotation.x = Math.PI / 2;
// 缩放
const scale = 1.5 * size;
mesh.size = scale; //自顶一个属性，表示mesh静态大小
mesh.scale.set(scale, scale, scale);
return mesh;
},
random(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
},
/**
* @description 创建光柱、文字坐标
* @param {*} properties 属性、详情
* @param {Function} projection d3-geo转化坐标
*/
initLightPoint(properties, projection) {
// 创建光柱
let heightScaleFactor = 2 + this.random(1, 5) / 5;
let lightCenter = properties.centroid || properties.center;
let areaName = properties.name;
// projection用来把经纬度转换成坐标
const [x, y] = projection(lightCenter);
let light = this.createLightPillar(x, y, heightScaleFactor);
light.position.z -= 3;
this.map.add(light);
//这里创建文字坐标
this.createTextPoint(x, y, areaName);
},
/**
* @description 创建文字坐标
* @param {*} x d3 - 经纬度转换后的x轴坐标
* @param {*} z d3 - 经纬度转换后的z轴坐标
* @param {*} areaName 地名
*/
createTextPoint(x, z, areaName) {
let tag = document.createElement("div");
tag.innerHTML = areaName;
tag.style.color = "#fff";
tag.style.pointerEvents = "auto";
tag.style.position = "absolute";
tag.addEventListener("mousedown", this.clickLabel, false); // 有时候PC端click事件不生效，不知道什么原因，就使用mousedown事件
tag.addEventListener("touchstart", this.clickLabel, false);
let label = new CSS2DObject(tag);
//label.element.innerHTML = areaName;
label.element.style.visibility = "visible";
label.position.set(x, 3, z);
label.position.x += 4;
label.position.z += 3;
this.scene.add(label);
},
/**
* @description 文字坐标点击
* @param {*} e
*/
clickLabel(e) {
console.log("🚀 ~ clickLabel ~ e:", e);
},
/**
* @description 添加底部旋转背景
*/
initFloor() {
const geometry = new THREE.PlaneGeometry(80, 80);
let texture = textureLoader.load(require("./mapimg/地板背景.png"));
const material = new THREE.MeshPhongMaterial({
color: 0xffffff,
map: texture,
// emissive:0xffffff,
// emissiveMap:Texture,
transparent: true,
opacity: 1,
depthTest: true,
// roughness:1,
// metalness:0,
depthWrite: false,
// side: THREE.DoubleSide
});
let plane = new THREE.Mesh(geometry, material);
plane.rotateX(-Math.PI / 2);
this.scene.add(plane);
// 旋转装饰圆环1
let rotatingApertureTexture = textureLoader.load(
require("./mapimg/rotatingAperture.png")
);
let rotatingApertureerial = new THREE.MeshBasicMaterial({
map: rotatingApertureTexture,
transparent: true,
opacity: 1,
depthTest: true,
depthWrite: false,
});
let rotatingApertureGeometry = new THREE.PlaneGeometry(25, 25);
rotatingApertureMesh = new THREE.Mesh(
rotatingApertureGeometry,
rotatingApertureerial
);
rotatingApertureMesh.rotateX(-Math.PI / 2);
rotatingApertureMesh.position.y = 0.02;
rotatingApertureMesh.scale.set(1.2, 1.2, 1.2);
this.scene.add(rotatingApertureMesh);
// 旋转装饰圆环2
let rotatingPointTexture = textureLoader.load(
require("./mapimg/rotating-point2.png")
);
let material2 = new THREE.MeshBasicMaterial({
map: rotatingPointTexture,
transparent: true,
opacity: 1,
depthTest: true,
depthWrite: false,
});
rotatingPointMesh = new THREE.Mesh(rotatingApertureGeometry, material2);
rotatingPointMesh.rotateX(-Math.PI / 2);
rotatingPointMesh.position.y = 0.04;
rotatingPointMesh.scale.set(1, 1, 1);
this.scene.add(rotatingPointMesh);
// 背景小圆点
let circlePoint = textureLoader.load(
require("./mapimg/circle-point.png")
);
let material3 = new THREE.MeshPhongMaterial({
color: 0x00ffff,
map: circlePoint,
transparent: true,
opacity: 1,
depthWrite: false,
// depthTest: false,
});
let plane3 = new THREE.PlaneGeometry(30, 30);
let mesh3 = new THREE.Mesh(plane3, material3);
mesh3.rotateX(-Math.PI / 2);
mesh3.position.y = 0.06;
this.scene.add(mesh3);
},
//加事件
setClickFn() {
this.raycaster = new THREE.Raycaster();
this.mouse = new THREE.Vector2();
const onMouseMove = (event) => {
var marginLeft = this.contant.offsetLeft;
var marginTop = this.contant.offsetTop + 92;
// 如果该地图不是占满全屏需要减去margintop和marginleft
// 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)
// this.mouse.x = (event.clientX / this.contant.clientWidth) * 2 - 1;
// this.mouse.y = -(event.clientY / this.contant.clientHeight) * 2 + 1;
this.mouse.x =
((event.clientX - marginLeft) / this.contant.clientWidth) * 2 - 1;
this.mouse.y =
-((event.clientY - marginTop) / this.contant.clientHeight) * 2 + 1;
};
let clickPosition;
window.addEventListener("mousemove", onMouseMove, false);
// 鼠标点击事件
const onclick = (event) => {
var marginLeft = this.contant.offsetLeft;
var marginTop = this.contant.offsetTop;
// let x = (event.clientX / this.contant.clientWidth) * 2 - 1;
// let y = -(event.clientY / this.contant.clientHeight) * 2 + 1;
// 如果该地图不是占满全屏需要减去margintop和marginleft
let x =
((event.clientX - marginLeft) / this.contant.clientWidth) * 2 - 1;
let y =
-((event.clientY - marginTop) / this.contant.clientHeight) * 2 + 1;
clickPosition = { x: x, y: y };
this.raycaster.setFromCamera(clickPosition, this.camera);
// 算出射线 与当场景相交的对象有那些
const intersects = this.raycaster.intersectObjects(
this.scene.children,
true
);
let clickObj = intersects.find(
(item) => item.object.material && item.object.material.length === 2
);
// 点击区县
if (clickObj && clickObj.object) {
console.log(clickObj);
// this.$emit('clickAreaCheck',clickObj)
}
};
window.addEventListener("mousedown", onclick, false);
},
// 设置最大旋转的角度
setController() {
const controls = new OrbitControls(this.camera, this.renderer.domElement);
controls.maxPolarAngle = 2.5;
controls.minPolarAngle = 1;
controls.maxAzimuthAngle = 1;
controls.minAzimuthAngle = -1;
controls.addEventListener("change", () => {
this.renderer.render(this.scene, this.camera);
});
},
animate() {
// 背景圆环 转动
if (rotatingApertureMesh) {
rotatingApertureMesh.rotation.z += 0.0005;
}
if (rotatingPointMesh) {
rotatingPointMesh.rotation.z -= 0.0005;
}
// 圆柱底部 波纹
if (WaveMeshArr.length) {
WaveMeshArr.forEach(function (mesh) {
mesh._s += 0.007;
mesh.scale.set(
mesh.size * mesh._s,
mesh.size * mesh._s,
mesh.size * mesh._s
);
if (mesh._s <= 1.5) {
//mesh._s=1，透明度=0 mesh._s=1.5，透明度=1
mesh.material.opacity = (mesh._s - 1) * 2;
} else if (mesh._s > 1.5 && mesh._s <= 2) {
//mesh._s=1.5，透明度=1 mesh._s=2，透明度=0
mesh.material.opacity = 1 - (mesh._s - 1.5) * 2;
} else {
mesh._s = 1.0;
}
});
}
window.requestAnimationFrame(this.animate);
// 通过摄像机和鼠标位置更新射线
this.raycaster.setFromCamera(this.mouse, this.camera);
this.labelRenderer.render(this.scene, this.camera);
this.renderer.render(this.scene, this.camera);
},
},
};
</script>
<style>
.center-map-box {
width: 100%;
height: 100%;
position: relative;
font-size: 14px;
}
</style>
