feat: 新增2D地图以及地图点位

src/api/modules/largeSreen.ts

@@ -30,3 +30,7 @@ export const getRealNameSystem = () => {
 export const getEngineeringAll = () => {
 	return http.get<ResponseSame<ScreenResponse.EngineeringAllResponse>>(BASEURL + `/gov/api/index/engineeringStat`);
 };
+//顶部查询工程统计信息
+export const getMapProject = () => {
+	return http.get<ResponseSame<ScreenResponse.mapProjectResponse>>(BASEURL + `/gov/api/index/engineeringList`);
+};

src/api/types/common.d.ts

@@ -154,4 +154,44 @@ export declare namespace ScreenResponse {
 		finish: number; //今年竣工工程
 		important: number; //重点工程
 	}
+	interface mapProjectResponse {
+		id: string;
+		project_sn: string;
+		engineering_sn: string;
+		engineering_name: string; //工程名称
+		engineering_code: string;
+		engineering_type: number;
+		engineering_use: number;
+		engineering_cost: string; //工程造价(万元)
+		engineering_area: string; //工程总面积(㎡)
+		engineering_length: string;
+		is_important: boolean;
+		longitude: string;
+		latitude: string;
+		province: string; //省
+		city: string; //市
+		district: string; //区
+		address: string; //详细地址
+		license_key: string;
+		license_create_time: string;
+		safety_supervision: string;
+		safety_supervision_person: string;
+		safety_supervision_code: string;
+		safety_supervision_state: string;
+		safety_supervision_plan: string;
+		quality_supervision: string;
+		quality_supervision_person: string;
+		quality_supervision_code: string;
+		quality_supervision_state: string;
+		quality_supervision_plan: string;
+		start_time: string;
+		end_time: string;
+		create_time: string;
+		examine_state: number;
+		reject_reason: string;
+		state: number; //工程状态(1:未开工;2:在建;3:在建.普通停工;4:在建.处罚停                                                                                            工;5:在建.完工;6:待竣工;7:竣工)
+		update_time: string;
+		ai_alarm_stat: string;
+		enterprise_name: string; //建设单位
+	}
 }

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

@@ -4,19 +4,39 @@
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import AMapLoader from "@amap/amap-jsapi-loader";
 /*在Vue3中使用时,需要引入Vue3中的shallowRef方法(使用shallowRef进行非深度监听,
 因为在Vue3中所使用的Proxy拦截操作会改变JSAPI原生对象,所以此处需要区别Vue2使用方式对地图对象进行非深度监听,
 否则会出现问题,建议JSAPI相关对象采用非响应式的普通对象来存储)*/
-import { shallowRef } from "@vue/reactivity";
+// import { shallowRef } from "@vue/reactivity";
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
+import { getMapProject } from "@/api/modules/largeSreen";
 
+onMounted(() => {
+	getProjectList();
+});
 // const map = shallowRef(null);
 const path = ref([]);
 const current_position = ref([]);
+const projectStatusEnum = ref({
+	1: "开工前准备",
+	2: "在建工程",
+	3: "停工工程",
+	4: "完工待验收",
+	5: "已验收（安全评价）",
+	6: "已验收未备案",
+	7: "已竣工验收备案"
+});
+const mapProjectList = ref([]);
+const getProjectList = async () => {
+	const { result } = await getMapProject();
+	mapProjectList.value = result;
+	console.log(mapProjectList.value, "aaa");
+	initMap();
+};
 
