位置: IT常识 - 正文

【THREE.JS学习(3)】使用THREEJS加载GeoJSON地图数据(three.js 教程)

编辑:rootadmin
【THREE.JS学习(3)】使用THREEJS加载GeoJSON地图数据

推荐整理分享【THREE.JS学习(3)】使用THREEJS加载GeoJSON地图数据(three.js 教程),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:three.js 入门,three.js入门指南,three.js中文教程,three.js bim,three.js中文教程,three.js 教程,three.js入门指南,three.js 教程,内容如对您有帮助,希望把文章链接给更多的朋友!

本文接着系列文章(2)进行介绍,以VUE2为开发框架,该文涉及代码存放在HelloWorld.vue中。

相较于上一篇文章对div命名class等,该文简洁许多。

<template><div></div></template>

接着引入核心库

import * as THREE from "three"import {OrbitControls} from "three/examples/jsm/controls/OrbitControls"import * as d3 from "d3"import Stats from "three/examples/jsm/libs/stats.module.js";

其中,{OrbitControls}为控制器,加载后可以通过鼠标来移动加载数据的方向、放缩等

Three.js中的坐标系是以单位为米(m)的坐标系,而在地理数据中,如Geojson使用的是经纬度作为坐标系,所以在使用、加载的过程中需要对数据进行坐标转换,才能够正确的显示地理数据。

而D3.js提供了投影函数能够将Geojson中的经纬度转换为目标格式的数据。

//安装D3.jsnpm install d3

下面的代码展示了使用D3.js将经纬度数据转化为Three.js中的坐标系

//使用墨卡托投影var projection = d3.geoMercator()    //地图投影的中心位置.center([0, 0])    //地图投影的偏移量.translate([0, 0]).scale(1);var path = d3.geoPath().projection(projection);var coords = [-122.4194, 37.7749]; // 经纬度坐标var point = projection(coords); // 将经纬度转换为 Three.js 中的坐标系

{Stats}可以创建一个性能监测器,并将其显示在页面中。

【THREE.JS学习(3)】使用THREEJS加载GeoJSON地图数据(three.js 教程)

stats 库是一个可以用于监测JavaScript性能的工具库。它可以跟踪帧率(FPS)、渲染时间和内存使用情况等信息。在开发过程中,这些信息可以帮助开发者了解应用程序的性能表现,并且有助于识别和优化潜在的性能瓶颈。

下面开始介绍如何加载

STEP 1 :{相机、场景、渲染器} 依旧是最重要的步骤

//将这样对环境初始化的步骤封装成一个函数initTHREE()initTHREE(){this.scene = new THREE.Scene();this.camera = new THREE.PerspectiveCamera(90,window.innerHeight/window.innerWidth,0.1,1000)this.camera.position.set(0,0,100)this.camera.aspect = window.innerWidth / window.innerHeight;this.camera.updateProjectionMatrix();this.scene.add(this.camera)// 加入坐标轴// this.axesHelper = new THREE.AxesHelper(5);// this.scene.add(this.axesHelper)// 加载渲染器this.renderer = new THREE.WebGLRenderer({alpha:true})this.renderer.setSize(window.innerWidth,window.innerHeight)// 将渲染器添加到bodydocument.body.appendChild(this.renderer.domElement);// 初始化控制器 可以旋转this.controls = new OrbitControls(this.camera,this.renderer.domElement)      // 创建地图对象this.map = new THREE.Object3D();this.directionalLight = new THREE.DirectionalLight(0xffffff,0.5)this.scene.add(this.directionalLight)this.light = new THREE.AmbientLight(0xffffff,0.5)this.scene.add(this.light)}

STEP 2:创建地理对象

和mapbox、cesium之类的webgis加载数据不同(原理差不多),不能直接加载json数据,然后直接显示,需要我们对Json数据进行解析,然后按照一定的方式来生成图像。

首先,加载文件

this.loader = new THREE.FileLoader();this.loader.load('xxx.json',(data)=>{})

接着,对加载的文件进行处理

//数据格式化this.jsonData = JSON.parse(data)//创建坐标系、获取数据对象const projection1 = d3.geoMercator().center([0, 0]).translate([0, 0]).scale(1);const features = this.jsonData.features;//对features进行遍历features.forEach((feature) => {// 单个省份 对象const province = new THREE.Object3D();// 地址province.properties = feature.properties.name;// 坐标数组const coordinates = feature.geometry.coordinates;const color = "#99ff99";if (feature.geometry.type === "MultiPolygon") {// 多个,多边形coordinates.forEach((coordinate) => {// coordinate 多边形数据coordinate.forEach((rows) => {        //对坐标点数据进行处理const mesh = this.drawExtrudeMesh(rows, color, projection1);mesh.properties = feature.properties.name;province.add(mesh);});});}this.map.add(province);});

