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

  • 怎样更快的让未收录的页面尽快被收录(怎么样让)

    怎样更快的让未收录的页面尽快被收录(怎么样让)

  • 微信通知怎么不显示内容,在锁屏上(微信没有新消息通知)

    微信通知怎么不显示内容,在锁屏上(微信没有新消息通知)

  • 华为自动开关机怎么设置(华为自动开关机在哪里设置方法)

    华为自动开关机怎么设置(华为自动开关机在哪里设置方法)

  • 苹果锁屏手电筒怎么打开(苹果锁屏手电筒怎么去掉)

    苹果锁屏手电筒怎么打开(苹果锁屏手电筒怎么去掉)

  • 小爱音箱一直亮着蓝色(小爱音箱一直亮蓝色灯)

    小爱音箱一直亮着蓝色(小爱音箱一直亮蓝色灯)

  • 耳机寿命是多久(耳机寿命短)

    耳机寿命是多久(耳机寿命短)

  • 刷宝卸载后里面的信息注销吗(下载了刷宝,为什么打不开)

    刷宝卸载后里面的信息注销吗(下载了刷宝,为什么打不开)

  • 带耳机闹钟会响吗(带耳机闹钟响能听见吗)

    带耳机闹钟会响吗(带耳机闹钟响能听见吗)

  • 企业微信添加好友失败(企业微信添加好友对方收不到)

    企业微信添加好友失败(企业微信添加好友对方收不到)

  • 微信的仅聊天和不让他看有什么区别(微信的仅聊天和不让他看怎么区别)

    微信的仅聊天和不让他看有什么区别(微信的仅聊天和不让他看怎么区别)

  • 钉钉上课时分屏老师能看到吗(钉钉上课分屏会被老师发现吗)

    钉钉上课时分屏老师能看到吗(钉钉上课分屏会被老师发现吗)

  • 小米note3是什么屏幕材质(小米note3又叫什么)

    小米note3是什么屏幕材质(小米note3又叫什么)

  • axmp是什么(axmp12是什么意思)

    axmp是什么(axmp12是什么意思)

  • 华为nova5不支持nfc吗(华为nova5不支持google服务怎么办)

    华为nova5不支持nfc吗(华为nova5不支持google服务怎么办)

  • 华为应用受限怎么恢复(华为手机显示应用受限)

    华为应用受限怎么恢复(华为手机显示应用受限)

  • 滴滴购买的优惠券怎么退款(滴滴购买的优惠券怎么开发票)

    滴滴购买的优惠券怎么退款(滴滴购买的优惠券怎么开发票)

  • 手机qq怎么改好友备注(手机qq怎么改好友天数)

    手机qq怎么改好友备注(手机qq怎么改好友天数)

  • 小米手环4尺寸(小米手环尺寸图)

    小米手环4尺寸(小米手环尺寸图)

  • 淘宝看直播怎么关注主播(淘宝看直播怎么改自己的名字)

    淘宝看直播怎么关注主播(淘宝看直播怎么改自己的名字)

  • pokemon go怎么改语言(pokemon go怎么改名字)

    pokemon go怎么改语言(pokemon go怎么改名字)

  • 为什么别人打我电话总是关机(为什么别人打我微信电话没有声音)

    为什么别人打我电话总是关机(为什么别人打我微信电话没有声音)

  • 多闪和抖音是什么关系(多闪app是干嘛的?抖音和多闪有什么区别?)

    多闪和抖音是什么关系(多闪app是干嘛的?抖音和多闪有什么区别?)

  • 易趣充值油卡是真的吗(油卡能充到易捷钱包上吗)

    易趣充值油卡是真的吗(油卡能充到易捷钱包上吗)

  • 三星s9怎么使用分屏(三星s9怎么使用手写键盘)

    三星s9怎么使用分屏(三星s9怎么使用手写键盘)

  • 华为荣耀8x可不可以遥控空调(华为荣耀8x可不可以无线充电?)

    华为荣耀8x可不可以遥控空调(华为荣耀8x可不可以无线充电?)

  • 华为arstl00是什么型号(华为arstl00参数配置)

    华为arstl00是什么型号(华为arstl00参数配置)

  • 装卸费属于什么费用
  • 个人所得税一般多久能退下来
  • 税务检查是什么行政行为
  • 来料加工账务处理举例
  • 新公司第一年要做亏
  • 企业所得税属于地方税吗
  • 销售增长率在报表上怎么看出来
  • 税务外管证取消了吗
  • 企业所得税季度申报
  • 科目期初余额的录入需要从上级科目开始
  • 简易征收如何入账
  • 出口退税申报系统汇率修改
  • 应付税款法账务处理
  • 工会经费用于什么
  • 报企业所得税的利润总额怎么填
  • 公司单独买医保
  • 个人股权转让是否先分红
  • 易票365是哪家公司的
  • 专票和普票的税率哪个高
  • 上海地方教育费附加减半征收2018
  • 小规模纳税人自己可以开专票吗
  • 装饰公司收到客户工程款做分录
  • 接受捐赠物品的增值税
  • 单位缴纳工会经费的会计分录怎么做
  • 维修是几个点的税率
  • 工地包工工程款一般怎么结
  • winspool.drv病毒
  • 城建税征税范围广吗
  • 向境外支付技术提成费需要提交什么材料
  • php @method
  • uniapp开发微信小程序源代码
  • 个人独资企业建筑类怎么注册
  • 呕心沥血的历史人物
  • 总结js中常用的字符
  • 收到房租不开票账务处理
  • 织梦cms要钱吗
  • PostgreSQL之分区表(partitioning)
  • mysql查询一列数据
  • zabbix安装部署
  • 跨年度退回的公共预算支出
  • 个人所得税专项附加扣除赡养老人
  • 出口结汇有哪些常用方法?
  • 什么是企业会计确认计量和报告的空间范围
  • mysql编程一般步骤
  • 帮客户代付保证金合法吗
  • 应收账款收不回来的情况说明
  • 被选为工会代表
  • 税控盘服务费小规模可以抵扣吗
  • 土地成本如何分摊
  • 小规模纳税人销售自己使用过固定资产
  • 公司账户没有钱怎么发工资
  • 库存商品结转成本需要附件吗
  • 房地产开发企业增值税税率
  • mysql速成要多久
  • dwm占用内存过高 进程处理
  • 微软停止对xp的操作
  • webcolct.exe - webcolct 是什么进程
  • system idle process 连接了外网
  • hosts文件位置在哪
  • linux 文件执行
  • win7取消还原
  • linux使用ssh命令
  • win8怎么恢复出厂设置找不到恢复环境
  • win10桌面右键菜单变宽了
  • jquery教程chm
  • 微信怎么导入主题模块
  • cocos2dx游戏开发
  • JavaScript中的变量名不区分大小写
  • Python实现Mysql数据库连接池实例详解
  • linux中的shell命令
  • unity监视器
  • shell脚本中获取参数
  • fiddler如何抓取app接口的
  • 怎么在晋江查找观看记录
  • 烟草局收入怎么样
  • 四川国税局发票查询
  • 合格的税务人
  • 江西车辆购置税查询网
  • 烟叶进口关税
  • 煤矸石占地需要哪些手续
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设