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','北京市' );

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/690716.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux下如何配置环境变量

在Linux下配置环境变量通常有几种方法&#xff0c;具体取决于你希望将环境变量设置为全局还是仅对当前会话有效。以下是一些常见的方法&#xff1a; 永久性全局配置&#xff1a;要使环境变量在所有用户和会话中永久生效&#xff0c;可以编辑 /etc/environment 文件。在文件中添…

Open CASCADE学习|TopoDS_Vertex与gp_Pnt相互转化

目录 gp_Pnt TopoDS_Vertex 关系和转换 使用场景 在Open CASCADE Technology (OCCT)中&#xff0c;TopoDS_Vertex和gp_Pnt是两种不同的数据类型&#xff0c;用于表示三维空间中的点。它们有不同的用途和特性&#xff1a; gp_Pnt gp_Pnt是OCCT几何库&#xff08;Geom&…

php伪协议之phar

一.phar协议 用于将多个 PHP 文件、类、库、资源&#xff08;如图像、样式表&#xff09;等打包成一个单独的文件。这个归档文件可以像其他 PHP 文件一样被包含&#xff08;include&#xff09;或执行。PHAR 归档提供了一种方便的方式来分发和安装 PHP 应用程序和库&#xff0c…

今日Java小练习

题目描述一 计算保存日期的那一年的所有天数 解题思路 分别截取日期的年月日保存为int型定义数组保存1到12月的天数&#xff08;或使用LocalDate的getDayOfMonth方法直接计算&#xff09;判断如果是闰年二月天数加1累加当前月份前所有月份的天数和用之前累加的天数加上当前月的…

ClickHouse学习

ClickHouse是由C编写的列式存储数据库&#xff08;DBMS&#xff09;&#xff0c;主要用来在线分析处理查询&#xff08;OLTP&#xff09;&#xff0c;能够用Sql查询生成的实时数据分析报告。 适用场景 大多数是读请求 、数据总是批量写入 、不更新或少更新数据、每次都是读取大…

机器学习中为什么需要梯度下降

在机器学习中&#xff0c;梯度下降是一种常用的优化算法&#xff0c;用于寻找损失函数的最小值。我们可以用一个简单的爬山场景来类比梯度下降的过程。 假设你被困在山上&#xff0c;需要找到一条通往山下的路。由于你是第一次来到这座山&#xff0c;对地形不熟悉&#xff0c;你…

Python——元组

一、元组特性介绍 元组和列表⼀样&#xff0c;也是⼀种序列类型的数据。 唯⼀的不同是&#xff0c;元组是相对不可变的。 二、⾼效创建元组 In [1]: t1 () # 创建 空 元素的元组In [2]: type(t1) Out[2]: tuple有元素的元组实际上是使⽤英⽂的逗号创建的 In [3]:…

【sgCreateTableColumn】自定义小工具:敏捷开发→自动化生成表格列html代码(表格列生成工具)[基于el-table-column]

源码 <template><!-- 前往https://blog.csdn.net/qq_37860634/article/details/136126479 查看使用说明 --><div :class"$options.name"><div class"sg-head">表格列生成工具</div><div class"sg-container"…

RSA加密,解密,加签及验签

目录 1.说明 2.加密和加签的区别 3.后端加密&#xff0c;解密&#xff0c;加签及验签示例 4.前端加密&#xff0c;解密&#xff0c;加签及验签示例 5.前端加密&#xff0c;后端解密&#xff0c;前端加签&#xff0c;后端验签 6.注意事项 1.说明 RSA算法是一种非对称加密…

【JavaScript】输入输出语法

目录 一、输出语法 二、输入语法 一、输出语法 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>D…

Java解决石子游戏问题

Java解决石子游戏问题 01 题目 Alice 和 Bob 用几堆石子在做游戏。一共有偶数堆石子&#xff0c;排成一行&#xff1b;每堆都有 正 整数颗石子&#xff0c;数目为 piles[i] 。 游戏以谁手中的石子最多来决出胜负。石子的 总数 是 奇数 &#xff0c;所以没有平局。 Alice 和…

Netty学习------2024/02/19

non-blocking io 非阻塞 IO 1. 三大组件 1.1 Channel & Buffer channel 有一点类似于 stream&#xff0c;它就是读写数据的双向通道&#xff0c; 可以从 channel 将数据读入 buffer&#xff0c;也可以将 buffer 的数据写入 channel&#xff0c; 而之前的 stream 要么是输…

【Linux系列】超算作业调度系统批量取消作业介绍

在使用HPC跑模型时常常需要批量取消提交的job&#xff0c;本文将三种常见的作业调度系统的批量取消作业方法进行介绍&#xff0c;方便平时使用。 一、Slurm Slurm取消/删除作业的命令为scancel&#xff0c;其基本的使用方法有&#xff1a; 命令说明scancel < jobid >删…

HCIA-HarmonyOS设备开发认证V2.0-IOT硬件子系统-I2C

目录 一、 I2C 概述二、I2C 模块相关API三、接口调用实例四、I2C HDF驱动开发4.1、开发步骤(待续...) 坚持就有收获 一、 I2C 概述 I2C&#xff08;Inter Integrated Circuit&#xff09;集成电路间总线是由 Philips 公司开发的一种简单、双向二线制同步串行总线。I2C 以主从方…

面试题:链表相交

链表相交 给你两个单链表的头节点 headA 和 headB &#xff0c;请你找出并返回两个单链表相交的起始节点。如果两个链表没有交点&#xff0c;返回 null 。 图示两个链表在节点 c1 开始相交&#xff1a; 思路 这个题目有2个思路&#xff0c;我先说容易想到的思路 对齐链表…

有关光猫、路由器、交换机、网关的理解

前提 在了解计算机网络的过程中&#xff0c;出现了这四个名词&#xff1a;光猫、路由器、交换机、网络。有点模糊&#xff0c;查阅互联网相关资料&#xff0c;进行整理。如有错误&#xff0c;欢迎大家批评指正。 光猫 首先光猫是物理存在的&#xff0c;大家在家里应该都可以…

初识Nginx

摘要&#xff1a;最近几个项目中的接口总是访问受限&#xff0c;需要后端同事配置Nginx代理&#xff0c;了解下Nginx后面自己配置。 Nginx 是一款高性能的开源 Web 服务器和反向代理服务器。它具有轻量级、高并发、低内存消耗等特点&#xff0c;常被用作静态资源服务、负载…

最新Discuz! X模板文件结构详细手册

| — template — default 系统内置风格模板(默认风格) | — template — default – discuz_style_default.xml 风格安装文件&#xff0c;可用风格导出功能创建 | — template — default – preview.jpg 预览图 | — template — default – common 风格中的公共包含文…

探索与实践:深度解读禅道项目管理工具的高效运用

【引言】 在日益复杂的现代项目管理领域中&#xff0c;一款优秀的项目管理工具能够极大地提升团队协作效率&#xff0c;降低项目风险&#xff0c;而禅道正是这样一款深受开发者和项目经理喜爱的产品。它是一款基于敏捷开发理念设计的开源项目管理软件&#xff0c;涵盖了产品管…

5G网络RedCap

RedCap&#xff1a;RedCap&#xff08;Reduced Capability&#xff09;&#xff0c;即“降低能力”。它是3GPP在5G R17阶段&#xff0c;针对速率、时延要求不高的5G应用场景&#xff0c;专门推出的一种新技术标准协议&#xff0c;旨在全面提升5G网络质量和覆盖率&#xff0c;也…