坐标处理,构建平面,再通过ExtrudeGeometry拉伸高度

drawExtrudeMesh(polygon, color, projection){const shape = new THREE.Shape();polygon.forEach((row, i) => {const [x, y] = projection(row);if (i === 0) {// 创建起点,使用moveTo方法// 因为计算出来的y是反过来,所以要进行颠倒shape.moveTo(x, -y);}shape.lineTo(x, -y);});// 拉伸const geometry = new THREE.ExtrudeGeometry(shape, {depth: 5,bevelEnabled: true,});// 随机颜色const randomColor = (0.5 + Math.random() * 0.5) * 0xffffff;const material = new THREE.MeshBasicMaterial({color: randomColor,transparent: true,opacity: 0.5,});return new THREE.Mesh(geometry, material);}

STEP 3:开始渲染

animate(){this.controls.update()this.stats.update()//const clock = new THREE.Clock();//this.deltaTime = clock.getDelta()requestAnimationFrame(this.animate)this.renderer.render(this.scene,this.camera)},

加载结果

源码回头传到github上。

https://github.com/1996HZP/THREE_3dCHina

本文链接地址:https://www.jiuchutong.com/zhishi/295952.html 转载请保留说明!

上一篇:网页表单文本框的自动填写(四种方法)(网页单行文本框)

下一篇:uniapp面试基础(uniapp前端面试题)

  • 华硕x43s驱动(华硕x43s配置)(华硕x42j显卡驱动)

    华硕x43s驱动(华硕x43s配置)(华硕x42j显卡驱动)

  • tkm文件怎么转化成mp3(tkm文件怎么转化成mp3,找不到tkm)

    tkm文件怎么转化成mp3(tkm文件怎么转化成mp3,找不到tkm)

  • 转转卖假货会被处罚吗(在转转卖假货)

    转转卖假货会被处罚吗(在转转卖假货)

  • 静音时振动什么意思(静音时震动是什么意思?)

    静音时振动什么意思(静音时震动是什么意思?)

  • 电脑qq不能分享屏幕怎么办(电脑qq不能分享屏幕显示机器性能异常)

    电脑qq不能分享屏幕怎么办(电脑qq不能分享屏幕显示机器性能异常)

  • soul里面收到的礼物有什么用(soul里面收到的礼物怎么退还)

    soul里面收到的礼物有什么用(soul里面收到的礼物怎么退还)

  • 微信群为什么不显示本人名字(微信群为什么不能给管理员)

    微信群为什么不显示本人名字(微信群为什么不能给管理员)

  • 淘宝直播间人数数据真实吗(淘宝直播间人数是真的吗)

    淘宝直播间人数数据真实吗(淘宝直播间人数是真的吗)

  • 抖音消息免打扰对方知道吗(抖音消息免打扰怎么设置)

    抖音消息免打扰对方知道吗(抖音消息免打扰怎么设置)

  • 拼多多关键词突然搜索不到了(拼多多关键词规则)

    拼多多关键词突然搜索不到了(拼多多关键词规则)

  • 优酷手机会员和电视会员相同吗(优酷手机会员和电视会员)

    优酷手机会员和电视会员相同吗(优酷手机会员和电视会员)

  • 电子邮件传输的基本协议(电子邮件传输的工作过程)

    电子邮件传输的基本协议(电子邮件传输的工作过程)

  • 微控制器的组成结构(微控制器组成实验)

    微控制器的组成结构(微控制器组成实验)

  • wifi需认证是什么意思(wifi提示需要认证)

    wifi需认证是什么意思(wifi提示需要认证)

  • 手机用不了4g什么原因(手机用不了4g了)

    手机用不了4g什么原因(手机用不了4g了)

  • 手机怎么可以快速充电(手机怎么可以快速记步)

    手机怎么可以快速充电(手机怎么可以快速记步)

  • pot al00a华为是什么型号(华为pot al00什么型号)

    pot al00a华为是什么型号(华为pot al00什么型号)

  • 苹果xr2什么时候上市(iphonexr2什么时候发布)

    苹果xr2什么时候上市(iphonexr2什么时候发布)

  • 八代雅阁蓝牙怎么连接(八代雅阁蓝牙怎么放歌)

    八代雅阁蓝牙怎么连接(八代雅阁蓝牙怎么放歌)

  • 应用程序未安装1000000(应用程序未安装怎么解决)

    应用程序未安装1000000(应用程序未安装怎么解决)

  • 荣耀20有没有红外线功能(荣耀20有没有红包助手)

    荣耀20有没有红外线功能(荣耀20有没有红包助手)

  • 微信小程序商城怎么开发(微信小程序商城源码)

    微信小程序商城怎么开发(微信小程序商城源码)

  • 爱奇艺为什么无法下载1080P(爱奇艺为什么无法播放)

    爱奇艺为什么无法下载1080P(爱奇艺为什么无法播放)

  • Aerial view of Chapel Bridge over the river Reuss in Lucerne, Switzerland (© Neleman Initiative/Gallery Stock)

    Aerial view of Chapel Bridge over the river Reuss in Lucerne, Switzerland (© Neleman Initiative/Gallery Stock)

  • 自学黑客,一般人我劝你还是算了吧(自学黑客技术入门教程)

    自学黑客,一般人我劝你还是算了吧(自学黑客技术入门教程)

  • WordPress修改functions.php教程(wordpress修改数据库)

    WordPress修改functions.php教程(wordpress修改数据库)

  • python函数中返回值的作用(python 函数的返回值)

    python函数中返回值的作用(python 函数的返回值)

  • 基本户可以直接转账给个人吗
  • 企业银行流水可以同步到T+软件中,自动生成凭证了
  • 产品成本包括哪几个部分
  • 简易计税费
  • 保证金可以挪用吗
  • 应收票据和应收账款的区别举例
  • 损益类科目计入哪个表
  • 提示没有安装QQ怎么处理
  • 电商一般纳税人如何报税
  • 补助及救济费用
  • 增值税在免税范围内,附加税怎么做
  • 个税计算方法举例讲解
  • 金蝶迷你版年结账套怎么结转下年
  • 预收贷款是什么会计科目
  • 去年的进项票今年可以抵吗
  • 营改增劳务费增值税率
  • 坏账核销的依据
  • win11如何连接网址
  • 上月计提费用下月一定要冲回吗
  • 网页老是自己跳出来
  • 生产车间的各种费用
  • linux怎么查找
  • phpemail正则
  • 系统属性的表现
  • 光纤布线有什么作用
  • php中strrev
  • 提取的坏账准备怎么算
  • 发票填开的基本规定?
  • 为什么老是跳到别的网站
  • php function
  • 短期投资计入什么科目
  • 工资福利支出包括五险一金吗
  • 工装费用会计分录
  • Css中的color属性用于设置html元素的背景颜色
  • 政府补贴收入确认政策
  • 律师事务所执业证
  • 自建厂房转固定资产如何办理手续
  • 企业工作小结
  • 设计模式golang
  • 最好用的刷题笔
  • 实际发生坏账损失不影响应收账款
  • 长期股权投资种类
  • sqlserver2008数据库文件路径
  • 企业所得税纳税申报表
  • 应收账款的注意要点
  • 增值税专用发票丢了怎么补救
  • 出口转内销怎么做
  • 收到投资款如何申报印花税
  • 可供分配利润包括哪些
  • 电影院分成比例
  • 预付账款主要是什么
  • 购入房屋建筑物进项税额抵扣
  • mdf文件在哪
  • Windows Server 2008中审核和符合性
  • unix含义
  • centos uuid
  • linux怎么用u盘传输文件
  • WIN7系统共享文件夹 您没有权限访问
  • win7系统安装谷歌浏览器
  • linux去掉指定字符
  • win8开机启动项
  • linux服务器安全防护方案
  • 手机游戏开发工具app
  • android images
  • Unity3D游戏开发标准教程吴亚峰于复兴人民邮电出版社
  • 浏览器firefox
  • js链式编程的原理
  • nodejs命令行参数解析
  • linux系统中rpm命令主要功能
  • nodejs fs.open
  • nodejs获取post数据
  • 批处理改ipv4地址
  • 编写shell脚本,批量建立用户
  • unity移动游戏开发
  • nodejs搭建网站
  • jquery defaultvalue
  • python九大特点
  • 个人所得税代扣代缴会计分录
  • 在企业内部具有行使否决权的是
  • 科级干部试用期一年转正流程
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设