web端：轨迹
This commit is contained in:
小小
parent
87b9e7a436
commit
fafd5103e8
@ -156,269 +156,8 @@ const clearDraw=()=>{
|
||||
mapref.value.clearDraw();
|
||||
}
|
||||
|
||||
|
||||
/* const props = defineProps({
|
||||
onCallBack: {
|
||||
type: Function,
|
||||
required: true
|
||||
},
|
||||
openTitle: {
|
||||
type: String,
|
||||
default: '' // Default value in case no openTitle is provided
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
const showModal = (data) => {
|
||||
if (data) {
|
||||
loadMap(data);
|
||||
}
|
||||
open.value = true;
|
||||
};
|
||||
const handleClose = () => {
|
||||
open.value = false;
|
||||
ClearEditor();
|
||||
if (props.onCallBack) {
|
||||
props.onCallBack(formData.value);
|
||||
}
|
||||
};
|
||||
defineExpose({showModal});
|
||||
|
||||
const formData = ref({
|
||||
"regionId": "",
|
||||
"regionName": "",
|
||||
"simpleName": "",
|
||||
"zoneId": "",
|
||||
"points": [],
|
||||
"shapeType": 2, // 1:圆形 2:多边形
|
||||
"radius": 0, // 圆形半径
|
||||
});
|
||||
|
||||
let timer = null;
|
||||
const loadMap = (dataRegion) => {
|
||||
if (editorRef.value) {
|
||||
clearTimeout(timer);
|
||||
if (dataRegion) {
|
||||
const { operationRegionId } = dataRegion;
|
||||
callOperate("/ebikeRegion/getOperationById?regionId=" + operationRegionId, {}, "get").then((res) => {
|
||||
console.log("5555555555555555555555555555",res);
|
||||
if (res.code != 200) {
|
||||
message.error(res.message)
|
||||
return
|
||||
}
|
||||
const { operationRegionName, simpleName, zoneId, points, shapeType, radius } = res.data;
|
||||
formData.value = {
|
||||
"operationRegionId": operationRegionId,
|
||||
"operationRegionName": operationRegionName,
|
||||
"simpleName": simpleName,
|
||||
"zoneId": zoneId,
|
||||
"points": points,
|
||||
"shapeType": shapeType, // 1:圆形 2:多边形
|
||||
"radius": radius, // 圆形半径
|
||||
}
|
||||
loadGeometry();
|
||||
});
|
||||
}
|
||||
}
|
||||
else {
|
||||
timer = setTimeout(() => {
|
||||
loadMap(dataRegion);
|
||||
}, 1000)
|
||||
}
|
||||
};
|
||||
|
||||
let shapeId = null;
|
||||
const loadGeometry = () => {
|
||||
const { points, shapeType, regionId, radius } = formData.value;
|
||||
shapeId = 'polygon' + regionId;
|
||||
if (shapeType == 1) {
|
||||
shapeId = 'circle' + regionId;
|
||||
}
|
||||
if (points) {
|
||||
if (shapeType == 1) {
|
||||
const circleGeometries = [];//editorRef.value.circle.getGeometries();
|
||||
if (circleGeometries.length > 0) {
|
||||
circleGeometries.forEach((geometry) => {
|
||||
editorRef.value.circle.remove(geometry); // 删除之前的图形数据
|
||||
});
|
||||
}
|
||||
circleGeometries.push({
|
||||
id: shapeId, // 圆形图形数据的标志信息
|
||||
styleId: 'circle', // 样式id
|
||||
radius: radius, // 圆形的半径
|
||||
center: new TMap.LatLng(points[0].latitude, points[0].longitude),
|
||||
properties: {
|
||||
// 圆形的属性数据
|
||||
title: 'circle',
|
||||
},
|
||||
});
|
||||
editorRef.value.circle.setGeometries(circleGeometries);
|
||||
//设置视野范围
|
||||
const mycircle = editorRef.value.circle.getGeometryById(shapeId);
|
||||
const boundary = TMap.geometry.computeBoundingRectangle(mycircle.paths);
|
||||
mapRef.value.map.fitBounds(boundary, {
|
||||
padding: 100, // 设置地图边界的内边距
|
||||
});
|
||||
}
|
||||
else if (shapeType == 2) {
|
||||
const paths = [];
|
||||
points.forEach((point) => {
|
||||
paths.push(new TMap.LatLng(point.latitude, point.longitude));
|
||||
});
|
||||
const polygonGeometries = [];//editorRef.value.polygon.getGeometries();
|
||||
polygonGeometries.push({
|
||||
id: shapeId, // 多边形图形数据的标志信息
|
||||
styleId: 'polygon', // 样式id
|
||||
paths, // 多边形的位置信息
|
||||
properties: {
|
||||
// 多边形的属性数据
|
||||
title: 'polygon',
|
||||
},
|
||||
});
|
||||
editorRef.value.polygon.setGeometries(polygonGeometries);
|
||||
// var position = TMap.geometry.computeCentroid(paths);
|
||||
// mapRef.value.map.setCenter(position);
|
||||
//设置视野范围
|
||||
const mypolygon = editorRef.value.polygon.getGeometryById(shapeId);
|
||||
const boundary = TMap.geometry.computeBoundingRectangle(mypolygon.paths);
|
||||
mapRef.value.map.fitBounds(boundary, {
|
||||
padding: 100, // 设置地图边界的内边距
|
||||
});
|
||||
}
|
||||
buttonName.value = '重置';
|
||||
editorRef.value.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.INTERACT);
|
||||
editorRef.value.editor.select([shapeId]);
|
||||
}
|
||||
}
|
||||
|
||||
const mapRef = ref(null);
|
||||
const center = ref(config.map.center);
|
||||
const control = ref({ scale: {}, zoom: { position: 'topRight', }, });
|
||||
const options = ref({ renderOptions: { renderOptions: true, } });
|
||||
const editorRef = ref(null);
|
||||
const onMapInited = () => {
|
||||
if (mapRef.value) {
|
||||
const windowWidth = window.innerWidth;
|
||||
const windowHeight = window.innerHeight;
|
||||
const calculatedWidth = windowWidth - 60;
|
||||
const calculatedHeight = windowHeight - 100;
|
||||
// 调用地图实例的 resize 方法
|
||||
const map = mapRef.value.map;
|
||||
if (map) {
|
||||
map.resize(calculatedWidth, calculatedHeight);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const buttonName = ref('清除');
|
||||
const onDrowComplet = (geomeytry) => {
|
||||
//console.log("onDrowComplet",geomeytry);
|
||||
if (geomeytry.id) {
|
||||
editorRef.value.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.INTERACT);
|
||||
editorRef.value.editor.select([geomeytry.id]);
|
||||
editorRef.value.editor.snappable = true
|
||||
}
|
||||
};
|
||||
const onDrawError = (e) => {
|
||||
ClearEditor();
|
||||
editorRef.value.editor.stop();
|
||||
};
|
||||
|
||||
const onAdjustComplete = (geomeytry) => {
|
||||
//console.log("onAdjustComplete",geomeytry);
|
||||
};
|
||||
const onAdjustError = (e) => {
|
||||
ClearEditor();
|
||||
loadGeometry();
|
||||
};
|
||||
|
||||
const onEditorClear = () => {
|
||||
if (!isNullOrEmpty(shapeId)) {
|
||||
loadGeometry();
|
||||
}
|
||||
else {
|
||||
ClearEditor();
|
||||
}
|
||||
}
|
||||
|
||||
const ClearEditor = () => {
|
||||
editorRef.value.editor.select([]);
|
||||
editorRef.value.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.DRAW);
|
||||
editorRef.value.circle.setGeometries([]);
|
||||
editorRef.value.polygon.setGeometries([]);
|
||||
}
|
||||
|
||||
const onEditorComplete = () => {
|
||||
if (editorRef.value.editor.getSelectedList().length > 0) {
|
||||
const selectedList = editorRef.value.editor.getSelectedList();
|
||||
const geometry = selectedList[0];
|
||||
console.log("onEditorComplete", geometry);
|
||||
if (geometry.id) {
|
||||
if (geometry.radius && geometry.center) {
|
||||
formData.value.radius = geometry.radius;
|
||||
formData.value.points = [
|
||||
{
|
||||
"latitude": geometry.center.lat,
|
||||
"longitude": geometry.center.lng,
|
||||
}
|
||||
];
|
||||
formData.value.shapeType = 1;
|
||||
}
|
||||
else if (geometry.paths) {
|
||||
formData.value.radius = 0;
|
||||
formData.value.points = geometry.paths.map((point) => {
|
||||
return {
|
||||
"latitude": point.lat,
|
||||
"longitude": point.lng,
|
||||
};
|
||||
});
|
||||
formData.value.points.push({
|
||||
"latitude": geometry.paths[0].lat,
|
||||
"longitude": geometry.paths[0].lng,
|
||||
});
|
||||
formData.value.shapeType = 2;
|
||||
}
|
||||
if (!isNullOrEmpty(formData.value.operationRegionId)) {
|
||||
callOperate("/ebikeRegion/updateOperation", formData.value, "post").then((res) => {
|
||||
if (res.code == 200) {
|
||||
message.success(res.message, 3, handleClose);
|
||||
} else {
|
||||
message.error(res.message, 10);
|
||||
}
|
||||
});
|
||||
}
|
||||
else {
|
||||
handleClose();
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
message.error("请先绘制区域！")
|
||||
}
|
||||
}
|
||||
|
||||
const onDeleteComplete = (geomeytry) => {
|
||||
if (editorRef.value.polygon.getGeometries().length > 0) {
|
||||
const shapeId = editorRef.value.polygon.getGeometries()[0].id;
|
||||
editorRef.value.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.INTERACT);
|
||||
editorRef.value.editor.select([shapeId]);
|
||||
}
|
||||
else if (editorRef.value.circle.getGeometries().length > 0) {
|
||||
const shapeId = editorRef.value.circle.getGeometries()[0].id;
|
||||
editorRef.value.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.INTERACT);
|
||||
editorRef.value.editor.select([shapeId]);
|
||||
}
|
||||
else {
|
||||
editorRef.value.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.DRAW);
|
||||
// editorRef.value.circle.setGeometries([]);
|
||||
// editorRef.value.polygon.setGeometries([]);
|
||||
}
|
||||
}; */
|
||||
|
||||
|
||||
|
||||
defineExpose({showModal})
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
@ -8,9 +8,8 @@
|
||||
<script setup>
|
||||
import { onMounted,ref,watch } from 'vue';
|
||||
import AMapLoader from '@amap/amap-jsapi-loader';
|
||||
import {isEqualWith,cloneDeep} from "lodash";
|
||||
|
||||
const props=defineProps(["drawType","points"]);
|
||||
const props=defineProps(["drawType","points","showTrack"]);
|
||||
const emit=defineEmits(["ondraw"])
|
||||
|
||||
let oAMap=null;
|
||||
@ -36,6 +35,10 @@
|
||||
if(!isload) return;
|
||||
const b=checkPoints(nval,oval);
|
||||
if(!b) return;
|
||||
if(showTrack){
|
||||
showTrack(nval);
|
||||
return;
|
||||
}
|
||||
switch(props.drawType){
|
||||
case "edit":
|
||||
editPolygons(nval);
|
||||
@ -45,6 +48,7 @@
|
||||
|
||||
})
|
||||
|
||||
|
||||
const checkPoints=(nval,oval)=>{
|
||||
if(nval.length!=oval.length) return true;
|
||||
let b=false;
|
||||
@ -59,8 +63,6 @@
|
||||
return b;
|
||||
}
|
||||
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
window._AMapSecurityConfig = {
|
||||
@ -70,7 +72,7 @@
|
||||
AMapLoader.load({
|
||||
key: "0e6910fae6848722b0e57f0c01597499", // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||
version: "2.0",
|
||||
plugins: ["AMap.Geolocation","AMap.MouseTool","AMap.Polygon","AMap.PolygonEditor"],
|
||||
plugins: ["AMap.Marker","AMap.Pixel","AMap.Polyline","AMap.Geolocation","AMap.MouseTool","AMap.Polygon","AMap.PolygonEditor"],
|
||||
})
|
||||
.then((AMap) => {
|
||||
isload=true;
|
||||
@ -80,21 +82,11 @@
|
||||
zoom: 18, // 初始化地图级别
|
||||
});
|
||||
|
||||
// // 初始化定位控件
|
||||
// const geolocation = new oAMap.Geolocation({
|
||||
// enableHighAccuracy: true, // 是否使用高精度定位
|
||||
// timeout: 10000, // 超时时间（毫秒）
|
||||
// showButton: true, // 显示定位按钮
|
||||
// buttonPosition: 'LT', // 按钮位置
|
||||
// //buttonOffset: new AMap.Pixel(50, -60), // 按钮偏移量
|
||||
// buttonSize:"16px"
|
||||
// });
|
||||
|
||||
// // 将定位控件添加到地图
|
||||
// map.addControl(geolocation);
|
||||
if(props.showTrack) {
|
||||
showTrack(props.points);
|
||||
}
|
||||
switch(props.drawType){
|
||||
case "add":
|
||||
|
||||
addPolygons();
|
||||
break;
|
||||
case "edit":
|
||||
@ -109,6 +101,44 @@
|
||||
|
||||
});
|
||||
|
||||
const showTrack=(points)=>{
|
||||
if(points.length==0) return;
|
||||
const data=points.map(item=>{
|
||||
return [item.longitude,item.latitude]
|
||||
})
|
||||
const start=new oAMap.Marker({
|
||||
map:map,
|
||||
icon:"/src/assets/startPoint.png",
|
||||
position:[data[0][0],data[0][1]],
|
||||
offset: new oAMap.Pixel(-18, -36)
|
||||
});
|
||||
const end=new oAMap.Marker({
|
||||
map:map,
|
||||
icon:"/src/assets/endPoint.png",
|
||||
position:[data[data.length-1][0],data[data.length-1][1]],
|
||||
offset: new oAMap.Pixel(-18, -36)
|
||||
});
|
||||
|
||||
const polyline = new AMap.Polyline({
|
||||
path: data,
|
||||
isOutline: true,
|
||||
outlineColor: '#004EE1',
|
||||
borderWeight: 3,
|
||||
strokeColor: "#2C68FF",
|
||||
strokeOpacity: 1,
|
||||
strokeWeight: 2,
|
||||
// 折线样式还支持 'dashed'
|
||||
strokeStyle: "solid",
|
||||
// strokeStyle是dashed时有效
|
||||
strokeDasharray: [10, 5],
|
||||
lineJoin: 'round',
|
||||
lineCap: 'round',
|
||||
zIndex: 50,
|
||||
})
|
||||
map.add([polyline]);
|
||||
map.setFitView();
|
||||
}
|
||||
|
||||
const editPolygons=(points)=>{
|
||||
map.clearMap();
|
||||
if(polyEditor) polyEditor.close();
|
||||
|
||||
@ -1,4 +1,43 @@
|
||||
<template>
|
||||
<div style="width: 100%;height: 500px;">
|
||||
<amap :showTrack="showTrack" :points="points"/>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref,onMounted } from "vue";
|
||||
import { callOperate } from '@/apis/call.js';
|
||||
import { message } from 'ant-design-vue';
|
||||
import amap from "../../../common/amap.vue";
|
||||
|
||||
const props=defineProps(["orderParams"]);
|
||||
const showTrack=ref(false);
|
||||
const points=ref([]);
|
||||
|
||||
onMounted(()=>{
|
||||
const params = {
|
||||
ebikeCode: props.orderParams.ebikeCode,
|
||||
startTime: props.orderParams.startTime,
|
||||
endTime: props.orderParams.endTime,
|
||||
interval: "30s"
|
||||
}
|
||||
callOperate("/ebikeTracking/query", params).then((res) => {
|
||||
if (res.code != 200) {
|
||||
message.error(res.message)
|
||||
return
|
||||
}
|
||||
const{data}=res;
|
||||
const arrPoint=data.map(item=>{
|
||||
const{latGCJ02:lat,lngGCJ02:lng}=item;
|
||||
return {longitude:lng,latitude:lat}
|
||||
})
|
||||
|
||||
points.value=arrPoint;
|
||||
showTrack.value=true;
|
||||
});
|
||||
})
|
||||
|
||||
</script>
|
||||
<!-- <template>
|
||||
<div
|
||||
class="map-container"
|
||||
style="width: auto; height: auto;"
|
||||
@ -179,4 +218,4 @@ const onMapInited = () => {
|
||||
border-radius: 0px !important;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
</style> -->
|
||||
Loading…
x
Reference in New Issue
Block a user