three.js 3D可视化地图

threejs地图

可视化地图——three.js实现

this.provinceInfo = document.getElementById('provinceInfo');// 渲染器this.renderer = new THREE.WebGLRenderer({   antialias: true});this.renderer.setSize(window.innerWidth, window.innerHeight);this.container.appendChild(this.renderer.domElement);this.labelRenderer = new THREE.CSS3DRenderer(); //新建CSS3DRendererthis.labelRenderer.setSize(window.innerWidth, window.innerHeight);this.labelRenderer.domElement.style.position = 'absolute';this.labelRenderer.domElement.style.top = 0;document.body.appendChild(this.labelRenderer.domElement);// 场景this.scene = new THREE.Scene();// 假设 scene 是一个 Scene 对象const textureLoader = new THREE.TextureLoader();this.scene.background = textureLoader.load("img/bg.png"); // 相机 透视相机this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);this.camera.position.set(this.orbitParams.pos.x, this.orbitParams.pos.y, this.orbitParams.pos.z);this.camera.lookAt(this.orbitParams.target.x, this.orbitParams.target.y, this.orbitParams.target.z);

地图数据的加载渲染

this.map = new THREE.Object3D();this.map.add(cityPointGroup);this.map.add(cityGroup);this.map.add(flyGroup);let _this = this;_this.maptext = [];const projection = d3.geoMercator().center([104.0, 37.5]).scale(80).translate([0, 0]);let pintArr = [];const textureLoader = new THREE.TextureLoader();const material = new THREE.MeshPhongMaterial({   color: '#03121b',   transparent: true,   normalScale: new THREE.Vector2( 0.150, 0.150 ),   normalMap: textureLoader.load( 'img/OIP-C.jpg' ),   opacity: 0.9});const material1 = new THREE.MeshBasicMaterial({   color: '#15d0b1',   transparent: true,   // normalMap: textureLoader.load( 'img/earth_normal_2048.jpg' ),   opacity: 0.7});chinaJson.features.forEach(elem => {   // 定一个省份3D对象   const province = new THREE.Object3D();   // 每个的 坐标 数组   const coordinates = elem.geometry.coordinates;   // 循环坐标数组   coordinates.forEach(multiPolygon => {      multiPolygon.forEach(polygon => {         const shape = new THREE.Shape();         const lineMaterial = new THREE.LineBasicMaterial({            color: '#15d0b1',         });         const lineGeometry = new THREE.Geometry();         let boundingBox = {            max: { x:undefined,y:undefined },            min: { x:undefined,y:undefined }         };         for (let i = 0; i  boundingBox.max.x) boundingBox.max.x = x;            if(-y > boundingBox.max.y) boundingBox.max.y = -y;            if(x