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部分

app.js部分

// 通过引入cesium.d.ts实现vscode 代码智能提示！
// /// 
// 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)
        }
    });
});

4. 其他

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

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

        /// 

        import * as Cesium from "cesium";

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