一、Cesium组件
1、HTML
<template>
<div id="cesiumContainer">
<!-- 地图工具栏 -->
<ul class="mapTools">
<li v-for="item in toolsData" :key="item.id" @click="toolsClick(item)">
<!-- 显示label -->
<el-tooltip
v-if="item.id == 1"
class="item"
effect="dark"
:content="item.label"
placement="left">
<span class="label">{{ item.text }}</span>
</el-tooltip>
<el-tooltip
v-else
class="item"
effect="dark"
:content="item.label"
placement="left">
<!-- 显示icon -->
<span :class="item.icon" class="icon"></span>
</el-tooltip>
</li>
</ul>
<!-- 模型信息弹窗-全局注册 -->
<Popup
ref="Popup"
:popupInfo="popupInfo"
:popupPs="popupPs"
@message="popupMsg"></Popup>
</div>
</template>
2、Script
<script>
import * as turf from "@turf/turf";
export default {
name: "Cesium",
components: {
Popup: () => import("./popup.vue"),
},
props: {},
data() {
return {
// ----------------------<<地图>>----------------------
// cesium相机初始位置
ps: {
lon: 100,
lat: 30,
height: 1000,
},
// 地图工具栏列表
toolsData: [
{
id: 1,
text: "2D",
label: "2D/3D切换",
icon: "",
},
{
id: 2,
label: "开始记录数据",
icon: "el-icon-video-camera",
},
{
id: 3,
label: "隐藏模拟航迹",
icon: "el-icon-s-promotion",
},
{
id: 4,
label: "暂停飞行",
icon: "el-icon-video-pause",
},
{
id: 5,
label: "清除所有模型",
icon: "el-icon-delete",
},
],
// -----------测试数据-----------
// 是否创建测试模型
isCreate: false,
// 飞行时间
flyTime: 0,
// 点位数组
pointArr: [
{
lon: 100.957787,
lat: 30.739748,
height: 100,
time: 0,
},
{
lon: 100.959787,
lat: 30.739748,
height: 100,
time: 5,
},
{
lon: 100.961787,
lat: 30.739748,
height: 100,
time: 10,
},
{
lon: 100.963787,
lat: 30.739748,
height: 100,
time: 15,
},
{
lon: 100.965787,
lat: 30.739748,
height: 100,
time: 20,
},
{
lon: 100.965787,
lat: 30.737748,
height: 100,
time: 15,
},
{
lon: 100.965787,
lat: 30.735748,
height: 100,
time: 25,
},
{
lon: 100.965787,
lat: 30.733748,
height: 100,
time: 30,
},
{
lon: 100.963787,
lat: 30.733748,
height: 100,
time: 35,
},
{
lon: 100.961787,
lat: 30.733748,
height: 100,
time: 35,
},
{
lon: 100.959787,
lat: 30.733748,
height: 100,
time: 35,
},
{
lon: 100.957787,
lat: 30.733748,
height: 100,
time: 35,
},
{
lon: 100.957787,
lat: 30.735748,
height: 100,
time: 35,
},
{
lon: 100.957787,
lat: 30.737748,
height: 100,
time: 35,
},
{
lon: 100.957787,
lat: 30.739748,
height: 100,
time: 35,
},
],
// 线条数组
lineArr: [],
// 起始时间
start: "",
// 结束时间
stop: "",
// -----------测试数据-----------
// 弹窗详细信息
popupInfo: {},
// 弹窗位置
popupPs: {
x: 0,
y: 0,
},
// 选中模型id
selModelId: "",
};
},
mounted() {
// 初始化地图
this.initMap();
this.addArrow();
},
methods: {
// -------------------------<<地图>>------------------------
// 初始化地图
initMap() {
// 配置在线地图token
Cesium.Ion.defaultAccessToken ="在线地图token";
let imageryProvider;
// 离线地图-nginx服务
// const url = `http://127.0.0.1:9000`;
// imageryProvider = new Cesium.UrlTemplateImageryProvider({
// url: `${url}/{z}/{x}/{y}.png`,
// });
//在线地图
// if (window.navigator.onLine){}
imageryProvider = new Cesium.ArcGisMapServerImageryProvider({
url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
});
window.viewer = new Cesium.Viewer("cesiumContainer", {
geocoder: false, //右上角搜索
homeButton: false, //右上角home
sceneModePicker: false, //右上角2D/3D切换
baseLayerPicker: false, //右上角地形
navigationHelpButton: false, //右上角帮助
animation: true, //左下角圆盘动画控件
timeline: true, //底部时间轴
fullscreenButton: false, //右下角全屏控件
vrButton: false, //如果设置为true，将创建VRButton小部件。
scene3DOnly: false, // 每个几何实例仅以3D渲染以节省GPU内存
infoBox: false, //隐藏点击要素后的提示信息
imageryProvider: imageryProvider, //地图地址
selectionIndicator: false,
});
// 隐藏左下角商标信息
viewer._cesiumWidget._creditContainer.style.display = "none";
// 隐藏底部时间轴
viewer.timeline.container.style.display = "none";
viewer.scene.globe.depthTestAgainstTerrain = false; //开启深度检测
// 设置最小缩放级别，以米为单位
viewer.scene.screenSpaceCameraController.minimumZoomDistance = 500.0;
// 设置最大缩放级别，以米为单位
viewer.scene.screenSpaceCameraController.maximumZoomDistance = 20000000.0;
// 隐藏动画控件
const animationContainer = document.querySelector(
".cesium-viewer-animationContainer"
);
animationContainer.style.display = "none";
// 自动播放动画
viewer.clock.shouldAnimate = true;
// 启用光照
viewer.scene.globe.enableLighting = true;
// 设置相机初始位置
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(
this.ps.lon,
this.ps.lat,
this.ps.height
),
// 设置相机方向，俯视和仰视的视角
orientation: {
heading: Cesium.Math.toRadians(0), //坐标系旋转0度
pitch: Cesium.Math.toRadians(-90), //设置俯仰角度为-90度
},
});
// --------<<鼠标事件>>--------
// 移除左键双击默认事件
// viewer.screenSpaceEventHandler.removeInputAction(
// Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
// );
// 注册左键单击事件
this.leftClick();
// 注册右键单击事件
// this.rightClick();
// 注册地图拖拽事件
this.setMouseEvent();
// 相机移动事件
viewer.scene.camera.moveEnd.addEventListener(this.updatePopup);
// 注册地图缩放事件
this.setWheelEvent();
},
// -----------------------<<模型操作>>-----------------------
// 创建新模型
addModel(info) {
if (viewer.entities.getById(info.desc.id)) {
return;
}
// 转换笛卡尔空间直角坐标
const position = new Cesium.Cartesian3.fromDegrees(
info.desc.position.lon,
info.desc.position.lat,
info.desc.position.height
);
//模型朝向
const heading = Cesium.Math.toRadians(90); // 方位
const pitch = 0; // 俯仰
const roll = 0; // 偏移角度
const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
const orientation = Cesium.Transforms.headingPitchRollQuaternion(
position,
hpr
);
// ++++++++++<<创建模型>>++++++++++
const entity = viewer.entities.add({
id: info.desc.id, //模型id
name: info.type, // 模型名称，这里用作模型类型，方便模型增删改查
position: position, //模型位置，高度
orientation: orientation,
model: {
uri: info.desc.path, //模型文件
minimumPixelSize: 50, //模型最小像素大小
maximumScale: 100, //模型最大像素大小
color: Cesium.Color.WHITE,
},
description: info.desc, // 模型详细信息
});
},
// 创建点位
addPoint(ps) {
// 添加点位
viewer.entities.add({
name: "point", // 所属的父级id
position: Cesium.Cartesian3.fromDegrees(
ps.lon,
ps.lat,
ps.height // 高度可以自己定义，也可以根据传进来的高度进行绘制
),
point: {
pixelSize: 5,
// 点位颜色，fromCssColorString 可以直接使用CSS颜色
color: Cesium.Color.fromCssColorString("tomato"),
// 边框颜色
outlineColor: Cesium.Color.fromCssColorString("#fff"),
// 边框宽度(像素)
outlineWidth: 2,
// 显示在距相机的距离处的属性，多少区间内是可以显示的
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
0,
15000000
),
// 是否开启深度监测
disableDepthTestDistance: Number.POSITIVE_INFINITY,
},
});
},
// 创建线条
addLine() {
if (this.lineArr.length == 0) {
return;
}
// 航迹线id
let id = `line`;
viewer.entities.add({
id, // 模型id
name: "line", // 所属的父级id
// polyline 折线
polyline: {
// 参数依次为[经度1, 纬度1, 高度1, 经度2, 纬度2, 高度2]
positions: Cesium.Cartesian3.fromDegreesArrayHeights(this.lineArr),
// 注：线条起止，可以获取鼠标点击位置的经纬度进行线条绘制
// 宽度
width: 2,
// 线的颜色
material: Cesium.Color.fromCssColorString("tomato"), // "tomato"
clampToGround: false, // 不紧贴地面
// 线的顺序,仅当`clampToGround`为true并且支持地形上的折线时才有效。
zIndex: 999,
// 显示在距相机的距离处的属性，多少区间内是可以显示的
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
0,
15000000
),
// 是否显示
show: true,
},
});
},
// 添加箭头
addArrow() {
let arr = [0, 45, 90, 135, 180, -135, -90, -45];
var pixelOffset, endPs, entity, labelEntity;
arr.forEach((item) => {
// 计算箭头结束点
endPs = this.calcArrowEndPosition([100.9621, 30.7368], 0.1, item);
entity = viewer.entities.add({
polyline: {
name: "arrow",
positions: [
Cesium.Cartesian3.fromDegrees(100.9621, 30.7368),
Cesium.Cartesian3.fromDegrees(endPs.lon, endPs.lat),
],
width: 10,
material: new Cesium.PolylineArrowMaterialProperty(
Cesium.Color.CYAN
),
vertexFormat: Cesium.PolylineMaterialAppearance.VERTEX_FORMAT,
},
// 显示在距相机的距离处的属性，多少区间内是可以显示的
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
0,
15000000
),
});
// 调整label偏移位置
if (item == 45 || item == -45 || item == 0) {
pixelOffset = new Cesium.Cartesian2(0, -10);
} else if (item == 135 || item == -135 || item == 180) {
pixelOffset = new Cesium.Cartesian2(0, 10);
} else if (item == 90) {
pixelOffset = new Cesium.Cartesian2(20, 0);
} else if (item == -90) {
pixelOffset = new Cesium.Cartesian2(-20, 0);
}
// 创建标签实体
labelEntity = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(endPs.lon, endPs.lat), // 点位坐标
point: {
pixelSize: 0, // 点位大小
color: Cesium.Color.WHITE.withAlpha(0), // 点位颜色，透明
},
label: {
text: `${item}度`, // 文本内容
font: "18px monospace", // 字体样式
style: Cesium.LabelStyle.FILL_AND_OUTLINE, // label样式
outlineWidth: 2, // 外边框宽度
verticalOrigin: Cesium.VerticalOrigin.CENTER, // 文字对齐方式BOTTOM,TOP,CENTER
pixelOffset: pixelOffset, // (0:经度偏移，0:纬度偏移)
},
});
labelEntity.label.fillColor = Cesium.Color.WHITE; // 设置填充颜色为白色
labelEntity.label.outlineColor = Cesium.Color.RED; // 设置轮廓颜色为红色
});
},
// 计算箭头结束点
calcArrowEndPosition(ps, range, angel) {
var pt = turf.point(ps, { "marker-color": "F00" }); // 起始点
var distance = range; // 距离
var bearing = angel; // 角度
var options = { units: "miles" }; // 英里
var destination = turf.rhumbDestination(pt, distance, bearing, options);
return {
lon: destination.geometry.coordinates[0],
lat: destination.geometry.coordinates[1],
};
},
// 根据id删除模型
removeEntitiesById(id) {
// 根据id获取实体
let entities = viewer.entities.getById(id);
// 删除实体
viewer.entities.remove(entities);
},
// 删除所有模型
delAllModel() {
// 删除所有模型
viewer.entities.removeAll();
// 关闭popup
this.$refs.Popup.closePopup();
this.lineArr = [];
if (this.isCreate) {
this.addTrack();
this.addModels();
}
},
// 选中模型
clickModel(id, type, row = {}) {
// 取消选中模型
this.cancelPopup();
// 选中模型id
this.selModelId = id;
// 获取点击模型的实体
let entities = viewer.entities.getById(id);
// 点击模型添加选中颜色
entities.model.color = Cesium.Color.RED;
switch (type) {
case 1:
// 显示弹窗
this.$refs.Popup.openPopup();
break;
case 2:
// 获取模型信息
this.popupInfo = JSON.parse(JSON.stringify(row));
// 获取cartesian3坐标
const cartesian3 = Cesium.Cartesian3.fromDegrees(
row.position.lon,
row.position.lat,
row.position.height
);
// cartesian3转换为cartesian2坐标（屏幕坐标）
this.popupPs = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
viewer.scene,
cartesian3
);
// 显示弹窗
this.$refs.Popup.openPopup();
break;
}
},
// 取消选中模型
cancelPopup() {
this.selModelId = "";
// 获取所有模型的实体集合
const entitiesArr = viewer.entities.values;
if (entitiesArr.length !== 0) {
// 取消所有模型选中颜色
for (let i = 0; i < entitiesArr.length; i++) {
if (entitiesArr[i]._name == "model") {
entitiesArr[i].model.color = Cesium.Color.WHITE;
}
}
}
// 关闭消息显示框
this.$refs.Popup.closePopup();
},
// -----------------------<<鼠标事件>>-----------------------
// 左键单击
leftClick() {
// 添加用户输入监听范围（element）
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
// 处理用户输入事件
handler.setInputAction((event) => {
let pick = viewer.scene.pick(event.position);
if (Cesium.defined(pick)) {
if (pick.id._name !== "model") {
return;
}
// 选中模型样式
this.clickModel(pick.id._id, 1);
// 获取模型信息
this.popupInfo = JSON.parse(
JSON.stringify(pick.id._description._value)
);
// 获取cartesian3坐标
const cartesian3 = pick.id._position._value;
// cartesian3转换为cartesian2坐标（屏幕坐标）
this.popupPs = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
viewer.scene,
cartesian3
);
} else {
this.cancelPopup();
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
},
// 右键单击
rightClick() {
// 添加用户输入监听范围（element）
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
// 处理用户输入事件
handler.setInputAction((event) => {
// 获取pick拾取对象
let pick = viewer.scene.pick(event.position);
// 判断是否获取到了pick，获取到了，拾取模型信息，未获取到，添加点位
if (!Cesium.defined(pick)) {
const position = viewer.scene.camera.pickEllipsoid(
event.position,
viewer.scene.globe.ellipsoid
);
// 笛卡尔坐标转弧度
let cartographic = Cesium.Cartographic.fromCartesian(
position,
viewer.scene.globe.ellipsoid,
new Cesium.Cartographic()
);
// Cesium.Math.toDegrees 弧度转度，将弧度转换成经纬度
let lon = Cesium.Math.toDegrees(cartographic.longitude);
let lat = Cesium.Math.toDegrees(cartographic.latitude);
console.log(lon + "," + lat);
// 创建点位
this.addPoint({
lon,
lat,
height: 10,
});
// 存储点位
this.pointArr.push({
lon,
lat,
height: 10,
time: "",
});
// 存储线条点位
this.lineArr.push(lon, lat, 10);
}
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
},
// 地图拖拽
setMouseEvent() {
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
// *****注册鼠标右键按下事件*****
handler.setInputAction((event) => {
let pick = viewer.scene.pick(event.position);
// *****注册鼠标移动事件*****
viewer.screenSpaceEventHandler.setInputAction((arg) => {
// 更新弹框位置
this.updatePopup();
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
// *****注册鼠标抬起事件*****
viewer.screenSpaceEventHandler.setInputAction(({ position }) => {
// *****解除viewer的MOUSE_MOVE事件监听器*****
viewer.screenSpaceEventHandler.removeInputAction(
Cesium.ScreenSpaceEventType.MOUSE_MOVE
);
// 解除相机锁定
viewer.scene.screenSpaceCameraController.enableZoom = true;
}, Cesium.ScreenSpaceEventType.LEFT_UP);
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);
},
// 地图缩放事件
setWheelEvent() {
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
// 处理用户输入事件
handler.setInputAction((event) => {
// 更新弹框位置
this.updatePopup();
}, Cesium.ScreenSpaceEventType.WHEEL);
},
// 鼠标双击事件
leftDoubleClick() {
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
// 处理用户输入事件
handler.setInputAction((event) => {
let pick = viewer.scene.pick(event.position);
if (Cesium.defined(pick)) {
}
}, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
},
// -----------------------<<其他操作>>-----------------------
// 更新信息弹框位置
updatePopup() {
// 获取选中模型
if (!this.selModelId) {
return;
}
let entities = viewer.entities.getById(this.selModelId);
this.popupPs = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
viewer.scene,
entities._position._value
);
},
// 子组件消息
popupMsg() {
// 取消选中模型
this.cancelPopup();
},
// 工具栏点击事件
toolsClick(item) {
switch (item.id) {
case 1: // 2D/3D切换
if (item.text == "3D") {
item.text = "2D";
// 切换为3D
viewer.scene.morphTo3D(0);
} else {
item.text = "3D";
// 切换为2D
viewer.scene.morphTo2D(0);
}
break;
case 2: // 数据记录
if (item.icon == "el-icon-video-camera") {
item.icon = "el-icon-video-camera-solid";
item.label = "停止记录数据";
this.$message.success("开始记录数据");
} else {
item.icon = "el-icon-video-camera";
item.label = "开始记录数据";
this.$message.success("停止记录数据");
}
break;
case 3: // 隐藏模拟航迹
// 获取所有模型的实体集合
const entitiesArrS = viewer.entities.values;
// 临时数组
const tempS = [];
// 将模型实体深拷贝
if (entitiesArrS.length !== 0) {
for (let i = 0; i < entitiesArrS.length; i++) {
if (
entitiesArrS[i]._name == "point" ||
entitiesArrS[i]._id == "line"
) {
tempS.push(entitiesArrS[i]);
}
}
}
// 如果有航迹-隐藏航迹，否则显示航迹
if (tempS.length !== 0) {
item.icon = "el-icon-position";
item.label = "显示模拟航迹";
// 航迹点清空
this.lineArr = [];
// 删除航迹点
tempS.forEach((item) => {
this.removeEntitiesById(item._id);
});
} else {
item.icon = "el-icon-s-promotion";
item.label = "隐藏模拟航迹";
// 添加航迹
this.addTrack();
}
break;
case 4: // 飞机飞行控制
// 停止动画
if (viewer.clock.multiplier == 1) {
viewer.clock.multiplier = 0;
item.icon = "el-icon-video-play";
item.label = "继续飞行";
} else {
viewer.clock.multiplier = 1;
item.icon = "el-icon-video-pause";
item.label = "暂停飞行";
}
break;
case 5: // 清除所有模型
this.delAllModel();
break;
}
this.cancelPopup();
},
// ----------<<自动飞行测试>>----------
addTrack() {
if (this.lineArr.length !== 0) {
return;
}
// 创建航迹点
for (let i = 0; i < this.pointArr.length; i++) {
// 绘制点位
this.addPoint({
lon: this.pointArr[i].lon,
lat: this.pointArr[i].lat,
height: this.pointArr[i].height,
});
// 存储点位绘制航迹
this.lineArr.push(
this.pointArr[i].lon,
this.pointArr[i].lat,
this.pointArr[i].height
);
}
// 绘制航迹
this.addLine();
},
addModels() {
this.isCreate = true;
// 计算时间飞行数据
let property = this.computeFlight(this.pointArr);
// ++++++++++<<创建模型>>++++++++++
const entity = viewer.entities.add({
id: `testModel`, //模型id
name: "model", // 模型名称，这里用作模型类型，方便场景模型增删改查
// 和时间轴关联
availability: new Cesium.TimeIntervalCollection([
new Cesium.TimeInterval({
start: this.start,
stop: this.stop,
}),
]),
position: property, //模型位置，高度
orientation: new Cesium.VelocityOrientationProperty(property),
model: {
uri: "./Cesium/model/air/test1.gltf", //模型文件
minimumPixelSize: 80, //模型最小像素大小
maximumScale: 100, //模型最大像素大小
},
});
},
// 移动
modelMove() {
if (this.lineArr.length == 0) {
return;
}
for (let i = 0; i < this.pointArr.length; i++) {
this.pointArr[i].time = this.flyTime;
this.flyTime += 3;
}
// 起始时间
this.start = Cesium.JulianDate.fromDate(new Date());
// 结束时间
this.stop = Cesium.JulianDate.addSeconds(
this.start,
this.pointArr[this.pointArr.length - 1].time,
new Cesium.JulianDate()
);
// 设置始时钟始时间
viewer.clock.startTime = this.start.clone();
// 设置时钟当前时间
viewer.clock.currentTime = this.start.clone();
// 设置始终停止时间
viewer.clock.stopTime = this.stop.clone();
// 时间速率，数字越大时间过的越快
viewer.clock.multiplier = 1;
// 时间轴
viewer.timeline.zoomTo(this.start, this.stop);
// 循环执行,即为2，到达终止时间，重新从起点时间开始LOOP_STOP
// viewer.clock.clockRange = Cesium.ClockRange.CLAMPED;
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
// 创建模型
this.addModels();
},
// 计算飞行
computeFlight(source) {
// 取样位置 相当于一个集合
let property = new Cesium.SampledPositionProperty();
for (let i = 0; i < source.length; i++) {
let time = Cesium.JulianDate.addSeconds(
this.start,
source[i].time,
new Cesium.JulianDate()
);
let position = Cesium.Cartesian3.fromDegrees(
source[i].lon,
source[i].lat,
source[i].height
);
// 添加位置，和时间对应
property.addSample(time, position);
}
return property;
},
// ----------<<自动飞行测试>>----------
},
};
</script>
3、Css
<style lang="less" scoped>
#cesiumContainer {
width: 100%;
height: 100%;
position: relative;
.mapTools {
position: absolute;
top: 10px;
right: 10px;
border-radius: 5px;
// background: rgba(255, 255, 255, 0.9);
background-color: rgba(#001c22, 0.8);
z-index: 999;
li {
width: 35px;
height: 35px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
cursor: pointer;
.icon {
font-size: 20px;
}
&:hover {
background: #087b7a;
color: #fff;
}
}
}
}
</style>
二、Popup组件
1、HTML
<template>
<div
class="cesiumPopup"
:style="{ top: popupPs.y + 'px', left: popupPs.x + 'px' }"
v-if="show">
<!-- 头部 -->
<ul class="head">
<li>
<span>设备信息</span>
</li>
<li>
<span class="el-icon-close" @click="closePopup"></span>
</li>
</ul>
<!-- 模型内容 -->
<ul class="content">
<li>
<span class="subTitle">模型标识</span>
<span class="subValue">{{ popupInfo.id }}</span>
</li>
<li>
<span class="subTitle">模型名称</span>
<span class="subValue">{{ popupInfo.name }}</span>
</li>
<li>
<span class="subTitle">模型地址</span>
<span class="subValue">{{ popupInfo.ip }}</span>
</li>
<li>
<span class="subTitle">模型端口</span>
<span class="subValue">{{ popupInfo.port }}</span>
</li>
<li>
<span class="subTitle">模型位置</span>
<span class="subValue">{{
`${filterNumber(popupInfo.position.lon, 6)}，${filterNumber(
popupInfo.position.lat,
6
)}，${popupInfo.position.height}`
}}</span>
</li>
<li>
<span class="subTitle">模型状态</span>
<span
class="subValue"
:style="popupInfo.status == 1 ? 'color:#04F44C' : 'color:#F52E2E'"
>{{ popupInfo.status == 1 ? "正常" : "异常" }}</span
>
</li>
</ul>
</div>
</template>
2、Script
<script>
export default {
name: "Popup",
components: {},
props: {
popupInfo: {
type: Object,
default: () => {
return {
id: "",
position: {
lon: "",
lat: "",
alt: "",
},
status: "",
ip: "",
isSelect: "",
name: "",
port: "",
};
},
},
popupPs: {
type: Object,
default: () => {
return {
x: 0,
y: 0,
};
},
},
},
data() {
return {
show: false,
};
},
computed: {},
created() {},
mounted() {},
methods: {
openPopup() {
this.show = true;
},
closePopup() {
this.show = false;
},
// 过滤数据
filterNumber(val, digit) {
return val.toFixed(digit);
},
},
};
</script>
3、Css
<style lang="less" scoped>
.cesiumPopup {
min-width: 300px;
position: absolute;
transform: translate(-50%, -130%);
z-index: 1;
background-color: rgba(#001c22, 0.8);
color: #fff;
font-size: 12px;
box-sizing: border-box;
.head {
height: 30px;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #048197;
padding: 0px 10px;
box-sizing: border-box;
box-shadow: inset -2px 0px 2px rgba(#333, 0.5),
inset 2px 2px 2px rgba(#fff, 0.5);
.el-icon-close {
font-size: 16px;
cursor: pointer;
&:hover {
color: tomato;
}
}
}
.content {
height: 85%;
padding: 10px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: inset -2px -2px 2px rgba(#333, 0.5),
inset 2px 0px 2px rgba(#5696a2, 0.7);
li {
margin: 5px 0px;
display: flex;
align-items: center;
.subTitle {
width: 20%;
display: inline-block;
background-color: #013946;
border: 1px solid #119ea0;
margin-right: 5px;
padding: 1px 5px;
}
.subValue {
width: 80%;
display: inline-block;
border: 1px solid #119ea0;
box-sizing: border-box;
padding: 1px 5px;
}
}
}
}
</style>
