ebike-ui/ebike-maintenance/pages/map/map-bikesite.vue

<template>
	<div :style="{width:'100vw',height}">
		<map id="mapRef" ref="mapRef" :style="{width:'100vw',height}" show-location :longitude="mapcenter.longitude"
			:latitude="mapcenter.latitude" :markers="markers" :polygons="polygons" :circles="circles"
			:polyline="polyline" :scale="scale" @tap="mapTap" />
		<div class="divNav">

		</div>
		<div class="divLowerLeft">
			<div class="divBtn">
				<div class="divBtnTitle" @click="getLocation">
					<uni-icons custom-prefix="iconfont" type="icon-ebikedingwei2" :color="iconcolor" :size="iconsize" />
					<div>定位</div>
				</div>
				<div class="divBtnTitle" @click="refreshArea">
					<uni-icons custom-prefix="iconfont" type="icon-ebikeshuaxin" :color="iconcolor" :size="iconsize" />
					<div>刷新</div>
				</div>
				<div class="divBtnTitle" style="padding-bottom: 10px;"
					@click="()=>{showRegion=!showRegion;showMapSite(!showRegion)}">
					<uni-icons custom-prefix="iconfont" type="icon-ebikeP" :color="!showRegion?iconcolor:showColor"
						:size="iconsize" />
					<div :style="{color:!showRegion?iconcolor:showColor}">站点</div>
				</div>
			</div>
		</div>
		<div v-if="showDraw" class="divBottom">
			<div style="display: flex;">
				<label>选择形状：</label>
				<div style="margin-top: -5px;">
					<uni-data-checkbox v-model="selDraw" :localdata="drawType"
						@change="changDrawType"></uni-data-checkbox>
				</div>
			</div>
			<div v-if="selDraw=='1'" style="line-height: 35px;">
				<label class="lbWorn">请点击地图绘制您想绘制的区域</label>
				<div>
					<label class="b-btn-blue" @click="delPoint">删除点</label>
					<label class="b-btn-blue" style="margin-left: 15px;" @click="clearPoint">清空点</label>
				</div>
			</div>
			<div v-if="selDraw=='2'">
				<label class="lbWorn">
					请点
					<uni-icons type="plus" color="#1082FF" size="30" @click="onZoom('out')" />
					击放
					大圆，点击<uni-icons type="minus" color="#1082FF" size="30" @click="onZoom('in')" />
					缩小圆,半径为：

					<label style="color: #000;">{{radius}}</label>
					米
				</label>
			</div>
			<div style="text-align: center;display: flex;justify-content: space-evenly;margin: 10px 0px;">
				<div class="b-btn-white" style="width:100%;margin-right: 10px" @click="cancelDraw">取消绘制</div>
				<div class="b-btn-blue" style="width:100%;" @click="completeDraw">完成绘制</div>
			</div>
		</div>

	</div>
</template>

