|
@@ -87,7 +87,7 @@
|
|
|
>
|
|
|
<div class="text-box1">
|
|
|
<div :class="'tag tag' + index">{{ getTag(index) }}</div>
|
|
|
- <!-- <div class="text1">{{ item.strategy }}</div>-->
|
|
|
+ <div class="text1">{{ item.strategy }}</div>
|
|
|
</div>
|
|
|
<div class="route-info">
|
|
|
<div class="text-box2">
|
|
@@ -100,7 +100,7 @@
|
|
|
<div class="line"></div>
|
|
|
<div class="text-box2">
|
|
|
<i class="icon2" />
|
|
|
- <div class="gradient-text2">{{ item.distance / 1000 }}</div>
|
|
|
+ <div class="gradient-text2">{{ item.distance }}</div>
|
|
|
<div class="text2">公里</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -137,6 +137,7 @@ const getMap = inject('getMap');
|
|
|
const getMapUtils = inject('getMapUtils');
|
|
|
const mapStore = useMapStore();
|
|
|
const amapKey = 'e45d4caa2bef3c84714a2ed9b1e27d98';
|
|
|
+const tkKey = 'a8df87f1695d224d2679aa805c1268d9';
|
|
|
let inputRef = ref();
|
|
|
let showAddress = ref(true);
|
|
|
let routeData = ref([]);
|
|
@@ -186,18 +187,22 @@ const toSelect = () => {
|
|
|
map.on('click', handleClickMap);
|
|
|
mapStore.setIsMapSelect(true);
|
|
|
showAddress.value = false;
|
|
|
+ dataList.value = [];
|
|
|
routeData.value = [];
|
|
|
clearMarker();
|
|
|
clearLine();
|
|
|
};
|
|
|
const handleClickMap = (e) => {
|
|
|
+ let path;
|
|
|
if (mapStore.isAMap) {
|
|
|
map.off('click', handleClickMap);
|
|
|
+ path = [e.lnglat.getLng(), e.lnglat.getLat()];
|
|
|
} else {
|
|
|
map.un('click', handleClickMap);
|
|
|
+ path = e.coordinate;
|
|
|
}
|
|
|
mapStore.setIsMapSelect(false);
|
|
|
- getAddress([e.lnglat.getLng(), e.lnglat.getLat()]);
|
|
|
+ getAddress(path);
|
|
|
};
|
|
|
const confirmSelect = () => {
|
|
|
selectEvent(
|
|
@@ -247,50 +252,71 @@ const createMarks = (item, unFitView) => {
|
|
|
width: 19,
|
|
|
height: 31
|
|
|
});
|
|
|
- const feature = new Feature({
|
|
|
+ selectMarker = new Feature({
|
|
|
geometry: new Point([item.longitude, item.latitude])
|
|
|
});
|
|
|
- feature.setStyle(
|
|
|
+ selectMarker.setStyle(
|
|
|
new Style({
|
|
|
image: icon
|
|
|
})
|
|
|
);
|
|
|
const vectorLayer = mapUtils.getVectorLayer();
|
|
|
- vectorLayer.getSource().addFeature(feature);
|
|
|
+ vectorLayer.getSource().addFeature(selectMarker);
|
|
|
if (!unFitView) {
|
|
|
map.getView().setCenter([item.longitude, item.latitude]);
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
let selectIndex = ref(-1);
|
|
|
+let startPath = ref([]);
|
|
|
+let endPath = ref([]);
|
|
|
const handleRoutes = async (item) => {
|
|
|
selectIndex.value = -1;
|
|
|
- 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 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;
|
|
|
routesAddress.value = item.address;
|
|
|
- const url = `https://restapi.amap.com/v5/direction/driving?origin=${start.toString()}&destination=${end.toString()}&key=${amapKey}`;
|
|
|
- const response = await fetch(url + '&strategy=32&show_fields=polyline,cost');
|
|
|
-
|
|
|
- if (!!response.ok) {
|
|
|
- const data = await response.json();
|
|
|
- if (data.route && data.route.paths) {
|
|
|
- data.route.paths.forEach((item) => {
|
|
|
- item.duration = formatDate(item.cost?.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 = data.route.paths;
|
|
|
// 默认展示第一条
|
|
|
- drawRoute(routeData.value[0], 0);
|
|
|
- } else {
|
|
|
- routeData.value = [];
|
|
|
+ if (i === 0) {
|
|
|
+ drawRoute(routeData.value[0], 0);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
const drawRoute = (route, index) => {
|
|
|
selectIndex.value = index;
|
|
|
- const path = parseRouteToPath(route);
|
|
|
+ const path = route.coordinates;
|
|
|
clearLine();
|
|
|
if (mapStore.isAMap) {
|
|
|
const icon1 = new AMap.Icon({
|
|
@@ -371,25 +397,6 @@ const drawRoute = (route, index) => {
|
|
|
source.addFeature(endMarker);
|
|
|
}
|
|
|
};
|
|
|
-
|
|
|
-// 解析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) {
|
|
|
// 将秒数转换为BigNumber
|
|
|
const secondsBn = new BigNumber(seconds);
|
|
@@ -550,6 +557,7 @@ onMounted(() => {
|
|
|
|
|
|
onUnmounted(() => {
|
|
|
clearMarker();
|
|
|
+ clearLine();
|
|
|
});
|
|
|
</script>
|
|
|
|