feat: 空间分析功能新增

package.json

@@ -24,6 +24,7 @@
 		"@amap/amap-jsapi-loader": "^1.0.1",
 		"@amap/amap-jsapi-types": "^0.0.13",
 		"@element-plus/icons-vue": "^2.0.10",
+		"@turf/turf": "^6.5.0",
 		"@vueup/vue-quill": "^1.0.0-alpha.40",
 		"@vueuse/core": "^9.12.0",
 		"@wangeditor/editor": "^5.1.12",
@@ -42,8 +43,8 @@
 		"js-base64": "^3.7.5",
 		"js-md5": "^0.7.3",
 		"jszip": "^3.10.1",
-		"mars3d": "^3.5.6",
+		"mars3d": "^3.6.9",
-		"mars3d-cesium": "^1.105.0",
+		"mars3d-cesium": "^1.110.0",
 		"mitt": "^3.0.0",
 		"moment": "^2.29.4",
 		"mqtt": "^2.18.8",

src/utils/file-util.ts

@@ -14,15 +14,3 @@ export function initVue3Popup(comp: any, para: any) {
 	vNode.mount(vNodeDom);
 	return vNode._container;
 }
-
-/**
- * 判断是否 "经度,纬度" 字符串值
- *
- * @export
- * @param {string} text 传入的字符串
- * @return {boolean} 是否 经度,纬度
- */
-export function isLonLat(text: string): boolean {
-	const reg = /^-?((0|1?[0-7]?[0-9]?)(([.][0-9]*)?)|180(([.][0]*)?)),-?((0|[1-8]?[0-9]?)(([.][0-9]*)?)|90(([.][0]*)?))$/;
-	return reg.test(text);
-}

src/views/goverment/largeScreen/components/mapMeasurement.vue

@@ -36,9 +36,10 @@ import * as Cesium from "mars3d-cesium";
 //导入mars3d主库
 import "mars3d/dist/mars3d.css";
 import * as mars3d from "mars3d";
-import { ref, watch, onMounted } from "vue";
+import { ref, watch, onMounted, onUnmounted } from "vue";
-const props = defineProps(["show", "mapInstance"]);
+const props = defineProps(["mapInstance"]);
 const emits = defineEmits(["hiddenConfim"]);
