cesium暂存更改

public/index.html

@@ -14,8 +14,18 @@
 		<%= VUE_APP_TITLE %>
 	</title>
 	<link type="text/css" href="./jsmap/jsmap.css" rel="stylesheet" />
-	<script src="/cesium/Cesium.js"></script>
+	<!-- <script src="/cesium/Cesium.js"></script> -->
-	<!-- <script src="http://49.232.14.174:2226/pf/cesium/Cesium.js"></script> -->
+	<script src="http://49.232.14.174:2226/pf/cesium/Cesium.js"></script>
+	<!--引入cesium基础lib-->
+	<!-- <link href="http://mars3d.cn/lib/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
+	<script src="http://mars3d.cn/lib/Cesium/Cesium.js" type="text/javascript"></script>
+	<script src="http://mars3d.cn/lib/turf/turf.min.js" type="text/javascript"></script> -->
+	<!--引入mars3d库lib-->
+	<!-- <link href="http://mars3d.cn/lib/mars3d/mars3d.css" rel="stylesheet" type="text/css" />
+	<script src="http://mars3d.cn/lib/mars3d/mars3d.js" type="text/javascript"></script> -->
+	<!--引入mars3d库插件lib（按需引入）-->
+	<!-- <script src="http://mars3d.cn/lib/mars3d/plugins/space/mars3d-space.js" type="text/javascript"></script> -->
+	
 	<script type="text/javascript" src="./jquery-1.7.1.min.js"></script>
 	<script type="text/javascript" src="./webVideoCtrl.js"></script>
 	<script type="text/javascript" src="./jsVideoPlugin-1.0.0.min.js"></script>

src/App.vue

