build[vite.config.js package.json]:新增打包配置项 新增terser依赖 chore[config.js]:修改开发环境baseUrl feat[api/pestis/pestis.js]:新增【智能孢子仪】处理状态接口 perf[src/views/index.vue]:优化部分代码，使其符合vue3编码规范，增强代码规范性与健壮性 feat[src/views/index.vue]:新增了有关【智能孢子仪】的新功能
This commit is contained in:
@ -161,3 +161,14 @@ export function postXgclcqdzt(query) {
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
// 智能孢子仪 处理状态
|
||||
export function postEquipmentXgclbzzt(query) {
|
||||
|
||||
return request({
|
||||
url: '/equipment/xgclbzzt',
|
||||
method: 'post',
|
||||
params: query
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
@ -1,58 +1,71 @@
|
||||
<!-- 环境监测 地图模块 2024 7 3 -->
|
||||
|
||||
<template>
|
||||
<div id="EnvironmentMap">
|
||||
<!-- 弹窗 -->
|
||||
<div v-if="showPopup" :style="popupStyle" class="popup">
|
||||
<el-icon class="Icon" size="18px" @click="showPopup = false">
|
||||
<CircleClose />
|
||||
</el-icon>
|
||||
<p>
|
||||
{{ popupContent.msName }}
|
||||
</p>
|
||||
<p>
|
||||
经度：{{ popupContent.msLongitude }}
|
||||
</p>
|
||||
<p>
|
||||
纬度：{{ popupContent.msLatitude }}
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div id="EnvironmentMap">
|
||||
<!-- 弹窗 -->
|
||||
<div v-if="showPopup" :style="popupStyle" class="popup">
|
||||
<el-icon class="Icon" size="18px" @click="showPopup = false">
|
||||
<CircleClose />
|
||||
</el-icon>
|
||||
<p>
|
||||
{{ popupContent.msName }}
|
||||
</p>
|
||||
<p>经度：{{ popupContent.msLongitude }}</p>
|
||||
<p>纬度：{{ popupContent.msLatitude }}</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// vue
|
||||
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onActivated, onDeactivated, ref, toRefs, watch, watchEffect, nextTick, toRef, computed, } from 'vue';
|
||||
import {
|
||||
// onBeforeMount,
|
||||
onMounted,
|
||||
// onBeforeUpdate,
|
||||
// onUpdated,
|
||||
onBeforeUnmount,
|
||||
// onUnmounted,
|
||||
// onActivated,
|
||||
// onDeactivated,
|
||||
ref,
|
||||
// toRefs,
|
||||
watch,
|
||||
// watchEffect,
|
||||
// nextTick,
|
||||
// toRef,
|
||||
// computed,
|
||||
} from "vue";
|
||||
|
||||
// cesiumJS
|
||||
import * as Cesium from 'cesium';
|
||||
import * as Cesium from "cesium";
|
||||
import "cesium/Build/CesiumUnminified/Widgets/widgets.css";
|
||||
|
||||
// api
|
||||
import {
|
||||
getHjjcSxjg,
|
||||
getHjjcGjmchqjwd,
|
||||
getHjjcGjdevhsjqcx,
|
||||
getHjjcSxjg,
|
||||
getHjjcGjmchqjwd,
|
||||
getHjjcGjdevhsjqcx,
|
||||
} from "@/api/Environment.js";
|
||||
|
||||
// 引入图片 广告牌
|
||||
import Point from '@/assets/images/Point3.png';
|
||||
import Point from "@/assets/images/Point3.png";
|
||||
|
||||
// 重要配置项 修改标记
|
||||
console.log(import.meta.env.VITE_APP_ENV,'import.meta.env.VITE_APP_ENV');
|
||||
// console.log(import.meta.env.VITE_APP_ENV, "import.meta.env.VITE_APP_ENV");
|
||||
|
||||
window.CESIUM_BASE_URL = import.meta.env.VITE_APP_ENV == 'development'?"/public/CesiumUnminified":'/CesiumUnminified';
|
||||
window.CESIUM_BASE_URL =
|
||||
import.meta.env.VITE_APP_ENV == "development"
|
||||
? "/public/CesiumUnminified"
|
||||
: "/CesiumUnminified";
|
||||
|
||||
// 宏
|
||||
const props = defineProps({
|
||||
nowValue: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
}
|
||||
nowValue: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// 变量
|
||||
@ -71,350 +84,344 @@ const popupStyle = ref({});
|
||||
const showPopup = ref(false);
|
||||
|
||||
// 被点击的实体id
|
||||
const pointId = ref('');
|
||||
const pointId = ref("");
|
||||
|
||||
// 弹窗内容
|
||||
let popupContent = ref('');
|
||||
let popupContent = ref("");
|
||||
|
||||
// 函数
|
||||
// 移除 广告牌
|
||||
function removeAllBillboardEntities(viewer) {
|
||||
const entities = viewer.entities.values;
|
||||
const entities = viewer.entities.values;
|
||||
|
||||
for (let i = 0; i < entities.length; i++) { //利用了循环
|
||||
const entity = entities[i];
|
||||
for (let i = 0; i < entities.length; i++) {
|
||||
//利用了循环
|
||||
const entity = entities[i];
|
||||
|
||||
// 检查实体是否包含线几何
|
||||
if (entity.billboard) {
|
||||
// 删除广告牌实体
|
||||
viewer.entities.remove(entity); //移除单个实体
|
||||
// 删除后，长度会变小，因此需要更新i以避免跳过下一个实体
|
||||
--i;
|
||||
}
|
||||
// 检查实体是否包含线几何
|
||||
if (entity.billboard) {
|
||||
// 删除广告牌实体
|
||||
viewer.entities.remove(entity); //移除单个实体
|
||||
// 删除后，长度会变小，因此需要更新i以避免跳过下一个实体
|
||||
--i;
|
||||
}
|
||||
}
|
||||
}
|
||||
// WMTS 服务 交通 名称
|
||||
function addWMTSLayer2(val) {
|
||||
if (val) {
|
||||
let imageryProvider2 = new Cesium.WebMapTileServiceImageryProvider({
|
||||
url: "http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=5956e6519f2bb0ae8e57bc834298c9f1",
|
||||
layer: "tdtImgBasicLayer",
|
||||
style: "default",
|
||||
format: "image/jpeg",
|
||||
tileMatrixSetID: "GoogleMapsCompatible",
|
||||
show: true,
|
||||
// tileMatrixLabels: ['0', '1', '2', '3', '4', '5', '6', '7', '8'],
|
||||
// tilingScheme: new Cesium.GeographicTilingScheme({
|
||||
// numberOfLevelZeroTilesX: 2,
|
||||
// numberOfLevelZeroTilesY: 1
|
||||
// }),
|
||||
// tilematrixset: "GoogleMapsCompatible",
|
||||
maximumLevel: 18,
|
||||
});
|
||||
|
||||
if (val) {
|
||||
|
||||
let imageryProvider2 = new Cesium.WebMapTileServiceImageryProvider({
|
||||
|
||||
url: "http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=5956e6519f2bb0ae8e57bc834298c9f1",
|
||||
layer: "tdtImgBasicLayer",
|
||||
style: "default",
|
||||
format: "image/jpeg",
|
||||
tileMatrixSetID: "GoogleMapsCompatible",
|
||||
show: true,
|
||||
// tileMatrixLabels: ['0', '1', '2', '3', '4', '5', '6', '7', '8'],
|
||||
// tilingScheme: new Cesium.GeographicTilingScheme({
|
||||
// numberOfLevelZeroTilesX: 2,
|
||||
// numberOfLevelZeroTilesY: 1
|
||||
// }),
|
||||
// tilematrixset: "GoogleMapsCompatible",
|
||||
maximumLevel: 18,
|
||||
});
|
||||
|
||||
var wmts2 = new Cesium.ImageryLayer(imageryProvider2)
|
||||
_viewer.imageryLayers.add(wmts2)
|
||||
|
||||
|
||||
} else {
|
||||
console.log('关闭WMTS服务(兜底)');
|
||||
}
|
||||
var wmts2 = new Cesium.ImageryLayer(imageryProvider2);
|
||||
_viewer.imageryLayers.add(wmts2);
|
||||
} else {
|
||||
console.log("关闭WMTS服务(兜底)");
|
||||
}
|
||||
}
|
||||
// 初始挂载函数
|
||||
function init() {
|
||||
|
||||
//开发token
|
||||
Cesium.Ion.defaultAccessToken =
|
||||
//开发token
|
||||
Cesium.Ion.defaultAccessToken =
|
||||
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlZGZlNDYwYy1hYzNkLTQzMGMtYTZhNy1iZjVjNzgxZWE4NzIiLCJpZCI6MjE2NzUyLCJpYXQiOjE3MTYyOTI5MzN9.btze81tzNNWYuzl63jtY46tbes_XynccAz3DDW7Xdf4";
|
||||
// 自定义影像服务
|
||||
// const varimg = new Cesium.ArcGisMapServerImageryProvider({
|
||||
// url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
|
||||
// enablePickFeatures: false,
|
||||
// });
|
||||
// 自定义影像服务
|
||||
// const varimg = new Cesium.ArcGisMapServerImageryProvider({
|
||||
// url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
|
||||
// enablePickFeatures: false,
|
||||
// });
|
||||
|
||||
const viewer = new Cesium.Viewer("EnvironmentMap", {
|
||||
// baseLayer: new Cesium.ImageryLayer(new Cesium.UrlTemplateImageryProvider({
|
||||
// url: serverAPI.geoserverUrl + `/map-huangdaoqu_bianjie/rest/maps/XJQY3702112019WGS84%40huangdaoqu_bianjie`
|
||||
// })),
|
||||
// imageryProvider: varimg,
|
||||
// terrainProvider: Cesium.createWorldTerrain(),
|
||||
// 地形 特效 服务
|
||||
baseLayerPicker: false,
|
||||
// 底图选择器
|
||||
animation: false,
|
||||
// 动画控件
|
||||
timeline: false,
|
||||
// 时间轴控件
|
||||
homeButton: false,
|
||||
// 首页按钮
|
||||
navigationHelpButton: false,
|
||||
// 帮助按钮
|
||||
geocoder: false,
|
||||
//搜索框控件
|
||||
infoBox: false,
|
||||
// 信息框
|
||||
// skyAtmosphere:true,
|
||||
sceneMode: Cesium.SceneMode.SCENE2D,
|
||||
// 2D模式 下会有问题
|
||||
selectionIndicator: false,
|
||||
// 选中指示器
|
||||
sceneModePicker: false,
|
||||
// 场景模式选择器
|
||||
fullscreenButton: false,
|
||||
// 全屏按钮
|
||||
const viewer = new Cesium.Viewer("EnvironmentMap", {
|
||||
// baseLayer: new Cesium.ImageryLayer(new Cesium.UrlTemplateImageryProvider({
|
||||
// url: serverAPI.geoserverUrl + `/map-huangdaoqu_bianjie/rest/maps/XJQY3702112019WGS84%40huangdaoqu_bianjie`
|
||||
// })),
|
||||
// imageryProvider: varimg,
|
||||
// terrainProvider: Cesium.createWorldTerrain(),
|
||||
// 地形 特效 服务
|
||||
baseLayerPicker: false,
|
||||
// 底图选择器
|
||||
animation: false,
|
||||
// 动画控件
|
||||
timeline: false,
|
||||
// 时间轴控件
|
||||
homeButton: false,
|
||||
// 首页按钮
|
||||
navigationHelpButton: false,
|
||||
// 帮助按钮
|
||||
geocoder: false,
|
||||
//搜索框控件
|
||||
infoBox: false,
|
||||
// 信息框
|
||||
// skyAtmosphere:true,
|
||||
sceneMode: Cesium.SceneMode.SCENE2D,
|
||||
// 2D模式 下会有问题
|
||||
selectionIndicator: false,
|
||||
// 选中指示器
|
||||
sceneModePicker: false,
|
||||
// 场景模式选择器
|
||||
fullscreenButton: false,
|
||||
// 全屏按钮
|
||||
});
|
||||
//关键的一步，之后所有的API从这里开始
|
||||
|
||||
});
|
||||
//关键的一步，之后所有的API从这里开始
|
||||
_viewer = viewer;
|
||||
|
||||
_viewer = viewer;
|
||||
// cesiumJS事件
|
||||
let handler = new Cesium.ScreenSpaceEventHandler(_viewer.scene.canvas);
|
||||
|
||||
// cesiumJS事件
|
||||
let handler = new Cesium.ScreenSpaceEventHandler(_viewer.scene.canvas);
|
||||
_handler = handler;
|
||||
|
||||
_handler = handler;
|
||||
// 默认视角
|
||||
_viewer.camera.setView({
|
||||
destination: Cesium.Cartesian3.fromDegrees(119, 36, 100000), // 目的地 接收笛卡尔坐标
|
||||
// orientation: {
|
||||
// heading: Cesium.Math.toRadians(0.0), // 航向角
|
||||
// pitch: Cesium.Math.toRadians(-90.0), // 俯仰角
|
||||
// roll: Cesium.Math.toRadians(0.0), // 横滚角
|
||||
// },
|
||||
});
|
||||
|
||||
// 默认视角
|
||||
_viewer.camera.setView({
|
||||
destination: Cesium.Cartesian3.fromDegrees(119, 36, 100000), // 目的地 接收笛卡尔坐标
|
||||
// orientation: {
|
||||
// heading: Cesium.Math.toRadians(0.0), // 航向角
|
||||
// pitch: Cesium.Math.toRadians(-90.0), // 俯仰角
|
||||
// roll: Cesium.Math.toRadians(0.0), // 横滚角
|
||||
// },
|
||||
});
|
||||
// 鼠标点击事件
|
||||
_viewer.screenSpaceEventHandler.setInputAction((e) => {
|
||||
// e包含了点击事件的所有信息
|
||||
|
||||
// 鼠标点击事件
|
||||
_viewer.screenSpaceEventHandler.setInputAction((e) => {
|
||||
// e包含了点击事件的所有信息
|
||||
// 获取点击的实体 使用pick方法尝试从三维场景中根据鼠标点击的位置 pickedObject会是被选中的对象或者undefined。
|
||||
const pickedObject = _viewer.scene.pick(e.position);
|
||||
|
||||
console.log(pickedObject, "pickedObject");
|
||||
|
||||
// 获取点击的实体 使用pick方法尝试从三维场景中根据鼠标点击的位置 pickedObject会是被选中的对象或者undefined。
|
||||
const pickedObject = _viewer.scene.pick(e.position);
|
||||
// 判断是否点击到实体
|
||||
// 检查是否成功选取到了对象，并且该对象有id属性，这是确保我们得到的是一个有效的、带有标识信息的实体。
|
||||
if (Cesium.defined(pickedObject) && pickedObject.id) {
|
||||
// 如果选取的对象有效，获取其id属性值并赋给entity变量。
|
||||
const entity = pickedObject.id;
|
||||
|
||||
console.log(pickedObject, 'pickedObject');
|
||||
console.log(entity, "entity");
|
||||
|
||||
// 判断是否点击到实体
|
||||
// 检查是否成功选取到了对象，并且该对象有id属性，这是确保我们得到的是一个有效的、带有标识信息的实体。
|
||||
if (Cesium.defined(pickedObject) && pickedObject.id) {
|
||||
console.log(pickedObject.id._id); // 获取实体的id属性值
|
||||
pointId.value = pickedObject.id._id;
|
||||
|
||||
// 如果选取的对象有效，获取其id属性值并赋给entity变量。
|
||||
const entity = pickedObject.id;
|
||||
// 获取entity当前位置。这通常用于动态场景中，实体位置可能随时间变化，使用当前的Julian日期（精确的时间标准）获取其位置。
|
||||
const position = entity.position.getValue(Cesium.JulianDate.now());
|
||||
|
||||
console.log(entity, 'entity');
|
||||
console.log(entity, position);
|
||||
|
||||
console.log(pickedObject.id._id); // 获取实体的id属性值
|
||||
pointId.value = pickedObject.id._id;
|
||||
if (position) {
|
||||
// 将三维空间中的实体位置转换为二维canvas坐标，以便在屏幕上正确显示弹出框。 被点击实体在屏幕上以像素为单位的位置。
|
||||
const canvasPosition =
|
||||
_viewer.scene.cartesianToCanvasCoordinates(position);
|
||||
|
||||
// 获取entity当前位置。这通常用于动态场景中，实体位置可能随时间变化，使用当前的Julian日期（精确的时间标准）获取其位置。
|
||||
const position = entity.position.getValue(Cesium.JulianDate.now());
|
||||
console.log(canvasPosition);
|
||||
|
||||
console.log(entity, position);
|
||||
showPopup.value = true;
|
||||
|
||||
if (position) {
|
||||
// 将三维空间中的实体位置转换为二维canvas坐标，以便在屏幕上正确显示弹出框。 被点击实体在屏幕上以像素为单位的位置。
|
||||
const canvasPosition = _viewer.scene.cartesianToCanvasCoordinates(position);
|
||||
|
||||
console.log(canvasPosition);
|
||||
|
||||
showPopup.value = true;
|
||||
|
||||
// 更新弹出框的位置
|
||||
updatePopupPosition(canvasPosition);
|
||||
}
|
||||
}
|
||||
|
||||
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||||
|
||||
// 监听场景渲染事件，在每次渲染后更新弹出框的位置。 每一帧渲染后，都会触发这个事件。
|
||||
_viewer.scene.postRender.addEventListener(() => {
|
||||
|
||||
if (showPopup.value) {
|
||||
|
||||
|
||||
// console.log(_viewer.entities.values); //实体数组
|
||||
|
||||
const entity = _viewer.entities.values.find(e => e._id === pointId.value);
|
||||
|
||||
const position = entity.position.getValue(Cesium.JulianDate.now());
|
||||
|
||||
if (position) {
|
||||
const canvasPosition = _viewer.scene.cartesianToCanvasCoordinates(position);
|
||||
updatePopupPosition(canvasPosition);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
function updatePopupPosition(canvasPosition) {
|
||||
if (canvasPosition) {
|
||||
popupStyle.value = {
|
||||
position: 'absolute',
|
||||
left: `${canvasPosition.x - 110}px`,
|
||||
top: `${canvasPosition.y - 150}px`
|
||||
};
|
||||
}
|
||||
// 更新弹出框的位置
|
||||
updatePopupPosition(canvasPosition);
|
||||
}
|
||||
}
|
||||
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||||
|
||||
// 监听场景渲染事件，在每次渲染后更新弹出框的位置。 每一帧渲染后，都会触发这个事件。
|
||||
_viewer.scene.postRender.addEventListener(() => {
|
||||
if (showPopup.value) {
|
||||
// console.log(_viewer.entities.values); //实体数组
|
||||
|
||||
const entity = _viewer.entities.values.find(
|
||||
(e) => e._id === pointId.value
|
||||
);
|
||||
|
||||
const position = entity.position.getValue(Cesium.JulianDate.now());
|
||||
|
||||
if (position) {
|
||||
const canvasPosition =
|
||||
_viewer.scene.cartesianToCanvasCoordinates(position);
|
||||
updatePopupPosition(canvasPosition);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function updatePopupPosition(canvasPosition) {
|
||||
if (canvasPosition) {
|
||||
popupStyle.value = {
|
||||
position: "absolute",
|
||||
left: `${canvasPosition.x - 110}px`,
|
||||
top: `${canvasPosition.y - 150}px`,
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 监听
|
||||
watch(() => props.nowValue, async (newValue, oldValue) => {
|
||||
|
||||
console.log(newValue, oldValue, '我是地图组件，监听props');
|
||||
watch(
|
||||
() => props.nowValue,
|
||||
async (newValue, oldValue) => {
|
||||
console.log(newValue, oldValue, "我是地图组件，监听props");
|
||||
|
||||
const res = await getHjjcGjmchqjwd({ msNmae: newValue });
|
||||
|
||||
if (res.code == 200) {
|
||||
console.log(res.data[0], Point);
|
||||
console.log(res.data[0], Point);
|
||||
|
||||
popupContent.value = res.data[0];
|
||||
popupContent.value = res.data[0];
|
||||
|
||||
// Cesium 移除所有广告牌实体
|
||||
removeAllBillboardEntities(_viewer);
|
||||
// Cesium 移除所有广告牌实体
|
||||
removeAllBillboardEntities(_viewer);
|
||||
|
||||
_PointValue = _viewer.entities.add({
|
||||
id: `${Number(res.data[0].msLongitude).toFixed(0) + Number(res.data[0].msLatitude).toFixed(0)}`,
|
||||
position: Cesium.Cartesian3.fromDegrees(Number(res.data[0].msLongitude), Number(res.data[0].msLatitude), 10),
|
||||
billboard: { //广告牌
|
||||
show: true,
|
||||
image: Point, //引入的图片变量
|
||||
scale: 0.2, //缩放比例
|
||||
color: Cesium.Color.WHITE, //更改图片颜色
|
||||
},
|
||||
});
|
||||
_PointValue = _viewer.entities.add({
|
||||
id: `${
|
||||
Number(res.data[0].msLongitude).toFixed(0) +
|
||||
Number(res.data[0].msLatitude).toFixed(0)
|
||||
}`,
|
||||
position: Cesium.Cartesian3.fromDegrees(
|
||||
Number(res.data[0].msLongitude),
|
||||
Number(res.data[0].msLatitude),
|
||||
10
|
||||
),
|
||||
billboard: {
|
||||
//广告牌
|
||||
show: true,
|
||||
image: Point, //引入的图片变量
|
||||
scale: 0.2, //缩放比例
|
||||
color: Cesium.Color.WHITE, //更改图片颜色
|
||||
},
|
||||
});
|
||||
|
||||
console.log(_PointValue, '_PointValue');
|
||||
console.log(_PointValue, "_PointValue");
|
||||
|
||||
//
|
||||
if (_PointValue) {
|
||||
//
|
||||
if (_PointValue) {
|
||||
// 如果选取的对象有效，获取其id属性值并赋给entity变量。
|
||||
const entity = _PointValue;
|
||||
|
||||
// 如果选取的对象有效，获取其id属性值并赋给entity变量。
|
||||
const entity = _PointValue;
|
||||
console.log(entity, "entity");
|
||||
|
||||
console.log(entity, 'entity');
|
||||
console.log(_PointValue._id); // 获取实体的id属性值
|
||||
pointId.value = _PointValue._id;
|
||||
|
||||
console.log(_PointValue._id); // 获取实体的id属性值
|
||||
pointId.value = _PointValue._id;
|
||||
// 获取entity当前位置。这通常用于动态场景中，实体位置可能随时间变化，使用当前的Julian日期（精确的时间标准）获取其位置。
|
||||
const position = entity.position.getValue(Cesium.JulianDate.now());
|
||||
|
||||
// 获取entity当前位置。这通常用于动态场景中，实体位置可能随时间变化，使用当前的Julian日期（精确的时间标准）获取其位置。
|
||||
const position = entity.position.getValue(Cesium.JulianDate.now());
|
||||
console.log(entity, position);
|
||||
|
||||
console.log(entity, position);
|
||||
if (position) {
|
||||
// 将三维空间中的实体位置转换为二维canvas坐标，以便在屏幕上正确显示弹出框。 被点击实体在屏幕上以像素为单位的位置。
|
||||
const canvasPosition =
|
||||
_viewer.scene.cartesianToCanvasCoordinates(position);
|
||||
|
||||
if (position) {
|
||||
// 将三维空间中的实体位置转换为二维canvas坐标，以便在屏幕上正确显示弹出框。 被点击实体在屏幕上以像素为单位的位置。
|
||||
const canvasPosition = _viewer.scene.cartesianToCanvasCoordinates(position);
|
||||
console.log(canvasPosition);
|
||||
|
||||
console.log(canvasPosition);
|
||||
|
||||
showPopup.value = true;
|
||||
|
||||
// 更新弹出框的位置 这段代码阻止了即将要执行的飞行动画 暂时注释
|
||||
// updatePopupPosition(canvasPosition);
|
||||
|
||||
}
|
||||
showPopup.value = true;
|
||||
|
||||
// 更新弹出框的位置 这段代码阻止了即将要执行的飞行动画 暂时注释
|
||||
// updatePopupPosition(canvasPosition);
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
_viewer.camera.flyTo({
|
||||
destination: Cesium.Cartesian3.fromDegrees(Number(res.data[0].msLongitude), Number(res.data[0].msLatitude), 1100),
|
||||
duration: 4,
|
||||
});
|
||||
|
||||
//
|
||||
_viewer.camera.flyTo({
|
||||
destination: Cesium.Cartesian3.fromDegrees(
|
||||
Number(res.data[0].msLongitude),
|
||||
Number(res.data[0].msLatitude),
|
||||
1100
|
||||
),
|
||||
duration: 4,
|
||||
});
|
||||
}
|
||||
|
||||
}, { deep: true });
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
// 生命周期
|
||||
onMounted(() => {
|
||||
|
||||
init();
|
||||
addWMTSLayer2(true)
|
||||
|
||||
})
|
||||
init();
|
||||
addWMTSLayer2(true);
|
||||
});
|
||||
|
||||
// 页面销毁前
|
||||
onBeforeUnmount(() => {
|
||||
|
||||
console.log('销毁实例和事件');
|
||||
_viewer.destroy();
|
||||
_handler.destroy();
|
||||
|
||||
})
|
||||
console.log("销毁实例和事件");
|
||||
_viewer.destroy();
|
||||
_handler.destroy();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#EnvironmentMap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
position: relative;
|
||||
position: relative;
|
||||
|
||||
overflow: hidden;
|
||||
overflow: hidden;
|
||||
|
||||
// 弹出框
|
||||
.popup {
|
||||
background-color: white;
|
||||
// border: 1px solid black;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
// 弹出框
|
||||
.popup {
|
||||
background-color: white;
|
||||
// border: 1px solid black;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
|
||||
width: 220px;
|
||||
height: 110px;
|
||||
width: 220px;
|
||||
height: 110px;
|
||||
|
||||
z-index: 2;
|
||||
z-index: 2;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
p {
|
||||
font-size: 13px;
|
||||
width: 100%;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
&>p:nth-of-type(1) {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.Icon {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
z-index: 10;
|
||||
// margin-left: 15px;
|
||||
|
||||
color: red;
|
||||
}
|
||||
p {
|
||||
font-size: 13px;
|
||||
width: 100%;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.popup::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 10px 10px 0 10px;
|
||||
/* 调整这些值可以改变三角形的方向和大小 */
|
||||
border-color: #fff transparent transparent transparent;
|
||||
/* 第一个颜色是三角形的颜色，后面的是透明的让边框不显示 */
|
||||
bottom: -10px;
|
||||
/* 改变这个值可以调整三角形相对于其容器的位置 */
|
||||
left: 50%;
|
||||
/* 同样，根据需要调整位置 */
|
||||
transform: translateX(-50%);
|
||||
/* 使三角形水平居中 */
|
||||
& > p:nth-of-type(1) {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.Icon {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
z-index: 10;
|
||||
// margin-left: 15px;
|
||||
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
.popup::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 10px 10px 0 10px;
|
||||
/* 调整这些值可以改变三角形的方向和大小 */
|
||||
border-color: #fff transparent transparent transparent;
|
||||
/* 第一个颜色是三角形的颜色，后面的是透明的让边框不显示 */
|
||||
bottom: -10px;
|
||||
/* 改变这个值可以调整三角形相对于其容器的位置 */
|
||||
left: 50%;
|
||||
/* 同样，根据需要调整位置 */
|
||||
transform: translateX(-50%);
|
||||
/* 使三角形水平居中 */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -37,18 +37,18 @@ export const constantRoutes = [
|
||||
}
|
||||
]
|
||||
},
|
||||
// 标记 原有登录
|
||||
// {
|
||||
// path: '/login',
|
||||
// component: () => import('@/views/login'),
|
||||
// hidden: true
|
||||
// },
|
||||
// 标记 开发环境 登录
|
||||
// 标记 原有登录 生产环境登录
|
||||
{
|
||||
path: '/login',
|
||||
component: () => import('@/views/newlogin2.vue'),
|
||||
component: () => import('@/views/login'),
|
||||
hidden: true
|
||||
},
|
||||
// 标记 开发环境 登录
|
||||
// {
|
||||
// path: '/login',
|
||||
// component: () => import('@/views/newlogin2.vue'),
|
||||
// hidden: true
|
||||
// },
|
||||
|
||||
{
|
||||
path: '/transitional',
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
2296
src/views/index.vue
2296
src/views/index.vue
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user