492 lines
11 KiB
Vue
492 lines
11 KiB
Vue
<template>
|
||
<div :style="{width:'100vw',height}">
|
||
<map id="mapRef" ref="mapRef" :style="{width:'100vw',height}" show-location :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 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 = "rgba(229,139,4,0.1)";
|
||
const height = ref("100vh");
|
||
const opentype = ref("add"); //打开类型
|
||
const 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);
|
||
if (drawPoint.length > 0) {
|
||
circles.value[circles.value.length - 1] = circle;
|
||
} else {
|
||
const marker = map.addMarker(drawId, longitude, latitude, "point.png");
|
||
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) {
|
||
callback();
|
||
return;
|
||
}
|
||
const {
|
||
arrRegionID,
|
||
arrCircles,
|
||
arrPolygons,
|
||
arrData
|
||
} = res;
|
||
if (arrRegionID.length == 0) {
|
||
callback();
|
||
return;
|
||
}
|
||
|
||
areaData = {
|
||
arrCircles,
|
||
arrPolygons,
|
||
arrData
|
||
};
|
||
|
||
map.getRegionData(arrRegionID, (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.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);
|
||
callback();
|
||
})
|
||
})
|
||
}
|
||
|
||
//定位
|
||
function getLocation() {
|
||
map.getLoalcation(oMap, (res) => {
|
||
const {
|
||
latitude,
|
||
longitude
|
||
} = res;
|
||
|
||
})
|
||
}
|
||
|
||
function refreshArea() {
|
||
loadOperation();
|
||
}
|
||
|
||
function showMapSite(showSite) {
|
||
const {
|
||
arrCircles,
|
||
arrPolygons
|
||
} = areaData;
|
||
const {
|
||
arrCircles: arrCircles_region,
|
||
arrPolygons: arrPolygons_region,
|
||
arrCirclesData,
|
||
arrPolygonsData
|
||
} = regionData;
|
||
if (showSite) {
|
||
if (editId) {
|
||
const obj = {
|
||
regionid: editId
|
||
};
|
||
console.log("9999999999999999999999", arrCirclesData, arrPolygonsData);
|
||
let index = findIndex(arrCirclesData, obj);
|
||
if (index > -1) {
|
||
arrCirclesData.splice(index, 1);
|
||
arrCircles_region.splice(index, 1);
|
||
} else {
|
||
index = findIndex(arrPolygonsData, obj);
|
||
arrPolygonsData.splice(index, 1);
|
||
arrPolygons_region.splice(index, 1);
|
||
}
|
||
|
||
}
|
||
polygons.value = [...arrPolygons, ...arrPolygons_region];
|
||
circles.value = [...arrCircles, ...arrCircles_region];
|
||
} else {
|
||
polygons.value = arrPolygons;
|
||
circles.value = arrCircles;
|
||
}
|
||
}
|
||
|
||
function defualtZoom() {
|
||
if (polygons.value.length == 0) return;
|
||
const arrPoint = polygons.value[0].points;
|
||
oMap.includePoints({
|
||
points: arrPoint,
|
||
padding: [50, 50, 50, 50]
|
||
});
|
||
}
|
||
|
||
|
||
//加载数据
|
||
function loadData() {
|
||
|
||
showRegion.value = false;
|
||
|
||
loadOperation(() => {
|
||
switch (opentype.value) {
|
||
case "add":
|
||
case "edit":
|
||
showRegion.value = true;
|
||
showDraw.value = true;
|
||
break;
|
||
}
|
||
showMapSite(showRegion.value);
|
||
if (isload) {
|
||
defualtZoom();
|
||
}
|
||
});
|
||
}
|
||
|
||
|
||
|
||
onMounted(() => {
|
||
oMap = map.getMap("mapRef", getCurrentInstance());
|
||
//oMap.moveToLocation();
|
||
isload = true;
|
||
defualtZoom();
|
||
});
|
||
|
||
onLoad(options => {
|
||
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 = "新建站点";
|
||
break;
|
||
case "edit":
|
||
title = "编辑站点";
|
||
break;
|
||
}
|
||
getScreenHeightNoTabBar(res => {
|
||
height.value = res + "px";
|
||
})
|
||
uni.setNavigationBarTitle({
|
||
title
|
||
});
|
||
loadData();
|
||
});
|
||
</script>
|
||
|
||
<style scoped>
|
||
@import url("map-bikesite.css");
|
||
</style> |