@@ -238,6 +238,12 @@ export default {
 .enpelCard.el-card {
 	background: none !important;
 }
+.bigScreenTable table th{
+    font-size: 0.8vw!important;
+}
+.bigScreenTable table td{
+	font-size: 0.7vw!important;
+}
 
 // .searchSelect>.select-trigger>.el-input>.el-input__wrapper {
 // 	width: 7vw;

src/views/bigScreen/cesiumtest.vue

@@ -6,6 +6,17 @@
 <script>
 export default {
   name: 'cesium',
+  data() {
+    return {
+      viewer: null
+    }
+  },
+  created() {
+		const scriptInfo = document.createElement("script");
+		scriptInfo.setAttribute("data-callType", "callScript");
+		scriptInfo.src = "https://cesium.com/downloads/cesiumjs/releases/1.75/Build/Cesium/Cesium.js";
+		document.head.appendChild(scriptInfo);
+	},
   mounted() {
     Cesium.Ion.defaultAccessToken =
       "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1Yzg3ZDEzOS0zN2Q1LTQ2N2YtOWJhMy1mNWU4MWY5N2ExYzkiLCJpZCI6MjAxMzIsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NzY4MTIzNzR9.SfNeHedDyXWLIPiNbc4qSsHBACm7uvaqRsQprL2J4Cw";
@@ -28,105 +39,481 @@ export default {
       // sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
       // fullscreenElement: document.body, //全屏时渲染的HTML元素 暂时没发现用处
     });
+    this.viewer = viewer;
+    // this.handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+    // document.querySelector('.cesium-widget-credits').style.display = 'none'
+    // // viewer.scene.globe.depthTestAgainstTerrain = false
+    //设置限制缩放大小
+    // viewer.scene.screenSpaceCameraController.minimumZoomDistance = 0
     //隐藏logo信息
+    viewer.scene.globe.enableLighting = true;
     viewer._cesiumWidget._creditContainer.style.display = 'none';
-    // var camera = viewer.camera;
+    var camera = viewer.camera;
     //*****cesium加载3dtiles*****//
-    // const tileset = new Cesium.Cesium3DTileset({
+    const tileset = new Cesium.Cesium3DTileset({
-    //   // url: "/3dtiles/tileset.json",
+      url: "/3dtiles/tileset.json",
-    //   url: "/glb/photon4.glb",
+      // url: "http://49.232.14.174:2226/pf/3dtiles/tileset.json",
-    //   // url: "http://49.232.14.174:2226/pf/3dtiles/tileset.json",
+    });
-    // });
 
-    // //
+    //
-    // tileset.readyPromise.then(function (tileset) {
+    tileset.readyPromise.then(function (tileset) {
-    //   viewer.scene.primitives.add(tileset);
+      viewer.scene.primitives.add(tileset);
 
-    //   //将tileset的包围球中心点坐标从笛卡尔坐标系转换为地理坐标系
+      console.log("tileset",tileset);
-    //   const cartographic = Cesium.Cartographic.fromCartesian(
+      //将tileset的包围球中心点坐标从笛卡尔坐标系转换为地理坐标系
-    //     tileset.boundingSphere.center
+      const cartographic = Cesium.Cartographic.fromCartesian(
-    //   );
+        tileset.boundingSphere.center
-    //   const { longitude, latitude, height } = cartographic;
+      );
-    //   // 模型包围球的中心点坐标，输出以笛卡尔坐标系表示的三维坐标点
+      console.log('cartographic',cartographic);
-    //   const current = Cesium.Cartesian3.fromRadians(
+      const { longitude, latitude, height } = cartographic;
-    //     longitude,
+      // 模型包围球的中心点坐标，输出以笛卡尔坐标系表示的三维坐标点
-    //     latitude,
+      const current = Cesium.Cartesian3.fromRadians(
-    //     height
+        longitude,
-    //   )
+        latitude,
-    //   console.log('current', current);
+        height
-    //   //根据中心点坐标计算出的地表坐标点
+      )
-    //   const surface = Cesium.Cartesian3.fromRadians(
+      console.log('current', current);
-    //     cartographic.longitude, //经度
+      //根据中心点坐标计算出的地表坐标点
-    //     cartographic.latitude, //纬度
+      const surface = Cesium.Cartesian3.fromRadians(
-    //     0.0 //高度
+        cartographic.longitude, //经度
-    //   )
+        cartographic.latitude, //纬度
-    //   console.log('surface', surface);
+        0 //高度
-    //   debugger;
+      )
-    //   //根据中心点坐标和height值计算出的新的坐标点
+      debugger;
-    //   const offset = Cesium.Cartesian3.fromRadians(
+      //根据中心点坐标和height值计算出的新的坐标点
-    //     longitude, latitude, 0
+      const offset = Cesium.Cartesian3.fromRadians(
-    //   );
+        longitude, latitude, 0
-    //   //更新tileset模型矩阵(modelMatrix)的,实现tileset位置的平移变换
+      );
-    //   const translation = Cesium.Cartesian3.subtract(
+      //更新tileset模型矩阵(modelMatrix)的,实现tileset位置的平移变换
-    //     offset, //根据中心点坐标和height值计算出的新的坐标点
+      const translation = Cesium.Cartesian3.subtract(
-    //     surface, //根据中心点坐标计算出的地表坐标点
+        offset, //根据中心点坐标和height值计算出的新的坐标点
-    //     new Cesium.Cartesian3()
+        surface, //根据中心点坐标计算出的地表坐标点
-    //   );
+        new Cesium.Cartesian3()
-    //   tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
+      );
+      tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
+
+      tileset.tileLoad.addEventListener(function(tile) {
+          let content = tile.content;
+          let featuresLength = content.featuresLength;
+          // console.log("要素数量为：");
+          // console.log(featuresLength);
+          // console.log("第一个要素为：");
+          let feature = content.getFeature(0);
+          // console.log(feature);
+        // 根据需求添加标注到每个feature上
+        // console.log(feature._content._model._boundingSphere.center)
+        let featurePosition = feature._content._model._boundingSphere.center;
+        //将tileset的包围球中心点坐标从笛卡尔坐标系转换为地理坐标系
+        const cartographicMesh = Cesium.Cartographic.fromCartesian(
+          feature._content._model._boundingSphere.center
+        );
+        // 模型包围球的中心点坐标，输出以笛卡尔坐标系表示的三维坐标点
+        const currentMesh = Cesium.Cartesian3.fromRadians(
+          cartographicMesh.longitude, //经度
+          cartographicMesh.latitude, //纬度
+          cartographicMesh.height
+        )
+        // console.log('currentMesh', currentMesh);
+        //根据中心点坐标计算出的地表坐标点
+        const surfaceMesh = Cesium.Cartesian3.fromRadians(
+          cartographicMesh.longitude, //经度
+          cartographicMesh.latitude, //纬度
+          2 //高度
+        )
+        // console.log('surfaceMesh', surfaceMesh);
+
+        // let position = feature.getGeometry().getPosition()
+          // var labelEntity = viewer.entities.add({
+          //     position: Cesium.Cartesian3.fromDegrees(featurePosition.x, featurePosition.y, 2),
+          //     // point: {
+          //     //     pixelSize: 8,
+          //     //     color: Cesium.Color.YELLOW
+          //     // },
+          //     label: {
+          //         text: "这里是标注",
+          //         font: 'bold 14px sans-serif',
+          //         fillColor: Cesium.Color.BLACK,
+          //         outlineWidth: 2,
+          //         style: Cesium.LabelStyle.FILLED_AND_OUTLINED,
+          //         verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+          //         horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
+          //       pixelOffset: new Cesium.Cartesian2(-16, -16),
+          //       scale: 1.0,
+          //         show: true
+          //     }
+          // });
+            
+      })
+      viewer.zoomTo(
+        tileset,
+        new Cesium.HeadingPitchRange(
+          -4.0,
+          -0.65,
+          500
+        )
+      );
+      var boundingSphere = tileset.boundingSphere;
+
+    });
+
+
+
+
+    var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
+    handler.setInputAction(function (movement) {
+      var feature = viewer.scene.pick(movement.position);
+      console.log(feature);
+      let featurePosition = feature._content._model._boundingSphere.center;
+      const cartographicFeature = Cesium.Cartographic.fromCartesian(
+        feature._content._model._boundingSphere.center
+      );
+      console.log(cartographicFeature);
+      var position = Cesium.Cartesian3.fromDegrees(cartographicFeature.longitude, cartographicFeature.latitude,1);
+      // 创建实体
+      var entity = viewer.entities.add({
+          name: 'Text',
+          position: position,
+          label: {
+              text: 'Hello, Cesium!',
+              font: '24px sans-serif',
+              color:Cesium.Color.fromCssColorString('#ff0000'),
+              fillColor: Cesium.Color.WHITE,
+              outlineColor: Cesium.Color.BLACK,
+              outlineWidth: 2,
+              style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+              pixelOffset: new Cesium.Cartesian2(0, -50)
+          }
+      });
+      if (Cesium.defined(feature) && feature instanceof Cesium.Cesium3DTileFeature) {
+        var propertyNames = feature.getPropertyNames();
+        var length = propertyNames.length;
+        for (var i = 0; i < length; ++i) {
+          var propertyName = propertyNames[i];
+          console.log(propertyName + ": " + feature.getProperty(propertyName));
+        }
+      }
+    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
 
-    //   viewer.zoomTo(
-    //     tileset,
-    //     new Cesium.HeadingPitchRange(
-    //       -4.0,
-    //       -0.65,
-    //       500
-    //     )
-    //   );
-    //   var boundingSphere = tileset.boundingSphere;
-    //   // viewer.camera.viewBoundingSphere(boundingSphere, new Cesium.HeadingPitchRange(0, 0, boundingSphere.radius * 4.0));
-    //   // var rootNode = tileset.root;
-    //   // var modelMatrix2 = rootNode.computedTransform;
-    //   // var translation2 = new Cesium.Cartesian3();
-    //   // Cesium.Matrix4.getTranslation(modelMatrix2, translation2);
-    //   // var offset2 = new Cesium.Cartesian3(0, -1000, 0); // 沿着 Z 轴负方向移动 100 单位
-    //   // var newModelMatrix2 = Cesium.Matrix4.fromTranslation(translation2, offset2);
-    //   // rootNode.computedTransform = newModelMatrix2;
-    // });
     //*****cesium加载3dtiles*****//
     //*****cesium加载.glb格式的文件*****//
     // 隐藏地球
-    viewer.scene.globe.show = false
+    // viewer.scene.globe.show = false
-    var url = "/glb/photon4.glb";
+
-    var height = 0;
+    // 设置模型位置
-    viewer.entities.removeAll() //加载之前先清楚所有entity
+
-    const position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, height)
+  //  var position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 0.1);
-    const heading = Cesium.Math.toRadians(135) //135度转弧度
+  //   var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(position);
-    const pitch = Cesium.Math.toRadians(0);
+  //   var url = "/glb/photon4.glb";
-    const roll = 0
+  //   // 加载 glb 模型
-    const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll)
+  //   var model = viewer.scene.primitives.add(Cesium.Model.fromGltf({
-    const orientation = Cesium.Transforms.headingPitchRollQuaternion(
+  //       url: url,
-      position,
+  //       modelMatrix: modelMatrix,
-      hpr
+  //       scale: 1000// 可选：设置模型缩放比例
-    )
+  //   }));
-    const entity = viewer.entities.add({
+  //   // 监听模型加载完成事件
-      name: 'photon',
+  //   model.readyPromise.then(function(model) {
-      position: position,
+  //     console.log('模型加载完成:', model);
-      orientation: orientation,
+  //     // 计算模型包围盒的边界
-      model: {
+  //     var boundingSphere = model.boundingSphere;
-        uri: url,//注意entitits.add方式加载gltf文件时，这里是uri，不是url，并且这种方式只能加载.glb格式的文件
+      
-        scale: 1.5,//缩放比例
+  //     // 将相机焦点移动到模型的包围球中心
-        minimumPixelSize: 1000,//最小像素大小，可以避免太小看不见
+  //   viewer.camera.flyToBoundingSphere(boundingSphere, {
-        maximumScale: 20000,//模型的最大比例尺大小。minimumPixelSize的上限  
+  //       duration: 0 // 设置飞行动画持续时间（单位：秒）
-        incrementallyLoadTextures: true,//加载模型后纹理是否可以继续流入
+  //   });
-        runAnimations: true,//是否启动模型中制定的gltf动画
+  //   // 设置相机跟随模型
-        clampAnimations: true,//制定gltf动画是否在没有关键帧的持续时间内保持最后一个姿势
+  //   viewer.trackedEntity = model;
-        shadows: Cesium.ShadowMode.ENABLED,
+  //   }).otherwise(function(error) {
-        heightReference: Cesium.HeightReference.NONE
+  //       console.error('模型加载失败:', error);
-      }
+  //   });
-    })
+
-    viewer.trackedEntity = entity; // 聚焦模型
+  //   var url = "/glb/photon4.glb";
-    viewer.zoomTo(entity)
+  //   var height = 0;
+  //   viewer.entities.removeAll() //加载之前先清楚所有entity
+  //   var position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, height)
+  //   var heading = Cesium.Math.toRadians(310) //135度转弧度
+  //   var pitch = Cesium.Math.toRadians(0);
+  //   var roll = Cesium.Math.toRadians(0);
+  //   var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll)
+  //   var orientation = Cesium.Transforms.headingPitchRollQuaternion(
+  //     position,
+  //     hpr
+  //   )
+  //   var  modelEntity  = viewer.entities.add({
+  //     name: 'photon',
+  //     position: position,
+  //     orientation: orientation,
+  //     model: {
+  //       uri: url,//注意entitits.add方式加载gltf文件时，这里是uri，不是url，并且这种方式只能加载.glb格式的文件
+  //       scale: 1.0,//缩放比例
+  //       minimumPixelSize: 2500,//最小像素大小，可以避免太小看不见
+  //       maximumScale: 20000,//模型的最大比例尺大小。minimumPixelSize的上限  
+  //       incrementallyLoadTextures: true,//加载模型后纹理是否可以继续流入
+  //       runAnimations: true,//是否启动模型中制定的gltf动画
+  //       clampAnimations: true,//制定gltf动画是否在没有关键帧的持续时间内保持最后一个姿势
+  //       shadows: Cesium.ShadowMode.ENABLED,
+  //       heightReference: Cesium.HeightReference.NONE
+  //     },
+  //   })
+  //   // // 等待模型加载完成
+  //   // modelEntity.model.readyPromise.then(function(model) {
+  //   //     // 此时模型已经加载完成
+  //   //     // 获取模型的网格（primitives）
+  //   //     var primitives = model.primitives;
+  //   //     // 遍历所有网格
+  //   //     primitives.forEach(function(primitive) {
+  //   //         // 每个 primitive 可能是一个网格（GeometryInstance）
+  //   //         // 你可以在这里处理每个网格，例如更改其材质或颜色
+  //   //         // 获取几何体实例
+  //   //         var geometryInstance = primitive.geometryInstance;
+  //   //         // 输出网格信息
+  //   //         console.log('Mesh:', geometryInstance);
+  //   //     });
+  //   // }).otherwise(function(error) {
+  //   //     // 如果加载过程中发生错误，这里会被调用
+  //   //     console.error('模型加载失败:', error);
+  //   // });
+  //    viewer.trackedEntity = modelEntity; // 聚焦模型
+  //   viewer.zoomTo(modelEntity);
+  //   //点
+  //   viewer.entities.add({
+  //     // fromDegrees（经度，纬度，高度，椭球，结果）从以度为单位的经度和纬度值返回Cartesian3位置
+  //       position: Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 1),
+  //       point: {
+  //         // 点的大小（像素）
+  //         pixelSize: 5,
+  //         // 点位颜色，fromCssColorString 可以直接使用CSS颜色
+  //         color: Cesium.Color.fromCssColorString('#ee0000'),
+  //         // 边框颜色
+  //         outlineColor: Cesium.Color.fromCssColorString('#fff'),
+  //         // 边框宽度(像素)
+  //         outlineWidth: 2,
+  //         // 显示在距相机的距离处的属性，多少区间内是可以显示的
+  //         distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 1500),
+  //         // 是否显示
+  //         show: true
+  //       }
+  //   });
+  //   //图片
+  //   // console.log('Cesium.Cartesian3.fromDegrees',Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 0.5))
+  //   viewer.entities.add({
+  //       position: Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 0.5),
+  //       billboard: {
+  //         // 图像地址，URI或Canvas的属性
+  //         image: 'img/elec.png',
+  //         // 设置颜色和透明度
+  //         color: Cesium.Color.WHITE.withAlpha(0.8),
+  //         // 高度（以像素为单位）
+  //         height: 50,
+  //         // 宽度（以像素为单位）
+  //         width: 50,
+  //         // 逆时针旋转
+  //         rotation: 20,
+  //         // 大小是否以米为单位
+  //         sizeInMeters: false,
+  //         // 相对于坐标的垂直位置
+  //         verticalOrigin: Cesium.VerticalOrigin.CENTER,
+  //         // 相对于坐标的水平位置
+  //         horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
+  //         // 该属性指定标签在屏幕空间中距此标签原点的像素偏移量
+  //         pixelOffset: new Cesium.Cartesian2(10, 0),
+  //         // 应用于图像的统一比例。比例大于会1.0放大标签，而比例小于会1.0缩小标签。
+  //         scale: 1.0,
+  //         // 显示在距相机的距离处的属性，多少区间内是可以显示的
+  //         distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 20000),
+  //         // 是否显示
+  //         show: true
+  //       }
+  //   });
+  //   setTimeout(() => {
+  //     if (modelEntity.model.ready) {
+  //       console.log('Model is loaded',modelEntity.model);
+  //     } else {
+  //       console.log('Model is still loading',modelEntity.model);
+  //     }
+  //   }, 10000);
+  //   Cesium.when(modelEntity.model.readyPromise).then(function(model) {
+  //      window.alert(model);
+  //   }).otherwise(function(error){
+  //     window.alert(error);
+  //   });
+  // //   modelEntity.model.readyPromise.then(function(model) {
+  // //     // 模型已加载，可以进行后续操作
+  // //     console.log('Model loaded successfully')
+  // // }).otherwise(function(error) {
+  // //     // 模型加载失败，处理错误
+  // //     console.error('Failed to load model', error);
+  // // });
+
+  //   // // 监听模型加载事件
+  //   //   modelEntity.readyPromise.then(function(entity) {
+  //   //     var modelInstance = entity._modelInstance;
+  //   //     if (!modelInstance || !modelInstance.ready) {
+  //   //         console.error('模型未加载或不可用');
+  //   //         return;
+  //   //     }
+
+  //   //     var geometryInstances = modelInstance.geometryInstances;
+  //   //     if (!geometryInstances || geometryInstances.length === 0) {
+  //   //         console.error('模型没有几何体实例');
+  //   //         return;
+  //   //     }
+
+  //   //     var meshData = [];
+  //   //     geometryInstances.forEach(function(geometryInstance) {
+  //   //         var attributes = geometryInstance.attributes;
+  //   //         if (attributes && attributes.position) {
+  //   //             var positions = attributes.position.values;
+  //   //             // 根据你的模型数据格式，处理positions数组以获取三角形数据
+  //   //             // ...
+  //   //             meshData.push(/* 三角形数据 */);
+  //   //         }
+  //   //     });
+
+  //   //     console.log("模型的网格数据：", meshData);
+  //   // }).otherwise(function(error) {
+  //   //     console.error("无法加载模型:", error);
+  //   // });
+    
+  //   // // 确保entity实际上是一个模型实体
+  //   // if (modelEntity.model) {
+  //   //     // 监听模型的加载完成事件
+  //   //     modelEntity.model.readyPromise.then(function(model) {
+  //   //         // 模型已加载完成，可以获取其网格数据
+  //   //         var geometry = model._glTFModel.scene.children[0].geometry; // 假设模型只有一个节点和几何体
+  //   //         var attributes = geometry.attributes;
+  //   //         var positions = attributes.position.array; // 获取顶点位置数组
+  //   //         console.log("模型的网格数据已加载");
+  //   //     }).otherwise(function(error) {
+  //   //         // 模型加载失败
+  //   //         console.error("无法加载模型:", error);
+  //   //     });
+  //   // } else {
+  //   //     console.error("添加的实体不是一个模型实体");
+  //   // }
+  //   // // 获取实体集合
+  //   // var entityCollection = viewer.entities;
+
+  //   // // 创建一个空数组用于存储模型元素
+  //   // var modelEntities = [];
+
+  //   // // 遍历实体集合
+  //   // entityCollection.values.forEach(function(entity) {
+  //   //     // 检查实体是否为模型实体
+  //   //     if (entity.model) {
+  //   //         // 将模型实体添加到数组中
+  //   //         modelEntities.push(entity.mesh);
+  //   //     }
+  //   // });
+
+  //   // // // 输出模型元素数组
+  //   // console.log(modelEntities);
+
+  //   // // 创建一个实体集合
+  //   // var entityCollection = new Cesium.EntityCollection();
+
+  //   // // 假设modelEntities是一个包含每个模型元素的数组
+  //   // modelEntities.forEach(function(modelEntity) {
+  //   //     // 创建一个实体来表示标注
+  //   //     var annotationEntity = entityCollection.add(new Cesium.Entity({
+  //   //         position: modelEntity.position, // 设置标注位置为模型元素的位置
+  //   //         billboard: {
+  //   //             image: 'img/elec.png', // 设置标注的图片路径
+  //   //             scale: 0.5, // 设置标注的大小
+  //   //             // 可以根据需要设置更多的标注属性，比如颜色、偏移等
+  //   //         }
+  //   //     }));
+  //   // });
+
+  //   // // 将实体集合添加到场景中
+  //   // viewer.entities.add(entityCollection);
+
+
+
+  //   // 监听鼠标左键点击事件
+  //   viewer.screenSpaceEventHandler.setInputAction(function (click) {
+  //     var pickedObject = viewer.scene.pick(click.position);
+  //     console.log("pickedObject",pickedObject);//被点击的模型中的mesh
+  //     if (Cesium.defined(pickedObject) && pickedObject.id) {
+  //       // 模型被点击了
+  //         var mesh = pickedObject.mesh;//modelMesh
+  //         var node = pickedObject.node;//modelNode
+  //         var position = pickedObject.id.position;
+  //         // 处理模型信息和位置
+  //         console.log('模型信息:', mesh);
+  //         console.log('模型信息:', node);
+  //         console.log('位置:', position);
+  //     }
+  //   }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
     //*****cesium加载.glb格式的文件*****//
+  },
+  mothods: {
+    mapViweinit() {
+        this.fly({ lon: 117.077665, lat: 30.838531, h: 50000, duration: 1 })
+    },
+    //地图添加点之后可以通过id默认飞行到点的对应位置 使用viewer.camera.flyTo可能会有经纬度不准的情况
+    flyTo(key) {
+        let rider = viewer.entities.getById(key)
+        let offset = new Cesium.HeadingPitchRange(0.10074559078582723, -0.49977131690671905, 3000)
+        viewer.flyTo(rider, {
+            offset,
+            duration: 0.8
+        })
+    },
+    //调用此方法创建点用于标注在地图上
+    createPoint(attrs, config) {
+        const { name = '', lon, lat, id, type = 'display' } = attrs
+        const { height, show = true, fontSize, fillColor, pixelOffsetX, pixelOffsetY, image, imgWidth, imgHeight, textDistance, imgDistance } = config
+        return new Cesium.Entity({
+            attrs: attrs,
+            id: id,
+            type: type,
+            position: Cesium.Cartesian3.fromDegrees(lon * 1, lat * 1, height || 100), // 文字标签
+            label: {
+                show: show,
+                text: name,
+                font: (fontSize || '12px') + ' monospace',
+                // style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+                // fillColor: Cesium.Color.LIME,
+                fillColor: Cesium.Color.fromCssColorString(fillColor || '#fff'),
+                // outline: true,// 字体边框
+                outlineColor: Cesium.Color.WHITE, // 字体边框颜色
+                outlineWidth: fillWidth || 4,    // 字体边框尺寸
+                showBackground: true, // 是否显示背景颜色
+                backgroundColor: Cesium.Color.fromCssColorString('#018081'), // 背景颜色
+                verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 垂直方向以底部来计算标签的位置
+                pixelOffset: new Cesium.Cartesian2(pixelOffsetX || 50, pixelOffsetY || -30), // 偏移量
+                distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, textDistance || 550000) //  文字标签多少距离内设置可见
+            },
+            billboard: {
+                // 图标
+                image: image || '/public/img/ele.png',
+                width: imgWidth || 61,
+                height: imgHeight || 113,
+                distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, imgDistance || 550000) //  图片多少距离内设置可见
+            }
+        })
+    },
+ 
+    //用于把创建好的点加载到地图上
+    addPointer(obj) {
+        viewer.entities.add(obj)
+    },
+ 
+    //添加点之前可以调用一下移除所有的点防止重复添加
+    removePointer() {
+        let allEntitiesPoint = []
+ 
+        // console.log(viewer.entities.values)
+ 
+        viewer.entities.values.forEach((item) => {
+            allEntitiesPoint.push(item.id)
+        })
+ 
+        allEntitiesPoint.forEach((item) => {
+            const entity_obj = viewer.entities.getById(item)
+            viewer.entities.remove(entity_obj)
+        })
+    },
   }
 }
 </script>

