Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
1e4fcd19 1 parent f07268bb

新需求-新增一个活动展示页面

Inline Side-by-side
Showing 6 changed files with 1742 additions and 12 deletions
...@@ -23,6 +23,7 @@ declare module '@vue/runtime-core' { ...@@ -23,6 +23,7 @@ declare module '@vue/runtime-core' {
23 VanField: typeof import('vant/es')['Field'] 23 VanField: typeof import('vant/es')['Field']
24 VanIcon: typeof import('vant/es')['Icon'] 24 VanIcon: typeof import('vant/es')['Icon']
25 VanImage: typeof import('vant/es')['Image'] 25 VanImage: typeof import('vant/es')['Image']
26 + VanPopover: typeof import('vant/es')['Popover']
26 VanPopup: typeof import('vant/es')['Popup'] 27 VanPopup: typeof import('vant/es')['Popup']
27 VanRow: typeof import('vant/es')['Row'] 28 VanRow: typeof import('vant/es')['Row']
28 VRViewer: typeof import('./src/components/VRViewer/index.vue')['default'] 29 VRViewer: typeof import('./src/components/VRViewer/index.vue')['default']
......
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
40 "unplugin-vue-components": "^0.24.1", 40 "unplugin-vue-components": "^0.24.1",
41 "uuid": "^8.3.2", 41 "uuid": "^8.3.2",
42 "v-viewer": "^3.0.11", 42 "v-viewer": "^3.0.11",
43 - "vant": "^4.6.3", 43 + "vant": "^4.8.1",
44 "vconsole": "^3.14.6", 44 "vconsole": "^3.14.6",
45 "video.js": "^8.3.0", 45 "video.js": "^8.3.0",
46 "vite-plugin-dynamic-import": "^0.9.6", 46 "vite-plugin-dynamic-import": "^0.9.6",
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 * @Author: hookehuyr hookehuyr@gmail.com 2 * @Author: hookehuyr hookehuyr@gmail.com
3 * @Date: 2022-05-31 12:06:19 3 * @Date: 2022-05-31 12:06:19
4 * @LastEditors: hookehuyr hookehuyr@gmail.com 4 * @LastEditors: hookehuyr hookehuyr@gmail.com
5 - * @LastEditTime: 2023-07-18 14:02:08 5 + * @LastEditTime: 2023-12-29 14:00:08
6 * @FilePath: /map-demo/src/main.js 6 * @FilePath: /map-demo/src/main.js
7 * @Description: 7 * @Description:
8 */ 8 */
...@@ -40,6 +40,7 @@ import { ...@@ -40,6 +40,7 @@ import {
40 Checkbox, 40 Checkbox,
41 Search, 41 Search,
42 ImagePreview, 42 ImagePreview,
43 + Popover,
43 } from 'vant'; 44 } from 'vant';
44 import router from './router'; 45 import router from './router';
45 import App from './App.vue'; 46 import App from './App.vue';
......
1 /* 1 /*
2 * @Date: 2023-05-29 11:10:19 2 * @Date: 2023-05-29 11:10:19
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-07-27 11:04:44 4 + * @LastEditTime: 2023-12-29 16:44:30
5 * @FilePath: /map-demo/src/route.js 5 * @FilePath: /map-demo/src/route.js
6 * @Description: 文件描述 6 * @Description: 文件描述
7 */ 7 */
...@@ -27,4 +27,11 @@ export default [ ...@@ -27,4 +27,11 @@ export default [
27 title: '内部地图', 27 title: '内部地图',
28 }, 28 },
29 }, 29 },
30 + {
31 + path: '/activity',
32 + component: () => import('@/views/activity.vue'),
33 + meta: {
34 + title: '活动地图',
35 + },
36 + },
30 ]; 37 ];
......
1 +<!--
2 + * @Date: 2023-05-19 14:54:27
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2023-12-29 17:11:38
5 + * @FilePath: /map-demo/src/views/activity.vue
6 + * @Description: 内部地图主体页面
7 +-->
8 +<template>
9 + <div ref="root" style="height: 100vh; position: relative; overflow: hidden;">
10 + <div id="container"></div>
11 + <div class="nav-bar-wrapper">
12 + <div class="hideScrollBar nav-bar-content">
13 + <div v-for="(item, index) in navBarList" :key="index" :class="[isActive === index ? 'checked' : '', 'item']"
14 + @click="setNavLayer(item, index)">
15 + <van-icon :name="isActive === index ? item.icon[1] : item.icon[0]" size="2rem" /><br />
16 + <span style="font-size: 0.85rem; margin-top: 0rem; display: inline-block;">{{ item.name }}</span>
17 + </div>
18 + <div style="width: 4rem;flex-shrink: 0;"></div>
19 + <div style="position: fixed; right: 0; background-color: white; height: 5.5rem; width: 4rem;">
20 + <div style="padding-top: 40%;">
21 + <van-icon v-if="!show_nav_popup" name="arrow-up" @click="handleNavPopup" size="1.15rem" />
22 + <van-icon v-else name="arrow-down" @click="handleNavPopup" size="1.15rem" />
23 + </div>
24 + </div>
25 + </div>
26 +
27 + <van-popup v-model:show="show_nav_popup" position="bottom" duration="0" :overlay="false"
28 + :style="{ padding: '1rem', bottom: '5.5rem' }">
29 + <div style="text-align: left;">
30 + <div v-for="(item, index) in navList" :key="index" @click="handleNavMarker(item)"
31 + style="margin-bottom: 1rem; font-size: 1.15rem;">
32 + <van-icon name="fire-o" color="#965f13" />&nbsp;&nbsp;<span style="color: #000;">{{ item.name }}</span>
33 + </div>
34 + </div>
35 + </van-popup>
36 + </div>
37 + <div class="operate-bar-wrapper">
38 + <div class="box-wrapper">
39 + <div class="item" @click="testFloor">
40 + <span style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">3D</span>
41 +
42 + </div>
43 + <div v-if="open_current_location" class="item" @click="handleLocation(true)">
44 + <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8Dloc@2x.png" size="1.25rem"
45 + style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" />
46 + </div>
47 + <div v-else class="item" @click="handleLocation(false)">
48 + <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8Dloc@2x.png" size="1.25rem"
49 + style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" />
50 + </div>
51 + <van-popover v-model:show="showPopover" @select="onSelect" :actions="actions" placement="right-end">
52 + <template #reference>
53 + <div class="item">
54 + <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E7%BA%BF%E8%B7%AF01.png" size="1.25rem"
55 + style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" />
56 + </div>
57 + </template>
58 + </van-popover>
59 +
60 + <!-- <div v-if="open_safe_route" class="item" @click="handleSafeRoute(true)">
61 + <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E7%BA%BF%E8%B7%AF01.png" size="1.25rem"
62 + style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" />
63 + </div>
64 + <div v-else class="item" @click="handleSafeRoute(false)">
65 + <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E7%BA%BF%E8%B7%AF02.png" size="1.25rem"
66 + style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" />
67 + </div> -->
68 + </div>
69 + </div>
70 +
71 + <!-- <div v-if="!show_walk_route" @click="removeWalkRoute" class="walk-nav-text">
72 + 关闭步行导航
73 + </div> -->
74 + <div v-if="!show_walk_route" @click="removeNavRoute" class="walk-nav-text">
75 + 关闭步行导航
76 + </div>
77 + <div v-if="show_activity_route" @click="removeActivityRoute" class="walk-nav-text">
78 + 关闭活动导航
79 + </div>
80 +
81 + <!-- <van-popup v-model:show="show_popup" position="bottom" :overlay="true" :style="{ padding: '1rem', height: '100%' }">
82 + <van-icon name="cross" size="1.35rem" @click="show_popup = false" style="float: right; color: gray;" />
83 + <div class="popup-wrapper">
84 + <div class="title">
85 + {{ popup_title }}
86 + </div>
87 + <div class="content" v-html="popup_content"></div>
88 + <video-player ref="videoPlayer" style="width: 100%; height: 30vh; margin-top: 1rem;"
89 + poster="https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
90 + :src="video_src" class="video-player vjs-big-play-centered" controls :loop="true" :volume="0.6"></video-player>
91 + </div>
92 + </van-popup> -->
93 +
94 + <van-dialog v-model:show="dialog_show" title="温馨提示">
95 + <div style="padding: 1rem; text-align: center;">{{ dialog_text }}</div>
96 + </van-dialog>
97 +
98 + <!-- 自定义组件InfoWindow，初始时需要隐藏 -->
99 + <!-- 隐藏不要使用v-if，因为我们需要渲染完成后的原生html结构作为信息框的dom对象使用 -->
100 + <InfoWindow v-show="showInfoWindow" ref="infoWindow" :info-window="infoWindow" :info="itemInfo" :rect="rect"
101 + @onLocation="infoWindowLocation" @onPlay="onPlay" @onPause="onPause"></InfoWindow>
102 + <InfoWindowLite v-show="showInfoWindowLite" ref="infoWindowLite" :info-window="infoWindowLite" :info="itemInfo"
103 + :rect="rect" @onLocation="infoWindowLocation"></InfoWindowLite>
104 + <InfoWindowWarn v-show="showInfoWindowWarn" ref="infoWindowWarn" :info-window="infoWindowWarn" :info="itemInfo"
105 + :rect="rect"></InfoWindowWarn>
106 + <InfoWindowYard v-show="showInfoWindowYard" ref="infoWindowYard" :info-window="infoWindowYard" :info="itemInfo"
107 + :rect="rect" @onLocation="infoWindowLocation"></InfoWindowYard>
108 +
109 + <van-popup v-model:show="show_member_popup" position="bottom" :overlay="true" :style="{ padding: '1rem 0', height: '80%', background: '#F7F8FA' }">
110 + <van-icon name="cross" size="1.35rem" @click="closeMember" style="float: right; color: gray; margin-right: 1rem;" />
111 + <div id="member-list" class="popup-wrapper" style="clear: both;">
112 + <div style="color: #965f13; text-align: center; margin-bottom: 1rem; font-size: 1.25rem;">
113 + {{ itemInfo.name }}
114 + </div>
115 + <div v-for="(item, index) in itemInfo.details" :key="index" style="margin-bottom: 1rem;">
116 + <div class="van-cell-group van-cell-group--inset">
117 + <div class="van-cell">
118 + <div class="van-cell__title"> <span>姓名</span> </div>
119 + <div class="van-cell__value"> <span>{{ item.name }}</span></div>
120 + </div>
121 + <div class="van-cell">
122 + <div class="van-cell__title"> <span>手机号</span> </div>
123 + <div class="van-cell__value"> <span><a :href="'tel:' + item.contact" style="color: #965f13;">{{ item.contact }}</a></span></div>
124 + </div>
125 + <div class="van-cell">
126 + <div class="van-cell__title"><span>组别</span></div>
127 + <div class="van-cell__value"><span>{{ item.group }}</span></div>
128 + </div>
129 + </div>
130 + </div>
131 + </div>
132 + </van-popup>
133 +
134 + <van-popup v-model:show="show_floor_popup" position="bottom" :overlay="true" :style="{ height: '100%', background: '#F7F8FA' }">
135 + <Floor @close="onClose"></Floor>
136 + </van-popup>
137 + </div>
138 +</template>
139 +
140 +<script>
141 +// import { mapState } from 'vuex'
142 +import coord from '@/common/map_data'
143 +import map_max from '@/common/max'
144 +import map_yard from '@/common/yard'
145 +import my_router from '@/common/inner_router'
146 +import map_members from '@/common/members'
147 +import _ from 'lodash';
148 +import $ from 'jquery';
149 +//引入定义的信息窗组件
150 +import InfoWindow from '@/components/InfoWindow'
151 +import InfoWindowLite from '@/components/InfoWindowLite'
152 +import InfoWindowWarn from '@/components/InfoWindowWarn'
153 +import InfoWindowYard from '@/components/InfoWindowYard'
154 +import Floor from '@/components/Floor'
155 +import { useRect } from '@vant/use';
156 +import { mapAPI } from '@/api/map.js'
157 +import wx from 'weixin-js-sdk'
158 +
159 +const GPS = {
160 + PI: 3.14159265358979324,
161 + x_pi: 3.14159265358979324 * 3000.0 / 180.0,
162 + delta: function (lat, lon) {
163 + var a = 6378245.0; // a: 卫星椭球坐标投影到平面地图坐标系的投影因子。
164 + var ee = 0.00669342162296594323; // ee: 椭球的偏心率。
165 + var dLat = this.transformLat(lon - 105.0, lat - 35.0);
166 + var dLon = this.transformLon(lon - 105.0, lat - 35.0);
167 + var radLat = lat / 180.0 * this.PI;
168 + var magic = Math.sin(radLat);
169 + magic = 1 - ee * magic * magic;
170 + var sqrtMagic = Math.sqrt(magic);
171 + dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * this.PI);
172 + dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * this.PI);
173 + return {
174 + 'lat': dLat,
175 + 'lon': dLon
176 + };
177 + },
178 + //WGS-84 to GCJ-02
179 + gcj_encrypt: function (wgsLat, wgsLon) {
180 + if (this.outOfChina(wgsLat, wgsLon))
181 + return {
182 + 'lat': wgsLat,
183 + 'lon': wgsLon
184 + };
185 +
186 + var d = this.delta(wgsLat, wgsLon);
187 + return {
188 + 'lat': wgsLat + d.lat,
189 + 'lon': wgsLon + d.lon
190 + };
191 + },
192 + outOfChina: function (lat, lon) {
193 + if (lon < 72.004 || lon > 137.8347)
194 + return true;
195 + if (lat < 0.8293 || lat > 55.8271)
196 + return true;
197 + return false;
198 + },
199 + transformLat: function (x, y) {
200 + var ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
201 + ret += (20.0 * Math.sin(6.0 * x * this.PI) + 20.0 * Math.sin(2.0 * x * this.PI)) * 2.0 / 3.0;
202 + ret += (20.0 * Math.sin(y * this.PI) + 40.0 * Math.sin(y / 3.0 * this.PI)) * 2.0 / 3.0;
203 + ret += (160.0 * Math.sin(y / 12.0 * this.PI) + 320 * Math.sin(y * this.PI / 30.0)) * 2.0 / 3.0;
204 + return ret;
205 + },
206 + transformLon: function (x, y) {
207 + var ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
208 + ret += (20.0 * Math.sin(6.0 * x * this.PI) + 20.0 * Math.sin(2.0 * x * this.PI)) * 2.0 / 3.0;
209 + ret += (20.0 * Math.sin(x * this.PI) + 40.0 * Math.sin(x / 3.0 * this.PI)) * 2.0 / 3.0;
210 + ret += (150.0 * Math.sin(x / 12.0 * this.PI) + 300.0 * Math.sin(x / 30.0 * this.PI)) * 2.0 / 3.0;
211 + return ret;
212 + }
213 +};
214 +
215 +export default {
216 + components: { InfoWindow, InfoWindowLite, InfoWindowWarn, InfoWindowYard, Floor },
217 + data() {
218 + return {
219 + map: '',
220 + // location_options: {
221 + // 'showButton': true, // 是否显示定位按钮
222 + // 'buttonPosition': 'LB', // 定位按钮的位置
223 + // /* LT LB RT RB */
224 + // 'buttonOffset': new AMap.Pixel(10, 20), // 定位按钮距离对应角落的距离
225 + // 'showMarker': true, // 是否显示定位点
226 + // 'markerOptions': { // 自定义定位点样式，同Marker的Options
227 + // 'offset': new AMap.Pixel(-18, -36),
228 + // 'content': '<img src="https://a.amap.com/jsapi_demos/static/resource/img/user.png" style="width:36px;height:36px"/>'
229 + // },
230 + // 'showCircle': true, // 是否显示定位精度圈
231 + // 'circleOptions': { // 定位精度圈的样式
232 + // 'strokeColor': '#0093FF',
233 + // 'noSelect': true,
234 + // 'strokeOpacity': 0.5,
235 + // 'strokeWeight': 1,
236 + // 'fillColor': '#02B0FF',
237 + // 'fillOpacity': 0.25
238 + // },
239 + // enableHighAccuracy: true
240 + // },
241 + geolocation: '',
242 + current_lng: '',
243 + current_lat: '',
244 + current_route: '',
245 + current_safe_route: '',
246 + // show_popup: false,
247 + show_member_popup: false,
248 + dialog_show: false,
249 + dialog_text: '',
250 + walk_route: '',
251 + isActive: 0,
252 + location_marker: '',
253 + // route_marker: [],
254 + route_safe_marker: [],
255 + open_safe_route: true,
256 + show_walk_route: true,
257 + // popup_title: '',
258 + // popup_content: '',
259 + // video_src: '',
260 + show_nav_popup: false,
261 + showInfoWindow: false,
262 + showInfoWindowLite: false,
263 + showInfoWindowWarn: false,
264 + showInfoWindowYard: false,
265 + infoWindow: {},
266 + infoWindowLite: {},
267 + infoWindowWarn: {},
268 + infoWindowYard: {},
269 + itemInfo: {},
270 + navBarList: [],
271 + rect: {},
272 + navList: [],
273 + navKey: '',
274 + markerSum: [], // marker合集
275 + // titleLayerSet: {
276 + // 17: {
277 + // x: [109439, 109441],
278 + // y: [53519, 53521]
279 + // },
280 + // 18: {
281 + // x: [218879, 218882],
282 + // y: [107039, 107042]
283 + // }
284 + // },
285 + defaultZoom: 18,
286 + defaultCenter: [120.587382, 31.313900],
287 + mapTiles: [],
288 + open_current_location: true,
289 + point_range: [ // 景区范围经纬度
290 + [120.585111, 31.316084], [120.585111, 31.316084], [120.589488, 31.313197], [120.585422, 31.313005]
291 + ],
292 + show_floor_popup: false,
293 + showPopover: false,
294 + actions: [
295 + { id: '1', text: '客堂签到' },
296 + { id: '2', text: '三慧楼入住' },
297 + { id: '3', text: '用斋' },
298 + ],
299 + current_activity_route: [],
300 + route_activity_marker: [],
301 + show_activity_route: false,
302 + }
303 + },
304 + async mounted() {
305 + const code = this.$route.query.id;
306 + const { data } = await mapAPI({i: code});
307 + // data.list = data.list.concat(map_yard);
308 + // data.list = data.list.concat(map_members);
309 + this.navBarList = data.list; // 底部导航条
310 + this.mapTiles = data.level; // 获取图层
311 + this.navKey = data.list[0]['id']; // 默认选中 第一个 id
312 + this.navList = data.list.filter(item => item.id === this.navKey)[0]['list']; // 返回默认选中项的实体信息
313 + // 初始化地图
314 + this.initMap();
315 + // this.setMapBoundary();
316 + // 使用之前获取当前地址，判断当前是否能够获取经纬度
317 + wx.getLocation({
318 + type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
319 + success: (res) => {
320 + var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
321 + var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
322 + var speed = res.speed; // 速度，以米/每秒计
323 + var accuracy = res.accuracy; // 位置精度
324 + this.current_lng = GPS.gcj_encrypt(latitude, longitude).lon;
325 + this.current_lat = GPS.gcj_encrypt(latitude, longitude).lat;
326 + },
327 + });
328 + // 设置贴片地图
329 + this.setTitleLayer();
330 + },
331 + watch: {
332 + // show_popup(val) {
333 + // if (!val) {
334 + // this.$nextTick(() => {
335 + // // 弹框关闭时，暂停视频
336 + // $('.vjs-tech')[0].pause();
337 + // $('.vjs-tech')[0].currentTime = 0;
338 + // })
339 + // }
340 + // },
341 + showInfoWindow(val) {
342 + if (val) {
343 + // 元素的大小及其相对于视口的位置
344 + const rect = useRect(this.$refs.root);
345 + this.rect = rect;
346 + }
347 + },
348 + showInfoWindowLite(val) {
349 + if (val) {
350 + // 元素的大小及其相对于视口的位置
351 + const rect = useRect(this.$refs.root);
352 + this.rect = rect;
353 + }
354 + },
355 + showInfoWindowWarn(val) {
356 + if (val) {
357 + // 元素的大小及其相对于视口的位置
358 + const rect = useRect(this.$refs.root);
359 + this.rect = rect;
360 + }
361 + },
362 + showInfoWindowYard(val) {
363 + if (val) {
364 + // 元素的大小及其相对于视口的位置
365 + const rect = useRect(this.$refs.root);
366 + this.rect = rect;
367 + }
368 + }
369 + },
370 + methods: {
371 + initMap() {
372 + // 初始化地图
373 + this.map = new AMap.Map('container', {
374 + viewMode: '2D', // 设置地图模式
375 + turboMode: false,
376 + showIndoorMap: false,
377 + defaultCursor: 'pointer', // 地图默认鼠标样式
378 + showBuildingBlock: false, // 是否展示地图 3D 楼块
379 + zooms: [17, 20], // 地图显示的缩放级别范围, 默认为 [2, 20] ，取值范围 [2 ~ 30]
380 + showLabel: true, // 是否展示地图文字和 POI 信息
381 + zoom: 18, // 设置地图显示的缩放级别
382 + pitch: 0, // 俯仰角度，默认 0，最大值根据地图当前 zoom 级别不断增大，2D地图下无效 。
383 + rotation: 0, // 地图顺时针旋转角度，取值范围 [0-360] ，默认值：0
384 + center: [120.587382, 31.313900], // 设置地图中心点坐标
385 + forceVector: false,
386 + // rotateEnable: true,
387 + layers: [
388 + // new AMap.TileLayer.RoadNet(),
389 + ],
390 + features: ['bg', 'road'], // 设置地图上显示的元素种类
391 + animateEnable: false, // 地图平移过程中是否使用动画
392 + resizeEnable: true,
393 + // WebGLParams: {
394 + // preserveDrawingBuffer: true
395 + // }
396 + });
397 + // 添加地图点击事件
398 + this.map.on("click", this.showInfoClick);
399 + // 加载景点图层
400 + this.loadMaker(this.navKey);
401 + //
402 + this.map.setRotation(6, true);
403 + },
404 + setNavLayer({ id }, index) { // 选择地图图层显示
405 + this.isActive = index;
406 + this.navList = this.navBarList.filter(item => item.id === id)[0]['list']; // 返回默认选中项的实体信息
407 + this.removeLayer();
408 + this.loadMaker(id);
409 + this.closeInfoWindow();
410 + setTimeout(() => {
411 + // 地图zooms调整
412 + this.map.setZoom(this.defaultZoom);
413 + this.map.setZoomAndCenter(this.defaultZoom, this.defaultCenter);
414 + }, 100);
415 + this.removeNavRoute();
416 + // 测试选择人员后轮询
417 + if (id === 'members') {
418 + this.testPolling()
419 + }
420 + },
421 + loadMaker (id) {
422 + var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
423 + const entity_info = this.navBarList.filter(item => item.id === id)[0]['list'];
424 + this.markerSum = [];
425 + _.each(entity_info, (x, i) => {
426 + let marker_icon = '';
427 + if (entity_info[i].window_type === 'warn' && entity_info[i].details.length === 1) { // 如果是预警类型并且内部预警项目只有一个取details第一个icon
428 + marker_icon = entity_info[i].details[0]['icon'];
429 + } else {
430 + marker_icon = entity_info[i].icon;
431 + }
432 + // 创建一个 LabelMarker 实例
433 + var labelMarker = new AMap.LabelMarker({
434 + position: entity_info[i].position,
435 + opacity: 1,
436 + zIndex: 2,
437 + opacity: 0.9,
438 + icon: {
439 + image: marker_icon,
440 + anchor: 'bottom-center',
441 + size: [36, 36],
442 + },
443 + text: {
444 + zooms: [18, 20],
445 + content: entity_info[i].name,
446 + direction: 'top',
447 + offset: [0 , 5],
448 + style: {
449 + padding: [10, 10],
450 + fontSize: 14,
451 + fillColor: '#fff',
452 + strokeWidth: 0,
453 + backgroundColor: '#965f13',
454 + borderWidth: 0,
455 + }
456 + }
457 + });
458 + if (clickListener) {
459 + labelMarker.off('click', clickListener)
460 + }
461 + // 绑定景点的点击事件 - 文字出现才能触发
462 + var clickListener = labelMarker.on('click', (e) => {
463 + // 不同弹框类型
464 + if (entity_info[i].window_type === 'normal') {
465 + this.positionMarker(entity_info[i])
466 + } else if (entity_info[i].window_type === 'lite') {
467 + this.positionLiteMarker(entity_info[i])
468 + } else if (entity_info[i].window_type === 'warn') {
469 + this.positionWarnMarker(entity_info[i])
470 + } else if (entity_info[i].window_type === 'yard') {
471 + this.positionYardMarker(entity_info[i])
472 + } else if (entity_info[i].window_type === 'member') {
473 + this.positionMemberMarker(entity_info[i])
474 + }
475 + })
476 + // 使用LabelsLayer包裹缩放地图时，图标不会自动显示和消失需要配置rank排序
477 + // 创建一个 LabelsLayer 实例来承载 LabelMarker，[LabelsLayer 文档](https://lbs.amap.com/api/jsapi-v2/documentation#labelslayer)
478 + var labelsLayer = new AMap.LabelsLayer({
479 + zooms: [3, 20],
480 + zIndex: 1000,
481 + collision: true, // 该层内标注是否避让
482 + allowCollision: true, // 设置 allowCollision：true，可以让标注避让用户的标注
483 + });
484 + // 将 LabelMarker 实例添加到 LabelsLayer 上
485 + labelsLayer.add(labelMarker);
486 + // 将 LabelsLayer 添加到地图上
487 + this.markerSum.push(labelMarker);
488 + })
489 + this.map.add(this.markerSum);
490 + },
491 + removeLayer () {
492 + this.map.remove(this.markerSum);
493 + },
494 + // setMapBoundary() { // 地图描边
495 + // new AMap.Polygon({
496 + // cursor: 'pointer',
497 + // bubble: true,
498 + // path: [[120.587704, 31.312785], [120.587669, 31.313028], [120.587554, 31.313086], [120.586883, 31.313019], [120.586826, 31.314066], [120.586736, 31.314426], [120.585872, 31.314466], [120.585675, 31.315276], [120.585817, 31.315397], [120.586251, 31.31542], [120.586229, 31.31618], [120.588248, 31.316367], [120.588533, 31.314761], [120.588479, 31.31474], [120.588482, 31.314172], [120.588251, 31.314145], [120.588337, 31.313184], [120.588337, 31.313184], [120.588154, 31.313163], [120.588152, 31.312835]],
499 + // map: this.map,
500 + // fillOpacity: 0.5,
501 + // strokeWeight: 1,
502 + // fillColor: '#CFE7AA'
503 + // });
504 + // },
505 + isPointInRing() { // 是否在景区范围
506 + let isPointInRing = AMap.GeometryUtil.isPointInRing([this.current_lng, this.current_lat], this.point_range);
507 + return isPointInRing
508 + },
509 + setLocation() { // 开启定位服务
510 + // TODO: 暂时屏蔽显示
511 + // 获取失败
512 + // if (!this.current_lng || !this.current_lat) {
513 + // this.dialog_show = true;
514 + // this.dialog_text = '获取经纬度失败';
515 + // }
516 + this.getLocation();
517 + },
518 + handleLocation(status) { // 打开/关闭 当前定位
519 + if (status) {
520 + this.setLocation()
521 + this.open_current_location = false;
522 + } else {
523 + this.removeLocation()
524 + this.open_current_location = true;
525 + }
526 + },
527 + removeLocation() { // 移除定位标记
528 + this.current_lng = '';
529 + this.current_lat = '';
530 + this.map.remove(this.location_marker); // 删除当前定位标记
531 + },
532 + getLocation() { // 获取经纬度
533 + // AMap.plugin(['AMap.Geolocation'], () => {
534 + // this.geolocation = new AMap.Geolocation(this.location_options);
535 + // this.geolocation.getCurrentPosition((status, result) => {
536 + // if (status === 'complete') {
537 + // let lat = result.position.lat;
538 + // let lng = result.position.lng;
539 + // // 行动路线
540 + // if (lng && lat) {
541 + // // this.current_lng = GPS.gcj_encrypt(lat, lng).lon;
542 + // // this.current_lat = GPS.gcj_encrypt(lat, lng).lat;
543 + // this.current_lng = lng;
544 + // this.current_lat = lat;
545 + // }
546 + // } else {
547 + // console.warn('获取失败');
548 + // }
549 + // })
550 + // });
551 + // PC端无法获取定位
552 + // 微信获取地址
553 + wx.getLocation({
554 + type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
555 + success: (res) => {
556 + var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
557 + var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
558 + var speed = res.speed; // 速度，以米/每秒计
559 + var accuracy = res.accuracy; // 位置精度
560 + this.current_lng = GPS.gcj_encrypt(latitude, longitude).lon;
561 + this.current_lat = GPS.gcj_encrypt(latitude, longitude).lat;
562 + // TODO： 测试暂时屏蔽景区提示
563 + // // 判断是否在范围内
564 + // if (!this.isPointInRing()) {
565 + // this.dialog_show = true;
566 + // this.dialog_text = '您不在景区范围内';
567 + // } else {
568 + // // 使用纠正偏移后的地址，打一个定位标记
569 + // this.location_marker = new AMap.LabelMarker({
570 + // icon: {
571 + // image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A.png',
572 + // anchor: 'bottom-center',
573 + // size: [36, 36],
574 + // },
575 + // position: new AMap.LngLat(this.current_lng, this.current_lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
576 + // });
577 + // this.map.add(this.location_marker);
578 + // // 定位到当前位置中心
579 + // this.map.setZoomAndCenter(this.zoom, [this.current_lng, this.current_lat]);
580 + // }
581 + // 使用纠正偏移后的地址，打一个定位标记
582 + this.location_marker = new AMap.LabelMarker({
583 + icon: {
584 + image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A.png',
585 + anchor: 'bottom-center',
586 + size: [36, 36],
587 + },
588 + position: new AMap.LngLat(this.current_lng, this.current_lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
589 + });
590 + this.map.add(this.location_marker);
591 + // 定位到当前位置中心
592 + this.map.setZoomAndCenter(this.zoom, [this.current_lng, this.current_lat]);
593 + },
594 + complete: () => {
595 + // 获取失败
596 + if (!this.current_lng || !this.current_lat) {
597 + this.dialog_show = true;
598 + this.dialog_text = '获取经纬度失败';
599 + }
600 + },
601 + });
602 + },
603 + setZoom(type) { // 设置放大缩小地图
604 + const zoom = this.map.getZoom();
605 + if (type === 'plus') {
606 + this.map.setZoom(zoom + 1)
607 + }
608 + if (type === 'minus') {
609 + this.map.setZoom(zoom - 1)
610 + }
611 + },
612 + addSafeRoute() { // 新增路径
613 + // 行动路线
614 + var path = [
615 + [120.587645, 31.314833],
616 + [120.587709, 31.314338],
617 + [120.588211, 31.314377],
618 + ];
619 + // 生成折线地图路径
620 + this.current_safe_route = new AMap.Polyline({
621 + path,
622 + isOutline: true,
623 + outlineColor: '#fba601',
624 + borderWeight: 1,
625 + strokeColor: '#fba601',
626 + strokeOpacity: 1,
627 + strokeWeight: 3,
628 + // 折线样式还支持 'dashed'
629 + strokeStyle: 'solid',
630 + // strokeStyle是dashed时有效
631 + strokeDasharray: [10, 5],
632 + lineJoin: 'round',
633 + lineCap: 'round',
634 + zIndex: 50
635 + })
636 + this.map.add([this.current_safe_route]);
637 + // 设置起始点标记
638 + var marker1 = new AMap.Marker({
639 + icon: new AMap.Icon({
640 + image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A.png',
641 + size: new AMap.Size(40, 40),
642 + // 图标所用图片大小
643 + imageSize: new AMap.Size(40, 40),
644 + // 图标取图偏移量
645 + imageOffset: new AMap.Pixel(0, 0)
646 + }),
647 + position: new AMap.LngLat(path[0][0], path[0][1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
648 + anchor: 'bottom-center',
649 + offset: new AMap.Pixel(0, 0)
650 + });
651 + marker1.setLabel({
652 + direction: 'right',
653 + offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
654 + content: "<div class='info'>起点</div>", //设置文本标注内容
655 + });
656 + var marker2 = new AMap.Marker({
657 + icon: new AMap.Icon({
658 + image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A.png',
659 + size: new AMap.Size(40, 40),
660 + // 图标所用图片大小
661 + imageSize: new AMap.Size(40, 40),
662 + // 图标取图偏移量
663 + imageOffset: new AMap.Pixel(0, 0)
664 + }),
665 + position: new AMap.LngLat(path[path.length - 1][0], path[path.length - 1][1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
666 + anchor: 'bottom-center',
667 + offset: new AMap.Pixel(0, 0)
668 + });
669 + marker2.setLabel({
670 + direction: 'right',
671 + offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
672 + content: "<div class='info'>终点</div>", //设置文本标注内容
673 + });
674 + // 新增逃生路线标记
675 + this.route_safe_marker = [marker1, marker2]
676 + this.map.add(this.route_safe_marker);
677 + },
678 + removeSafeRoute() { // 移除地图路线
679 + this.map.remove([this.current_safe_route]); // 删除地图折线
680 + this.map.remove(this.route_safe_marker); // 删除起始点标记
681 + },
682 + // addNavRoute (path) { // 新增导航路径
683 + // // 生成折线地图路径
684 + // this.current_route = new AMap.Polyline({
685 + // path,
686 + // isOutline: true,
687 + // outlineColor: '#42a5f5',
688 + // borderWeight: 1,
689 + // strokeColor: '#42a5f5',
690 + // strokeOpacity: 1,
691 + // strokeWeight: 2,
692 + // // 折线样式还支持 'dashed'
693 + // strokeStyle: 'dashed',
694 + // // strokeStyle是dashed时有效
695 + // strokeDasharray: [10, 5],
696 + // lineJoin: 'round',
697 + // lineCap: 'round',
698 + // zIndex: 50
699 + // })
700 + // this.map.add([this.current_route]);
701 + // // 设置起始点标记
702 + // var marker1 = new AMap.Marker({
703 + // icon: new AMap.Icon({
704 + // image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8D-%E5%B0%8Fz@2x.png',
705 + // size: new AMap.Size(40, 40),
706 + // // 图标所用图片大小
707 + // imageSize: new AMap.Size(40, 40),
708 + // // 图标取图偏移量
709 + // imageOffset: new AMap.Pixel(0, 0)
710 + // }),
711 + // position: new AMap.LngLat(path[0][0], path[0][1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
712 + // anchor: 'bottom-center',
713 + // offset: new AMap.Pixel(0, 0)
714 + // });
715 + // marker1.setLabel({
716 + // direction: 'right',
717 + // offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
718 + // content: "<div class='info'>终点</div>", //设置文本标注内容
719 + // });
720 + // var marker2 = new AMap.Marker({
721 + // icon: new AMap.Icon({
722 + // image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8D-%E5%B0%8Fz@2x.png',
723 + // size: new AMap.Size(40, 40),
724 + // // 图标所用图片大小
725 + // imageSize: new AMap.Size(40, 40),
726 + // // 图标取图偏移量
727 + // imageOffset: new AMap.Pixel(0, 0)
728 + // }),
729 + // position: new AMap.LngLat(path[path.length - 1][0], path[path.length - 1][1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
730 + // anchor: 'bottom-center',
731 + // offset: new AMap.Pixel(0, 0)
732 + // });
733 + // marker2.setLabel({
734 + // direction: 'right',
735 + // offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
736 + // content: "<div class='info'>起点</div>", //设置文本标注内容
737 + // });
738 + // // 新增逃生路线标记
739 + // this.route_marker = [marker1, marker2]
740 + // this.map.add(this.route_marker);
741 + // // 关闭导航提示
742 + // this.show_walk_route = false;
743 + // },
744 + addNavRoute(position) { // 新增导航路径
745 + function arraysEqual(a, b) {
746 + // 如果两个数组的长度不等，则它们不相等
747 + if (a.length !== b.length) {
748 + return false;
749 + }
750 +
751 + // 比较每个元素是否相等
752 + return a.every(function (element, index) {
753 + return element == b[index];
754 + });
755 + }
756 + let array = []; // 导航点所在路径集合
757 + my_router.forEach((route) => {
758 + route.path.forEach((item) => {
759 + if (arraysEqual(position, item)) {
760 + array.push(route);
761 + return false;
762 + }
763 + })
764 + });
765 +
766 + let lngLat = [120.587229, 31.315182];
767 + // let lngLat = [120.587234, 31.314147]; // 左边
768 + // let lngLat = [120.588178, 31.314396]; // 右边
769 + // TAG：生成导航路线
770 + // 构建路线结构
771 + // 如果建筑不在导航路径上面需要单独处理, 直接查询建筑离哪个导航路径最近显示出来
772 + const route_obj = array.length ? array : my_router;
773 + if (!array.length) {
774 + lngLat = position; // 当前导航建筑经纬度
775 + }
776 + // 计算距离最近的路径
777 + route_obj.forEach((line) => {
778 + line.distance = AMap.GeometryUtil.distanceToLine(lngLat, line.path);
779 + });
780 + let min = Math.min(...route_obj.map((line) => line.distance))
781 + let result = route_obj.filter((line) => line.distance === min);
782 + // 标记示例
783 + this.current_route = new AMap.Polyline({
784 + path: result[0]['path'],
785 + isOutline: true,
786 + outlineColor: '#42a5f5',
787 + borderWeight: 1,
788 + strokeColor: '#42a5f5',
789 + strokeOpacity: 1,
790 + strokeWeight: 2,
791 + // 折线样式还支持 'dashed'
792 + strokeStyle: 'dashed',
793 + // strokeStyle是dashed时有效
794 + strokeDasharray: [10, 5],
795 + lineJoin: 'round',
796 + lineCap: 'round',
797 + zIndex: 50
798 + })
799 + this.map.add([this.current_route]);
800 + // 获取定位打标记
801 + this.setLocation();
802 + // TEMP：临时显示测试地址
803 + // this.location_marker = new AMap.LabelMarker({
804 + // icon: {
805 + // image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A.png',
806 + // anchor: 'bottom-center',
807 + // size: [36, 36],
808 + // },
809 + // position: new AMap.LngLat(...lngLat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
810 + // });
811 + this.map.add(this.location_marker);
812 + // 定位到当前位置中心
813 + this.map.setZoomAndCenter(this.zoom, [120.587706, 31.314197]);
814 + // this.location_marker = new AMap.Marker({
815 + // icon: new AMap.Icon({
816 + // image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A.png',
817 + // size: new AMap.Size(40, 40),
818 + // // 图标所用图片大小
819 + // imageSize: new AMap.Size(40, 40),
820 + // // 图标取图偏移量
821 + // imageOffset: new AMap.Pixel(0, 0)
822 + // }),
823 + // position: new AMap.LngLat(...lngLat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
824 + // anchor: 'bottom-center',
825 + // offset: new AMap.Pixel(0, 0)
826 + // });
827 + // this.map.add([this.location_marker]);
828 + // 关闭导航提示
829 + this.show_walk_route = false;
830 + },
831 + removeNavRoute() { // 移除地图路线
832 + this.map.remove([this.current_route]); // 删除地图折线
833 + // this.map.remove(this.route_marker); // 删除起始点标记
834 + this.map.remove(this.location_marker); // 删除当前定位标记
835 + // 关闭导航提示
836 + this.show_walk_route = true;
837 + },
838 + computedMapSource(x, y, z) { // 根据图层信息生成图层实际地址
839 + for (const id in this.mapTiles) {
840 + if (z == id) {
841 + const scope = this.mapTiles[id];
842 + return scope[`${x}-${y}`]
843 + }
844 + }
845 + },
846 + setTitleLayer() { // 生成瓦片图
847 + // 获取瓦片图渲染范围
848 + function getFirstProperty(obj) {
849 + for (var prop in obj) {
850 + return prop;
851 + }
852 + }
853 + function getLastProperty(obj) {
854 + var props = [];
855 + for (var prop in obj) {
856 + props.push(prop);
857 + }
858 + return props[props.length - 1];
859 + }
860 + let obj_scope = {};
861 + for (const key in this.mapTiles) {
862 + const element = this.mapTiles[key];
863 + let first = getFirstProperty(element).split('-');
864 + let last = getLastProperty(element).split('-');
865 + obj_scope[key] = {
866 + x: [first[0], last[0]],
867 + y: [first[1], last[1]]
868 + }
869 + }
870 + const _this = this;
871 + var layer = new AMap.TileLayer.Flexible({
872 + cacheSize: 50,
873 + opacity: 1,
874 + zIndex: 100,
875 + createTile: function (x, y, z, success, fail) {
876 + // 控制地图等级显示图片范围-过滤不显示的图层渲染
877 + for (const id in obj_scope) {
878 + if (z == id) {
879 + const scope = obj_scope[id];
880 + if (x < scope.x[0] || x > scope.x[1]) {
881 + fail()
882 + return;
883 + }
884 + if (y < scope.y[0] || y > scope.y[1]) {
885 + fail()
886 + return;
887 + }
888 + }
889 + }
890 +
891 + var img = document.createElement('img');
892 + img.onload = function () {
893 + success(img)
894 + };
895 + img.crossOrigin = "anonymous";// 必须添加，同时图片要有跨域头
896 + img.onerror = function () {
897 + fail()
898 + };
899 +
900 + // img.src = `images/tiles/${z}/${x}_${y}.png`;
901 + img.src = _this.computedMapSource(x, y, z);
902 + },
903 + });
904 +
905 + this.map.addLayer(layer);
906 +
907 + // Canvas作为切片
908 + var layer1 = new AMap.TileLayer.Flexible({
909 + // tileSize: 128,
910 + cacheSize: 300,
911 + zIndex: 200,
912 + createTile: function (x, y, z, success, fail) {
913 + var c = document.createElement('canvas');
914 + c.width = c.height = 256;
915 +
916 + var cxt = c.getContext("2d");
917 + cxt.font = "15px Verdana";
918 + cxt.fillStyle = "#ff0000";
919 + cxt.strokeStyle = "#FF0000";
920 + cxt.strokeRect(0, 0, 256, 256);
921 + cxt.fillText('(' + [x, y, z].join(',') + ')', 10, 30);
922 +
923 + // 通知API切片创建完成
924 + success(c);
925 + }
926 + });
927 +
928 + // layer1.setMap(this.map);
929 +
930 + // 只显示相应区域，移动会回到选定范围
931 + // this.lockMapBounds()
932 +
933 + },
934 + // 限制地图范围
935 + lockMapBounds() {
936 + // var bounds = this.map.getBounds();
937 + var myBounds = new AMap.Bounds(
938 + [120.583246, 31.31645],
939 + [120.589973, 31.311949]
940 + );
941 +
942 + this.map.setLimitBounds(myBounds);
943 + },
944 + showInfoClick(e) {
945 + // console.log(e);
946 + var zoom = this.map.getZoom(); //获取当前地图级别
947 + // var text =
948 + // "您在 [" +
949 + // e.lnglat.getLng() +
950 + // "," +
951 + // e.lnglat.getLat() +
952 + // "] 的位置单击了地图！当前层级" +
953 + // zoom;
954 + var text =
955 + "[" +
956 + e.lnglat.getLng() +
957 + "," +
958 + e.lnglat.getLat() +
959 + "],"
960 + console.log(text);
961 + // 点击空白处 关闭弹框
962 + this.closeInfoWindow();
963 + // 关闭弹出底部导航弹框
964 + this.show_nav_popup = false;
965 + },
966 + // setWalkRoute(start = { lng: 120.587799, lat: 31.313276 }, end = { lng: 120.587912, lat: 31.315169 }) {
967 + // //步行导航
968 + // let walking_CallBack = (result) => {
969 + // if (result.type === 'complete') {
970 + // console.warn(result);
971 + // console.warn('绘制步行路线完成');
972 + // } else {
973 + // console.error('步行路线数据查询失败' + result);
974 + // }
975 + // }
976 + // AMap.plugin(["AMap.Walking"], () => { //加载步行导航插件
977 + // this.walk_route = new AMap.Walking({
978 + // map: this.map,
979 + // }); //构造步行导航类
980 + // AMap.Event.addListener(this.walk_route, "complete", walking_CallBack); //返回导航查询结果
981 + // //根据起、终点坐标规划步行路线
982 + // this.walk_route.search(new AMap.LngLat(start.lng, start.lat), new AMap.LngLat(end.lng, end.lat));
983 + // });
984 + // this.show_walk_route = false;
985 + // },
986 + // removeWalkRoute() {
987 + // this.walk_route.clear();
988 + // this.show_walk_route = true;
989 + // },
990 + infoWindowLocation(path) { // 监听前往按钮回调
991 + // if (this.walk_route) { // 清除前一条步行导航
992 + // this.walk_route.clear();
993 + // }
994 + // 测试
995 + this.closeInfoWindow(); // 关闭弹框
996 + // this.setWalkRoute({ lng: 120.59014, lat: 31.310306 }, { lng: position[0], lat: position[1] });
997 + if (this.current_route) { // 清除前一条步行导航
998 + this.map.remove([this.current_route]); // 删除地图折线
999 + // this.map.remove(this.route_marker); // 删除起始点标记
1000 + this.map.remove(this.location_marker); // 删除当前定位标记
1001 + }
1002 + if (path.length) {
1003 + this.addNavRoute([+path[0], +path[1]])
1004 + } else {
1005 + this.dialog_show = true;
1006 + this.dialog_text = '内部设施';
1007 + }
1008 + },
1009 + handleSafeRoute(status) { // 打开/关闭逃生路线线
1010 + if (status) {
1011 + this.addSafeRoute()
1012 + this.open_safe_route = false;
1013 + } else {
1014 + this.removeSafeRoute()
1015 + this.open_safe_route = true;
1016 + }
1017 + },
1018 + handleNavPopup() {
1019 + this.show_nav_popup = !this.show_nav_popup
1020 + },
1021 + handleNavMarker (item) { // 底部列表点击跳转弹框判断
1022 + if (item.window_type === 'normal') {
1023 + this.positionMarker(item)
1024 + } else if (item.window_type === 'lite') {
1025 + this.positionLiteMarker(item)
1026 + } else if (item.window_type === 'warn') {
1027 + this.positionWarnMarker(item)
1028 + } else if (item.window_type === 'yard') {
1029 + this.positionYardMarker(item)
1030 + } else if (item.window_type === 'member') {
1031 + this.positionMemberMarker(item)
1032 + }
1033 + },
1034 + positionMarker(item) {
1035 + // 点击后创建自定义信息窗口
1036 + this.setInfoWindows(item)
1037 + // 把地图中心点设置为当前点击的标记点
1038 + this.map.setZoomAndCenter(this.zoom, item.position);
1039 + //
1040 + this.show_nav_popup = false;
1041 + // 禁止缩放
1042 + this.map.setStatus({
1043 + zoomEnable: false
1044 + });
1045 + },
1046 + positionLiteMarker(item) {
1047 + // 点击后创建自定义信息窗口
1048 + this.setInfoWindowsLite(item)
1049 + // 把地图中心点设置为当前点击的标记点
1050 + this.map.setZoomAndCenter(this.zoom, item.position);
1051 + //
1052 + this.show_nav_popup = false;
1053 + // 禁止缩放
1054 + this.map.setStatus({
1055 + zoomEnable: false
1056 + });
1057 + },
1058 + positionWarnMarker(item) {
1059 + // 点击后创建自定义信息窗口
1060 + this.setInfoWindowsWarn(item)
1061 + // 把地图中心点设置为当前点击的标记点
1062 + this.map.setZoomAndCenter(this.zoom, [item.position[0], item.position[1] + 0.000300]);
1063 + //
1064 + this.show_nav_popup = false;
1065 + // 禁止缩放
1066 + this.map.setStatus({
1067 + zoomEnable: false
1068 + });
1069 + },
1070 + positionYardMarker(item) {
1071 + // 点击后创建自定义信息窗口
1072 + this.setInfoWindowsYard(item)
1073 + // 把地图中心点设置为当前点击的标记点
1074 + this.map.setZoomAndCenter(this.zoom, [item.position[0], item.position[1] + 0.000300]);
1075 + //
1076 + this.show_nav_popup = false;
1077 + // 禁止缩放
1078 + this.map.setStatus({
1079 + zoomEnable: false
1080 + });
1081 + },
1082 + positionMemberMarker(item) {
1083 + // 点击后出现弹框
1084 + this.setInfoWindowsMember(item)
1085 + // 把地图中心点设置为当前点击的标记点
1086 + this.map.setZoomAndCenter(this.zoom, [item.position[0], item.position[1] + 0.000300]);
1087 + //
1088 + this.show_nav_popup = false;
1089 + },
1090 + setInfoWindows(item) {
1091 + // 此时需要把组件的样式设置为可见
1092 + this.showInfoWindow = true
1093 + // 设置marker头部的标题信息窗口
1094 + const infoWindow = new AMap.InfoWindow({
1095 + // 使用自定义窗体
1096 + isCustom: true,
1097 + // 只有当组件渲染完毕后，通过$el才能拿到原生的dom对象
1098 + content: this.$refs['infoWindow'].$el,
1099 + // 设置定位偏移量
1100 + offset: new AMap.Pixel(0, -30),
1101 + })
1102 + this.infoWindow = infoWindow;
1103 + this.itemInfo = item;
1104 + this.itemInfo.map = this.map;
1105 + this.itemInfo.LngLat = {
1106 + lng: this.current_lng,
1107 + lat: this.current_lat,
1108 + }
1109 + // 信息窗口打开
1110 + infoWindow.open(this.map, item.position)
1111 + },
1112 + setInfoWindowsLite(item) {
1113 + // 此时需要把组件的样式设置为可见
1114 + this.showInfoWindowLite = true
1115 + // 设置marker头部的标题信息窗口
1116 + const infoWindowLite = new AMap.InfoWindow({
1117 + // 使用自定义窗体
1118 + isCustom: true,
1119 + // 只有当组件渲染完毕后，通过$el才能拿到原生的dom对象
1120 + content: this.$refs['infoWindowLite'].$el,
1121 + // 设置定位偏移量
1122 + offset: new AMap.Pixel(0, -30),
1123 + })
1124 + this.infoWindowLite = infoWindowLite;
1125 + this.itemInfo = item;
1126 + this.itemInfo.map = this.map;
1127 + this.itemInfo.LngLat = {
1128 + lng: this.current_lng,
1129 + lat: this.current_lat,
1130 + }
1131 + // 信息窗口打开
1132 + infoWindowLite.open(this.map, item.position)
1133 + },
1134 + setInfoWindowsWarn(item) {
1135 + // 此时需要把组件的样式设置为可见
1136 + this.showInfoWindowWarn = true
1137 + // 设置marker头部的标题信息窗口
1138 + const infoWindowWarn = new AMap.InfoWindow({
1139 + // 使用自定义窗体
1140 + isCustom: true,
1141 + // 只有当组件渲染完毕后，通过$el才能拿到原生的dom对象
1142 + content: this.$refs['infoWindowWarn'].$el,
1143 + // 设置定位偏移量
1144 + offset: new AMap.Pixel(0, -30),
1145 + })
1146 + this.infoWindowWarn = infoWindowWarn;
1147 + this.itemInfo = item;
1148 + this.itemInfo.map = this.map;
1149 + this.itemInfo.LngLat = {
1150 + lng: this.current_lng,
1151 + lat: this.current_lat,
1152 + }
1153 + // 信息窗口打开
1154 + infoWindowWarn.open(this.map, item.position);
1155 + },
1156 + setInfoWindowsYard(item) {
1157 + // 此时需要把组件的样式设置为可见
1158 + this.showInfoWindowYard = true
1159 + // 设置marker头部的标题信息窗口
1160 + const infoWindowYard = new AMap.InfoWindow({
1161 + // 使用自定义窗体
1162 + isCustom: true,
1163 + // 只有当组件渲染完毕后，通过$el才能拿到原生的dom对象
1164 + content: this.$refs['infoWindowYard'].$el,
1165 + // 设置定位偏移量
1166 + offset: new AMap.Pixel(0, -30),
1167 + })
1168 + this.infoWindowYard = infoWindowYard;
1169 + this.itemInfo = item;
1170 + this.itemInfo.map = this.map;
1171 + this.itemInfo.LngLat = {
1172 + lng: this.current_lng,
1173 + lat: this.current_lat,
1174 + }
1175 + // 信息窗口打开
1176 + infoWindowYard.open(this.map, item.position);
1177 + },
1178 + setInfoWindowsMember(item) {
1179 + this.itemInfo = item;
1180 + this.show_member_popup = true;
1181 + // 列表滚动到顶部
1182 + setTimeout(() => {
1183 + $('.van-popup').animate({ scrollTop: 0 }, 100);
1184 + }, 100);
1185 + },
1186 + closeInfoWindow() {
1187 + if (this.showInfoWindow) {
1188 + this.$refs['infoWindow'].close();
1189 + }
1190 + if (this.showInfoWindowLite) {
1191 + this.$refs['infoWindowLite'].close();
1192 + }
1193 + if (this.showInfoWindowWarn) {
1194 + this.$refs['infoWindowWarn'].close();
1195 + }
1196 + if (this.showInfoWindowYard) {
1197 + this.$refs['infoWindowYard'].close();
1198 + }
1199 + // 打开缩放
1200 + this.map.setStatus({
1201 + zoomEnable: true
1202 + });
1203 + },
1204 + closeMember () {
1205 + this.show_member_popup = false;
1206 + },
1207 + onPlay (name) {
1208 + // var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
1209 + // _.each(coord.spotInfo, (x, i) => {
1210 + // var marker = new AMap.ElasticMarker({
1211 + // position: coord.spotInfo[i].position,
1212 + // zooms: [17, 19],
1213 + // styles: [{
1214 + // icon: {
1215 + // img: x.name !== name ?coord.spotInfo[i].icon : 'https://cdn.ipadbiz.cn/xys/map/%E6%92%AD%E6%94%BE%E6%9A%82%E5%81%9C@2x.png',
1216 + // size: [28, 28], // 可见区域的大小
1217 + // anchor: 'bottom-center', // 锚点
1218 + // fitZoom: 14, // 最合适的级别
1219 + // scaleFactor: 2, // 地图放大一级的缩放比例系数
1220 + // maxScale: 1.4, // 最大放大比例
1221 + // minScale: 0.8 // 最小放大比例
1222 + // },
1223 + // label: {
1224 + // content: coord.spotInfo[i].name,
1225 + // position: 'TM',
1226 + // // position: 'BM',
1227 + // // offset: new AMap.Pixel(0, 10),
1228 + // minZoom: 18
1229 + // }
1230 + // }, {
1231 + // icon: {},
1232 + // label: {}
1233 + // }],
1234 + // zoomStyleMapping: coord.spotInfo[i].zoom ? coord.spotInfo[i].zoom : zoomStyleMapping
1235 + // });
1236 + // if (clickListener) {
1237 + // marker.off('click', clickListener)
1238 + // }
1239 + // // 绑定景点的点击事件 - 文字出现才能触发
1240 + // var clickListener = marker.on('click', (e) => {
1241 + // this.positionMarker(coord.spotInfo[i]);
1242 + // })
1243 +
1244 + // this.spotInfo.push(marker);
1245 + // })
1246 + // this.map.add(this.spotInfo);
1247 + },
1248 + onPause (name) {},
1249 + testFloor () {
1250 + this.show_floor_popup = true;
1251 + },
1252 + onClose () {
1253 + this.show_floor_popup = false;
1254 + },
1255 + testPolling () { // 测试轮询
1256 + let index = 1; // 控制何时停止轮询
1257 + let timer = 0; // 实现中断轮询
1258 +
1259 + // syncPromise 模拟异步请求
1260 + const syncPromise = () => {
1261 + return new Promise(resolve => {
1262 + setTimeout(() => {
1263 + console.log(`第 ${index} 次请求`);
1264 + resolve(index < 5 ? true : false); // 当进行 5 次异步请求后，会返回 false 表示拿到数据分析结果，停止数据查询轮询：
1265 + index++;
1266 + }, 50);
1267 + });
1268 + }
1269 +
1270 + // pollingPromise 作为 sleep 睡眠函数使用，去控制轮询的间隔时间，并在指定时间执行异步请求
1271 + const pollingPromise = () => {
1272 + return new Promise(resolve => {
1273 + timer = setTimeout(async () => {
1274 + const result = await syncPromise();
1275 + resolve(result);
1276 + }, 1000);
1277 + });
1278 + }
1279 +
1280 + // startPolling 作为开始轮询的入口
1281 + const startPolling = async () => {
1282 + // 清除进行中的轮询，重新开启计时轮询
1283 + clearTimeout(timer); // !!! 注意：清除计时器后，会导致整个 async/await 链路中断，若计时器的位置下方还存在代码，将不会执行。
1284 + index = 1;
1285 + // 立刻执行一次异步请求
1286 + let needPolling = await syncPromise();
1287 + // 根据异步请求结果，判断是否需要开启计时轮询
1288 + while (needPolling) {
1289 + needPolling = await pollingPromise();
1290 + }
1291 + console.log('轮询请求处理完成！'); // 若异步请求被 clearTimeout(timer)，这里不会被执行打印输出。
1292 + }
1293 +
1294 + const start = async () => {
1295 + await startPolling();
1296 + console.log('若异步请求被 clearTimeout(timer)，这里将不会被执行');
1297 + }
1298 +
1299 + start();
1300 + },
1301 + onSelect (action) {
1302 + let path = [];
1303 + let paths = [];
1304 + // 客堂签到
1305 + if (action.id === '1') {
1306 + path = [
1307 + [120.588218,31.314218],
1308 + [120.587884,31.314201],
1309 + [120.587861,31.314404],
1310 + [120.587851,31.314595],
1311 + [120.587903,31.314654],
1312 + ];
1313 + }
1314 + // 三慧楼入住
1315 + if (action.id === '2') {
1316 + path = [
1317 + [120.587867,31.314676],
1318 + [120.587809,31.314803],
1319 + [120.587449,31.314765],
1320 + [120.587421,31.314933],
1321 + [120.587233,31.314997],
1322 + [120.587192,31.315596],
1323 + [120.58661,31.315508],
1324 + [120.586127,31.31536],
1325 + [120.585706,31.315334],
1326 + [120.585623,31.31539],
1327 + ];
1328 + }
1329 + // 用斋
1330 + if (action.id === '3') {
1331 + paths = [
1332 + [
1333 + [120.585639,31.315347],
1334 + [120.58587,31.315323],
1335 + [120.586367,31.315471],
1336 + [120.587187,31.31559],
1337 + [120.587241,31.315019],
1338 + [120.587344,31.314953],
1339 + [120.587427,31.314914],
1340 + [120.587454,31.314761],
1341 + [120.587823,31.314803],
1342 + [120.587847,31.314736],
1343 + [120.588217,31.314775],
1344 + ],
1345 + [
1346 + [120.585639,31.315347],
1347 + [120.58587,31.315323],
1348 + [120.586367,31.315471],
1349 + [120.587187,31.31559],
1350 + [120.587565,31.315635],
1351 + [120.587922,31.315674],
1352 + [120.587929,31.315467],
1353 + [120.588114,31.315472],
1354 + [120.588171,31.315006],
1355 + [120.588217,31.314775],
1356 + ]
1357 + ];
1358 + }
1359 + this.show_activity_route = true;
1360 + //
1361 + if (path.length) {
1362 + this.addActivityRoute(path);
1363 + }
1364 + if (paths.length) {
1365 + this.addActivityRoutes(paths);
1366 + }
1367 + },
1368 + addActivityRoute(path) { // 新增路径
1369 + this.map.remove([...this.current_activity_route]); // 删除地图折线
1370 + this.map.remove(this.route_activity_marker); // 删除起始点标记
1371 + // 生成折线地图路径
1372 + this.current_activity_route = [new AMap.Polyline({
1373 + path,
1374 + isOutline: true,
1375 + outlineColor: '#3274EE',
1376 + borderWeight: 1,
1377 + strokeColor: '#3274EE',
1378 + strokeOpacity: 1,
1379 + strokeWeight: 3,
1380 + // 折线样式还支持 'dashed'
1381 + // strokeStyle: 'solid',
1382 + strokeStyle: 'dashed',
1383 + // strokeStyle是dashed时有效
1384 + strokeDasharray: [10, 5],
1385 + lineJoin: 'round',
1386 + lineCap: 'round',
1387 + zIndex: 50
1388 + })]
1389 + this.map.add([...this.current_activity_route]);
1390 + // 设置起始点标记
1391 + var marker1 = new AMap.Marker({
1392 + icon: new AMap.Icon({
1393 + image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A.png',
1394 + size: new AMap.Size(40, 40),
1395 + // 图标所用图片大小
1396 + imageSize: new AMap.Size(40, 40),
1397 + // 图标取图偏移量
1398 + imageOffset: new AMap.Pixel(0, 0)
1399 + }),
1400 + position: new AMap.LngLat(path[0][0], path[0][1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
1401 + anchor: 'bottom-center',
1402 + offset: new AMap.Pixel(0, 0)
1403 + });
1404 + marker1.setLabel({
1405 + direction: 'right',
1406 + offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
1407 + content: "<div class='info'>起点</div>", //设置文本标注内容
1408 + });
1409 + var marker2 = new AMap.Marker({
1410 + icon: new AMap.Icon({
1411 + image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A.png',
1412 + size: new AMap.Size(40, 40),
1413 + // 图标所用图片大小
1414 + imageSize: new AMap.Size(40, 40),
1415 + // 图标取图偏移量
1416 + imageOffset: new AMap.Pixel(0, 0)
1417 + }),
1418 + position: new AMap.LngLat(path[path.length - 1][0], path[path.length - 1][1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
1419 + anchor: 'bottom-center',
1420 + offset: new AMap.Pixel(0, 0)
1421 + });
1422 + marker2.setLabel({
1423 + direction: 'right',
1424 + offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
1425 + content: "<div class='info'>终点</div>", //设置文本标注内容
1426 + });
1427 + // 新增逃生路线标记
1428 + this.route_activity_marker = [marker1, marker2]
1429 + this.map.add(this.route_activity_marker);
1430 + },
1431 + addActivityRoutes(paths) { // 新增路径
1432 + this.map.remove([...this.current_activity_route]); // 删除地图折线
1433 + this.map.remove(this.route_activity_marker); // 删除起始点标记
1434 + // 生成折线地图路径
1435 + this.current_activity_route = [];
1436 + paths.forEach(item => {
1437 + this.current_activity_route.push(
1438 + new AMap.Polyline({
1439 + path: item,
1440 + isOutline: true,
1441 + outlineColor: '#3274EE',
1442 + borderWeight: 1,
1443 + strokeColor: '#3274EE',
1444 + strokeOpacity: 1,
1445 + strokeWeight: 3,
1446 + // 折线样式还支持 'dashed'
1447 + // strokeStyle: 'solid',
1448 + strokeStyle: 'dashed',
1449 + // strokeStyle是dashed时有效
1450 + strokeDasharray: [10, 5],
1451 + lineJoin: 'round',
1452 + lineCap: 'round',
1453 + zIndex: 50
1454 + })
1455 + );
1456 + })
1457 + this.map.add([...this.current_activity_route]);
1458 + let path = paths[0];
1459 + // 设置起始点标记
1460 + var marker1 = new AMap.Marker({
1461 + icon: new AMap.Icon({
1462 + image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A.png',
1463 + size: new AMap.Size(40, 40),
1464 + // 图标所用图片大小
1465 + imageSize: new AMap.Size(40, 40),
1466 + // 图标取图偏移量
1467 + imageOffset: new AMap.Pixel(0, 0)
1468 + }),
1469 + position: new AMap.LngLat(path[0][0], path[0][1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
1470 + anchor: 'bottom-center',
1471 + offset: new AMap.Pixel(0, 0)
1472 + });
1473 + marker1.setLabel({
1474 + direction: 'right',
1475 + offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
1476 + content: "<div class='info'>起点</div>", //设置文本标注内容
1477 + });
1478 + var marker2 = new AMap.Marker({
1479 + icon: new AMap.Icon({
1480 + image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A.png',
1481 + size: new AMap.Size(40, 40),
1482 + // 图标所用图片大小
1483 + imageSize: new AMap.Size(40, 40),
1484 + // 图标取图偏移量
1485 + imageOffset: new AMap.Pixel(0, 0)
1486 + }),
1487 + position: new AMap.LngLat(path[path.length - 1][0], path[path.length - 1][1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
1488 + anchor: 'bottom-center',
1489 + offset: new AMap.Pixel(0, 0)
1490 + });
1491 + marker2.setLabel({
1492 + direction: 'right',
1493 + offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
1494 + content: "<div class='info'>终点</div>", //设置文本标注内容
1495 + });
1496 + // 新增逃生路线标记
1497 + this.route_activity_marker = [marker1, marker2]
1498 + this.map.add(this.route_activity_marker);
1499 + },
1500 + removeActivityRoute() { // 移除地图路线
1501 + this.show_activity_route = false;
1502 + this.map.remove([...this.current_activity_route]); // 删除地图折线
1503 + this.map.remove(this.route_activity_marker); // 删除起始点标记
1504 + },
1505 + }
1506 +}
1507 +</script>
1508 +
1509 +<style lang="less">
1510 +#container {
1511 + position: absolute;
1512 + top: 0;
1513 + left: 0;
1514 + right: 0;
1515 + bottom: 0;
1516 + width: 100%;
1517 + height: 100%;
1518 +}
1519 +
1520 +/* 标记文字样式 */
1521 +.amap-marker-label {
1522 + padding: 0.25rem 0.5rem;
1523 + width: auto;
1524 + border: none;
1525 + border-radius: 2px;
1526 + background: rgba(86, 65, 23, 0.8);
1527 + color: white;
1528 +}
1529 +
1530 +.amap-marker {
1531 + .amap-icon {
1532 + margin-top: 0.25rem;
1533 + }
1534 +}
1535 +
1536 +.input-card {
1537 + display: flex;
1538 + flex-direction: column;
1539 + min-width: 0;
1540 + word-wrap: break-word;
1541 + background-color: #fff;
1542 + background-clip: border-box;
1543 + border-radius: .25rem;
1544 + width: 20rem;
1545 + border-width: 0;
1546 + border-radius: 0.4rem;
1547 + box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
1548 + position: fixed;
1549 + top: 4rem;
1550 + right: 1rem;
1551 + -ms-flex: 1 1 auto;
1552 + flex: 1 1 auto;
1553 + padding: 0.75rem 1.25rem;
1554 +}
1555 +
1556 +.tool-bar-wrapper {
1557 + position: absolute;
1558 + left: 20px;
1559 + bottom: 8rem;
1560 + width: 20px;
1561 +}
1562 +
1563 +.nav-bar-wrapper {
1564 + position: fixed;
1565 + bottom: 0;
1566 + left: 0;
1567 + height: 5.5rem;
1568 + width: 100%;
1569 + background-color: white;
1570 + text-align: center;
1571 + box-shadow: 0 -1px 0 rgba(80, 80, 80, 0.1);
1572 + z-index: 999;
1573 + // padding: 0.5rem 0;
1574 + padding-bottom: 0.5rem;
1575 +
1576 + .nav-bar-content {
1577 + display: flex;
1578 + overflow-x: scroll;
1579 + overflow-y: hidden;
1580 + -webkit-overflow-scrolling: touch;
1581 + position: relative;
1582 + }
1583 +
1584 + .item {
1585 + padding-top: 0.5rem;
1586 + color: #888;
1587 + width: 21.5%;
1588 + flex-shrink: 0;
1589 + padding-top: 1rem;
1590 + }
1591 +
1592 + .checked {
1593 + color: #965f13;
1594 + }
1595 +}
1596 +
1597 +.safe-route-wrapper {
1598 + position: absolute;
1599 + bottom: 2rem;
1600 + right: 1rem;
1601 + background-color: white;
1602 +}
1603 +
1604 +.operate-bar-wrapper {
1605 + position: fixed;
1606 + left: 20px;
1607 + bottom: 5.5rem;
1608 + width: 20px;
1609 + height: auto;
1610 + z-index: 100;
1611 +
1612 + .box-wrapper {
1613 + display: flex;
1614 + flex-direction: column;
1615 + align-items: center;
1616 + justify-content: center;
1617 +
1618 + .item {
1619 + position: relative;
1620 + text-align: center;
1621 + font-size: 0.85rem;
1622 + width: 2rem;
1623 + height: 2rem;
1624 + background-color: white;
1625 + margin-bottom: 1rem;
1626 + border-radius: 50%;
1627 + padding: 2.5px;
1628 + line-height: 2rem;
1629 + }
1630 + }
1631 +}
1632 +
1633 +.popup-wrapper {
1634 + margin: 1rem;
1635 +
1636 + .title {
1637 + font-size: 1.25rem;
1638 + margin-bottom: 0.85rem;
1639 + }
1640 +
1641 + .content {
1642 + line-height: 1.75;
1643 + font-size: 0.95rem;
1644 + }
1645 +}
1646 +
1647 +
1648 +.hideScrollBar::-webkit-scrollbar {
1649 + display: none;
1650 +}
1651 +
1652 +.hideScrollBar {
1653 + -ms-overflow-style: none;
1654 + overflow: -moz-scrollbars-none;
1655 +}
1656 +
1657 +.van-dialog__confirm,
1658 +.van-dialog__confirm:active {
1659 + color: #AB8F57;
1660 +}
1661 +
1662 +.walk-nav-text {
1663 + position: fixed;
1664 + bottom: 6rem;
1665 + left: 50%;
1666 + transform: translate(-50%, -50%);
1667 + z-index: 999;
1668 + background: rgba(86, 65, 23, 0.8);
1669 + color: white;
1670 + border-radius: 10px;
1671 + padding: 5px 12px;
1672 + font-size: 0.8rem;
1673 +}
1674 +
1675 +.van-cell-group--inset {
1676 + margin: 0 0.466667vw;
1677 + border-radius: 2.133333vw;
1678 + overflow: hidden;
1679 +}
1680 +.van-cell-group {
1681 + background: '#fff';
1682 +}
1683 +.van-cell {
1684 + position: relative;
1685 + display: flex;
1686 + box-sizing: border-box;
1687 + width: 100%;
1688 + padding: 2.666667vw 4.266667vw;
1689 + overflow: hidden;
1690 + color: #323233;
1691 + font-size: 3.733333vw;
1692 + line-height: 6.4vw;
1693 + background: #fff;
1694 +}
1695 +
1696 +.van-cell__title, .van-cell__value {
1697 + flex: 1;
1698 +}
1699 +
1700 +.van-cell__value {
1701 + position: relative;
1702 + overflow: hidden;
1703 + color: #969799;
1704 + text-align: right;
1705 + vertical-align: middle;
1706 + word-wrap: break-word;
1707 +}
1708 +
1709 +.van-cell:after {
1710 + position: absolute;
1711 + box-sizing: border-box;
1712 + content: " ";
1713 + pointer-events: none;
1714 + right: 4.266667vw;
1715 + bottom: 0;
1716 + left: 4.266667vw;
1717 + border-bottom: 1px solid #ebedf0;
1718 + transform: scaleY(.5);
1719 +}
1720 +
1721 +</style>
...@@ -293,10 +293,10 @@ ...@@ -293,10 +293,10 @@
293 resolved "https://mirrors.cloud.tencent.com/npm/@vant/popperjs/-/popperjs-1.3.0.tgz" 293 resolved "https://mirrors.cloud.tencent.com/npm/@vant/popperjs/-/popperjs-1.3.0.tgz"
294 integrity sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw== 294 integrity sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw==
295 295
296 -"@vant/use@^1.5.1": 296 +"@vant/use@^1.6.0":
297 - version "1.5.1" 297 + version "1.6.0"
298 - resolved "https://mirrors.cloud.tencent.com/npm/@vant/use/-/use-1.5.1.tgz" 298 + resolved "https://mirrors.cloud.tencent.com/npm/@vant/use/-/use-1.6.0.tgz#237df3091617255519552ca311ffdfea9de59001"
299 - integrity sha512-Zxd7lDz/LliVYEQi3PR9a8CQa/kGCVzF0u9hqDMaTlgXlbG0wHMFPllrcG0ThR6bfs8xrYVuSFM9pJn6HSoUGQ== 299 + integrity sha512-PHHxeAASgiOpSmMjceweIrv2AxDZIkWXyaczksMoWvKV2YAYEhoizRuk/xFnKF+emUIi46TsQ+rvlm/t2BBCfA==
300 300
301 "@videojs-player/vue@^1.0.0": 301 "@videojs-player/vue@^1.0.0":
302 version "1.0.0" 302 version "1.0.0"
...@@ -3144,13 +3144,13 @@ v-viewer@^3.0.11: ...@@ -3144,13 +3144,13 @@ v-viewer@^3.0.11:
3144 lodash "^4.17.21" 3144 lodash "^4.17.21"
3145 viewerjs "^1.9.0" 3145 viewerjs "^1.9.0"
3146 3146
3147 -vant@^4.6.3: 3147 +vant@^4.8.1:
3148 - version "4.6.3" 3148 + version "4.8.1"
3149 - resolved "https://mirrors.cloud.tencent.com/npm/vant/-/vant-4.6.3.tgz#e36a2dc2fa94253b8218094d88e9b0cd62b3437d" 3149 + resolved "https://mirrors.cloud.tencent.com/npm/vant/-/vant-4.8.1.tgz#b4fce5fb5aa9dfa42143c4122d1e2f92407ec768"
3150 - integrity sha512-hkiBzM1dhEj9EWSjRnyB7gd6SiVa3/+qthNZtlJdj42C+pXIN+oq0UhKz5PRHWi8fHyPfycnqRzyvEJxouT+zw== 3150 + integrity sha512-SkFZM3Z3Bwi5do+iQNfRgDi7b+Ka29rUUNzck06W2KoFie3CLTqSifLa5TuZCEoXPSkqR+fRH/VE5G57mmL8sg==
3151 dependencies: 3151 dependencies:
3152 "@vant/popperjs" "^1.3.0" 3152 "@vant/popperjs" "^1.3.0"
3153 - "@vant/use" "^1.5.1" 3153 + "@vant/use" "^1.6.0"
3154 "@vue/shared" "^3.0.0" 3154 "@vue/shared" "^3.0.0"
3155 3155
3156 vconsole@^3.14.6: 3156 vconsole@^3.14.6:
......