+const operateName = ref("");
 const echartShow = ref<boolean>(false);
 const unitList = ref([
 	{ name: "自动", value: "auto" },
@@ -79,6 +80,7 @@ const closeDiv = () => {
 };
 const mapOperate = (name: any) => {
 	console.log(name);
+	operateName.value = name;
 	if (name == "空间距离") {
 		measure.distance({
 			showAddText: true,
@@ -164,11 +166,17 @@ onMounted(() => {
 	});
 	// 触发事件：异步分析完成后
 	measure.on(mars3d.EventType.end, function (e: any) {
-		console.log(e);
+		console.log("开始分析", e);
 		formData.value.distanceVal = e.label;
-		// echartShow.value = true;
+		if (operateName.value == "剖面") {
+			echartShow.value = true;
+		}
 	});
 });
+onUnmounted(() => {
+	map = null;
+	measure = null;
+});
 </script>
 
 <style scoped lang="scss">
@@ -208,7 +216,7 @@ onMounted(() => {
 		background-color: #173147;
 		span {
 			font-size: 16px;
-			color: white;
+			color: #0089fe;
 			margin-right: auto;
 		}
 		:deep() {

src/views/goverment/largeScreen/config.json

@@ -13,8 +13,9 @@
 			"fog": true,
 			"fxaa": true,
 			"requestRenderMode": true,
+			"orderIndependentTranslucency": false,
 			"globe": {
-				"depthTestAgainstTerrain": false,
+				"depthTestAgainstTerrain": true,
 				"baseColor": "#546a53",
 				"showGroundAtmosphere": true,
 				"enableLighting": false

src/views/goverment/largeScreen/index.vue

@@ -80,6 +80,8 @@
 		</div>
 		<!-- 图上量算弹框 -->
 		<MapMeasurement :mapInstance="map" v-if="measurementShow" @hiddenConfim="measurementShow = false" />
+		<!-- 空间分析弹框 -->
+		<SpaceAnalysis :mapInstance="map" v-if="analysisShow" @hiddenConfim="analysisShow = false"></SpaceAnalysis>
 	</div>
 
 	<!-- <div class="option-list">
@@ -153,23 +155,6 @@
 					</div>
 				</div>
 			</div>
-			<div class="option-list-item">
-				<span>日照效果：</span>
-				<div class="item-classify">
-					<div class="item-classify-item">
-						<span>日期选择：</span>
-						<el-date-picker v-model="sunProperty.timeVal" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
-					</div>
-					<div class="item-classify-item">
-						<span>时间选择：</span>
-						<el-slider v-model="sunProperty.currDate" :min="0" :max="1440" :step="1" @change="timeChange" />
-					</div>
-					<div class="item-classify-item">
-						<span>当前时间：</span>
-						<span>{{ sunProperty.timeVal }} {{ hours }} 时 {{ minutes }}分</span>
-					</div>
-				</div>
-			</div>
 			<div class="option-list-item">
 				<span>近地天空盒：</span>
 				<div class="item-classify">
@@ -202,6 +187,8 @@ import { datas } from "@/enums/company/SetpsEnum";
 import { initVue3Popup } from "@/utils/file-util";
 import QueryPopup from "./components/query-popup.vue";
 import MapMeasurement from "./components/mapMeasurement.vue";
+import SpaceAnalysis from "./components/spaceAnalysis.vue";
+const analysisShow = ref(false); // 空间分析弹框
 const measurementShow = ref(false); // 图上量算弹框
 const layersShow = ref(false); // 图层弹框
 const basicMapShow = ref(false); // 底图弹框
@@ -255,7 +242,6 @@ let rainEffect: any; // 雨天气
 let fogEffect: any; // 雾天气
 let snowEffect: any; // 雪天气
 let snowCover: any; // 积雪
-let shadows: any; // 日照效果
 let currSkyBox: any; // 当前生效的Skybox
 let defaultSkybox: any; // cesium自带的Skybox
 let graphicLayer: any; // 覆盖物
@@ -354,6 +340,9 @@ const clickMenu = (name: any) => {
 	console.log(name);
 	if (name == "图上量算") {
 		measurementShow.value = true;
+	} else if (name == "空间分析") {
+		console.log(666);
+		analysisShow.value = true;
 	}
 };
 // 获取Canvas对象
@@ -588,9 +577,6 @@ const initMars3d = (option: any) => {
 	// 	alpha: 0.6,
 	// 	maxHeight: 8000 // 大于此高度后不显示
 	// });
-	// shadows = new mars3d.thing.Shadows({
-	// 	multiplier: 1600
-	// });
 	// defaultSkybox = map.scene.skyBox;
 	// currSkyBox = qingtianSkybox;
 	// map.on(mars3d.EventType.postRender, function () {
@@ -612,7 +598,6 @@ const initMars3d = (option: any) => {
 	// map.addEffect(fogEffect);
 	// map.addEffect(snowEffect);
 	// map.addEffect(snowCover);
-	// map.addThing(shadows);
 };
 // 获取config.json中的底图配置
 const getBasicMaps = () => {
@@ -781,11 +766,6 @@ const jxOperate = (e: any, label: any) => {
 	console.log(e, label);
 	snowCover[label] = e;
 };
-// 日照时间操作
-const timeChange = (e: any) => {
-	const dateTime = new Date(`${sunProperty.value.timeVal} ${hours.value}:${minutes.value}:00`);
-	shadows.time = dateTime;
-};
 // 天空盒操作
 const boxChange = (e: any) => {
 	switch (e) {