9、cesium使用entity进行页面交互效果
缇莹001
编辑于 2023年04月28日 06:14
收录于文集
共15篇

注意问题：(1)cesium.js使用viewer.entities.add({})添加的图片和glb模型不会随视口缩放，文字会随着视口进行缩放。

1、Cesium鼠标交互编写弹窗，编写多个弹窗内容）以及使用iframe标签，在弹框加载其它页面

(1)、Cesium给我们提供了好几种获取不同对象的方法

scene.pick返回的是包含给定窗口位置基元的对象

scene.drillpack返回的是给定窗口位置所有对象的列表

Globe.pick返回的是给光线和地形的交点

Cesium.ScreenSpaceEventType.MIDDLE_CLICK 鼠标中间点击事件

Cesium.ScreenSpaceEventType.MOUSE_MOVE 鼠标移入事件

Cesium.ScreenSpaceEventType.RIGHT_CLICK 鼠标右击事件

打开cesium001文件在src中创建index15.html为文件——》编写代码

(2)、cesium.js中使用iframe标签必须要允许沙盒使用js(否则会报错，且弹窗中的iframe里的内容不能正常加载）

代码块
JavaScript
自动换行
复制代码
 var iframe = document.getElementsByClassName('cesium-infoBox-iframe')[0];
 iframe.setAttribute('sandbox', 'allow-same-origin allow-scripts allow-popups allow-forms'); 
 iframe.setAttribute('src', '');
复制成功

接着进行编写代码文件——》

代码块
JavaScript
自动换行
复制代码
<!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>Page Title</title>
    <script src="../libs/Cesium/Cesium.js"></script>
    <link href="../libs/Cesium/Widgets/widgets.css" rel="stylesheet">
    <style>
        /* @import url(../Build/Cesium/Widgets/widgets.css); */
        html,
        body,
        #cesiumContainer {
          width: 100%;
          height: 100%;
          margin: 0;
          padding: 0;
          overflow: hidden;
        }
      </style>
</head>

<body>
    <div id="cesiumContainer"></div>
    <script>
        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZDI1OTc0Ni04ODAxLTQ0ZTctODQ3MS1hMmJiMjJmOTEwZTkiLCJpZCI6ODA0NzAsImlhdCI6MTY0MjkzMTM2NX0.RGiLipGghDA8wSene50wY9MhkU77jQkZ9bhHEC4tWps';
        const viewer = new Cesium.Viewer('cesiumContainer', {
             
        });
        var iframe = document.getElementsByClassName('cesium-infoBox-iframe')[0];
        iframe.setAttribute('sandbox', 'allow-same-origin allow-scripts allow-popups allow-forms'); 
        iframe.setAttribute('src', '');
        viewer.camera.setView({
            destination: Cesium.Cartesian3.fromDegrees(116.391173, 39.907223, 1000.0),
            orientation: {
                heading: Cesium.Math.toRadians(0),
                pitch: Cesium.Math.toRadians(-90.0),
                roll: 0.0
            }
        });
        const entity = viewer.entities.add({
            id:'trees', //绑定一个id号，用于绑定和识别
            position: new Cesium.Cartesian3.fromDegrees(116.391173, 39.907223, 0.0),
            plane: {
                plane: new Cesium.Plane(Cesium.Cartesian3.UNIT_Z, 0.0),
                dimensions: new Cesium.Cartesian2(100, 75),
                material: "./image/trees.png",
                outline: true,
                outlineColor: Cesium.Color.BLACK,
            },    
            description:`<div>
                <img width="100%" height="300px" src="./image/trees.png">
                <h3>你好呀</h3>
                <h3>欢迎学习cesium</h3>
                </div>`
        });
        const entity01 = viewer.entities.add({
            id:'girl', //绑定一个id号，用于绑定和识别
            position: new Cesium.Cartesian3.fromDegrees(116.393236, 39.907288, 0.0),
            plane: {
                plane: new Cesium.Plane(Cesium.Cartesian3.UNIT_Z, 0.0),
                dimensions: new Cesium.Cartesian2(100, 75),
                material: "./image/girl.png",
                outline: true,
                outlineColor: Cesium.Color.BLACK,
            },    
            description:`<div>
                <img width="100%" height="300px" src="./image/girl.png">
                <h3>你好，</h3>
                <h3>欢迎点击此处，查看模型</h3>
                <iframe src="https://ringstar.top/threejs/examples/hetun.html" style="width:100%;height: 100%;" name="iframe_a"></iframe>
                </div>`
        })

        var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
        handler.setInputAction(function (movement){
            var pick = viewer.scene.pick(movement.position);
        },Cesium.ScreenSpaceEventType.LEFT_CLICK);  //监听鼠标左键点击事件
    </script>
