hookehuyr

feat(map): 添加音频功能并优化地图性能

新增音频API调用,支持在点击景点时获取并显示音频信息。同时优化地图性能,添加WebGL参数和瓦片优化策略
1 +{
2 + "compilerOptions": {
3 + "target": "esnext",
4 + "module": "esnext",
5 + "baseUrl": ".",
6 + "paths": {
7 + "@/*": ["./src/*"]
8 + },
9 + "types": [
10 + "vite/client",
11 + "weixin-js-sdk"
12 + ],
13 + "allowJs": true,
14 + "checkJs": true,
15 + "moduleResolution": "node",
16 + "strict": true,
17 + "esModuleInterop": true,
18 + "skipLibCheck": true,
19 + "forceConsistentCasingInFileNames": true
20 + },
21 + "include": [
22 + "src/**/*.js",
23 + "src/**/*.vue",
24 + "src/**/*.json"
25 + ],
26 + "exclude": [
27 + "node_modules",
28 + "dist",
29 + "**/__tests__/*"
30 + ]
31 +}
1 <!-- 1 <!--
2 * @Date: 2024-09-15 22:08:49 2 * @Date: 2024-09-15 22:08:49
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-03-06 15:04:53 4 + * @LastEditTime: 2025-03-22 21:24:53
5 * @FilePath: /map-demo/src/views/by/info.vue 5 * @FilePath: /map-demo/src/views/by/info.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
26 <div style="display: flex; justify-content: space-between;"> 26 <div style="display: flex; justify-content: space-between;">
27 <p class="info-title">{{ page_details.name }}</p> 27 <p class="info-title">{{ page_details.name }}</p>
28 <div style="display: flex;"> 28 <div style="display: flex;">
29 - <div v-if="page_details.audio" @click="onClickAudioList" style="margin-right: 0.75rem;"> 29 + <div v-if="page_details.show_audio" @click="onClickAudioList" style="margin-right: 0.75rem;">
30 <van-icon v-if="!audio_list_height" name="https://cdn.ipadbiz.cn/bieyuan/map/icon/%E8%AF%AD%E9%9F%B31@3x.png" size="1.65rem" /> 30 <van-icon v-if="!audio_list_height" name="https://cdn.ipadbiz.cn/bieyuan/map/icon/%E8%AF%AD%E9%9F%B31@3x.png" size="1.65rem" />
31 <van-icon v-else name="https://cdn.ipadbiz.cn/bieyuan/map/icon/%E8%AF%AD%E9%9F%B32@3x.png" size="1.65rem" /> 31 <van-icon v-else name="https://cdn.ipadbiz.cn/bieyuan/map/icon/%E8%AF%AD%E9%9F%B32@3x.png" size="1.65rem" />
32 </div> 32 </div>
......
1 <!-- 1 <!--
2 * @Date: 2023-05-19 14:54:27 2 * @Date: 2023-05-19 14:54:27
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-03-06 15:57:00 4 + * @LastEditTime: 2025-03-22 21:23:42
5 * @FilePath: /map-demo/src/views/by/map.vue 5 * @FilePath: /map-demo/src/views/by/map.vue
6 * @Description: 公众地图主体页面 6 * @Description: 公众地图主体页面
7 --> 7 -->
...@@ -105,6 +105,7 @@ import { mapState, mapActions } from 'pinia' ...@@ -105,6 +105,7 @@ import { mapState, mapActions } from 'pinia'
105 import { mainStore } from '@/store' 105 import { mainStore } from '@/store'
106 import { parseQueryString } from '@/utils/tools' 106 import { parseQueryString } from '@/utils/tools'
107 import AMapLoader from '@amap/amap-jsapi-loader' 107 import AMapLoader from '@amap/amap-jsapi-loader'
108 +import { mapAudioAPI } from '@/api/map.js'
108 109
109 const GPS = { 110 const GPS = {
110 PI: 3.14159265358979324, 111 PI: 3.14159265358979324,
...@@ -408,6 +409,14 @@ export default { ...@@ -408,6 +409,14 @@ export default {
408 features: ['bg', 'road'], // 设置地图上显示的元素种类 409 features: ['bg', 'road'], // 设置地图上显示的元素种类
409 animateEnable: false, // 地图平移过程中是否使用动画 410 animateEnable: false, // 地图平移过程中是否使用动画
410 resizeEnable: true, 411 resizeEnable: true,
412 + WebGLParams: { // 新增WebGL优化参数
413 + preserveDrawingBuffer: true,
414 + antialias: true,
415 + stencil: true,
416 + alpha: true
417 + },
418 + optimizeTileStrategy: true, // 开启瓦片优化
419 + autoRendering: false // 关闭自动渲染
411 }); 420 });
412 // 添加地图点击事件 421 // 添加地图点击事件
413 this.map.on("click", this.showInfoClick); 422 this.map.on("click", this.showInfoClick);
...@@ -444,7 +453,7 @@ export default { ...@@ -444,7 +453,7 @@ export default {
444 textMarker.off('click', clickListener) 453 textMarker.off('click', clickListener)
445 } 454 }
446 // 绑定景点的点击事件 - 文字出现才能触发 455 // 绑定景点的点击事件 - 文字出现才能触发
447 - var clickListener1 = textMarker.on('click', (e) => { 456 + var clickListener1 = textMarker.on('click', async (e) => {
448 // 还原样式 457 // 还原样式
449 this.markerSum.forEach(item => { 458 this.markerSum.forEach(item => {
450 if (e.target.hS !== item.hS) { 459 if (e.target.hS !== item.hS) {
...@@ -459,8 +468,18 @@ export default { ...@@ -459,8 +468,18 @@ export default {
459 // textMarker.setText('样式已修改'); 468 // textMarker.setText('样式已修改');
460 // 469 //
461 470
462 - // console.warn(e); 471 + // 先获取音频信息
463 - this.itemInfo = entity_info[i]; 472 + const { data, code } = await mapAudioAPI({ mid: this.$route.query.id, bid: entity_info[i].id });
473 +
474 + // 创建新的对象并设置音频状态
475 + const updatedInfo = JSON.parse(JSON.stringify(entity_info[i]));
476 + if (data.length && updatedInfo.details && updatedInfo.details[0]) {
477 + updatedInfo.details[0].show_audio = true;
478 + }
479 +
480 + // 使用 nextTick 确保视图更新
481 + await this.$nextTick();
482 + this.itemInfo = updatedInfo;
464 483
465 // 详情为空提示 484 // 详情为空提示
466 if (!this.itemInfo.details.length) { 485 if (!this.itemInfo.details.length) {
...@@ -469,7 +488,6 @@ export default { ...@@ -469,7 +488,6 @@ export default {
469 return; 488 return;
470 } 489 }
471 490
472 -
473 // 打开浮动面板 491 // 打开浮动面板
474 this.info_height = (0.65 * window.innerHeight); 492 this.info_height = (0.65 * window.innerHeight);
475 // 浮动面板样式 493 // 浮动面板样式
......