Cesium教程 (1) 界面介绍-3dtiles加载-更改鼠标操作设置

Cesium教程 (1) 界面介绍-3dtiles加载-更改鼠标操作设置

1. 界面介绍 (7-8互换位置)

2. 数据转3dtiles

3. 代码详解

4. 其他

1. 界面介绍 (7-8互换位置)

2. 数据转3dtiles

(1) cesiumlab 需要联网免费转很多格式（高级功能需要收费）

(2) cesiumApp

(3) osgb-3dtiles github上搜索

3. 代码详解

实现界面管理-鼠标操作设置-3dtiles加载-初始位置定位

html部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../Build/Cesium/Cesium.js"></script><link rel="stylesheet" href="../Build/Cesium/Widgets/widgets.css" /><style>html,body,#cesiumContainer {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}</style>
</head>
<body><div id="cesiumContainer"></div><script src="./app.js"></script>
</body>
</html>

app.js部分

// 通过引入cesium.d.ts实现vscode 代码智能提示！
// /// <reference path="../Build/Cesium/Cesium.d.ts" />
// import * as Cesium from "cesium";var viewer = new Cesium.Viewer("cesiumContainer", {// geocoder: false,  // 搜索按钮// sceneModePicker: false,  // 2D-3D-CV模式切换按钮// navigationHelpButton: false,  // 帮助按钮// animation: false,  // 动画按钮(左小角圆圈)// timeline: false,  // 时间线scene3DOnly: false,  // 每个几何体是否以3D形式渲染（GPU）
});
// 去掉logo
viewer.cesiumWidget.creditContainer.style.display = "none";// 去掉背景图层
// viewer.imageryLayers.removeAll();// 更改鼠标操作习惯
// 关闭双击事件
// viewer.screenSpaceEventHandler.removeInputAction(
//     Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
// );
// 鼠标右键 倾斜操作
viewer.scene.screenSpaceCameraController.tiltEventTypes = [Cesium.CameraEventType.RIGHT_DRAG
];
// 鼠标滑轮 放缩操作
viewer.scene.screenSpaceCameraController.zoomEventTypes = [Cesium.CameraEventType.WHEEL,// Cesium.CameraEventType.PINCH
];
// 鼠标左键 3D下聚焦局部时给人感觉是平移-本质是地球旋转（范围小-旋转类似平移）
viewer.scene.screenSpaceCameraController.rotateEventTypes = [Cesium.CameraEventType.LEFT_DRAG
];// 加载3dtiles-倾斜摄影模型-采用cesiumlab转3dtiles
const tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url : "./Data/tileset.json", maximumMemoryUsage: 1024,
}));
// 异步加载
var height = 5;
tileset.readyPromise.then(function(tileset) {console.log(tileset);var cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center);var lng = Cesium.Math.toDegrees(cartographic.longitude); //使用经纬度和弧度的转换，将WGS84弧度坐标系转换到目标值，弧度转度var lat = Cesium.Math.toDegrees(cartographic.latitude);//计算中心点位置的地表坐标var surface = Cesium.Cartesian3.fromDegrees(lng, lat, 0.0);//偏移后的坐标var offset = Cesium.Cartesian3.fromDegrees(lng, lat, height);var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);// 不建议网上直接修改源码的做法，可以设置homeButton监听事件var heading = Cesium.Math.toRadians(0);var pitch = Cesium.Math.toRadians(-90);viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(heading, pitch));// overwrite homebuttonviewer.homeButton.viewModel.command.beforeExecute.addEventListener(function (e) {e.cancel = true;viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(heading, pitch));});// 增加entityvar center = tileset.boundingSphere.center;center.z = center.z + 20;viewer.entities.add({name : 'Citizens Bank Park',position : center,point : {pixelSize : 5,color : Cesium.Color.RED,outlineColor : Cesium.Color.WHITE,outlineWidth : 2},label : {text : 'Cesium-倾斜摄影模型',font : '16pt monospace',fillColor : Cesium.Color.RED,style: Cesium.LabelStyle.FILL_AND_OUTLINE,outlineWidth : 2,verticalOrigin : Cesium.VerticalOrigin.BOTTOM,pixelOffset : new Cesium.Cartesian2(0, -9)}});
});

4. 其他

(1) vscode中cesium智能提示功能

原生的js，不使用vue时，推荐在js开始写入如下代码即可实现智能提示：（运行代码时，注释掉这2行代码，否则报错）

/// <reference path="../Build/Cesium/Cesium.d.ts" />

import * as Cesium from "cesium";

(2)cesium安装教程网上一堆！

Cesium教程 (1) 界面介绍-3dtiles加载-更改鼠标操作设置相关推荐

cesium入门示例-3dTiles加载
数据转换工具采用cesiumlab1.5.17版本,转换后的3dTiles加载显示比较简单,通过Cesium.Cesium3DTileset接口指定url即可,3dTiles文件可与js前端代码放置一 ...
cesium 3dtiles 加载本地数据_深入echarts学习：加载跨域、异步、本地json数据的防坑录
1 说明: ===== 1.1 推荐指数:★★★★ 1.2 网上这方面说明,大多模棱两可,坑很多,讲透彻的不多,故本人做一个小结. 1.3 我曾介绍echarts的简单基本用法: <Echart ...
Vue3.0+Cesium+Tomcat服务下倾斜摄影数据加载详细过程
Vue3.0+Cesium+Tomcat服务下倾斜摄影数据加载 1.Vue-cli 3.0 + cesium 构建参考资料地址Vue-cli 3.0 + cesium 构建注意,因为文档中设置默认 ...
php 实现自动加载更多,$.ajax+php实战教程之下拉时自动加载更多文章原理分析二...
摘要: 继上一篇<$.ajax+php实战教程之下拉时自动加载更多文章原理分析>文章进行进一步讲解,完善之前的代码及引入ajax和php相关内容...... 上次留下的问题不知道看官们有没 ...
word@tips官方文档和教程@软件界面介绍@功能区自定义@拼写检查@AI润色改进@ 图片顶部上方插入文字
文章目录 word 文档和教程 word软件界面元素字符和标记格式标记段落标记(paragraph marks) 自定义功能区(Ribbon) 自定义功能区要点@层次关系添加自定义选项卡(ta ...
JavaScript判断设备类型加载对应网页并设置两端通用事件
JavaScript如何判断设备类型加载对应网页并设置通用事件基本思路: 在网页入口添加判断逻辑,如下:首先获取当前navigator对象的userAgent,通过userAgent判断当前设备类型 ...
Android Bitmap 加载与像素操作
Android Bitmap 加载与像素操作转载于:https://www.cnblogs.com/zhujiabin/p/4619049.html
linux 文件重新运行,Linux锐速启动，停止，以及重新加载配置等操作参数说明
使用serverSpeeder 服务进行锐速的启动,停止,以及重新加载配置等操作:各参数说明如下: service serverSpeeder start :启动锐速,加载加速模块:使用/server ...
cesium 3dtiles 加载本地数据_记一次Cesium地形数据生成过程
问题描述有一小块带高程值的点状数据,需要根据该数据生成Cesium支持的3dtiles数据,在Cesium中显示.经过一周多时间的摸索,终于能够在Cesium中加载成功.现将数据处理流程做个记录,以 ...

Cesium教程 (1) 界面介绍-3dtiles加载-更改鼠标操作设置

1. 界面介绍 (7-8互换位置)

2. 数据转3dtiles

3. 代码详解

4. 其他

Cesium教程 (1) 界面介绍-3dtiles加载-更改鼠标操作设置相关推荐

最新文章

热门文章