src/views/bigScreen/cesiumtest0.vue

@@ -0,0 +1,183 @@
+
+<template>
+   <div id="mars3dContainer" class="mars3d-container"></div> 
+</template>
+ 
+<script>
+// import * as mars3d from "mars3d";
+const Cesium = mars3d.Cesium;
+const point1 = [116.027404,36.414659,42]
+const point2 = [116.027392, 36.413562, 42]
+const point3 = mars3d.PointUtil.getOnLinePointByLen(
+	mars3d.LngLatPoint.toCartesian(point1),
+	mars3d.LngLatPoint.toCartesian(point2),
+	40
+)
+export default {
+  name: 'cesium',
+  data() {
+    return {
+      viewer: null
+    }
+  },
+  created() {
+		const scriptInfo = document.createElement("script");
+		scriptInfo.setAttribute("data-callType", "callScript");
+    scriptInfo.src = "http://mars3d.cn/lib/Cesium/Cesium.js";
+    const scriptInfo1 = document.createElement("script");
+		scriptInfo1.setAttribute("data-callType", "callScript");
+		scriptInfo1.src = "http://mars3d.cn/lib/mars3d/mars3d.js";
+		document.head.appendChild(scriptInfo);
+		document.head.appendChild(scriptInfo1);
+	},
+  mounted() {
+    var mapOptions = {
+        basemaps: [{ name: "天地图", type: "tdt", layer: "img_d", show: true }],
+      };
+    // var map = new mars3d.Map("mars3dContainer", mapOptions); //支持的参数请看API文档：http://mars3d.cn/api/Map.html
+      const map = new mars3d.Map("mars3dContainer", {
+        scene: {
+          center: { lat: 30.054604, lng: 108.885436, alt: 17036414, heading: 0, pitch: -90 },
+          showSun: true,
+          showMoon: true,
+          showSkyBox: true,
+          showSkyAtmosphere: false, // 关闭球周边的白色轮廓 map.scene.skyAtmosphere = false
+          fog: true,
+          fxaa: true,
+          globe: {
+           
+            depthTestAgainstTerrain: false,
+            baseColor: "#546a53"
+          },
+          cameraController: {
+            zoomFactor: 3.0,
+            minimumZoomDistance: 1,
+            maximumZoomDistance: 50000000,
+            enableRotate: true,
+            enableZoom: true
+          },
+          mapProjection: mars3d.CRS.EPSG3857, // 2D下展示墨卡托投影
+          mapMode2D: Cesium.MapMode2D.INFINITE_SCROLL// 2D下左右一直可以滚动重复世界地图
+        },
+        control: {
+          baseLayerPicker: true, // basemaps底图切换按钮
+          homeButton: true, // 视角复位按钮
+          sceneModePicker: true, // 二三维切换按钮
+          navigationHelpButton: true, // 帮助按钮
+          fullscreenButton: true, // 全屏按钮
+          contextmenu: { hasDefault: true } // 右键菜单
+        },
+        terrain: {
+          url: "//data.mars3d.cn/terrain",
+          show: true
+        },
+        basemaps: [
+          {
+            name: "天地图影像",
+            // icon: "img/basemaps/tdt_img.png",
+            type: "tdt",
+            layer: "img_d",
+            show: true
+          }
+        ]
+      })
+    let tilesetLayer = new mars3d.layer.TilesetLayer({
+        name:'',
+        url: "/3dtiles/tileset.json",
+        popup: "all",
+        flyTo: true, //视角切换到模型所在位置
+    });
+    map.addLayer(tilesetLayer);
+     tilesetLayer.readyPromise.then(() => {
+      // 加载完成
+      console.log("模型加载完成", tilesetLayer)
+
+      localforage.setItem(storageName, url) // 记录历史值
+      eventTarget.fire("tilesetLayerLoad", { layer: tilesetLayer })
+    })
+    .catch((e) => {
+      // 加载失败
+      console.log("模型加载失败", e)
+    })
+
+  // 加载完成事件
+  tilesetLayer.on(mars3d.EventType.updatePosition, function (event) {
+    eventTarget.fire("changePoition", {
+      center: tilesetLayer.center,
+      rotation: tilesetLayer.rotation
+    })
+  })
+// 创建图层
+ let  layerWall = new mars3d.layer.GraphicLayer({
+     name: "墙",
+    show: true,
+    // 属性
+    strokestyle: "#3388ff",
+    strokewidth: 2,
+    fill: true,
+    fillcolor: "#00ffff",
+    opacity: 0.5,
+    // 样式
+    style: {
+      // 可见范围
+      distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 20000),
+      // 高度 
+   },
+   
+    semicolon: true
+ })
+ // 矢量对象
+ let wallGraphic = new mars3d.graphic.WallEntity({
+    positions: [point1, point2],
+    // @param [options.allowDrillPick] - 是否允许鼠标穿透拾取
+    allowDrillPick: true,
+    style: {
+      // 可见范围
+      distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 20000),
+      // 文字墙高度
+      diffHeight:15 ,
+      materialType: mars3d.MaterialType.Text,
+      materialOptions: {
+        text: "显示文本",
+        font_family: "楷体",
+        color: "#00ffff"
+      }
+   },
+    flyTo:true,
+    attr: { remark: "test" }
+ })
+
+
+  // 为了演示graphic上绑定方式
+  var graphic = new mars3d.graphic.BoxEntity({
+    position: new mars3d.LngLatPoint(30.054604, 108.885436, 1),
+    style: {
+      dimensions: new Cesium.Cartesian3(2000.0, 2000.0, 2000.0),
+      fill: true,
+      color: "#00ff00",
+      opacity: 0.9,
+      label: {
+        text: "graphic绑定的演示",
+        font_size: 25,
+        font_family: "楷体",
+        color: "#003da6",
+        outline: true,
+        outlineColor: "#bfbfbf",
+        outlineWidth: 2,
+        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+        verticalOrigin: Cesium.VerticalOrigin.BOTTOM
+      },
+       semicolon: true
+    }
+  })
+  map.graphicLayer.addGraphic(graphic)
+  
+layerWall.addGraphic(wallGraphic)
+map.addLayer(layerWall)
+},
+  mothods: {
+   
+  }
+}
+</script>
+<style></style>