<script setup>
	import {
		ref,
		onMounted,
		getCurrentInstance
	} from 'vue';
	import * as map from "@/utils/map.js";
	import {
		useSelarea
	} from "@/stores/selarea.js";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		showModelMessage,
		getScreenHeightNoTabBar
	} from "@/utils/tools.js";
	import {
		cloneDeep,
		findIndex
	} from "lodash"

	const title = ref("新建站点");
	let isload = false;
	let oMap = null;
	const mapcenter = ref({
		longitude: "",
		latitude: ""
	})
	const scale = ref(18);
	const polygons = ref([]);
	const circles = ref([]);
	const markers = ref([]);
	const polyline = ref([]);

	const radius = ref(20);
	let drawPoint = [];
	let areaData = {};
	let regionData = {};
	let showRegion = ref(false);
	const iconsize = 16;
	const iconcolor = "#6f7777";
	const showColor = "#1088FD";

	//行政区划
	const selAreaStore = useSelarea();
	const zoneId = selAreaStore.value;
	const showDraw = ref(false);
	const drawType = [{
		text: "多边形",
		value: "1"
	}, {
		text: "圆形",
		value: "2"
	}];
	const selDraw = ref("1");
	const drawId = 10000000;
	const drawColor = "#e58b04";
	const drawFillColor = "#e58b041a";
	const height = ref("100vh");
	const opentype = ref("add"); //打开类型
	let editId = ""; //编辑ID

	//缩放
	function onZoom(type) {
		const i = 10;
		let r = radius.value;
		if (!drawPoint || drawPoint.length == 0) {
			showModelMessage("请先绘制图形！");
			return;
		}
		switch (type) {
			case "out":
				r += 10;
				break;
			default:
				if (r == 20) {
					showModelMessage("已缩放至最小！");
					return;
				}
				r = r - 10;
				break;
		}
		radius.value = r;
		const {
			latitude,
			longitude
		} = drawPoint[0];
		circles.value[circles.value.length - 1] = map.addCirle(drawColor, drawFillColor, longitude, latitude, radius
			.value);
	}

	//切换绘制类型
	function changDrawType(e) {
		const {
			value
		} = e.detail;
		selDraw.value = value;
		if (!drawPoint || drawPoint.length == 0) {
			return;
		}
		markers.value.splice(markers.value.length - 1, 1);
		switch (drawPoint.length) {
			case 2:
				polyline.value = [];
				break;
			default:
				polygons.value.splice(polygons.value.length - 1, 1);
				break;
		}
		drawPoint = [];
	}

	function mapTap(e) {
		if (!showDraw.value) return;
		const {
			detail: {
				latitude,
				longitude
			}
		} = e;
		switch (selDraw.value) {
			case "1":
				drawPolygons(latitude, longitude);
				break;
			case "2":
				drawCircle(latitude, longitude);
				break;
		}
	}

	//绘制多边形
	function drawPolygons(latitude, longitude) {
		const len = drawPoint.length;
		switch (len) {
			case 0:
				const marker = map.addMarker(drawId, longitude, latitude, "point.png");
				markers.value.push(marker);
				break;
			case 1:
				polyline.value.push(map.addLine(drawColor, drawPoint));
				break;
			case 2:
				polyline.value.splice(polyline.value.length - 1, 1);
				polygons.value.push(map.addPolygon(drawColor, drawFillColor, drawPoint));
				break;
			default:
				polygons.value[polygons.value.length - 1] = map.addPolygon(drawColor, drawFillColor, drawPoint);
				break;
		}
		drawPoint.push({
			latitude,
			longitude
		});
	}

	//绘制圆形
	function drawCircle(latitude, longitude) {
		const circle = map.addCirle(drawColor, drawFillColor, longitude, latitude, radius.value);
		const marker = map.addMarker(drawId, longitude, latitude, "point.png");
		if (drawPoint.length > 0) {
			circles.value[circles.value.length - 1] = circle;
			markers.value[markers.value.length - 1] = markers;
		} else {

			markers.value.push(marker);
			circles.value.push(circle);
		}
		drawPoint[0] = {
			latitude,
			longitude
		};
	}

	//删除点
	function delPoint() {
		if (!drawPoint || drawPoint.length == 0) {
			showModelMessage("请先绘制点！");
			return;
		}
		drawPoint.splice(drawPoint.length - 1, 1);
		if (selDraw.value == "1") {
			delPolygon();
		} else {
			markers.value.splice(markers.value.length - 1, 1);
			circles.value.splice(circles.value.length - 1, 1);
		}

	}

	function delPolygon() {
		switch (drawPoint.length) {
			case 0:
				markers.value.splice(markers.value.length - 1, 1);
				break;
			case 1:
				polyline.value.splice(polyline.value.length - 1, 1);
				break;
			case 2:
				polygons.value.splice(polygons.value.length - 1, 1);
				polyline.value.push(map.addLine(drawColor, drawPoint));
				break;
			default:
				const index = polygons.value.length - 1;
				polygons.value[index] = map.addPolygon(drawColor, drawFillColor, drawPoint);
				break;
		}
	}
	//清除点
	function clearPoint() {
		drawPoint = [];
		markers.value.splice(markers.value.length - 1, 1);
		if (selDraw.value == "1") {
			polygons.value.splice(polygons.value.length - 1, 1);
		} else {
			circles.value.splice(circles.value.length - 1, 1);
		}
	}

	//完成绘制
	function completeDraw() {
		if (drawPoint.length == 0) {
			showModelMessage("请先绘制区域！");
			return;
		}
		const arrPoint = cloneDeep(drawPoint)
		if (selDraw.value == "1" && arrPoint.length <= 3) {
			showModelMessage("至少四个点进行区域绘制！");
			return;
		}
		if (arrPoint.length > 3) {
			arrPoint.push(arrPoint[0]);
		}
		const points = JSON.stringify(arrPoint);
		uni.navigateTo({
			url: `/pages/devops/bikesite/bikesite-info?points=${points}&radius=${radius.value}&&type=${opentype.value}`
		})
	}

	//取消绘制
	function cancelDraw() {
		uni.navigateBack();
	}

	function loadOperation(callback) {
		console.log("666666666666666666666", "行政区划", zoneId);

		map.getOperation(zoneId, (res) => {
			if (!res) {
				if (callback) callback();
				return;
			}
			const {
				arrRegionID,
				arrCircles,
				arrPolygons,
				arrData
			} = res;
			if (arrRegionID.length == 0) {
				if (callback) callback();
				return;
			}

			areaData = {
				arrCircles,
				arrPolygons,
				arrData
			};

			map.getRegionData(arrRegionID, (res) => {
				console.log("11111111111getRegionData", res);
				const {
					arrData,
					arrCircles: arrCircles_region,
					arrPolygons: arrPolygons_region,
					arrCirclesData,
					arrPolygonsData
				} = res;
				regionData = {
					arrCircles,
					arrPolygons,
					arrCirclesData,
					arrPolygonsData
				};
				const arrMarker = [];
				arrCircles_region.map((item, index) => {
					const {
						latitude: lat,
						longitude: lng
					} = item;
					const len = arrMarker.length;
					arrMarker.push(map.addMarker(len + index, lng, lat, "bikesite.png"));
				});

				arrPolygons_region.map((item, index) => {
					const {
						points
					} = item;
					const {
						lng,
						lat
					} = map.getPolygonCenter(points)
					const len = arrMarker.length;
					arrMarker.push(map.addMarker(len + index, lng, lat, "bikesite.png"));
				});

				markers.value = arrMarker;
				showMapSite(showRegion.value);
				if (callback) callback();
			})
		})
	}

	//定位
	function getLocation() {
		map.getLoalcation(oMap, (res) => {
			const {
				latitude,
				longitude
			} = res;
			mapcenter.value={
				latitude,
				longitude
			};
		})
	}

	function refreshArea() {
		loadOperation();
	}

	function showMapSite(showSite) {
		const {
			arrCircles,
			arrPolygons
		} = areaData;
		const {
			arrCircles: arrCircles_region,
			arrPolygons: arrPolygons_region,
			arrCirclesData,
			arrPolygonsData
		} = regionData;
		const arrEditC = [];
		const arrEditP = [];
		if (showSite) {
			if (editId) { //编辑
				const obj = {
					regionid: editId
				};
				console.log("9999999999999999999999arrCirclesData, arrPolygonsData", arrCirclesData, arrPolygonsData);
				let index = findIndex(arrCirclesData, obj);

				if (index > -1) {
					const {
						latitude,
						longitude
					} = arrCircles_region[index];
					arrCirclesData.splice(index, 1);
					arrCircles_region.splice(index, 1);
					arrEditC.push(map.addCirle(drawColor, drawFillColor, longitude, latitude, radius.value));
				} else {
					index = findIndex(arrPolygonsData, obj);
					if (index > -1) {
						const {
							points: arrPoint
						} = arrPolygons_region[index];
						arrPolygonsData.splice(index, 1);
						arrPolygons_region.splice(index, 1);
						arrEditP.push(map.addPolygon(drawColor, drawFillColor, arrPoint))
					}
				}
			}
			polygons.value = [...arrPolygons, ...arrPolygons_region, ...arrEditP];
			circles.value = [...arrCircles, ...arrCircles_region, ...arrEditC];
		} else {
			polygons.value = arrPolygons;
			circles.value = arrCircles;
		}
	}



	function defualtZoom() {
		console.log("888888888888888888defualtZoom", polygons.value)
		if (polygons.value.length == 0) {
			return;
		}
		const arrPoint = polygons.value[0].points;
		oMap.includePoints({
			points: arrPoint,
			padding: [50, 50, 50, 50]
		});
	}


	//加载数据
	function loadData() {
		loadOperation(() => {
			showMapSite(showRegion.value);
			if (isload) {
				defualtZoom();
			}
		});
	}



	onMounted(() => {
		oMap = map.getMap("mapRef", getCurrentInstance());
		//oMap.moveToLocation();
		isload = true;
		getLocation();
		defualtZoom();
	});

	onLoad(options => {
		console.log("33333333333333333", "options,isload", options,isload)
		let title = "站点地图";
		const {
			type,
			points,
			id,
			radius: r
		} = options;
		if (id) {
			editId = id;
			drawPoint = JSON.parse(points);
			radius.value = r;
		}

		opentype.value = type;

		switch (type) {
			case "add":
				title = "新建站点";
				showRegion.value = true;
				showDraw.value = true;
				break;
			case "edit":
				title = "编辑站点";
				showRegion.value = true;
				showDraw.value = true;
				break;
		}
		getScreenHeightNoTabBar(res => {
			height.value = res + "px";
		})
		uni.setNavigationBarTitle({
			title
		});
		
		
		loadData();
	});
</script>

<style scoped>
	@import url("map-bikesite.css");
</style>