云主机 几个网站,刷外链,苏州网站建设系统方案,大专千万不要报软件技术基础框架vue3 vite。
在操作cesium时#xff0c;默认使用鼠标左键按住拖动#xff0c;或者中键安装拖动#xff0c;在操作上来说是挺便利的#xff0c;但是有些习惯键盘的操作#xff0c;那么就可以做如下修改。
cesium默认用鼠标操作场景的转换 #xff0c;修改为用键…基础框架vue3 vite。
在操作cesium时默认使用鼠标左键按住拖动或者中键安装拖动在操作上来说是挺便利的但是有些习惯键盘的操作那么就可以做如下修改。
cesium默认用鼠标操作场景的转换 修改为用键盘操作上下左右移动。废话不多代码如下
templatediv idcesiumContainer styleheight: 100vh;/divdiv idtoolbar styleposition: fixed;top:20px;left:220px;el-breadcrumb :separator-iconArrowRightel-breadcrumb-item场景/el-breadcrumb-itemel-breadcrumb-item相机教程/el-breadcrumb-item/el-breadcrumbdiv idlatlng_show stylewidth:100vw;position:absolute;top:30px;left:15px;z-index:1;font-size:15px;div stylewidth:auto;height:30px;margin-left: 20px;span stylecolor:#fff点击cesium显示屏开始/span/divdiv stylewidth:auto;height:30px;margin-left: 20px;span stylecolor:#fffw/s - 场景坐标向前/向后移动/span/divdiv stylewidth:auto;height:30px;margin-left: 20px;span stylecolor:#fffa/d - 场景坐标向左/向右移动/span/divdiv stylewidth:auto;height:30px;margin-left: 20px;span stylecolor:#fffq/e - 场景坐标向上/向下移动/span/divdiv stylewidth:auto;height:30px;margin-left: 20px;span stylecolor:#fff鼠标左键按下加上鼠标移动可更改查看方向/span/div/div/div
/template
script setup
import {ArrowRight} from element-plus/icons-vue
import {onMounted, ref} from vue;
import * as Cesium from cesium;
import InitCesium from ../js/InitCesiumHide.js;let viewer null;
let points ref({position: null
});onMounted(() {let initCesium new InitCesium(cesiumContainer);viewer initCesium.initViewer({});flyToRight2();let scene viewer.scene;let canvas scene.canvas;// 重点在画布上canvas.setAttribute(tabindex, 0);canvas.onclick function () {canvas.focus();}let ellipsoid scene.globe.ellipsoid;// 禁用默认事件处理程序 屏幕空间控制scene.screenSpaceCameraController.enableRotate false;// 旋转scene.screenSpaceCameraController.enableTranslate false;scene.screenSpaceCameraController.enableZoom false;scene.screenSpaceCameraController.enableTilt false;scene.screenSpaceCameraController.enableLook false;let startMousePosition;let mousePosition;const flags {looking: false,moveForward: false,moveBackward: false,moveUp: false,moveDown: false,moveLeft: false,moveRight: false};let handler new Cesium.ScreenSpaceEventHandler(canvas);handler.setInputAction(function (movement) {flags.looking true;mousePosition startMousePosition Cesium.Cartesian3.clone(movement.position);}, Cesium.ScreenSpaceEventType.LEFT_DOWN);handler.setInputAction(function (movement) {mousePosition movement.endPosition;}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);handler.setInputAction(function (position) {flags.looking false;}, Cesium.ScreenSpaceEventType.LEFT_UP);document.addEventListener(keydown, function (e) {let flagName getFlagForKeyCode(e.key.toUpperCase());if (typeof flagName ! undefined) {flags[flagName] true;}}, false);document.addEventListener(keyup, function (e) {let flagName getFlagForKeyCode(e.key.toUpperCase());if (typeof flagName ! undefined) {flags[flagName] false;}}, false);viewer.clock.onTick.addEventListener(function (clock) {let camera viewer.camera;if (flags.looking) {let width canvas.clientWidth;let height canvas.clientHeight;// 坐标0.00.0将是单击鼠标的位置let x (mousePosition.x - startMousePosition.x) / width;let y -(mousePosition.y - startMousePosition.y) / height;let lookFactor 0.05;camera.lookRight(x * lookFactor);camera.lookUp(y * lookFactor);}// 根据相机到椭球表面的距离更改移动速度。let cameraHeight ellipsoid.cartesianToCartographic(camera.position).height;let moveRate cameraHeight / 100.0;if (flags.moveForward) {camera.moveForward(moveRate);}if (flags.moveBackward) {camera.moveBackward(moveRate);}if (flags.moveUp) {camera.moveUp(moveRate);}if (flags.moveDown) {camera.moveDown(moveRate);}if (flags.moveLeft) {camera.moveLeft(moveRate);}if (flags.moveRight) {camera.moveRight(moveRate);}});
})const getFlagForKeyCode (keyCode) {switch (keyCode) {case W:return moveForward;case S:return moveBackward;case Q:return moveUp;case E:return moveDown;case D:return moveRight;case A:return moveLeft;default:return undefined;}
}const flyToRight2 async () {let tileset await Cesium.Cesium3DTileset.fromUrl(/src/assets/tileset/12/tileset.json, {});update3dtilesMaxtrix(tileset);viewer.scene.primitives.add(tileset);viewer.flyTo(tileset);
}function update3dtilesMaxtrix(tileSet) {//调整参数let params {tx: 113.06265738392063, //模型中心X轴坐标经度单位十进制度ty: 22.646603971034342, //模型中心Y轴坐标纬度单位十进制度tz: 45, //模型中心Z轴坐标高程单位米rx: 0, //X轴经度方向旋转角度单位度ry: 0, //Y轴纬度方向旋转角度单位度rz: 2, //Z轴高程方向旋转角度单位度scale: 1.35, //缩放比例};//旋转const mx Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(params.rx));const my Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(params.ry));const mz Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(params.rz));const rotationX Cesium.Matrix4.fromRotationTranslation(mx);const rotationY Cesium.Matrix4.fromRotationTranslation(my);const rotationZ Cesium.Matrix4.fromRotationTranslation(mz);//平移const position Cesium.Cartesian3.fromDegrees(params.tx,params.ty,params.tz);const m Cesium.Transforms.eastNorthUpToFixedFrame(position);//旋转、平移矩阵相乘Cesium.Matrix4.multiply(m, rotationX, m);Cesium.Matrix4.multiply(m, rotationY, m);Cesium.Matrix4.multiply(m, rotationZ, m);//比例缩放const scale Cesium.Matrix4.fromUniformScale(params.scale);Cesium.Matrix4.multiply(m, scale, m);// console.log(矩阵m:, m);//赋值给tilesettileSet._root.transform m;
}
/script
style scoped
#cesiumContainer {overflow: hidden;
}
/style
style
.el-breadcrumb__inner, .el-breadcrumb__separator {color: #ffffff !important;
}
/style
