2023-01-04

最近想用Cesium给学校做一个类似智慧校园的东西,要做的东西很多,首先是获取学校模型的问题,然后怎么用Cesium加载3Dtile

1.获取学校模型

想到之前被老师抓苦力去做春熙路的图,于是决定用比较熟悉的OSM数据集

https://www.openstreetmap.org/    需要梯子

进入后很容易就可以下载到所需区域的矢量数据

后续选择用ArcMap处理数据,但下载的OSM需要一个插件才能用ArcMap打开

https://github.com/Esri/arcgis-osm-editor

选择对应版本就可以了

在ArcMap里清洗并加上高度属性就可以了,大概是这个样子

如何变成3dtile格式呢,搜索了一下发现用CesiumLab最方便

http://www.cesiumlab.com/

下载过后会在浏览器打开一个窗口

如果要将shp文件转换为3dtile,里面有文档跟着操作就可以了,上图那种数据量一秒就转换好了

2.Cesium加载3dtile

我是在vue里用的cesium,直接将刚才生成的3dtile放在static下

加载3dtile代码如下:

    var tileset = new Cesium.Cesium3DTileset({
url: "../../../static/3DModel/sicauOSM/tileset.json", });
viewer.scene.primitives.add(tileset);
console.log(tileset);

因为生成模型时候的问题,导致模型在地底下去了,调整模型位置代码如下:

    //3dtile加载完成后执行
tileset.readyPromise.then(function(tileset) { //高度偏差,向上是正数,向下是负数
var heightOffset = 500.0; //计算tileset的绑定范围
var boundingSphere = tileset.boundingSphere; //计算中心点位置
/**
* fromCartesian 方法是用经纬度和高度定义一个位置
* A position defined by longitude, latitude, and height.
*/
var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center); //计算中心点位置的地表坐标
/**
* Cartesian3 是一个3D点
* fromRadians 方法 Returns a Cartesian3 position from longitude and latitude values given in radians(弧度).
* @param longitude
* @param latitude
* @param height
* 因为建筑模型没他所在高度信息,所以填0
*/
var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0); //偏移后的坐标,也就是中心点本应在的高度(海拔)
var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, heightOffset); /**
* subtract 方法 Computes the componentwise difference of two Cartesians.
* 计算两个笛卡尔坐标的成分差异
* @param 就是两个要计算的坐标
* @param 第三个参数是要保存的结果
*/
var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3()); console.log(`translation长这样:
${translation}`);
// (-102.97917011496611, 417.3715669941157, 255.33559404686093) //tileset.modelMatrix转换
/**
* Creates a Matrix4 instance from a Cartesian3 representing the translation.
* @param {Cartesian3} translation - The upper right portion of the matrix representing the translation.
* @param { Matrix4} result - The object in which the result will be stored, if undefined a new instance will be created.
* Cesium中使用Matrix4作为处理线性变换和位移变换的仿射矩阵
* 三维空间的转换矩阵通常是3x3的就可以
* 但是为了同时满足位移的需要增加了一个维度使用4x4的矩阵
*/
console.log(`变化前的tileset.modelMatrix为:
${tileset.modelMatrix}`);
// (1, 0, 0, 0)
// (0, 1, 0, 0)
// (0, 0, 1, 0)
// (0, 0, 0, 1) tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
console.log(`变化后的tileset.modelMatrix为:
${tileset.modelMatrix}`);
// (1, 0, 0, -102.97917011496611)
// (0, 1, 0, 417.3715669941157)
// (0, 0, 1, 255.33559404686093)
// (0, 0, 0, 1) /**
* 定位到3dtiles的位置,也就是让摄像头对准这个区域
* viewBoundingSphere 方法
* Sets the camera so that the current view contains the provided bounding sphere.
* @param boundingSphere - The bounding sphere to view, in world coordinates.
* @param offset - The offset from the target in the local east-north-up reference frame centered at the target.
*/
viewer.camera.viewBoundingSphere(tileset.boundingSphere, new Cesium.HeadingPitchRange(0, -20, 0)); });

注意区分椭球坐标、笛卡尔坐标、屏幕坐标

我的第七篇文章讲了这些坐标的转换,需要的话链接:https://www.cnblogs.com/LJXXXX/p/17043938.html

