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

LEILEI18A

已于 2022-04-22 10:06:23 修改

阅读量3.3k

点赞数

分类专栏： GIS-WebGIS 文章标签： javascript webgis cesium

于 2022-04-22 10:05:32 首次发布

本文链接：https://blog.csdn.net/LEILEI18A/article/details/124337385

版权

GIS-WebGIS 专栏收录该内容

20 篇文章 13 订阅

订阅专栏

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

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 homebutton
    viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function (e) {
        e.cancel = true;
        viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(heading, pitch));
    });

    // 增加entity
    var 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)
        }
    });
});