647 lines
25 KiB
Vue
647 lines
25 KiB
Vue
|
||
<template>
|
||
<div style="width: 100%; height: 100%;">
|
||
<div id="cesiumContainer" style="width: 100%; height: 100%;"></div>
|
||
<div v-show="activeIndex == 0" class="btns_enp">
|
||
<div class="btns" :class="bindBtnClass(10)" @click="equipmentTypeChange(10)">生产设备</div>
|
||
<div class="btns" :class="bindBtnClass(30)" @click="equipmentTypeChange(30)">治理设备</div>
|
||
<div class="btns" :class="bindBtnClass(40)" @click="equipmentTypeChange(40)">监测设备</div>
|
||
<div class="btns" :class="bindBtnClass(50)" @click="equipmentTypeChange(50)">监控设备</div>
|
||
</div>
|
||
<div v-show="infoShow" class="infoDom">
|
||
<h4 class="infoDom_header">
|
||
<el-icon class="infoDom_close" @click="closeInfo()"><el-icon-close /></el-icon>
|
||
{{objItem.name}}
|
||
</h4>
|
||
<div class="infoBody">
|
||
<p class="bodyTitle"><span class="titleIcon"></span>实时状态</p>
|
||
<div class="bodyContainer">
|
||
<div class="rdio-group">
|
||
<div :class="['radio-item' ,objItem.state==10?'greenIcon':'']">
|
||
<el-icon class="radio-ico"><el-icon-successFilled /></el-icon>
|
||
<span>运行</span>
|
||
</div>
|
||
<div :class="['radio-item' ,objItem.state==20?'orangeIcon':'']">
|
||
<el-icon class="radio-ico"><el-icon-removeFilled /></el-icon>
|
||
<span>待机</span>
|
||
</div>
|
||
<div :class="['radio-item' ,objItem.state==30?'redIcon':'']">
|
||
<el-icon class="radio-ico"><el-icon-warningFilled /></el-icon>
|
||
<span>离线</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p class="bodyTitle"><span class="titleIcon"></span>历史监测数据</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import * as Cesium from 'cesium';
|
||
export default {
|
||
name: 'cesium',
|
||
props: ['activeIndex'],
|
||
data() {
|
||
return {
|
||
objItem: {},
|
||
activeBtns: 10,
|
||
infoShow:false,
|
||
}
|
||
},
|
||
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);
|
||
},
|
||
// watch: {
|
||
// activeBtns:function(newVal, oldVal) {
|
||
// console.log('activeBtns 发生变化:', newVal, oldVal);
|
||
// this.getInfo(newVal);
|
||
// }
|
||
// },
|
||
mounted() {
|
||
let that = this;
|
||
Cesium.Ion.defaultAccessToken =
|
||
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1Yzg3ZDEzOS0zN2Q1LTQ2N2YtOWJhMy1mNWU4MWY5N2ExYzkiLCJpZCI6MjAxMzIsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NzY4MTIzNzR9.SfNeHedDyXWLIPiNbc4qSsHBACm7uvaqRsQprL2J4Cw";
|
||
|
||
const viewer = new Cesium.Viewer("cesiumContainer",{
|
||
animation:false,//动画小部件
|
||
baseLayerPicker:false,//地图图层组件
|
||
fullscreenButton:false,//全屏组件
|
||
geocoder:false,//地理编码搜索组件
|
||
homeButton:false,//首页组件
|
||
infoBox:false,//信息框
|
||
sceneModePicker:false,//场景模式
|
||
selectionIndicator:false,//选取指示器组件
|
||
timeline:false,//时间轴
|
||
navigationHelpButton:false,//帮助按钮
|
||
navigationInstructionsInitiallyVisible:false
|
||
});
|
||
this.viewer = viewer;
|
||
// viewer.scene.globe.depthTestAgainstTerrain = false
|
||
|
||
//设置限制缩放大小
|
||
// viewer.scene.screenSpaceCameraController.minimumZoomDistance = 1
|
||
|
||
//隐藏logo信息
|
||
// viewer.scene.globe.enableLighting = true;
|
||
// viewer._cesiumWidget._creditContainer.style.display = 'none';
|
||
//*****cesium加载3dtiles*****//
|
||
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的包围球中心点坐标从笛卡尔坐标系转换为地理坐标系
|
||
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
|
||
)
|
||
//根据中心点坐标计算出的地表坐标点
|
||
const surface = Cesium.Cartesian3.fromRadians(
|
||
cartographic.longitude, //经度
|
||
cartographic.latitude, //纬度
|
||
0 //高度
|
||
)
|
||
//根据中心点坐标和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加载完成监听
|
||
// tileset.tileLoad.addEventListener(function (tile) {
|
||
// let content = tile.content;
|
||
// // let featuresLength = content.featuresLength;
|
||
// let feature = content.getFeature(0);
|
||
// //将tileset的包围球中心点坐标从笛卡尔坐标系转换为地理坐标系
|
||
// const cartographicMesh = Cesium.Cartographic.fromCartesian(
|
||
// feature._content._model._boundingSphere.center
|
||
// );
|
||
// // 模型包围球的中心点坐标，输出以笛卡尔坐标系表示的三维坐标点
|
||
// const currentMesh = Cesium.Cartesian3.fromRadians(
|
||
// cartographicMesh.longitude, //经度
|
||
// cartographicMesh.latitude, //纬度
|
||
// cartographicMesh.height
|
||
// )
|
||
// //根据中心点坐标计算出的地表坐标点
|
||
// const surfaceMesh = Cesium.Cartesian3.fromRadians(
|
||
// cartographicMesh.longitude, //经度
|
||
// cartographicMesh.latitude, //纬度
|
||
// 2 //高度
|
||
// )
|
||
|
||
// })
|
||
//视野转到tileset模型
|
||
viewer.zoomTo(
|
||
tileset,
|
||
new Cesium.HeadingPitchRange(
|
||
-4.0,
|
||
-0.65,
|
||
500
|
||
)
|
||
);
|
||
// that.equipmentTypeChange(10);
|
||
});
|
||
// 监听鼠标左键点击事件
|
||
var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
|
||
handler.setInputAction(function (click) {
|
||
var feature = viewer.scene.pick(click.position);
|
||
console.log("feature",feature);
|
||
console.log("_attrs", feature.id._attrs);
|
||
that.objItem = feature.id._attrs;
|
||
that.getInfo(feature.id._id);
|
||
if (Cesium.defined(feature)) {
|
||
// 判断点击位置是否有模型被选中
|
||
var pickedPosition = viewer.scene.pickPosition(click.position);
|
||
if (Cesium.defined(pickedPosition)) {
|
||
// 将点击位置的世界坐标转换为地理坐标（经纬度）
|
||
var cartographic = Cesium.Cartographic.fromCartesian(pickedPosition);
|
||
var longitude = Cesium.Math.toDegrees(cartographic.longitude);//经度
|
||
var latitude = Cesium.Math.toDegrees(cartographic.latitude);//纬度
|
||
var height = cartographic.height; // 获取高度值
|
||
// console.log('Longitude: ' + longitude);
|
||
// console.log('Latitude: ' + latitude);
|
||
// console.log('Height: ' + height);
|
||
// 可以在这里执行更多操作，例如在点击位置添加标记等
|
||
//获取该点信息，查询相关数据
|
||
|
||
}
|
||
}
|
||
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||
//*****cesium加载3dtiles*****//
|
||
//*****cesium加载.glb格式的文件*****//
|
||
// 隐藏地球
|
||
// 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格式的文件*****//
|
||
},
|
||
methods: {
|
||
bindBtnClass(index) {
|
||
let classInfo = { btns: true, btnsActive: false };
|
||
if (index == this.activeBtns) {
|
||
classInfo.btnsActive = true;
|
||
}
|
||
return classInfo;
|
||
},
|
||
//获取类型对应的图标
|
||
getItemIcon(cateCode) {
|
||
switch (cateCode) {
|
||
case "aqms":
|
||
return "img/enp_blue/jcwz.png";
|
||
case "tsp":
|
||
return "img/enp_blue/TSP.png";
|
||
case "cems":
|
||
return "img/enp_blue/xct.png";
|
||
case "wstation":
|
||
return "img/enp_blue/CEMS.png";
|
||
case "truck_clean":
|
||
return "img/enp_blue/hwc.png";
|
||
case "除尘器":
|
||
return "img/enp_blue/ccq.png";
|
||
case "干雾":
|
||
return "img/enp_blue/gwfkx.png";
|
||
case "雾炮":
|
||
return "img/enp_blue/gxswq.png";
|
||
case "监控设备":
|
||
return "img/enp_blue/jksb.png";
|
||
case "输送设备":
|
||
return "img/enp_blue/sssb.png";
|
||
case "eq":
|
||
return "img/enp_blue/zyscsb.png";
|
||
case "大型生产设备":
|
||
return "img/enp_blue/dxscsb.png";
|
||
}
|
||
},
|
||
//设备类型改变
|
||
equipmentTypeChange(index) {
|
||
let that = this;
|
||
that.removePointer();
|
||
that.activeBtns = index;
|
||
that.$API.em.equipment.list.req({ type: index,page:0}).then((res) => {
|
||
res.forEach((item) => {
|
||
if ( item.cate!==null&&item.coordinates && item.coordinates.longitude && item.coordinates.latitude) {
|
||
let imgUrl = that.getItemIcon(item.cate_code)
|
||
let lon = parseFloat(item.coordinates.longitude);
|
||
let lat = parseFloat(item.coordinates.latitude);
|
||
let height = parseInt(item.coordinates.height);
|
||
let arrs = { name:item.name, lon: lon, lat:lat, height:height, id:item.id, type: 'display' };
|
||
let config = { show: true, fontSize: '16px', fillColor: '#ffffff', fillWidth: 1, pixelOffsetX: 10, pixelOffsetY: -30, image: imgUrl, imgWidth: 50, imgHeight: 50, textDistance: 550000, imgDistance: 550000 };
|
||
that.addPointer(arrs, config);
|
||
}
|
||
})
|
||
|
||
})
|
||
},
|
||
//调用此方法创建点用于标注在地图上
|
||
creatgetInfoePoint(attrs, config) {
|
||
const { name = '测试', lon, lat, id='11111', type = 'display' ,height} = attrs
|
||
const { show = true, fontSize, fillColor, fillWidth,pixelOffsetX, pixelOffsetY, image, imgWidth, imgHeight, textDistance, imgDistance } = config
|
||
return new Cesium.Entity({
|
||
attrs: attrs,
|
||
id: id,
|
||
type: type,
|
||
position: Cesium.Cartesian3.fromDegrees(lon||117.08387268794274, lat||31.6557737395655433,height), // 文字标签
|
||
label: {
|
||
show: show,
|
||
text: name,
|
||
font: (fontSize || '14px'),
|
||
style: Cesium.LabelStyle.FILL ,
|
||
fillColor: Cesium.Color.LIME,
|
||
fillColor: Cesium.Color.fromCssColorString(fillColor || '#fff'),
|
||
outline: false,// 字体边框
|
||
outlineColor: Cesium.Color.WHITE, // 字体边框颜色
|
||
outlineWidth: fillWidth || 4, // 字体边框尺寸
|
||
showBackground: true, // 是否显示背景颜色
|
||
backgroundColor: Cesium.Color.fromCssColorString('#1ca50a'), // 背景颜色
|
||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 垂直方向以底部来计算标签的位置
|
||
pixelOffset: new Cesium.Cartesian2(pixelOffsetX || 50, pixelOffsetY || -25), // 偏移量
|
||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, textDistance || 550000) // 文字标签多少距离内设置可见
|
||
},
|
||
billboard: {
|
||
// 图标
|
||
image: image || 'img/enp_blue/warning_enp.png',
|
||
width: imgWidth || 30,
|
||
height: imgHeight || 30,
|
||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, imgDistance || 550000) // 图片多少距离内设置可见
|
||
}
|
||
})
|
||
},
|
||
//用于把创建好的点加载到地图上
|
||
addPointer(attrs, config) {
|
||
let that = this;
|
||
let obj = that.creatgetInfoePoint(attrs, config);
|
||
that.viewer.entities.add(obj)
|
||
},
|
||
//调用此方法获取相关信息显示在页面
|
||
getInfo(equpmentId) {
|
||
let that = this;
|
||
that.infoShow = true;
|
||
console.log(equpmentId)
|
||
//根据id获取相关信息
|
||
this.$API.em.equipment.item.req(equpmentId).then((res) => {
|
||
that.objItem = res;
|
||
console.log(res)
|
||
})
|
||
},
|
||
//添加点之前可以调用一下移除所有的点防止重复添加
|
||
removePointer() {
|
||
let allEntitiesPoint = []
|
||
// console.log(viewer.entities.values)
|
||
this.viewer.entities.values.forEach((item) => {
|
||
allEntitiesPoint.push(item.id)
|
||
})
|
||
allEntitiesPoint.forEach((item) => {
|
||
const entity_obj = this.viewer.entities.getById(item)
|
||
this.viewer.entities.remove(entity_obj)
|
||
})
|
||
},
|
||
closeInfo() {
|
||
this.infoShow = false;
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
<style>
|
||
.infoDom{
|
||
position: fixed;
|
||
right: 22%;
|
||
bottom: 10%;
|
||
width: 20%;
|
||
min-height: 20vh;
|
||
min-width: 360px;
|
||
background: rgba(0, 50, 56, 0.8);
|
||
border: 1px solid rgba(63,174,229,.5);
|
||
}
|
||
.infoDom_header{
|
||
font-size:18px;
|
||
padding: 10px;
|
||
text-align: center;
|
||
position: relative;
|
||
border-bottom: 1px solid rgba(63,174,229,.5);
|
||
}
|
||
.infoDom_close{
|
||
position: absolute;
|
||
left: 10px;
|
||
top:10px;
|
||
}
|
||
.bodyTitle{
|
||
height: 24px;
|
||
line-height: 24px;
|
||
padding: 0 10px;
|
||
font-size: 18px;
|
||
}
|
||
.titleIcon{
|
||
display: inline-block;
|
||
margin-right: 10px;
|
||
width: 6px;
|
||
height: 20px;
|
||
background: #00f6ff;
|
||
vertical-align: middle;
|
||
}
|
||
.infoBody{
|
||
padding: 10px;
|
||
}
|
||
.rdio-group{
|
||
height: 30px;
|
||
display: flex;
|
||
justify-content: center;
|
||
line-height: 30px;
|
||
}
|
||
.radio-item{
|
||
width: 60px;
|
||
}
|
||
.greenIcon,.greenIcon>.radio-ico{
|
||
color: #1ca50a;
|
||
}
|
||
.orangeIcon,.orangeIcon>.radio-ico{
|
||
color: orange;
|
||
}
|
||
.redIcon,.redIcon>.radio-ico{
|
||
color: #f41a1a;
|
||
}
|
||
.btns_enp {
|
||
bottom: 7vh;
|
||
left: 28.7vw;
|
||
width: 42.6vw;
|
||
height: 4.3vh;
|
||
position: fixed;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.btns {
|
||
width: 8vw;
|
||
height: 5vh;
|
||
font-size: 2vh;
|
||
line-height: 4.9vh;
|
||
background-image: url('/public/img/enp_blue/btn.png');
|
||
background-size: 100% 100%;
|
||
text-align: center;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.btns.btnsActive {
|
||
background-image: url('/public/img/enp_blue/btn_active.png');
|
||
}
|
||
|
||
</style> |