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(); //新建CSS3DRenderer
this.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 < polygon.length; i++) {
            const [x, y] = projection(polygon[i]);
            if (i === 0) {
               shape.moveTo(x, -y);
            }
            shape.lineTo(x, -y);
            lineGeometry.vertices.push(new THREE.Vector3(x, -y, 4.01));

            if(undefined==boundingBox.max.x) boundingBox.max.x = x;
            if(undefined==boundingBox.max.y) boundingBox.max.y = -y;
            if(undefined==boundingBox.min.x) boundingBox.min.x = x;
            if(undefined==boundingBox.min.y) boundingBox.min.y = -y;
            if(x > boundingBox.max.x) boundingBox.max.x = x;
            if(-y > boundingBox.max.y) boundingBox.max.y = -y;
            if(x < boundingBox.min.x) boundingBox.min.x = x;
            if(-y < boundingBox.min.y) boundingBox.min.y = -y;
         }

         let width = Math.abs( boundingBox.max.x - boundingBox.min.x );
         let height = Math.abs( boundingBox.max.y - boundingBox.min.y );

         const extrudeSettings = {
            depth: 4,
            bevelEnabled: false,
            UVGenerator : {

               generateTopUV: function ( geometry, vertices, indexA, indexB, indexC ) {  },

               generateSideWallUV: function ( geometry, vertices, indexA, indexB, indexC, indexD ) {

               }
            }
         };
     
         const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);


         const mesh = new THREE.Mesh(geometry, [material, material1]);
         const line = new THREE.Line(lineGeometry, lineMaterial);
         mesh.userData.oldMaterial = true;
         province.add(mesh);
         province.add(line)
      })

   })

 
   province.properties = elem.properties;
   if (elem.properties.contorid) {
      const [x, y] = projection(elem.properties.contorid);
      province.properties._centroid = [x, y];
   }

   _this.map.add(province);

   if (elem.properties.center) {
      const [x, y] = projection(elem.properties.center);
      const center = new THREE.Vector3(x, -y, 4.01);
  
      _this.maptext.push( {
         pos:center,
         text:elem.properties.name
      } );
   }
   if (elem.properties.name == "北京市") {
      const [x, y] = projection(elem.properties.center);
      const center = new THREE.Vector3(x, -y, 4.01);
      pintArr.push(center.clone())
   }
})

this.scene.add(this.map);
this.loadFont(_this.maptext);
_this.ctrlBarDatas( true,'bar','北京市' );

相关推荐
宅小海2 小时前
scala String
大数据·开发语言·scala
小白的白是白痴的白2 小时前
11.17 Scala练习:梦想清单管理
大数据
java1234_小锋3 小时前
Elasticsearch是如何实现Master选举的?
大数据·elasticsearch·搜索引擎
GIS思维3 小时前
ArcGIS定义投影与投影的区别(数据和底图不套合的原因和解决办法)
arcgis·gis·地理信息·arcgis坐标系·动态投影
Java 第一深情7 小时前
零基础入门Flink,掌握基本使用方法
大数据·flink·实时计算
MXsoft6187 小时前
华为服务器(iBMC)硬件监控指标解读
大数据·运维·数据库
PersistJiao8 小时前
Spark 分布式计算中网络传输和序列化的关系(二)
大数据·网络·spark·序列化·分布式计算
九河云8 小时前
如何对AWS进行节省
大数据·云计算·aws
FreeIPCC8 小时前
谈一下开源生态对 AI人工智能大模型的促进作用
大数据·人工智能·机器人·开源
梦幻通灵9 小时前
ES分词环境实战
大数据·elasticsearch·搜索引擎