|
@@ -1,6 +1,6 @@
|
|
<template>
|
|
<template>
|
|
<div ref="containerRef" class="map-container">
|
|
<div ref="containerRef" class="map-container">
|
|
- <div id="aMap2" class="map"></div>
|
|
|
|
|
|
+ <div id="aMap2" :class="[isMapSelect ? 'map custom-cursor' : 'map']" />
|
|
<!--左上事件列表-->
|
|
<!--左上事件列表-->
|
|
<div class="event-box">
|
|
<div class="event-box">
|
|
<div class="event-box2">
|
|
<div class="event-box2">
|
|
@@ -121,7 +121,7 @@
|
|
<div class="line"></div>
|
|
<div class="line"></div>
|
|
<div class="text-box2">
|
|
<div class="text-box2">
|
|
<i class="icon2" />
|
|
<i class="icon2" />
|
|
- <div class="gradient-text2">{{ item.distance / 1000 }}</div>
|
|
|
|
|
|
+ <div class="gradient-text2">{{ item.distance }}</div>
|
|
<div class="text2">公里</div>
|
|
<div class="text2">公里</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -170,11 +170,13 @@ import BigNumber from 'bignumber.js';
|
|
import gcoord from 'gcoord';
|
|
import gcoord from 'gcoord';
|
|
import startImg from '@/assets/images/map/start.png';
|
|
import startImg from '@/assets/images/map/start.png';
|
|
import endImg from '@/assets/images/map/end.png';
|
|
import endImg from '@/assets/images/map/end.png';
|
|
|
|
+import markImg from '@/assets/images/map/mark.png';
|
|
|
|
|
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
const { emergency_resource, disaster_relief_material } = toRefs<any>(proxy?.useDict('emergency_resource', 'disaster_relief_material'));
|
|
const { emergency_resource, disaster_relief_material } = toRefs<any>(proxy?.useDict('emergency_resource', 'disaster_relief_material'));
|
|
// 应急物资
|
|
// 应急物资
|
|
const amapKey = 'e45d4caa2bef3c84714a2ed9b1e27d98';
|
|
const amapKey = 'e45d4caa2bef3c84714a2ed9b1e27d98';
|
|
|
|
+const tkKey = 'a8df87f1695d224d2679aa805c1268d9';
|
|
let expand = ref(true);
|
|
let expand = ref(true);
|
|
let AMap, map, driving, geocoder;
|
|
let AMap, map, driving, geocoder;
|
|
let routeData = ref([]);
|
|
let routeData = ref([]);
|
|
@@ -280,13 +282,21 @@ let queryParams = reactive({
|
|
});
|
|
});
|
|
let total = ref(0);
|
|
let total = ref(0);
|
|
let dataList = ref([]);
|
|
let dataList = ref([]);
|
|
|
|
+let isMapSelect = ref(false);
|
|
const toSelect = () => {
|
|
const toSelect = () => {
|
|
map.on('click', handleClickMap);
|
|
map.on('click', handleClickMap);
|
|
|
|
+ isMapSelect.value = true;
|
|
|
|
+ showAddress.value = false;
|
|
|
|
+ dataList.value = [];
|
|
|
|
+ routeData.value = [];
|
|
|
|
+ clearMarker2();
|
|
|
|
+ clearLine();
|
|
};
|
|
};
|
|
const handleClickMap = (e) => {
|
|
const handleClickMap = (e) => {
|
|
map.off('click', handleClickMap);
|
|
map.off('click', handleClickMap);
|
|
getAddress([e.lnglat.getLng(), e.lnglat.getLat()]);
|
|
getAddress([e.lnglat.getLng(), e.lnglat.getLat()]);
|
|
showRight.value = true;
|
|
showRight.value = true;
|
|
|
|
+ isMapSelect.value = false;
|
|
};
|
|
};
|
|
const getAddress = async (location) => {
|
|
const getAddress = async (location) => {
|
|
const gcj02Coord = gcoord.transform(location, gcoord.WGS84, gcoord.GCJ02);
|
|
const gcj02Coord = gcoord.transform(location, gcoord.WGS84, gcoord.GCJ02);
|
|
@@ -295,7 +305,6 @@ const getAddress = async (location) => {
|
|
// 调用高德逆向地理编码 API
|
|
// 调用高德逆向地理编码 API
|
|
const response = await fetch(`https://restapi.amap.com/v3/geocode/regeo?key=${amapKey}&location=${gcj02Coord[0]},${gcj02Coord[1]}`);
|
|
const response = await fetch(`https://restapi.amap.com/v3/geocode/regeo?key=${amapKey}&location=${gcj02Coord[0]},${gcj02Coord[1]}`);
|
|
const result = await response.json();
|
|
const result = await response.json();
|
|
-
|
|
|
|
// 解析地址信息
|
|
// 解析地址信息
|
|
if (result.status === '1' && result.regeocode) {
|
|
if (result.status === '1' && result.regeocode) {
|
|
tempState.address = result.regeocode.formatted_address;
|
|
tempState.address = result.regeocode.formatted_address;
|
|
@@ -332,7 +341,7 @@ const selectEvent = (item, unFitView) => {
|
|
// 以 icon URL 的形式创建一个途经点
|
|
// 以 icon URL 的形式创建一个途经点
|
|
const icon = new AMap.Icon({
|
|
const icon = new AMap.Icon({
|
|
size: new AMap.Size(19, 31),
|
|
size: new AMap.Size(19, 31),
|
|
- image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png'
|
|
|
|
|
|
+ image: markImg
|
|
});
|
|
});
|
|
selectMarker = new AMap.Marker({
|
|
selectMarker = new AMap.Marker({
|
|
position: new AMap.LngLat(item.longitude, item.latitude),
|
|
position: new AMap.LngLat(item.longitude, item.latitude),
|
|
@@ -346,44 +355,59 @@ const selectEvent = (item, unFitView) => {
|
|
getList();
|
|
getList();
|
|
};
|
|
};
|
|
|
|
|
|
|
|
+let selectIndex = ref(-1);
|
|
|
|
+let startPath = ref([]);
|
|
|
|
+let endPath = ref([]);
|
|
const handleRoutes = async (item) => {
|
|
const handleRoutes = async (item) => {
|
|
- const lnglat = gcoord.transform([item.longitude, item.latitude], gcoord.WGS84, gcoord.GCJ02);
|
|
|
|
- const lnglat2 = gcoord.transform([selectData.value.longitude, selectData.value.latitude], gcoord.WGS84, gcoord.GCJ02);
|
|
|
|
- const start = [lnglat[0], lnglat[1]];
|
|
|
|
- const end = lnglat2;
|
|
|
|
|
|
+ selectIndex.value = -1;
|
|
|
|
+ const lnglat = [Number(item.longitude), Number(item.latitude)];
|
|
|
|
+ const lnglat2 = [Number(selectData.value.longitude), Number(selectData.value.latitude)];
|
|
|
|
+ const start = [lnglat[0].toFixed(6), lnglat[1].toFixed(6)];
|
|
|
|
+ const end = [lnglat2[0].toFixed(6), lnglat2[1].toFixed(6)];
|
|
|
|
+ startPath.value = [Number(item.longitude), Number(item.latitude)];
|
|
|
|
+ endPath.value = [selectData.value.longitude, selectData.value.latitude];
|
|
showAddress.value = true;
|
|
showAddress.value = true;
|
|
routesAddress.value = item.address;
|
|
routesAddress.value = item.address;
|
|
- // 10速度最快 返回结果会躲避拥堵,路程较短,尽量缩短时间,与高德地图的默认策略也就是不进行任何勾选一致
|
|
|
|
- // 16费用最低 返回的结果尽量不走高速,并且尽量规划收费较低甚至免费的路径结果,与高德地图的“避免收费&不走高速”策略一致
|
|
|
|
- const url = `https://restapi.amap.com/v3/direction/driving?origin=${start}&destination=${end}&key=${amapKey}`;
|
|
|
|
- const response = await fetch(url + '&strategy=10');
|
|
|
|
-
|
|
|
|
- if (!!response.ok) {
|
|
|
|
- const data = await response.json();
|
|
|
|
- if (data.route && data.route.paths) {
|
|
|
|
- data.route.paths.forEach((item) => {
|
|
|
|
- item.duration = formatDate(item.duration);
|
|
|
|
- });
|
|
|
|
- routeData.value = data.route.paths;
|
|
|
|
- } else {
|
|
|
|
- routeData.value = [];
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- const response2 = await fetch(url + '&strategy=16');
|
|
|
|
- if (!!response2.ok) {
|
|
|
|
- const data2 = await response2.json();
|
|
|
|
- if (data2.route && data2.route.paths) {
|
|
|
|
- data2.route.paths.forEach((item) => {
|
|
|
|
- item.duration = formatDate(item.duration);
|
|
|
|
|
|
+ const ststrategy = ['最快路线', '最短路线', '避开高速'];
|
|
|
|
+ routeData.value = [];
|
|
|
|
+ for (let i = 0; i < 3; i++) {
|
|
|
|
+ const url = `http://api.tianditu.gov.cn/drive?postStr={"orig":"${start}","dest":"${end}","style":"${i}"}&type=search&tk=${tkKey}`;
|
|
|
|
+ const response = await fetch(url);
|
|
|
|
+ if (response.status == 200) {
|
|
|
|
+ const parser = new DOMParser();
|
|
|
|
+ const xmlString = await response.text();
|
|
|
|
+ const xmlDoc = parser.parseFromString(xmlString, 'application/xml');
|
|
|
|
+ const routelatlon = xmlDoc.getElementsByTagName('routelatlon')[0].textContent;
|
|
|
|
+ const distance = xmlDoc.getElementsByTagName('distance')[0].textContent;
|
|
|
|
+ const duration = xmlDoc.getElementsByTagName('duration')[0].textContent;
|
|
|
|
+ const parameters = xmlDoc.getElementsByTagName('parameters')[0].textContent;
|
|
|
|
+ console.log(parameters);
|
|
|
|
+ const coordinates = routelatlon
|
|
|
|
+ .split(';') // 按分号分割为单个坐标点
|
|
|
|
+ .filter(Boolean) // 过滤空字符串(如末尾分号)
|
|
|
|
+ .map((pair) => {
|
|
|
|
+ const [lng, lat] = pair.split(',').map(Number); // 按逗号分割为经纬度
|
|
|
|
+ return [lng, lat]; // 返回二维数组格式
|
|
|
|
+ });
|
|
|
|
+ routeData.value.push({
|
|
|
|
+ duration: formatDate(Number(duration)),
|
|
|
|
+ distance: Number(distance).toFixed(3),
|
|
|
|
+ coordinates: coordinates,
|
|
|
|
+ strategy: ststrategy[i]
|
|
});
|
|
});
|
|
- routeData.value = routeData.value.concat(data2.route.paths);
|
|
|
|
|
|
+ // 默认展示第一条
|
|
|
|
+ if (i === 0) {
|
|
|
|
+ drawRoute(routeData.value[0], 0);
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
};
|
|
|
|
|
|
-const drawRoute = (route) => {
|
|
|
|
- const path = parseRouteToPath(route);
|
|
|
|
|
|
+const drawRoute = (route, index) => {
|
|
|
|
+ selectIndex.value = index;
|
|
|
|
+ const path = route.coordinates;
|
|
clearLine();
|
|
clearLine();
|
|
|
|
+
|
|
const icon1 = new AMap.Icon({
|
|
const icon1 = new AMap.Icon({
|
|
size: new AMap.Size(19, 31),
|
|
size: new AMap.Size(19, 31),
|
|
image: startImg
|
|
image: startImg
|
|
@@ -415,29 +439,10 @@ const drawRoute = (route) => {
|
|
lineJoin: 'round'
|
|
lineJoin: 'round'
|
|
});
|
|
});
|
|
routeLine.setMap(map);
|
|
routeLine.setMap(map);
|
|
-
|
|
|
|
// 调整视野达到最佳显示区域
|
|
// 调整视野达到最佳显示区域
|
|
map.setFitView([startMarker, endMarker, routeLine]);
|
|
map.setFitView([startMarker, endMarker, routeLine]);
|
|
};
|
|
};
|
|
|
|
|
|
-// 解析DrivingRoute对象,构造成AMap.Polyline的path参数需要的格式
|
|
|
|
-// DrivingResult对象结构参考文档 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DriveRoute
|
|
|
|
-const parseRouteToPath = (route) => {
|
|
|
|
- var path = [];
|
|
|
|
-
|
|
|
|
- for (var i = 0, l = route.steps.length; i < l; i++) {
|
|
|
|
- var step = route.steps[i];
|
|
|
|
-
|
|
|
|
- // 按分号分割字符串,得到一个包含经纬度对的数组
|
|
|
|
- const coordinatesPairs = step.polyline.split(';');
|
|
|
|
- // 将每个经纬度对进一步分割成经度和纬度,并转换为一个对象
|
|
|
|
- path = coordinatesPairs.map((pair) => {
|
|
|
|
- const [longitude, latitude] = pair.split(',');
|
|
|
|
- return gcoord.transform([longitude, latitude], gcoord.GCJ02, gcoord.WGS84);
|
|
|
|
- });
|
|
|
|
- }
|
|
|
|
- return path;
|
|
|
|
-};
|
|
|
|
function formatDate(seconds: number) {
|
|
function formatDate(seconds: number) {
|
|
// 将秒数转换为BigNumber
|
|
// 将秒数转换为BigNumber
|
|
const secondsBn = new BigNumber(seconds);
|
|
const secondsBn = new BigNumber(seconds);
|
|
@@ -959,8 +964,8 @@ onUnmounted(() => {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.list-content {
|
|
.list-content {
|
|
- height: calc(100vh - 372px);
|
|
|
|
- overflow-y: auto;
|
|
|
|
|
|
+ //height: calc(100vh - 372px);
|
|
|
|
+ //overflow-y: auto;
|
|
.list-item {
|
|
.list-item {
|
|
display: flex;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
@@ -1222,4 +1227,9 @@ onUnmounted(() => {
|
|
:deep(.amap-info-close) {
|
|
:deep(.amap-info-close) {
|
|
display: none;
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
+.custom-cursor {
|
|
|
|
+ cursor:
|
|
|
|
+ url('@/assets/images/map/mark.png') 13 31,
|
|
|
|
+ auto !important;
|
|
|
|
+}
|
|
</style>
|
|
</style>
|