位置: 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前端面试题)

  • 魅族18spro是不是曲面屏(魅族18 spro)

    魅族18spro是不是曲面屏(魅族18 spro)

  • 微信朋友圈文字居中如何设置(微信朋友圈文字怎么发)

    微信朋友圈文字居中如何设置(微信朋友圈文字怎么发)

  • 抖音粉丝是不是关注我的人(抖音粉丝是不是关注了就成粉丝了)

    抖音粉丝是不是关注我的人(抖音粉丝是不是关注了就成粉丝了)

  • 手机解析包出问题如何修复(手机解析包出问题是怎么回事)

    手机解析包出问题如何修复(手机解析包出问题是怎么回事)

  • iPhone11一晚上充电可以吗(iphone11一整晚充电)

    iPhone11一晚上充电可以吗(iphone11一整晚充电)

  • 好评能删除吗(美团好评能删除吗)

    好评能删除吗(美团好评能删除吗)

  • 电脑格式化是不是什么都没有了(电脑格式化是不是可以删除所有)

    电脑格式化是不是什么都没有了(电脑格式化是不是可以删除所有)

  • 苹果手机内屏坏了什么现象(苹果手机内屏坏了保修吗)

    苹果手机内屏坏了什么现象(苹果手机内屏坏了保修吗)

  • 手机充电为什么一下有一下没有(手机充电为什么会充一下停一下)

    手机充电为什么一下有一下没有(手机充电为什么会充一下停一下)

  • 局方停机是什么意思(局方停机是什么停机)

    局方停机是什么意思(局方停机是什么停机)

  • 小米6后盖开胶了怎么粘(小米6后盖开胶解决方案)

    小米6后盖开胶了怎么粘(小米6后盖开胶解决方案)

  • 苹果11用的什么cpu(苹果11用的什么基带)

    苹果11用的什么cpu(苹果11用的什么基带)

  • win10打印机扫描在哪(win10打印机扫描后找不到文件)

    win10打印机扫描在哪(win10打印机扫描后找不到文件)

  • 苹果11为什么充电那么慢(苹果11为什么充电时摸边上麻麻的还抖)

    苹果11为什么充电那么慢(苹果11为什么充电时摸边上麻麻的还抖)

  • 苹果x是双网双待吗(苹果x双网是什么版本)

    苹果x是双网双待吗(苹果x双网是什么版本)

  • 小米手机搜索栏怎么取消(小米手机搜索栏怎么去掉)

    小米手机搜索栏怎么取消(小米手机搜索栏怎么去掉)

  • 邮箱163密码找回(163邮箱密码找回方法)

    邮箱163密码找回(163邮箱密码找回方法)

  • 通信录删除了怎么恢复(通信录删除了怎样恢复)

    通信录删除了怎么恢复(通信录删除了怎样恢复)

  • 用5g必须是5g手机吗(5g必须是5g手机吗)

    用5g必须是5g手机吗(5g必须是5g手机吗)

  • 腾讯二维码在哪里打开(腾讯二维码在哪找出来)

    腾讯二维码在哪里打开(腾讯二维码在哪找出来)

  • multiple editions是什么版本

    multiple editions是什么版本

  • 任务栏变宽了怎么办?(任务栏变宽了怎么调回来win11)

    任务栏变宽了怎么办?(任务栏变宽了怎么调回来win11)

  • Mac系统怎么在侧栏监控系统资源?(mac侧边栏设置)

    Mac系统怎么在侧栏监控系统资源?(mac侧边栏设置)

  • 圣埃尔姆附近的潘塔留岛鸟瞰图,西班牙马略卡岛 (© Dimitri Weber/Azing航空公司)(圣米厄尔教堂)

    圣埃尔姆附近的潘塔留岛鸟瞰图,西班牙马略卡岛 (© Dimitri Weber/Azing航空公司)(圣米厄尔教堂)

  • Vue结合高德地图实现HTML写自定义信息弹窗(vue接入高德地图)

    Vue结合高德地图实现HTML写自定义信息弹窗(vue接入高德地图)

  • 收购未税矿产品代扣代缴的资源税计入成本吗
  • 退税收入如何做账
  • 增值税报表解读
  • 公司月报表怎么做
  • 个税负数怎么做账
  • 附加税减免如何申报
  • 篮球俱乐部是非洲的吗
  • 金蝶k3现金流量明细查询
  • 企业公示实缴填写
  • 收到股东投资款怎么做账
  • 国地税合并后有多少个税种
  • 服务类收入
  • 非独立核算公司一定要体现公司的名称吗
  • 销售收入冲红如何入账
  • 企业食堂买东西怎么入账
  • 购买软件能直接用吗
  • 一般纳税人开培训发票税率是多少
  • 国税局预缴税款在哪里看
  • 增值税税控系统专用设备
  • 优惠购房差价收益是否缴纳个人所得税?
  • 企业购买原材料生产时企业还没有赚到钱
  • 防伪税控设备丢失需要处罚吗
  • 华为手机记事本app
  • 简易计税分包抵减
  • 留存收益净利润之间关系
  • win10老是错误
  • win10系统中为什么网络图标不能展开
  • 支付宝消费计入什么科目
  • linux的系统配置文件
  • 金融企业存出保函的条件
  • 日出的时候是圣诞节
  • “Property or method “***“ is not defined on the instance but referenced during render.”报错的原因及解决方案
  • 水资源税收费标准
  • 废旧物资发票抵扣
  • 无偿占用资金企业有哪些
  • 施工单位老板
  • 广告代理费收取比例
  • php use of undefined constant
  • 企业的营业税金及附加
  • reorg table 命令
  • java代理类是什么
  • 企业接受捐赠资产属于什么科目
  • mysql的备份方式
  • 织梦cms官网
  • centos安装MySQL数据库
  • 累计盈余需要设置明细科目吗
  • 福利费要分部门吗
  • 财务预算资产负债表如何编制
  • asp.net mvc图片上传
  • 企业所得税是指哪些
  • 代扣款业务的处理方式
  • 应付帐款借方余额,但对方公司己注销
  • 已开票未收款怎么报税
  • 收到支持学校工作的短信怎么回复
  • 红字发票开错了已上传如何作废?
  • 固定资产清理时累计折旧提完了怎么账务处理
  • 五证合一办理步骤
  • mysql添加myini
  • sqlserver数据库定时任务
  • windoes版本
  • centos7ftp
  • Win7系统如何查看隐藏文件
  • win8图片查看器无法打开图片内存不足
  • jquery实现密码和确认密码
  • js获取页面元素的方法
  • windows下载安装
  • unity局域网多人游戏
  • get调用接口
  • linux shell函数
  • 将一个目录复制到另一个目录下
  • shell 1
  • python生产
  • 税务软件服务商
  • 离线开票金额为0
  • 河北省税务局对外公开电话
  • 小微企业 2018
  • 税服领花规范照片
  • 未到申报期可以提前抄税吗
  • 湖南长沙税务局上班时间
  • 非载货专项作业车属于什么车
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设