src/views/bigScreen/enpComponents/orgwryList.vue

@@ -220,7 +220,7 @@
                 <el-main>
                     <div class="aside_side">
                         <div class="pageTitle">排放口及关联设备动态信息</div>
-                        <div id="dataChart" style="width: 100%; height:300px;margin-top:1vh"></div>
+                        <div id="dataChart" style="width: 100%; height:200px;margin-top:1vh"></div>
                         <div id="dataChart2" style="width: 100%; height:200px;margin-top:1vh"></div>
                     </div>
 

src/views/bigScreen/index_enp_blue.vue

@@ -117,7 +117,7 @@
               <!-- <div class="title_s">{{ cemsData.equipment_name }}</div> -->
               <!-- <div class="status"><span style="color:#32D74B">数据正常</span><span>2024-01-26 14:32:06</span></div> -->
               <scScrollTavle v-if="table1Visible" :tableHeight="containerHeight" :rowData="lineData" :titleData="liData1"
-                :refValue="refValue1"></scScrollTavle>
+                :refValue="refValue1" class="bigScreenTable"></scScrollTavle>
               <!-- <div class="tableHear" style="padding: 0 1vh;">
                 <div style="flex:1;height:1vh"></div>
                 <div style="flex:5;margin: 0 1vh;">设备名称</div>
