zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

cesium暂存更改

This commit is contained in:
shijing 2024-03-08 09:22:37 +08:00
parent f783cd189d
commit e13a52beea
6 changed files with 681 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
public/index.html
View File

@ -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="http://49.232.14.174:2226/pf/cesium/Cesium.js"></script> -->
<!-- <script src="/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>

6
src/App.vue
View File

@ -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;

565
src/views/bigScreen/cesiumtest.vue
View File

@ -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({
// // url: "/3dtiles/tileset.json",
// url: "/glb/photon4.glb",
// // url: "http://49.232.14.174:2226/pf/3dtiles/tileset.json",
// });
const tileset = new Cesium.Cesium3DTileset({
url: "/3dtiles/tileset.json",
// url: "http://49.232.14.174:2226/pf/3dtiles/tileset.json",
});
// //
// tileset.readyPromise.then(function (tileset) {
// viewer.scene.primitives.add(tileset);
//
tileset.readyPromise.then(function (tileset) {
viewer.scene.primitives.add(tileset);
// //将tileset的包围球中心点坐标从笛卡尔坐标系转换为地理坐标系
// const cartographic = Cesium.Cartographic.fromCartesian(
// tileset.boundingSphere.center
// );
// const { longitude, latitude, height } = cartographic;
// // 模型包围球的中心点坐标，输出以笛卡尔坐标系表示的三维坐标点
// const current = Cesium.Cartesian3.fromRadians(
// longitude,
// latitude,
// height
// )
// console.log('current', current);
// //根据中心点坐标计算出的地表坐标点
// const surface = Cesium.Cartesian3.fromRadians(
// cartographic.longitude, //经度
// cartographic.latitude, //纬度
// 0.0 //高度
// )
// console.log('surface', surface);
// debugger;
// //根据中心点坐标和height值计算出的新的坐标点
// const offset = Cesium.Cartesian3.fromRadians(
// longitude, latitude, 0
// );
// //更新tileset模型矩阵(modelMatrix)的,实现tileset位置的平移变换
// const translation = Cesium.Cartesian3.subtract(
// offset, //根据中心点坐标和height值计算出的新的坐标点
// surface, //根据中心点坐标计算出的地表坐标点
// new Cesium.Cartesian3()
// );
// tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
console.log("tileset",tileset);
//将tileset的包围球中心点坐标从笛卡尔坐标系转换为地理坐标系
const cartographic = Cesium.Cartographic.fromCartesian(
tileset.boundingSphere.center
);
console.log('cartographic',cartographic);
const { longitude, latitude, height } = cartographic;
// 模型包围球的中心点坐标，输出以笛卡尔坐标系表示的三维坐标点
const current = Cesium.Cartesian3.fromRadians(
longitude,
latitude,
height
)
console.log('current', current);
//根据中心点坐标计算出的地表坐标点
const surface = Cesium.Cartesian3.fromRadians(
cartographic.longitude, //经度
cartographic.latitude, //纬度
0 //高度
)
debugger;
//根据中心点坐标和height值计算出的新的坐标点
const offset = Cesium.Cartesian3.fromRadians(
longitude, latitude, 0
);
//更新tileset模型矩阵(modelMatrix)的,实现tileset位置的平移变换
const translation = Cesium.Cartesian3.subtract(
offset, //根据中心点坐标和height值计算出的新的坐标点
surface, //根据中心点坐标计算出的地表坐标点
new Cesium.Cartesian3()
);
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
var url = "/glb/photon4.glb";
var height = 0;
viewer.entities.removeAll() //加载之前先清楚所有entity
const position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, height)
const heading = Cesium.Math.toRadians(135) //135度转弧度
const pitch = Cesium.Math.toRadians(0);
const roll = 0
const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll)
const orientation = Cesium.Transforms.headingPitchRollQuaternion(
position,
hpr
)
const entity = viewer.entities.add({
name: 'photon',
position: position,
orientation: orientation,
model: {
uri: url,//注意entitits.add方式加载gltf文件时，这里是uri，不是url，并且这种方式只能加载.glb格式的文件
scale: 1.5,//缩放比例
minimumPixelSize: 1000,//最小像素大小，可以避免太小看不见
maximumScale: 20000,//模型的最大比例尺大小。minimumPixelSize的上限
incrementallyLoadTextures: true,//加载模型后纹理是否可以继续流入
runAnimations: true,//是否启动模型中制定的gltf动画
clampAnimations: true,//制定gltf动画是否在没有关键帧的持续时间内保持最后一个姿势
shadows: Cesium.ShadowMode.ENABLED,
heightReference: Cesium.HeightReference.NONE
}
})
viewer.trackedEntity = entity; // 聚焦模型
viewer.zoomTo(entity)
// viewer.scene.globe.show = false
// 设置模型位置
// var position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 0.1);
// var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(position);
// var url = "/glb/photon4.glb";
// // 加载 glb 模型
// var model = viewer.scene.primitives.add(Cesium.Model.fromGltf({
// url: url,
// modelMatrix: modelMatrix,
// scale: 1000// 可选：设置模型缩放比例
// }));
// // 监听模型加载完成事件
// model.readyPromise.then(function(model) {
// console.log('模型加载完成:', model);
// // 计算模型包围盒的边界
// var boundingSphere = model.boundingSphere;
// // 将相机焦点移动到模型的包围球中心
// viewer.camera.flyToBoundingSphere(boundingSphere, {
// duration: 0 // 设置飞行动画持续时间（单位：秒）
// });
// // 设置相机跟随模型
// viewer.trackedEntity = model;
// }).otherwise(function(error) {
// console.error('模型加载失败:', error);
// });
// var url = "/glb/photon4.glb";
// 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>

183
src/views/bigScreen/cesiumtest0.vue Normal file
View File

@ -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>

2
src/views/bigScreen/enpComponents/orgwryList.vue
View File

@ -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>

12
src/views/bigScreen/index_enp_blue.vue
View File

@ -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'