-function initMap() {
+const initMap = () => {
 	window._AMapSecurityConfig = {
 		securityJsCode: "6caf6429e4b98cf7f39db9bf7014a78b"
 	};
@@ -29,8 +49,8 @@ function initMap() {
 			const map = new AMap.Map("container", {
 				//设置地图容器id
 				viewMode: "3D", //是否为3D地图模式
-				zoom: 13, //初始化地图级别
+				zoom: 10, //初始化地图级别
-				center: [104.065735, 30.659462], //初始化地图中心点位置
+				center: [114.085947, 22.547], //初始化地图中心点位置
 				mapStyle: "amap://styles/67570a93d67b07a02ee522a2c1180be4"
 			});
 			// 添加插件
@@ -51,62 +71,139 @@ function initMap() {
 					mouseTool.measureArea(); // 测量面积
 				}
 			);
-			// 单击
+			// 单击自定义点位
-			map.on("click", e => {
+			// map.on("click", e => {
-				// lng ==> 经度值  lat => 维度值
+			// 	// lng ==> 经度值  lat => 维度值
-				current_position.value = [e.lnglat.lng, e.lnglat.lat];
+			// 	current_position.value = [e.lnglat.lng, e.lnglat.lat];
-				path.value.push([e.lnglat.lng, e.lnglat.lat]);
+			// 	path.value.push([e.lnglat.lng, e.lnglat.lat]);
-				// addMarker();
+			// 	// addMarker();
-				// addPolyLine();
+			// 	// addPolyLine();
-			});
+			// });
-			// 实例化点标记
+			// // 实例化点标记
-			// 第一种(封成函数来触发)
+			// // 第一种(封成函数来触发)
-			function addMarker() {
+			// function addMarker() {
-				const marker = new AMap.Marker({
+			// 	const marker = new AMap.Marker({
-					icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
+			// 		icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
-					position: current_position.value, // 这里我们通过上面的点击获取经纬度坐标,实时添加标记
+			// 		position: current_position.value, // 这里我们通过上面的点击获取经纬度坐标,实时添加标记
-					// 通过设置 offset 来添加偏移量
+			// 		// 通过设置 offset 来添加偏移量
-					offset: new AMap.Pixel(-26, -54)
+			// 		offset: new AMap.Pixel(-26, -54)
-				});
+			// 	});
-				console.log("我是经纬度", current_position.value);
+			// 	console.log("我是经纬度", current_position.value);
-				marker.setMap(map);
+			// 	marker.setMap(map);
-			}
+			// }
-			// 第二种 直接写死 position 的经纬度值
-			/*const marker = new AMap.Marker({
-					icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
-					position: [113.808299,34.791787],
-					// 通过设置 offset 来添加偏移量
-					offset: new AMap.Pixel(-26, -54),
-			});
-			marker.setMap(map);*/
 
-			// 折线
+			// 第二种 直接写死 position 的经纬度值
-			function addPolyLine() {
+			mapProjectList.value.forEach((item, index, array) => {
-				const polyline = new AMap.Polyline({
+				const marker = new AMap.Marker({
-					path: path.value,
+					icon: "/src/assets/images/screenImg/mapImg/dian.png",
-					isOutline: true,
+					position: [`${item.longitude}`, `${item.latitude}`],
-					outlineColor: "#ffeeff",
+					// 通过设置 offset 来添加偏移量
-					borderWeight: 1,
+					offset: new AMap.Pixel(-26, -24)
-					strokeColor: "#3366FF",
-					strokeOpacity: 0.6,
-					strokeWeight: 5,
-					// 折线样式还支持 'dashed'
-					strokeStyle: "solid",
-					// strokeStyle是dashed时有效
-					// strokeDasharray: [10, 5],
-					lineJoin: "round",
-					lineCap: "round",
-					zIndex: 50
 				});
-				map.add([polyline]);
+				//信息窗口实例
-			}
+				const infoWindow = new window.AMap.InfoWindow({
+					offset: new window.AMap.Pixel(0, -31)
+				});
+
+				// // 图标-项目延期
+				// const postponeImage = require("@/assets/images/screenImg/mapImg/iconPostpone.png");
+				// // 图标-停工整改
+				// const shutdownRectificationImage = require("@/assets/images/screenImg/mapImg/iconShutdownRectification.png");
+				// // 图标-项目停滞
+				// const stagnateImage = require("@/assets/images/screenImg/mapImg/iconStagnate.png");
+				// // 图标-竣工验收
+				// const completedImage = require("@/assets/images/screenImg/mapImg/iconCompleted.png");
+				// // 图标-正常施工
+				// const normalConstruction = require("@/assets/images/screenImg/mapImg/iconNormalConstruction.png");
+
+				// const statusIcons = {
+				// 	projectDelay: createIcon(postponeImage), // 项目延期
+				// 	suspensionandrectification: createIcon(shutdownRectificationImage), // 停工整改
+				// 	projectStagnation: createIcon(stagnateImage), // 项目停滞
+				// 	completionAcceptance: createIcon(completedImage), // 竣工验收
+				// 	normalConstruction: createIcon(normalConstruction) // 竣工验收
+				// };
+				// /**
+				//  * 创建地图图标
+				//  * @param {string} image icon图片
+				//  */
+				// function createIcon(image) {
+				// 	return new window.AMap.Icon({
+				// 		size: new window.AMap.Size(28, 40), // 图标尺寸
+				// 		image, // 图标的取图地址
+				// 		imageSize: new window.AMap.Size(28, 40), // 图标所用图片大小
+				// 		imageOffset: new window.AMap.Pixel(0, 0) // 图标取图偏移量
+				// 	});
+				// }
+				marker.content = `<div class="info-window" style="font-size: 14px">
+			    <div class="info">
+			      <span class="label" style="font-weight: 600">项目名称：</span>
+			      <span class="value">${item.engineering_name}</span>
+			    </div>
+			    <div class="info">
+			      <span class="label" style="font-weight: 600">项目状态：</span>
+			      <span class="value">${projectStatusEnum.value[item.state] ? projectStatusEnum.value[item.state] : "暂无"}</span>
+			    </div>
+			    <div class="info">
+			      <span class="label" style="font-weight: 600">项目造价：</span>
+			      <span class="value">${item.engineering_cost || 0}万元</span>
+			    </div>
+			    <div class="info">
+			      <span class="label" style="font-weight: 600">工程面积：</span>
+			      <span class="value">${item.engineering_area || 0}m²</span>
+			    </div>
+			    <div class="info">
+			      <span class="label" style="font-weight: 600">建设单位：</span>
+			      <span class="value">${item.enterprise_name || "暂无"}</span>
+			    </div>
+			    <span class="info">
+			      <span class="label" style="font-weight: 600">项目地址：</span>
+			      <span class="value">${item.province + item.city + item.district + item.address || "暂无"}</span>
+			    </div>
+			  </div>`;
+				marker.on("mousemove", markerMousemove);
+				// 鼠标移出事件
+				marker.on("mouseout", markerMouseout);
+				// 鼠标移入事件df
+				function markerMousemove(e) {
+					infoWindow.setContent(e.target.content);
+					infoWindow.open(map, e.target.getPosition());
+				}
+
+				// 鼠标移出事件
+				function markerMouseout(e) {
+					infoWindow.setContent(e.target.content);
+					infoWindow.close(map, e.target.getPosition());
+				}
+				marker.setMap(map);
+			});
+			// 鼠标移入事件
+
+			// // 折线
+			// function addPolyLine() {
+			// 	const polyline = new AMap.Polyline({
+			// 		path: path.value,
+			// 		isOutline: true,
+			// 		outlineColor: "#ffeeff",
+			// 		borderWeight: 1,
+			// 		strokeColor: "#3366FF",
+			// 		strokeOpacity: 0.6,
+			// 		strokeWeight: 5,
+			// 		// 折线样式还支持 'dashed'
+			// 		strokeStyle: "solid",
+			// 		// strokeStyle是dashed时有效
+			// 		// strokeDasharray: [10, 5],
+			// 		lineJoin: "round",
+			// 		lineCap: "round",
+			// 		zIndex: 50
+			// 	});
+			// 	map.add([polyline]);
+			// }
 		})
 		.catch(e => {
 			console.log(e);
 		});
-}
+};
-
-initMap();
 </script>
 
 <style>

src/views/goverment/largeScreen/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="orderBgc">
-		<Map3D class="mapStyle"></Map3D>
+		<!-- <Map3D class="mapStyle"></Map3D> -->
-		<!-- <Map2D class="mapStyle"></Map2D> -->
+		<Map2D class="mapStyle"></Map2D>
 		<headerScreen class="topHeader"></headerScreen>
 		<div class="bottomContent">
 			<leftScreen class="leftScreen"></leftScreen>