@@ -193,7 +193,7 @@
             </div>
             <div>
               <scScrollTavle v-if="table2Visible" :tableHeight="containerHeight" :rowData="lineData2" :titleData="liData2"
-                :refValue="refValue2"></scScrollTavle>
+                :refValue="refValue2" class="bigScreenTable"></scScrollTavle>
             </div>
           </div>
         </div>
@@ -206,7 +206,7 @@
               <img class="blockTitleImg" src="img/enp_blue/block_title.png">
             </div>
             <scScrollTavle v-if="table3Visible" :tableHeight="containerHeight" :rowData="lineData3" :titleData="liData3"
-              :refValue="refValue3"></scScrollTavle>
+              :refValue="refValue3" class="bigScreenTable"></scScrollTavle>
             <!-- <div>
               <div class="tableHear"
                 style="margin:1vh 0;height:2.6vh;line-height:2.6vh;display:flex;padding:1vh;font-size:1.2vh">
@@ -260,10 +260,8 @@
             <div style="display:flex;">
               <div class="chart" id="pieChart"></div>
               <div style="width:50%">
-
               </div>
             </div>
-
           </div>
           <!-- 环卫车作业情况 -->
           <div class="panel panel1">
@@ -317,10 +315,6 @@
 </template>
 <script>
 import * as echarts from "echarts";
-import * as BABYLON from "babylonjs"
-import * as BABYLON_GUI from "babylonjs-gui"
-import * as BABYLON_GRID from "@/utils/gridMaterial"
-import * as BABYLON_MATERIAL from "@/utils/babylonMaterial"
 import Cesium from './cesiumtest.vue'
 import orgDialog from "./enpComponents/orgwryList"
 import cemsDrawer from './enpComponents/cems.vue'