获取某地模型并用Cesium加载(一)的更多相关文章

  1. cesium加载gltf模型点击以及列表点击定位弹窗

    前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 之 ...

  2. cesium加载gltf模型

    cesium加载gltf模型 一.采用vue-cesium:在项目里加载依赖包.命令如下: npm i --save vue-cesium 在main.js中加入如下代码: https://www.n ...

  3. Cesium加载三维倾斜摄影数据

    具体技术来源自论文 基于Cesium的倾斜摄影三维模型Web加载与应用研究. 技术架构图 应用实例 利用一个实际实例来详细说明如何利用Cesium加载倾斜摄影数据,并进行可视化和交互操作. 首先,利用 ...

  4. tensorflow实现线性回归、以及模型保存与加载

    内容:包含tensorflow变量作用域.tensorboard收集.模型保存与加载.自定义命令行参数 1.知识点 """ 1.训练过程: 1.准备好特征和目标值 2.建 ...

  5. sklearn模型保存与加载

    sklearn模型保存与加载 sklearn模型的保存和加载API 线性回归的模型保存加载案例 保存模型 sklearn模型的保存和加载API from sklearn.externals impor ...

  6. cesium加载倾斜摄影,添加billboard并注册点击事件

    完整示例代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  7. tensorflow 模型保存与加载 和TensorFlow serving + grpc + docker项目部署

    TensorFlow 模型保存与加载 TensorFlow中总共有两种保存和加载模型的方法.第一种是利用 tf.train.Saver() 来保存,第二种就是利用 SavedModel 来保存模型,接 ...

  8. [微信小程序] 微信小程序获取用户定位信息并加载对应城市信息,wx.getLocation,腾讯地图小程序api,微信小程序经纬度逆解析地理信息

    因为需要在小程序加个定位并加载对应城市信息 然而小程序自带api目前只能获取经纬度不能逆解析,虽然自己解析方式,但是同时也要调用地图,难道用户每次进小程序还要强行打开地图选择地址才定位吗?多麻烦也不利 ...

  9. 登陆获取shell时的配置文件加载过程

    最近遇到一台ubuntu服务器登陆时默认语言环境变量变成posix问题, 导致中文显示乱码,影响程序的正常运行 # locale LANG= LANGUAGE= LC_CTYPE="POSI ...

  10. [PyTorch 学习笔记] 7.1 模型保存与加载

    本章代码: https://github.com/zhangxiann/PyTorch_Practice/blob/master/lesson7/model_save.py https://githu ...

随机推荐

  1. DP?

    杨斌涵//aad69d38 分治优化DP 分治优化1D/1D dp 对于一类 \[f(x) = \min_{k = y}^{x - 1} w(l, r) \] 即所有 \(w(l,r)\) 事先已知, ...

  2. sql周报

    数据库分类 1.关系型数据库 Mysql Qracle MariaDB PostgreSQL mysql:开源免费 使用最广 性价比最高 Oracle:收费 但安全性高 PostgreSQL:开源免费 ...

  3. Jvm上如何运行其他语言?JSR223规范最详细讲解

    一 在Java的平台里,其实是可以执行其他的语言的.包括且不仅限于jvm发展出来的语言. 有的同学可能会说,在java项目里执行其他语言,这不吃饱了撑着么,java体系那么庞大,各种工具一应俱全,放着 ...

  4. pandas中loc和iloc的使用细节

    1.缘由 前段时间在使用pandas库中的索引和切片的时候,突然就感觉有点懵,赋值和索引的操作总是报错. 网上的很多资料讲的也非常的浅显,而且使用起来非常不顺手. 于是我就找到很多的网上资料,然后自己 ...

  5. 虚拟网络VLAN

    一.VLAN划分基础 1.VLAN概念 VLAN叫做虚拟局域网,逻辑上将网络划分 2.VLAN的分类 静态vlan:基于端口划分静态VLAN 动态vlan:基于MAC地址划分动态VLAN 3.VLAN ...

  6. python各种小知识

    一.三元表达式 1. 简化步骤1:代码简单且只有一行,可以直接在冒号后面编写 三元表达式: 数据值1+ if 条件+else 数据值2条件成立则使用数据值1,条件不成立则使用数据值2: 当结果是二选一 ...

  7. A_A01_001 KEIL4-KEIL5软件安装

    @ 目录 一.软件下载 二.交流学习 三.防止电脑误删文件操作步骤 四.KEIL4安装 五.KEIL5安装 六.注意事项 一.软件下载 KEIL4/KEIL5网盘链接 戳它跳转 提取码:omni 二. ...

  8. 解决scapy库下找不到IP,TCP模板的问题

    scapy版本: 问题描述: 我看到书中导入TCP,IP模块是通过from scapy.all import TCP,IP 上机实验发现找不到这个模块,通过大量查找发现此模块在最新版本中转移到其他包里 ...

  9. 3、数组、集合、Lambda、Stream与Optional类

    一.数组: 数组保存在JVM堆内存中 1.数组的创建: (1).一维数组创建方式一: //一维数组方式一 Integer[] array01 = {1,2,3}; System.out.println ...

  10. java进阶篇——Stream流编程

    Stream流 函数式接口 1.消费型接口--Consumer @FunctionalInterface public interface Consumer<T> { /** * 对给定的 ...