|
|
@@ -113,8 +113,7 @@
|
|
|
<script setup>
|
|
|
import { nextTick, onMounted, ref, watch, computed } from "vue";
|
|
|
import { mapConfig, deepseekConfig } from "@/utils/config.js";
|
|
|
-// import { mapData, typeData } from "./data.js";
|
|
|
-import { trvelLine } from "../line/data.js";
|
|
|
+
|
|
|
import Dialog from "./dialog.vue";
|
|
|
import Header from "@/components/header/index.vue";
|
|
|
import "swiper/css/swiper.css";
|
|
|
@@ -125,7 +124,6 @@ import tagIcon4 from "@/assets/images/tag-4.png";
|
|
|
import tagIcon5 from "@/assets/images/tag-5.png";
|
|
|
import tagIcon6 from "@/assets/images/tag-6.png";
|
|
|
import tagIcon3d from "@/assets/images/tag-3d.png";
|
|
|
-import tagIcon from "@/assets/images/tagIcon.png";
|
|
|
import MarkdownIt from "markdown-it";
|
|
|
import router from "@/router";
|
|
|
import OpenAI from "openai";
|
|
|
@@ -133,12 +131,9 @@ import Swiper from "swiper";
|
|
|
import AMapLoader from "@amap/amap-jsapi-loader";
|
|
|
import axios from "axios";
|
|
|
|
|
|
-import { useLineStore } from "@/stores/line";
|
|
|
import { useAudioStore } from "@/stores/audio";
|
|
|
const audioStore = useAudioStore();
|
|
|
const audioStatus = computed(() => audioStore.audioStatus);
|
|
|
-// import { throttle } from "lodash";
|
|
|
-const lineStore = useLineStore();
|
|
|
const mapData = ref(null);
|
|
|
const typeData = ref(null);
|
|
|
const weightData = ref(null);
|
|
|
@@ -171,7 +166,6 @@ const getData = async () => {
|
|
|
let questItems = document.querySelectorAll(".quest-item");
|
|
|
let w = 0;
|
|
|
questItems.forEach((item, index) => {
|
|
|
- // console.error(item.getBoundingClientRect().width);
|
|
|
w += item.getBoundingClientRect().width + 10;
|
|
|
});
|
|
|
questW.value = w;
|
|
|
@@ -217,7 +211,6 @@ let iconList = {
|
|
|
tagIcon6,
|
|
|
tagIcon3d,
|
|
|
};
|
|
|
-// const trvelList = ref(trvelLine);
|
|
|
const trvelList = ref(null);
|
|
|
const compass = ref(null);
|
|
|
const showLineList = ref(false);
|
|
|
@@ -239,16 +232,10 @@ const initTrvel = () => {
|
|
|
opts.waypoints.push([obj.location.split(",")[0], obj.location.split(",")[1]]);
|
|
|
}
|
|
|
});
|
|
|
- // return obj
|
|
|
- // j_item = obj;
|
|
|
|
|
|
var driving = new AMap.Driving({
|
|
|
//驾车路线规划策略，0是速度优先的策略
|
|
|
policy: AMap.DrivingPolicy.LEAST_TIME,
|
|
|
- //map 指定将路线规划方案绘制到对应的 AMap.Map 对象上
|
|
|
- // map: map,
|
|
|
- //panel 指定将结构化的路线详情数据显示的对应的 DOM 上，传入值需是 DOM 的 ID
|
|
|
- // panel: "panel",
|
|
|
});
|
|
|
|
|
|
// //搜索完成后，将自动绘制路线到地图上
|
|
|
@@ -266,8 +253,6 @@ const initTrvel = () => {
|
|
|
});
|
|
|
};
|
|
|
const goTd = () => {
|
|
|
- // let data =
|
|
|
- // tabType.value = "3d";
|
|
|
chooseItem({ type: "3d" });
|
|
|
};
|
|
|
|
|
|
@@ -392,7 +377,6 @@ const scrollRef = ref(null);
|
|
|
|
|
|
const goLine = (i) => {
|
|
|
router.replace(`/line/${i.id}`);
|
|
|
- // lineStore.initLineTime(i.time);
|
|
|
};
|
|
|
const messages = ref([]);
|
|
|
if (sessionStorage.getItem("messages")) {
|
|
|
@@ -491,8 +475,6 @@ const initTab = () => {
|
|
|
|
|
|
const dialogData = ref(null);
|
|
|
const chooseItem = (i, index) => {
|
|
|
- // marker.clearEvents("mousedown");
|
|
|
- // marker.off("mousedown", hanlderMakerEvent);
|
|
|
tabType.value = i.type;
|
|
|
closeTag();
|
|
|
switchView(false);
|
|
|
@@ -505,13 +487,7 @@ const chooseItem = (i, index) => {
|
|
|
if (clusters) {
|
|
|
clusters.setMap(null); // 将点聚合移除
|
|
|
clusters = null;
|
|
|
- // clusters.forEach((item) => {
|
|
|
- // console.error(item);
|
|
|
- // map.remove(item);
|
|
|
- // item.off("click", hanlderClusterEvent);
|
|
|
- // });
|
|
|
}
|
|
|
- // setMarker();
|
|
|
setMarkerCluster();
|
|
|
};
|
|
|
const showChat = ref(false);
|
|
|
@@ -527,109 +503,6 @@ const hanlderMakerEvent = (e) => {
|
|
|
|
|
|
let markers = [];
|
|
|
let clusters = null;
|
|
|
-const setMarker = () => {
|
|
|
- let data = mapData.value.filter((item) => item.type == tabType.value);
|
|
|
- // switchView(true);
|
|
|
- let scale = 0.2;
|
|
|
-
|
|
|
- for (let i = 0; i < data.length; i++) {
|
|
|
- let iconW = 41;
|
|
|
- let iconH = 57;
|
|
|
- let customIcon = null;
|
|
|
- let offset = [new AMap.Pixel(0, 0)];
|
|
|
- // if (data[i].iconSize) {
|
|
|
- // iconW = (data[i].iconSize[0] - 0) * scale;
|
|
|
- // iconH = (data[i].iconSize[1] - 0) * scale;
|
|
|
- // customIcon = new AMap.Icon({
|
|
|
- // // size: new AMap.Size(50, 50),
|
|
|
- // image: `./static/image/景点地标切图/${data[i].name}.png`,
|
|
|
- // imageSize: new AMap.Size(iconW, iconH),
|
|
|
- // });
|
|
|
- // offset = new AMap.Pixel(-(iconW / 2), -(iconH / 2));
|
|
|
- // } else {
|
|
|
- offset = new AMap.Pixel(-(iconW / 2), -(iconH / 2));
|
|
|
- customIcon = new AMap.Icon({
|
|
|
- size: new AMap.Size(iconW, iconH),
|
|
|
- // image: eval(`tagIcon${data[i].type}`),
|
|
|
- image: iconList[`tagIcon${data[i].type}`],
|
|
|
- imageSize: new AMap.Size(iconW, iconH),
|
|
|
- });
|
|
|
- // customIcon = markerContent;
|
|
|
- // }
|
|
|
-
|
|
|
- let pos = data[i].location.split(",");
|
|
|
- let extData = data[i];
|
|
|
- let marker = new AMap.Marker({
|
|
|
- // position: new AMap.LngLat(106.837106, 29.712762),
|
|
|
-
|
|
|
- position: new AMap.LngLat(pos[0], pos[1]),
|
|
|
- offset: offset,
|
|
|
- // content: !data[i].iconSize ? markerContent : null, //将 html 传给 content
|
|
|
- label: {
|
|
|
- // Marker标签
|
|
|
- direction: "top",
|
|
|
- content: extData.name, // 标签内容
|
|
|
- offset: new AMap.Pixel(0, -5), // 标签偏移量，可根据需要调整
|
|
|
- },
|
|
|
- // icon: data[i].iconSize ? customIcon : null, //添加 icon 图标 URL
|
|
|
- icon: customIcon, //添加 icon 图标 URL
|
|
|
- // title: data[i].name,
|
|
|
- zooms: [9, 20], // 设置可见级别，[最小级别，最大级别]
|
|
|
- id: `marker_${data[i].id}`,
|
|
|
- extData: {
|
|
|
- //自定义数据
|
|
|
- ...extData,
|
|
|
- },
|
|
|
- clickable: true,
|
|
|
- });
|
|
|
- markers.push(marker);
|
|
|
- marker.on("mousedown", hanlderMakerEvent);
|
|
|
- // marker.off("mousedown", hanlderMakerEvent);
|
|
|
- map.add(marker);
|
|
|
- }
|
|
|
-};
|
|
|
-// const setSingleMarker = (data) => {
|
|
|
-// console.error(data);
|
|
|
-// let scale = 0.2;
|
|
|
-// let iconW = 50;
|
|
|
-// let iconH = 50;
|
|
|
-// let customIcon = null;
|
|
|
-// let offset = [0, 0];
|
|
|
-// if (data.iconSize) {
|
|
|
-// iconW = (data.iconSize[0] - 0) * scale;
|
|
|
-// iconH = (data.iconSize[1] - 0) * scale;
|
|
|
-// customIcon = new AMap.Icon({
|
|
|
-// // size: new AMap.Size(50, 50),
|
|
|
-// image: `./static/image/景点地标切图/${data.name}.png`,
|
|
|
-// imageSize: new AMap.Size(iconW, iconH),
|
|
|
-// });
|
|
|
-// offset = new AMap.Pixel(-(iconW / 2), -(iconH / 2));
|
|
|
-// } else {
|
|
|
-// offset = 0;
|
|
|
-// }
|
|
|
-
|
|
|
-// let pos = data.location.split(",");
|
|
|
-// let extData = data;
|
|
|
-// let marker = new AMap.Marker({
|
|
|
-// // position: new AMap.LngLat(106.837106, 29.712762),
|
|
|
-
|
|
|
-// position: new AMap.LngLat(pos[0], pos[1]),
|
|
|
-// // content: markerContent, //将 html 传给 content
|
|
|
-// offset: offset,
|
|
|
-// icon: customIcon, //添加 icon 图标 URL
|
|
|
-// // title: data[i].name,
|
|
|
-// zooms: [9, 20], // 设置可见级别，[最小级别，最大级别]
|
|
|
-// extData: {
|
|
|
-// //自定义数据
|
|
|
-// ...extData,
|
|
|
-// },
|
|
|
-// clickable: true,
|
|
|
-// });
|
|
|
-// markers.push(marker);
|
|
|
-// marker.on("mousedown", hanlderMakerEvent);
|
|
|
-// // marker.off("mousedown", hanlderMakerEvent);
|
|
|
-// map.add(marker);
|
|
|
-// };
|
|
|
|
|
|
const setMarkerCluster = () => {
|
|
|
let pointers = [];
|
|
|
@@ -676,21 +549,13 @@ const setMarkerCluster = () => {
|
|
|
{
|
|
|
gridSize: 30,
|
|
|
clusterByZoomChange: true,
|
|
|
- // styles: {
|
|
|
- // // url: `./static/image/景点地标切图/${data.name}.png`,
|
|
|
- // url: `//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png`,
|
|
|
- // size: new AMap.Size(50, 50),
|
|
|
- // },
|
|
|
renderClusterMarker: (cluster) => {
|
|
|
let iconW = 115 * 0.5,
|
|
|
iconH = 115 * 0.5;
|
|
|
- // let offset = new AMap.Pixel(-(iconW / 2), -(iconH / 2));
|
|
|
let offset = new AMap.Pixel(-(iconW / 2), -(iconH * 0.6));
|
|
|
const { marker } = cluster;
|
|
|
let extData = cluster.clusterData[0].info;
|
|
|
- // console.error(extData);
|
|
|
- // marker.setContent(`<div class="custom-marker"><p>${extData.name}</p><img src="${iconList[`tagIcon${extData.type}`]}" /></div>`);
|
|
|
- // marker.setContent(`<div class="custom-marker">${extData.length}</div>`);
|
|
|
+
|
|
|
marker.setContent(
|
|
|
`<div class="custom-marker"><p class="cluster-marker-title">${extData.name}等...</p><div class="cluster-marker-count" style="width:${iconW}px;height:${iconH}px;"><span>${cluster.clusterData.length}</span></div></div>`
|
|
|
);
|
|
|
@@ -717,7 +582,6 @@ const setMarkerCluster = () => {
|
|
|
},
|
|
|
}
|
|
|
);
|
|
|
- // clusters.push(cluster);
|
|
|
clusters.on("click", hanlderClusterEvent);
|
|
|
};
|
|
|
let wiondowButton,
|
|
|
@@ -743,140 +607,61 @@ const hanlderClusterEvent = (e) => {
|
|
|
wiondowButton = document.getElementById("detailsBtn");
|
|
|
vrBtn = document.getElementById("vrBtn");
|
|
|
closeBtn = document.getElementById("closeBtn");
|
|
|
- // const mapWindow = document.getElementById("mapWindow");
|
|
|
-
|
|
|
- // mapWindow.addEventListener("click", (e) => {
|
|
|
- // e.stopPropagation();
|
|
|
- // });
|
|
|
-
|
|
|
- // if ("ontouchend" in window) {
|
|
|
- // console.log("支持 touchend");
|
|
|
- // wiondowButton.addEventListener("touchend", openDetails);
|
|
|
- // vrBtn.addEventListener("touchend", openVrLink);
|
|
|
- // closeBtn.addEventListener("touchend", closeTag);
|
|
|
- // } else {
|
|
|
- // console.log("不支持 touchend");
|
|
|
+
|
|
|
wiondowButton.addEventListener("click", openDetails);
|
|
|
vrBtn.addEventListener("click", openVrLink);
|
|
|
closeBtn.addEventListener("click", closeTag);
|
|
|
- // }
|
|
|
}, 100);
|
|
|
} else {
|
|
|
- // console.error(map.getZoom());
|
|
|
setTimeout(() => {
|
|
|
- // map.setZoomAndCenter(map.getZoom() + 2);
|
|
|
let center = e.clusterData[0].info.location.split(",");
|
|
|
console.error(center);
|
|
|
map.setZoomAndCenter(map.getZoom() + 2, center, false, 300);
|
|
|
}, 0);
|
|
|
- // console.error(map.getZoom());
|
|
|
}
|
|
|
};
|
|
|
|
|
|
const initMap = async () => {
|
|
|
window._AMapSecurityConfig = {
|
|
|
- // securityJsCode: "2d0885f937e5fa6d093830e1765f593d",
|
|
|
securityJsCode: mapConfig.securityJsCode, //玉琦账号
|
|
|
};
|
|
|
const _AMap = await AMapLoader.load({
|
|
|
key: mapConfig.key, //玉琦账号
|
|
|
- // key: "b19c9847b3775cd993c5a8a71c5fa1a0",
|
|
|
version: "2.0",
|
|
|
plugins: ["AMap.MoveAnimation", "AMap.ImageLayer", "AMap.TileLayer", "AMap.Geolocation", "AMap.DistrictSearch", "AMap.Driving", "AMap.Walking", "AMap.MarkerCluster", "AMap.InfoWindow"],
|
|
|
});
|
|
|
AMap = _AMap;
|
|
|
|
|
|
- // addImageLayer();
|
|
|
-
|
|
|
- // const layer = new AMap.createDefaultLayer({
|
|
|
- // visible: true, // 是否可见
|
|
|
- // opacity: 1, // 透明度
|
|
|
- // zIndex: 10, // 叠加层级
|
|
|
- // });
|
|
|
var tilerLayer = new AMap.TileLayer({
|
|
|
zIndex: 10,
|
|
|
zooms: [0, 16],
|
|
|
dataZooms: [8, 16],
|
|
|
getTileUrl: function (x, y, z) {
|
|
|
- //return /*dir*/'tiles/' + z + '/' + x + '_' + y + '.png';
|
|
|
- // return /*dir*/ "tiles/" + z + "/" + x + "_" + y + ".png";
|
|
|
return /*dir*/ "static/tiles/" + z + "/" + x + "/" + y + ".png";
|
|
|
},
|
|
|
});
|
|
|
map = new AMap.Map("amap", {
|
|
|
viewMode: "2D",
|
|
|
- // mapStyle: "amap://styles/76c9ffde986e653b6c8dc2bba6a9186e", //设置地图的显示样式
|
|
|
mapStyle: mapConfig.mapStyle, //玉琦账号
|
|
|
labels: true,
|
|
|
zoom: 8.2, // 地图显示的缩放级别
|
|
|
zooms: [8, 18],
|
|
|
- // center: [106.837106, 29.712762],
|
|
|
- // center: [114.2983, 30.5466],
|
|
|
center: [113.236426, 29.138033],
|
|
|
- // center: [116.399028, 39.845042], //路线
|
|
|
-
|
|
|
- // center: [116.397428, 39.90923], //地图中心点
|
|
|
resizeEnable: true, // 是否监控地图容器尺寸变化
|
|
|
});
|
|
|
|
|
|
initTrvel();
|
|
|
|
|
|
- // tilerLayer.setMap(map);
|
|
|
- // tilerLayer.on("click", () => {
|
|
|
- // console.error("click");
|
|
|
- // });
|
|
|
map.on("zoomchange", () => {
|
|
|
console.log("当前缩放级别:", map.getZoom());
|
|
|
- // if (map.getZoom() < 10 || map.getZoom() > 15) {
|
|
|
- // map.remove(tilerLayer);
|
|
|
- // } else {
|
|
|
- // map.add(tilerLayer);
|
|
|
- // }
|
|
|
});
|
|
|
map.on("moveend", () => {
|
|
|
// var center = map.getCenter(); // 获取当前中心点坐标
|
|
|
- // searchPos();
|
|
|
// console.log("当前中心点坐标：", center.getLng(), center.getLat());
|
|
|
});
|
|
|
- // setMarker();
|
|
|
setMarkerCluster();
|
|
|
|
|
|
- // map.on("click", (ev) => {
|
|
|
- // //触发事件的对象
|
|
|
- // var target = ev.target;
|
|
|
-
|
|
|
- // //触发事件的地理坐标，AMap.LngLat 类型
|
|
|
- // var lnglat = ev.lnglat;
|
|
|
-
|
|
|
- // //触发事件的像素坐标，AMap.Pixel 类型
|
|
|
- // var pixel = ev.pixel;
|
|
|
-
|
|
|
- // //触发事件类型
|
|
|
- // var type = ev.type;
|
|
|
- // // console.error(pixel);
|
|
|
- // });
|
|
|
-
|
|
|
- // map.add(imageLayer);
|
|
|
map.add(tilerLayer);
|
|
|
- // map.add(marker);
|
|
|
-};
|
|
|
-
|
|
|
-const addImageLayer = () => {
|
|
|
- imageLayer = new AMap.ImageLayer({
|
|
|
- bounds: new AMap.Bounds(
|
|
|
- // [112.327252, 29.848416], // 左下 手绘图左下相对于地图的经纬度
|
|
|
- // [114.158561, 28.41688] // 右上 手绘图右上相对于地图的经纬度
|
|
|
- [112.319302, 29.848272], // 左下 手绘图左下相对于地图的经纬度
|
|
|
- [114.159538, 28.396902] // 右上 手绘图右上相对于地图的经纬度
|
|
|
- ),
|
|
|
- // url为手绘图地址
|
|
|
- // url: "https://amappc.cn-hangzhou.oss-pub.aliyun-inc.com/lbs/static/img/dongwuyuan.jpg",
|
|
|
- url: "./static/tiles/yueyang.png",
|
|
|
-
|
|
|
- zIndex: 10,
|
|
|
- clickable: true,
|
|
|
- zooms: [0, 20], // 设置可见级别，[最小级别，最大级别]
|
|
|
- });
|
|
|
};
|
|
|
|
|
|
//*
|
|
|
@@ -912,16 +697,13 @@ const switchView = (effect = true) => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- // [113.236426, 29.138033]
|
|
|
map.setZoomAndCenter(scale, center, effect, 100);
|
|
|
};
|
|
|
|
|
|
const autoScroll = () => {
|
|
|
setTimeout(() => {
|
|
|
- // console.error(scrollRef.value.scrollHeight)
|
|
|
let scrollHeight = scrollRef.value.scrollHeight;
|
|
|
scrollRef.value.scrollTo({
|
|
|
- // top: 999999,
|
|
|
top: scrollHeight,
|
|
|
behavior: "smooth",
|
|
|
});
|
|
|
@@ -929,71 +711,6 @@ const autoScroll = () => {
|
|
|
};
|
|
|
|
|
|
let services = ref([]);
|
|
|
-const searchPos = () => {
|
|
|
- if (services.value.length) {
|
|
|
- services.value.forEach((item) => {
|
|
|
- map.remove(item);
|
|
|
- });
|
|
|
- }
|
|
|
- AMap.plugin(["AMap.PlaceSearch"], function () {
|
|
|
- //构造地点查询类
|
|
|
- var placeSearch = new AMap.PlaceSearch({
|
|
|
- pageSize: 5, // 单页显示结果条数
|
|
|
- pageIndex: 1, // 页码
|
|
|
- city: "岳阳", // 兴趣点城市
|
|
|
- citylimit: true, //是否强制限制在设置的城市内搜索
|
|
|
- // map: map, // 展现结果的地图实例
|
|
|
- // panel: "panel", // 结果列表将在此容器中进行展示。
|
|
|
- autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
|
|
|
- });
|
|
|
- //关键字查询
|
|
|
- // placeSearch.search("公共厕所", function (status, result) {
|
|
|
- // // 查询成功时，result即对应匹配的POI信息
|
|
|
- // console.error(result);
|
|
|
- // var pois = result.poiList.pois;
|
|
|
- // for (var i = 0; i < pois.length; i++) {
|
|
|
- // var poi = pois[i];
|
|
|
- // var marker = [];
|
|
|
- // marker[i] = new AMap.Marker({
|
|
|
- // position: poi.location, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
|
|
|
- // title: poi.name,
|
|
|
- // zIndex: 9999,
|
|
|
- // });
|
|
|
- // // 将创建的点标记添加到已有的地图实例：
|
|
|
- // map.add(marker[i]);
|
|
|
- // marker[i].on("click", () => {
|
|
|
- // console.error(1);
|
|
|
- // });
|
|
|
- // }
|
|
|
- // map.setFitView();
|
|
|
- // });
|
|
|
- console.error(map.getCenter());
|
|
|
-
|
|
|
- var center = map.getCenter(); // 获取当前中心点坐标
|
|
|
- var cpoint = [center.getLng(), center.getLat()]; //中心点坐标
|
|
|
- console.error(cpoint);
|
|
|
- placeSearch.searchNearBy("公共厕所", cpoint, 20000, function (status, result) {
|
|
|
- //查询成功时，result 即对应匹配的 POI 信息
|
|
|
- console.log("services", services.value);
|
|
|
- var pois = result.poiList.pois;
|
|
|
- for (var i = 0; i < pois.length; i++) {
|
|
|
- var poi = pois[i];
|
|
|
- console.log("services", services.value);
|
|
|
- services.value[i] = new AMap.Marker({
|
|
|
- position: poi.location, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
|
|
|
- title: poi.name,
|
|
|
- zIndex: 9999,
|
|
|
- });
|
|
|
- // 将创建的点标记添加到已有的地图实例：
|
|
|
- console.log("services", services.value);
|
|
|
- map.add(services.value[i]);
|
|
|
- // services.value[i].on("click", () => {
|
|
|
- // console.error(1);
|
|
|
- // });
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
-};
|
|
|
|
|
|
const rotateNum = ref(0);
|
|
|
let tabNum = ref(0);
|
|
|
@@ -1020,8 +737,6 @@ onMounted(() => {
|
|
|
getData();
|
|
|
|
|
|
nextTick(() => {
|
|
|
- // initHammer();
|
|
|
- // initTab();
|
|
|
initKeyFrames();
|
|
|
});
|
|
|
});
|