</body>
</html>
复制成功

浏览器显示效果——》

2、cesium使用viewer.entities添加glb模型

代码块
JavaScript
自动换行
复制代码
<!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>Page Title</title>
    <script src="../libs/Cesium/Cesium.js"></script>
    <link href="../libs/Cesium/Widgets/widgets.css" rel="stylesheet">
    <style>
        /* @import url(../Build/Cesium/Widgets/widgets.css); */
        html,
        body,
        #cesiumContainer {
          width: 100%;
          height: 100%;
          margin: 0;
          padding: 0;
          overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="cesiumContainer"></div>
    <script>
        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZDI1OTc0Ni04ODAxLTQ0ZTctODQ3MS1hMmJiMjJmOTEwZTkiLCJpZCI6ODA0NzAsImlhdCI6MTY0MjkzMTM2NX0.RGiLipGghDA8wSene50wY9MhkU77jQkZ9bhHEC4tWps';
        const viewer = new Cesium.Viewer('cesiumContainer', {
             
        });
        var iframe = document.getElementsByClassName('cesium-infoBox-iframe')[0];
        iframe.setAttribute('sandbox', 'allow-same-origin allow-scripts allow-popups allow-forms'); 
        iframe.setAttribute('src', '');
        viewer.camera.setView({
            destination: Cesium.Cartesian3.fromDegrees(116.391173, 39.907223, 1000.0),
            orientation: {
                heading: Cesium.Math.toRadians(0),
                pitch: Cesium.Math.toRadians(-90.0),
                roll: 0.0
            }
        });
        const entity = viewer.entities.add({
            id:'planeLogo', //绑定一个id号，用于绑定和识别
            position: new Cesium.Cartesian3.fromDegrees(116.391173, 39.907223, 0.0),
            model: {
                uri: "./apples.glb",
                scale:10
            },
            description:`<div>
                <img width="100%" height="300px" src="./image/girl.png">
                <h3>苹果模型</h3>
                <h3>你好呀</h3>
                </div>`
        });
        const entity01 = viewer.entities.add({
            id:'plane', //绑定一个id号，用于绑定和识别
            position: new Cesium.Cartesian3.fromDegrees(116.393236, 39.907288, 0.0),
            plane: {
                plane: new Cesium.Plane(Cesium.Cartesian3.UNIT_Z, 0.0),
                dimensions: new Cesium.Cartesian2(100, 75),
                material: "./image/girl.png",
                outline: true,
                outlineColor: Cesium.Color.BLACK,
            },    
            description:`<div>
                <img width="100%" height="300px" src="./image/girl.png">
                <h3>你好，</h3>
                <h3>欢迎点击此处，查看模型</h3>
                <iframe src="https://ringstar.top/threejs/examples/hetun.html" style="width:100%;height: 100%;" name="iframe_a"></iframe>
                </div>`
        })

        var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
        handler.setInputAction(function (movement){
            var pick = viewer.scene.pick(movement.position);
        },Cesium.ScreenSpaceEventType.LEFT_CLICK);  //监听鼠标左键点击事件
    </script>
</body>
</html>
复制成功

浏览器显示结果——》

cv23351101