wisdomisitezwfront-web/src/views/goverment/largeScreen/components/map2D.vue

<template>
	<div class="app-container">
		<div id="container"></div>
	</div>
</template>

<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 { 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 getImageUrl(name: string) {
	return new URL(`../../../../assets/images/screenImg/mapImg/${name}` + ".png", import.meta.url).href;
}
const initMap = () => {
	window._AMapSecurityConfig = {
		securityJsCode: "6caf6429e4b98cf7f39db9bf7014a78b"
	};
	AMapLoader.load({
		key: "ee87cfd8354d3ff2a898036bacc4b8a2", // 申请好的Web端开发者Key，首次调用 load 时必填
		version: "1.4.15" // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
		// plugins:[''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
	})
		.then(AMap => {
			const map = new AMap.Map("container", {
				//设置地图容器id
				viewMode: "3D", //是否为3D地图模式
				zoom: 10, //初始化地图级别
				center: [114.085947, 22.547], //初始化地图中心点位置
				mapStyle: "amap://styles/67570a93d67b07a02ee522a2c1180be4"
			});
			// 添加插件
			AMap.plugin(
				["AMap.ToolBar", "AMap.Scale", "AMap.HawkEye", "AMap.Geolocation", "AMap.MapType", "AMap.MouseTool"],
				function () {
					//异步同时加载多个插件
					// 添加地图插件
					map.addControl(new AMap.ToolBar()); // 工具条控件;范围选择控件
					map.addControl(new AMap.Scale()); // 显示当前地图中心的比例尺
					map.addControl(new AMap.HawkEye()); // 显示缩略图
					map.addControl(new AMap.Geolocation()); // 定位当前位置
					map.addControl(new AMap.MapType()); // 实现默认图层与卫星图,实时交通图层之间切换

					// 以下是鼠标工具插件
					const mouseTool = new AMap.MouseTool(map);
					// mouseTool.rule();// 用户手动绘制折线图,测量距离
					mouseTool.measureArea(); // 测量面积
				}
			);
			// 单击自定义点位
			// map.on("click", e => {
			// 	// lng ==> 经度值  lat => 维度值
			// 	current_position.value = [e.lnglat.lng, e.lnglat.lat];
			// 	path.value.push([e.lnglat.lng, e.lnglat.lat]);
			// 	// addMarker();
			// 	// addPolyLine();
			// });
			// // 实例化点标记
			// // 第一种(封成函数来触发)
			// function addMarker() {
			// 	const marker = new AMap.Marker({
			// 		icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
			// 		position: current_position.value, // 这里我们通过上面的点击获取经纬度坐标,实时添加标记
			// 		// 通过设置 offset 来添加偏移量
			// 		offset: new AMap.Pixel(-26, -54)
			// 	});
			// 	console.log("我是经纬度", current_position.value);
			// 	marker.setMap(map);
			// }

			// 第二种 直接写死 position 的经纬度值
			mapProjectList.value.forEach((item, index, array) => {
				const marker = new AMap.Marker({
					icon: getImageUrl("dian"),
					position: [`${item.longitude}`, `${item.latitude}`],
					// 通过设置 offset 来添加偏移量
					offset: new AMap.Pixel(-26, -24)
				});
				//信息窗口实例
				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);
		});
};
</script>

<style>
.app-container {
	width: 100%;
	height: 100%;
}
#container {
	width: 100%;
	height: 100%;
}
</style>