wisdomisitezwfront-web/src/views/goverment/huizhou/largeScreen/largeScreenOne/components/maps3D.vue

<template>
	<div class="mapBox" id="mapBox" ref="AMapRef"></div>
</template>
<script setup lang="tsx" name="pieChart">
import { ref, onMounted, shallowRef, watch } from "vue";
import initAMap from "@/components/AMap/AMap";
import zhongkai from "../point.js";
const AMapRef = ref();
const areas = zhongkai();
const map = shallowRef<AMap.Map>();
const props = defineProps<{
	projectData: Array<any>;
}>();
const setProjectData = async () => {
	console.log("setProjectData");
	if (AMapRef.value) {
		addMarker();
	}
};
watch(() => props.projectData, setProjectData, { deep: true });

// 调用地图
const mapData = async () => {
	const AMap = await initAMap();
	AMapRef.value = AMap;
	map.value = new AMap.Map("mapBox", {
		zoom: 20,
		center: [116.481181, 39.90923],
		viewMode: "2D",
		resizeEnable: true
		// mapStyle: "amap://styles/67570a93d67b07a02ee522a2c1180be4"
	});
	var outer = [
		new AMap.LngLat(-360, 90, true),
		new AMap.LngLat(-360, -90, true),
		new AMap.LngLat(360, -90, true),
		new AMap.LngLat(360, 90, true)
	];
	var zhongkaiqu = [
		[
			new AMap.LngLat(114.134995, 23.051756),
			new AMap.LngLat(114.14564, 23.061068),
			new AMap.LngLat(114.15045, 23.066189),
			new AMap.LngLat(114.15397, 23.071177),
			new AMap.LngLat(114.160225, 23.086802),
			new AMap.LngLat(114.164246, 23.089462),
			new AMap.LngLat(114.170715, 23.090393),
			new AMap.LngLat(114.18236, 23.091324),
			new AMap.LngLat(114.19428, 23.094515),
			new AMap.LngLat(114.20083, 23.100431),
			new AMap.LngLat(114.21031, 23.113728),
			new AMap.LngLat(114.22231, 23.11991),
			new AMap.LngLat(114.23022, 23.123499),
			new AMap.LngLat(114.24287, 23.126158),
			new AMap.LngLat(114.24617, 23.128153),
			new AMap.LngLat(114.25343, 23.12596),
			new AMap.LngLat(114.270676, 23.128618),
			new AMap.LngLat(114.277435, 23.124762),
			new AMap.LngLat(114.28505, 23.124098),
			new AMap.LngLat(114.297264, 23.12576),
			new AMap.LngLat(114.30747, 23.132872),
			new AMap.LngLat(114.31409, 23.125427),
			new AMap.LngLat(114.325584, 23.11745),
			new AMap.LngLat(114.32472, 23.112663),
			new AMap.LngLat(114.3184, 23.109207),
			new AMap.LngLat(114.313225, 23.108675),
			new AMap.LngLat(114.308044, 23.105751),
			new AMap.LngLat(114.30402, 23.106548),
			new AMap.LngLat(114.300285, 23.095644),
			new AMap.LngLat(114.31092, 23.092453),
			new AMap.LngLat(114.316956, 23.088198),
			new AMap.LngLat(114.31897, 23.088198),
			new AMap.LngLat(114.32759, 23.086071),
			new AMap.LngLat(114.33047, 23.086071),
			new AMap.LngLat(114.33133, 23.086603),
			new AMap.LngLat(114.33507, 23.08022),
			new AMap.LngLat(114.3457, 23.080484),
			new AMap.LngLat(114.34484, 23.0749),
			new AMap.LngLat(114.34743, 23.073835),
			new AMap.LngLat(114.35059, 23.074368),
			new AMap.LngLat(114.35404, 23.069313),
			new AMap.LngLat(114.359505, 23.063196),
			new AMap.LngLat(114.36497, 23.063196),
			new AMap.LngLat(114.36726, 23.0616),
			new AMap.LngLat(114.368416, 23.059471),
			new AMap.LngLat(114.37273, 23.056812),
			new AMap.LngLat(114.3733, 23.055481),
			new AMap.LngLat(114.376465, 23.056812),
			new AMap.LngLat(114.381065, 23.057343),
			new AMap.LngLat(114.383934, 23.059206),
			new AMap.LngLat(114.385086, 23.062132),
			new AMap.LngLat(114.38796, 23.062664),
			new AMap.LngLat(114.39026, 23.06426),
			new AMap.LngLat(114.39371, 23.061333),
			new AMap.LngLat(114.39256, 23.060003),
			new AMap.LngLat(114.394, 23.057875),
			new AMap.LngLat(114.39658, 23.059206),
			new AMap.LngLat(114.40032, 23.060003),
			new AMap.LngLat(114.39889, 23.05628),
			new AMap.LngLat(114.40061, 23.052555),
			new AMap.LngLat(114.40463, 23.052023),
			new AMap.LngLat(114.40291, 23.050426),
			new AMap.LngLat(114.402336, 23.045904),
			new AMap.LngLat(114.40032, 23.049097),
			new AMap.LngLat(114.39889, 23.047234),
			new AMap.LngLat(114.39486, 23.048298),
			new AMap.LngLat(114.394, 23.050426),
			new AMap.LngLat(114.39084, 23.048298),
			new AMap.LngLat(114.38969, 23.04484),
			new AMap.LngLat(114.38796, 23.042978),
			new AMap.LngLat(114.39429, 23.04005),
			new AMap.LngLat(114.39802, 23.039253),
			new AMap.LngLat(114.3986, 23.037922),
			new AMap.LngLat(114.39889, 23.034996),
			new AMap.LngLat(114.40061, 23.030472),
			new AMap.LngLat(114.39946, 23.028343),
			new AMap.LngLat(114.401184, 23.02595),
			new AMap.LngLat(114.405495, 23.02515),
			new AMap.LngLat(114.40607, 23.022757),
			new AMap.LngLat(114.4078, 23.021692),
			new AMap.LngLat(114.40866, 23.020096),
			new AMap.LngLat(114.41297, 23.017435),
			new AMap.LngLat(114.414406, 23.016104),
			new AMap.LngLat(114.41153, 23.013708),
			new AMap.LngLat(114.41383, 23.009186),
			new AMap.LngLat(114.410385, 23.006258),
			new AMap.LngLat(114.40952, 23.003065),
			new AMap.LngLat(114.40463, 23.004927),
			new AMap.LngLat(114.40032, 23.006523),
			new AMap.LngLat(114.39687, 23.005194),
			new AMap.LngLat(114.39026, 23.004662),
			new AMap.LngLat(114.38652, 23.005726),
			new AMap.LngLat(114.384514, 23.006258),
			new AMap.LngLat(114.383934, 23.006258),
			new AMap.LngLat(114.38365, 23.009186),
			new AMap.LngLat(114.38279, 23.011047),
			new AMap.LngLat(114.38279, 23.01504),
			new AMap.LngLat(114.38307, 23.020096),
			new AMap.LngLat(114.38307, 23.022757),
			new AMap.LngLat(114.38336, 23.025417),
			new AMap.LngLat(114.37933, 23.024353),
			new AMap.LngLat(114.37675, 23.022757),
			new AMap.LngLat(114.37474, 23.02382),
			new AMap.LngLat(114.37244, 23.022224),
			new AMap.LngLat(114.36899, 23.021425),
			new AMap.LngLat(114.3664, 23.021692),
			new AMap.LngLat(114.36525, 23.019564),
			new AMap.LngLat(114.36094, 23.016636),
			new AMap.LngLat(114.35864, 23.013176),
			new AMap.LngLat(114.35634, 23.009983),
			new AMap.LngLat(114.35404, 23.007322),
			new AMap.LngLat(114.351456, 23.007055),
			new AMap.LngLat(114.346565, 23.005194),
			new AMap.LngLat(114.346565, 23.00413),
			new AMap.LngLat(114.34312, 23.000935),
			new AMap.LngLat(114.342545, 22.998007),
			new AMap.LngLat(114.34082, 22.998007),
			new AMap.LngLat(114.33996, 22.995878),
			new AMap.LngLat(114.33679, 22.994549),
			new AMap.LngLat(114.33334, 22.994814),
			new AMap.LngLat(114.33162, 22.994814),
			new AMap.LngLat(114.329605, 22.995878),
			new AMap.LngLat(114.329895, 22.99295),
			new AMap.LngLat(114.32817, 22.988958),
			new AMap.LngLat(114.32472, 22.990822),
			new AMap.LngLat(114.320694, 22.990822),
			new AMap.LngLat(114.31868, 22.99029),
			new AMap.LngLat(114.31667, 22.987362),
			new AMap.LngLat(114.31782, 22.98257),
			new AMap.LngLat(114.31897, 22.981506),
			new AMap.LngLat(114.32127, 22.983635),
			new AMap.LngLat(114.32041, 22.980175),
			new AMap.LngLat(114.320694, 22.978844),
			new AMap.LngLat(114.32242, 22.978046),
			new AMap.LngLat(114.32817, 22.97565),
			new AMap.LngLat(114.32817, 22.971924),
			new AMap.LngLat(114.33105, 22.96793),
			new AMap.LngLat(114.32472, 22.967665),
			new AMap.LngLat(114.32357, 22.971924),
			new AMap.LngLat(114.321846, 22.972988),
			new AMap.LngLat(114.3138, 22.975916),
			new AMap.LngLat(114.3051, 22.978512),
			new AMap.LngLat(114.29633, 22.978779),
			new AMap.LngLat(114.29217, 22.977713),
			new AMap.LngLat(114.28742, 22.97585),
			new AMap.LngLat(114.283325, 22.973787),
			new AMap.LngLat(114.28067, 22.970392),
			new AMap.LngLat(114.27758, 22.9666),
			new AMap.LngLat(114.27585, 22.965801),
			new AMap.LngLat(114.274414, 22.964737),
			new AMap.LngLat(114.2724, 22.964737),
			new AMap.LngLat(114.271255, 22.961807),
			new AMap.LngLat(114.2724, 22.95888),
			new AMap.LngLat(114.26953, 22.958347),
			new AMap.LngLat(114.26694, 22.95462),
			new AMap.LngLat(114.26435, 22.949827),
			new AMap.LngLat(114.26062, 22.946367),
			new AMap.LngLat(114.25918, 22.942373),
			new AMap.LngLat(114.258606, 22.935717),
			new AMap.LngLat(114.258316, 22.932789),
			new AMap.LngLat(114.25544, 22.92986),
			new AMap.LngLat(114.250984, 22.924799),
			new AMap.LngLat(114.2428, 22.919075),
			new AMap.LngLat(114.23381, 22.921804),
			new AMap.LngLat(114.223465, 22.93099),
			new AMap.LngLat(114.22059, 22.939777),
			new AMap.LngLat(114.22202, 22.9463),
			new AMap.LngLat(114.223175, 22.95056),
			new AMap.LngLat(114.22461, 22.955751),
			new AMap.LngLat(114.22275, 22.957615),
			new AMap.LngLat(114.22734, 22.961609),
			new AMap.LngLat(114.22756, 22.968197),
			new AMap.LngLat(114.22835, 22.971058),
			new AMap.LngLat(114.22849, 22.97585),
			new AMap.LngLat(114.228424, 22.982306),
			new AMap.LngLat(114.22555, 22.986563),
			new AMap.LngLat(114.22015, 22.99182),
			new AMap.LngLat(114.20888, 22.992685),
			new AMap.LngLat(114.20399, 22.994015),
			new AMap.LngLat(114.20485, 22.996677),
			new AMap.LngLat(114.20255, 22.996943),
			new AMap.LngLat(114.19709, 22.996145),
			new AMap.LngLat(114.193924, 22.995878),
			new AMap.LngLat(114.19041, 22.999006),
			new AMap.LngLat(114.186455, 22.99721),
			new AMap.LngLat(114.18387, 22.994015),
			new AMap.LngLat(114.178116, 22.989758),
			new AMap.LngLat(114.17438, 22.988958),
			new AMap.LngLat(114.17467, 22.986563),
			new AMap.LngLat(114.17208, 22.9847),
			new AMap.LngLat(114.169495, 22.98683),
			new AMap.LngLat(114.164604, 22.983902),
			new AMap.LngLat(114.16259, 22.984434),
			new AMap.LngLat(114.16231, 22.987627),
			new AMap.LngLat(114.15857, 22.988958),
			new AMap.LngLat(114.158, 22.98603),
			new AMap.LngLat(114.15541, 22.989758),
			new AMap.LngLat(114.14362, 22.992418),
			new AMap.LngLat(114.13902, 22.999338),
			new AMap.LngLat(114.13615, 22.995613),
			new AMap.LngLat(114.130684, 23.000935),
			new AMap.LngLat(114.13471, 23.007322),
			new AMap.LngLat(114.13413, 23.009718),
			new AMap.LngLat(114.139595, 23.011047),
			new AMap.LngLat(114.14104, 23.012379),
			new AMap.LngLat(114.13902, 23.014507),
			new AMap.LngLat(114.138664, 23.016436),
			new AMap.LngLat(114.139885, 23.0185),
			new AMap.LngLat(114.142685, 23.023888),
			new AMap.LngLat(114.14542, 23.02921),
			new AMap.LngLat(114.145706, 23.031603),
			new AMap.LngLat(114.14542, 23.035461),
			new AMap.LngLat(114.14341, 23.038387),
			new AMap.LngLat(114.13953, 23.03759),
			new AMap.LngLat(114.13263, 23.043444),
			new AMap.LngLat(114.13277, 23.04929),
			new AMap.LngLat(114.1332, 23.04504)
		]
	];
	var pathArray = [outer];
	pathArray.push.apply(pathArray, zhongkaiqu); // options.areas[0].path 外部区域 遮罩
	var polygon = new AMap.Polygon({
		path: pathArray,
		map: map.value,
		bubble: true,
		fillColor: "#060a1d", // 多边形填充颜色
		fillOpacity: 1, // 多边形填充透明度，默认为0.9
		strokeColor: "#00eeff", // 线条颜色
		strokeWeight: 2,
		strokeOpacity: 0.5, // 轮廓线透明度，默认为0.9
		strokeStyle: "dashed", // 轮廓线样式，实线:solid，虚线:dashed
		strokeDasharray: [10, 2, 10]
	});
	// map.value.push(polygon);
};
// 	var opts = {
// 		extensions: "all",
// 		level: "district"
// 	};
// 	//利用行政区查询获取边界构建mask路径
// 	//也可以直接通过经纬度构建mask路径
// 	const AMap = await initAMap();
// 	AMapRef.value = AMap;
// 	map.value = new AMap.Map("mapBox", {
// 		viewMode: "3D",
// 		zoom: 5,
// 		zooms: [2, 22],
// 		center: [105.602725, 37.076636]
// 		// mapStyle: "amap://styles/67570a93d67b07a02ee522a2c1180be4"
// 	});
// 	var district = new AMap.DistrictSearch(opts);
// 	console.log(district);
// 	district.search("深圳市", function (status: any, result: any) {
// 		console.log(status, result);
// 		console.log(999999999);
// 		var bounds = result.districtList[0].boundaries;
// 		var polygons = [];
// 		if (bounds) {
// 			for (var i = 0, l = bounds.length; i < l; i++) {
// 				var outer = [
// 					new AMap.LngLat(-360, 90, true),
// 					new AMap.LngLat(-360, -90, true),
// 					new AMap.LngLat(360, -90, true),
// 					new AMap.LngLat(360, 90, true)
// 				];
// 				var pathArray = [outer];
// 				pathArray.push.apply(pathArray, bounds); // options.areas[0].path 外部区域 遮罩
// 				console.log(pathArray);
// 				var polygon = new AMap.Polygon({
// 					path: pathArray,
// 					map: map.value,
// 					bubble: true,
// 					fillColor: "#FCF9F2", // 多边形填充颜色
// 					fillOpacity: 1, // 多边形填充透明度，默认为0.9
// 					strokeColor: "#00eeff", // 线条颜色
// 					strokeWeight: 2,
// 					strokeOpacity: 0.5, // 轮廓线透明度，默认为0.9
// 					strokeStyle: "dashed", // 轮廓线样式，实线:solid，虚线:dashed
// 					strokeDasharray: [10, 2, 10]
// 				});
// 				polygons.push(polygon);
// 			}
// 			// 地图自适应
// 			map.value.setFitView();
// 		}
// 		setMap();
// 	});
// };
//添加区域
const createArea = () => {
	const bezierCurve = new AMapRef.value.BezierCurve({
		path: areas,
		isOutline: false,
		outlineColor: "#f00",
		borderWeight: 0,
		strokeColor: "#dddddd",
		strokeOpacity: 1,
		strokeWeight: 2,
		// 线样式还支持 'dashed'
		strokeStyle: "solid",
		// strokeStyle是dashed时有效
		strokeDasharray: [10, 10],
		lineJoin: "round",
		lineCap: "round",
		zIndex: 50
	});
	bezierCurve.setMap(map.value);
	// 缩放地图到合适的视野级别
	map.value?.setFitView([bezierCurve]);
};
// 地图增加坐标点
const addMarker = () => {
	if (!props.projectData.length > 0) {
		return;
	}
	const createMarkerImage = (state: string) => new URL(`../../../../../../assets/images/hzImg/xm/${state}`, import.meta.url).href;
	// map.value?.clearMap();
	// markerList.forEach((item: any) => {
	// 创建一个 Icon
	let startIcon = new AMapRef.value.Icon({
		// 图标尺寸
		size: new AMapRef.value.Size(52, 52),
		// 图标的取图地址
		image: createMarkerImage("marker.png"),
		// 图标所用图片大小
		imageSize: new AMapRef.value.Size(52, 52)
	});

	props.projectData.map(item => {
		// 将 icon 传入 marker
		let startMarker = new AMapRef.value.Marker({
			position: new AMapRef.value.LngLat(Number(item.longitude), Number(item.latitude)),
			// position: new AMapRef.value.LngLat(113, 21),
			icon: startIcon,
			offset: new AMapRef.value.Pixel(-13, -30)
		});
		map.value?.add([startMarker]);
	});
	// map.value?.setFitView();
	// });
};
// 设置地图图层
const setMap = () => {
	// 构造官方卫星、路网图层
	var layers = [new AMapRef.value.TileLayer.Satellite(), new AMapRef.value.TileLayer.RoadNet()];
	// 地图上设置图层
	map.value.setLayers(layers);
};
onMounted(async () => {
	console.log("onMounted");
	await mapData();
	createArea();
	addMarker();
	setMap();
});
</script>
<style scoped lang="scss">
.mapBox {
	width: 100%;
	height: 100%;
}
</style>