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

  • 为什么客户会流失,如何挖掘客户流失的真实原因(客户为什么留不住的原因)

    为什么客户会流失,如何挖掘客户流失的真实原因(客户为什么留不住的原因)

  • 如何选择专业的logo设计公司_标志设计_名片设计(如何选择专业的普拉提教练)

    如何选择专业的logo设计公司_标志设计_名片设计(如何选择专业的普拉提教练)

  • 苹果手机怎么恢复微信聊天记录(苹果手机怎么恢复删除的照片)

    苹果手机怎么恢复微信聊天记录(苹果手机怎么恢复删除的照片)

  • 手机nfc在哪里打开(手机nfc在哪里打开苹果)

    手机nfc在哪里打开(手机nfc在哪里打开苹果)

  • 能投屏的视频软件(能投屏的视频播放软件)

    能投屏的视频软件(能投屏的视频播放软件)

  • 旺旺号在淘宝哪里查询(旺旺号在那)

    旺旺号在淘宝哪里查询(旺旺号在那)

  • 苹果信号满格打不出去(苹果信号满格打不出去电话)

    苹果信号满格打不出去(苹果信号满格打不出去电话)

  • 蜂鸟众包注销后还可以注册吗(蜂鸟众包注销后注册不了)

    蜂鸟众包注销后还可以注册吗(蜂鸟众包注销后注册不了)

  • 关闭快手小店保证金多久能退回(关闭快手小店保证金退到哪里)

    关闭快手小店保证金多久能退回(关闭快手小店保证金退到哪里)

  • b站卡超过40g还免流吗(b站卡超过40g怎么计费)

    b站卡超过40g还免流吗(b站卡超过40g怎么计费)

  • 华为手机在哪设置显示网速(华为手机在哪设置字体大小)

    华为手机在哪设置显示网速(华为手机在哪设置字体大小)

  • 移动盒子光信号闪红灯怎么回事(移动盒子光信号闪烁)

    移动盒子光信号闪红灯怎么回事(移动盒子光信号闪烁)

  • 苹果鼠标可以用在其他电脑上吗(苹果鼠标可以用教育优惠吗)

    苹果鼠标可以用在其他电脑上吗(苹果鼠标可以用教育优惠吗)

  • 美图t8参数配置(美图t8参数配置详情)

    美图t8参数配置(美图t8参数配置详情)

  • 抖音怎么播放音乐(抖音怎么播放音乐直播)

    抖音怎么播放音乐(抖音怎么播放音乐直播)

  • 苹果怎么关掉相机声音(苹果怎么关掉相册定位)

    苹果怎么关掉相机声音(苹果怎么关掉相册定位)

  • wps表格怎么批量查找(wps表格怎么批量替换文字)

    wps表格怎么批量查找(wps表格怎么批量替换文字)

  • 粉笔账号同时可以用吗(粉笔账号可以几个人用)

    粉笔账号同时可以用吗(粉笔账号可以几个人用)

  • 5g出来4g会降速吗(5g来到后4g确实降速了)

    5g出来4g会降速吗(5g来到后4g确实降速了)

  • 爱思助手验机报告准吗(爱思助手验机报告怎么显示不出来)

    爱思助手验机报告准吗(爱思助手验机报告怎么显示不出来)

  • 苹果超200怎么下载(苹果机超过200m怎么下载)

    苹果超200怎么下载(苹果机超过200m怎么下载)

  • 小米手环找不到了怎么定位(小米手环找不到了怎么办但是未连接手机)

    小米手环找不到了怎么定位(小米手环找不到了怎么办但是未连接手机)

  • switch限定版和普通版区别(switchpro限定版区别)

    switch限定版和普通版区别(switchpro限定版区别)

  • Spring Boot接收从前端传过来的数据常用方式以及处理的技巧(spring boot 接受参数)

    Spring Boot接收从前端传过来的数据常用方式以及处理的技巧(spring boot 接受参数)

  • 个税系统经营所得如何添加人员信息
  • 增值税17-16-13的时间
  • 财务月末结转成什么账户
  • 减免税金需要计提吗
  • 销售商品的会计分录现金折扣
  • 结转损益类账户余额
  • 股东实物分红账务怎么做
  • 进行利润分配时必须遵循的原则
  • 走逃发票怎么处理
  • 股权转让金是什么意思
  • 资本公积转增股本个人所得税
  • 一般纳税人抵扣小规模期间的专票怎么解决
  • 国税申报需要带什么资料
  • 没在公司交社保遣散的怎么赔偿
  • 财务人员的大忌
  • 非独立核算的分公司是法人主体吗
  • 国税的应交税款在地税的财务报表上怎么填?
  • 增值税普通发票有什么用
  • 企业所得税资产总额怎么算出来的呢
  • 收到退回留抵退款的短信
  • 公司员工餐费会计分录
  • 土地投资入股需要什么资料
  • 房地产税开征的利弊分析
  • 微信转账的手续费规则
  • 增值税专用发票和普通发票的区别
  • 计算机系统结构第三版课后答案
  • php输出当月日历
  • 发出材料成本差异会计分录
  • 苹果发布首款MR头显
  • 收到银行退回余款
  • 股东个人房产抵押贷款用于个人法人有责任么
  • php获取网站内容
  • 未开票收入本月未收款的分录
  • php5.5
  • 残保金是职工薪酬吗
  • 已用短信息服务发送信息,对方能收到吗
  • 模拟电子技术基础知识点总结
  • 进项税已认证未缴纳
  • vue3生命周期及使用
  • yolo v4 v5
  • nstat命令 监视内核的SNMP计数器和网络接口状态
  • 旅行社代订酒店如何入账
  • phpcms v9官网
  • 出纳把现金存入私人账户后转公账
  • 应付账款和应收账款的关系
  • 生产车间年终奖计入什么科目
  • 织梦内容页模板修改
  • 织梦如何使用
  • 水库水面经营权如何取得
  • 临时用工费开票项目
  • 社保缴费基数怎么算
  • 财政补贴的会计分录
  • 其他应付款做账
  • 股东之间股权转让的税务处理
  • 税控盘全额抵扣怎么做分录
  • 应付票据与应付账款增长的多的逃税问题
  • 公司支付账户
  • 生产车间生产工人的薪酬计入什么
  • 营业收入包括哪些内容?
  • 旅游饮食服务企业会计核算的特点包括
  • Windows设置启动引导
  • win8怎么彻底删除软件
  • mscorsvw.exe是什么进程
  • linux whoami命令详解
  • 固定栏跑到了左边怎么弄
  • jQuery基于xml格式数据实现模糊查询及分页功能的方法
  • node.js快速入门
  • python动态参数应用
  • jquery常用操作
  • jquery窗口
  • 设计一个投票程序
  • js复制对象的值
  • 深圳龙华街道办电话
  • 安徽国家税务局网上办税平台
  • 河东区地税局上班时间
  • 取得土地使用权后两年未开发
  • 江苏徐州如何开无犯罪记录证明
  • 大班直播课怎么上
  • 奔驰g500落地多少
  • 普通发票和增值税普票有啥区别
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设