Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
7b8b636b 1 parent 45b20416

调整建筑导航功能

Inline Side-by-side
Showing 8 changed files with 294 additions and 158 deletions
1 /* 1 /*
2 * @Date: 2023-07-10 16:14:10 2 * @Date: 2023-07-10 16:14:10
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-07-18 16:33:08 4 + * @LastEditTime: 2023-07-19 14:35:12
5 * @FilePath: /map-demo/src/common/members.js 5 * @FilePath: /map-demo/src/common/members.js
6 * @Description: 文件描述 6 * @Description: 文件描述
7 */ 7 */
...@@ -16,7 +16,7 @@ const testInfo = { ...@@ -16,7 +16,7 @@ const testInfo = {
16 { 16 {
17 name: '义工', 17 name: '义工',
18 position: [120.587721, 31.31423], 18 position: [120.587721, 31.31423],
19 - icon: 'https://cdn.ipadbiz.cn/xys/map/icon/%E4%B9%89%E5%B7%A5@2x.png', 19 + icon: 'https://cdn.ipadbiz.cn/xys/map/icon/%E4%B9%89%E5%B7%A51%20@2x.png',
20 details: [ 20 details: [
21 { 21 {
22 id: '0', 22 id: '0',
......
1 +const testInfo = [
2 + {
3 + id: 0,
4 + path: [
5 + [120.587882, 31.312884],
6 + [120.588164, 31.31305],
7 + [120.587823, 31.313276],
8 + [120.587811, 31.313508],
9 + [120.5875, 31.31407],
10 + [120.587103, 31.314234],
11 + [120.586912, 31.314195],
12 + [120.586812, 31.314049],
13 + ],
14 + distance: '',
15 + },
16 + {
17 + id: 1,
18 + path: [
19 + [120.587882, 31.312884],
20 + [120.588164, 31.31305],
21 + [120.587823, 31.313276],
22 + [120.587811, 31.313508],
23 + [120.5875, 31.31407],
24 + [120.58769, 31.314535],
25 + [120.587352, 31.314496],
26 + [120.587176, 31.314839],
27 + [120.587113, 31.314473],
28 + [120.586966, 31.314526],
29 + [120.58681, 31.314981],
30 + [120.58653, 31.315118],
31 + [120.586157, 31.315011],
32 + ],
33 + distance: '',
34 + },
35 + {
36 + id: 2,
37 + path: [
38 + [120.587882, 31.312884],
39 + [120.588164, 31.31305],
40 + [120.587823, 31.313276],
41 + [120.587811, 31.313508],
42 + [120.587985, 31.31411],
43 + [120.58769, 31.314535],
44 + [120.58798, 31.314679],
45 + [120.58791, 31.314799],
46 + [120.587295, 31.315548],
47 + [120.587574, 31.315582],
48 + [120.587853, 31.315603],
49 + ],
50 + distance: '',
51 + },
52 +];
53 +
54 +// 照壁[120.587882,31.312884]-双桥[120.588164,31.31305]-牌坊[120.587823,31.313276]-山门[120.587811,31.313508]-鼓楼[120.5875,31.31407]-公共厕所[120.587103,31.314234]-包子铺[120.586912,31.314195]-开水房[120.586812,31.314049]；
55 +// 照壁[120.587882,31.312884]-双桥[120.588164,31.31305]-牌坊[120.587823,31.313276]-山门[120.587811,31.313508]-鼓楼[120.5875,31.31407]-天王殿[120.58769,31.314535]-素食馆[120.587352,31.314496]-罗汉堂[120.587176,31.314839]-集云轩[120.587113,31.314473]-般若堂[120.586966,31.314526]-茶室[120.58681,31.314981]-湖心亭[120.58653,31.315118]-神鼋[120.586157,31.315011]；
56 +// 照壁[120.587882,31.312884]-双桥[120.588164,31.31305]-牌坊[120.587823,31.313276]-山门[120.587811,31.313508]-钟楼[120.587985,31.31411]-天王殿[120.58769,31.314535]-客堂、行政办公室[120.58798,31.314679]-观音殿[120.58791,31.314799]-大雄宝殿[,]-老念佛堂[120.587295,31.315548]-挂单寮[120.587574,31.315582]-地藏殿[120.587853,31.315603]；
57 +export default testInfo;
1 /* 1 /*
2 - * @Date: 2023-07-10 16:14:10 2 + * @Date: 2023-07-18 09:57:19
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-07-19 11:01:52 4 + * @LastEditTime: 2023-07-19 14:57:03
5 * @FilePath: /map-demo/src/common/yard.js 5 * @FilePath: /map-demo/src/common/yard.js
6 * @Description: 文件描述 6 * @Description: 文件描述
7 */ 7 */
...@@ -9,8 +9,8 @@ const testInfo = { ...@@ -9,8 +9,8 @@ const testInfo = {
9 id: 'yard', 9 id: 'yard',
10 name: '场地', 10 name: '场地',
11 icon: [ 11 icon: [
12 - 'https://cdn.ipadbiz.cn/xys/map/icon/%E5%9C%BA%E5%9C%B002@2x.png', 12 + 'https://cdn.ipadbiz.cn/xys/map/icon/%E5%9C%BA%E5%9C%B0021@2x.png',
13 - 'https://cdn.ipadbiz.cn/xys/map/icon/%E5%9C%BA%E5%9C%B001@2x.png', 13 + 'https://cdn.ipadbiz.cn/xys/map/icon/%E5%9C%BA%E5%9C%B0011@2x.png',
14 ], 14 ],
15 list: [ 15 list: [
16 { 16 {
......
...@@ -254,7 +254,7 @@ export default { ...@@ -254,7 +254,7 @@ export default {
254 }, 254 },
255 goToLocation () { 255 goToLocation () {
256 // this.$emit('onLocation', this.info.position) 256 // this.$emit('onLocation', this.info.position)
257 - this.$emit('onLocation', this.info.path) 257 + this.$emit('onLocation', this.info.position)
258 } 258 }
259 } 259 }
260 } 260 }
......
...@@ -98,7 +98,7 @@ export default { ...@@ -98,7 +98,7 @@ export default {
98 }, 98 },
99 goToLocation() { 99 goToLocation() {
100 // this.$emit('onLocation', this.info.position) 100 // this.$emit('onLocation', this.info.position)
101 - this.$emit('onLocation', this.info.path) 101 + this.$emit('onLocation', this.info.position)
102 } 102 }
103 } 103 }
104 } 104 }
......
...@@ -163,7 +163,9 @@ export default { ...@@ -163,7 +163,9 @@ export default {
163 console.warn(this.yard_info); 163 console.warn(this.yard_info);
164 }, 164 },
165 goToOrder () {}, 165 goToOrder () {},
166 - goToLocation () {}, 166 + goToLocation () {
167 + this.$emit('onLocation', this.info.position)
168 + },
167 onClose () { 169 onClose () {
168 window.devicePixelRatio = 1; 170 window.devicePixelRatio = 1;
169 }, 171 },
......
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: 2023-07-19 06:38:25 4 + * @LastEditTime: 2023-07-19 16:32:10
5 * @FilePath: /map-demo/src/views/index.vue 5 * @FilePath: /map-demo/src/views/index.vue
6 * @Description: 地图主体页面 6 * @Description: 地图主体页面
7 --> 7 -->
...@@ -40,6 +40,10 @@ ...@@ -40,6 +40,10 @@
40 <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8Dloc@2x.png" size="1.5rem" 40 <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8Dloc@2x.png" size="1.5rem"
41 style="vertical-align: middle;" /> 41 style="vertical-align: middle;" />
42 </div> --> 42 </div> -->
43 + <!-- <div class="item" @click="selectRoute">
44 + <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8Dloc@2x.png" size="1.5rem"
45 + style="vertical-align: middle;" />
46 + </div> -->
43 <div v-if="open_safe_route" class="item" @click="handleSafeRoute(true)"> 47 <div v-if="open_safe_route" class="item" @click="handleSafeRoute(true)">
44 <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E7%BA%BF%E8%B7%AF01.png" size="1.25rem" 48 <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E7%BA%BF%E8%B7%AF01.png" size="1.25rem"
45 style="vertical-align: middle;" /> 49 style="vertical-align: middle;" />
...@@ -93,6 +97,7 @@ ...@@ -93,6 +97,7 @@
93 import coord from '@/common/map_data' 97 import coord from '@/common/map_data'
94 import map_max from '@/common/max' 98 import map_max from '@/common/max'
95 import map_alert from '@/common/alert' 99 import map_alert from '@/common/alert'
100 +import my_router from '@/common/my_router'
96 import _ from 'lodash'; 101 import _ from 'lodash';
97 import $ from 'jquery'; 102 import $ from 'jquery';
98 //引入定义的信息窗组件 103 //引入定义的信息窗组件
...@@ -196,7 +201,8 @@ export default { ...@@ -196,7 +201,8 @@ export default {
196 dialog_text: '', 201 dialog_text: '',
197 walk_route: '', 202 walk_route: '',
198 isActive: 0, 203 isActive: 0,
199 - route_marker: [], 204 + location_marker: '',
205 + // route_marker: [],
200 route_safe_marker: [], 206 route_safe_marker: [],
201 open_safe_route: true, 207 open_safe_route: true,
202 show_walk_route: true, 208 show_walk_route: true,
...@@ -234,7 +240,7 @@ export default { ...@@ -234,7 +240,7 @@ export default {
234 async mounted() { 240 async mounted() {
235 const code = this.$route.query.id; 241 const code = this.$route.query.id;
236 // const code = '362800'; 242 // const code = '362800';
237 - const { data } = await mapAPI({i: code}); 243 + const { data } = await mapAPI({ i: code });
238 data.list = data.list.concat(map_alert); 244 data.list = data.list.concat(map_alert);
239 this.navBarList = data.list; // 底部导航条 245 this.navBarList = data.list; // 底部导航条
240 this.mapTiles = data.level; // 获取图层 246 this.mapTiles = data.level; // 获取图层
...@@ -328,7 +334,7 @@ export default { ...@@ -328,7 +334,7 @@ export default {
328 }, 100); 334 }, 100);
329 this.removeNavRoute(); 335 this.removeNavRoute();
330 }, 336 },
331 - loadMaker (id) { 337 + loadMaker(id) {
332 var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 }; 338 var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
333 const entity_info = this.navBarList.filter(item => item.id === id)[0]['list']; 339 const entity_info = this.navBarList.filter(item => item.id === id)[0]['list'];
334 this.markerSum = []; 340 this.markerSum = [];
...@@ -435,7 +441,7 @@ export default { ...@@ -435,7 +441,7 @@ export default {
435 }) 441 })
436 this.map.add(this.markerSum); 442 this.map.add(this.markerSum);
437 }, 443 },
438 - removeLayer () { 444 + removeLayer() {
439 this.map.remove(this.markerSum); 445 this.map.remove(this.markerSum);
440 }, 446 },
441 // setMapBoundary() { // 地图描边 447 // setMapBoundary() { // 地图描边
...@@ -569,10 +575,102 @@ export default { ...@@ -569,10 +575,102 @@ export default {
569 this.map.remove([this.current_safe_route]); // 删除地图折线 575 this.map.remove([this.current_safe_route]); // 删除地图折线
570 this.map.remove(this.route_safe_marker); // 删除起始点标记 576 this.map.remove(this.route_safe_marker); // 删除起始点标记
571 }, 577 },
572 - addNavRoute (path) { // 新增导航路径 578 + // addNavRoute (path) { // 新增导航路径
573 - // 生成折线地图路径 579 + // // 生成折线地图路径
580 + // this.current_route = new AMap.Polyline({
581 + // path,
582 + // isOutline: true,
583 + // outlineColor: '#42a5f5',
584 + // borderWeight: 1,
585 + // strokeColor: '#42a5f5',
586 + // strokeOpacity: 1,
587 + // strokeWeight: 2,
588 + // // 折线样式还支持 'dashed'
589 + // strokeStyle: 'dashed',
590 + // // strokeStyle是dashed时有效
591 + // strokeDasharray: [10, 5],
592 + // lineJoin: 'round',
593 + // lineCap: 'round',
594 + // zIndex: 50
595 + // })
596 + // this.map.add([this.current_route]);
597 + // // 设置起始点标记
598 + // var marker1 = new AMap.Marker({
599 + // icon: new AMap.Icon({
600 + // image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8D-%E5%B0%8Fz@2x.png',
601 + // size: new AMap.Size(40, 40),
602 + // // 图标所用图片大小
603 + // imageSize: new AMap.Size(40, 40),
604 + // // 图标取图偏移量
605 + // imageOffset: new AMap.Pixel(0, 0)
606 + // }),
607 + // position: new AMap.LngLat(path[0][0], path[0][1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
608 + // anchor: 'bottom-center',
609 + // offset: new AMap.Pixel(0, 0)
610 + // });
611 + // marker1.setLabel({
612 + // direction: 'right',
613 + // offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
614 + // content: "<div class='info'>终点</div>", //设置文本标注内容
615 + // });
616 + // var marker2 = new AMap.Marker({
617 + // icon: new AMap.Icon({
618 + // image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8D-%E5%B0%8Fz@2x.png',
619 + // size: new AMap.Size(40, 40),
620 + // // 图标所用图片大小
621 + // imageSize: new AMap.Size(40, 40),
622 + // // 图标取图偏移量
623 + // imageOffset: new AMap.Pixel(0, 0)
624 + // }),
625 + // position: new AMap.LngLat(path[path.length - 1][0], path[path.length - 1][1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
626 + // anchor: 'bottom-center',
627 + // offset: new AMap.Pixel(0, 0)
628 + // });
629 + // marker2.setLabel({
630 + // direction: 'right',
631 + // offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
632 + // content: "<div class='info'>起点</div>", //设置文本标注内容
633 + // });
634 + // // 新增逃生路线标记
635 + // this.route_marker = [marker1, marker2]
636 + // this.map.add(this.route_marker);
637 + // // 关闭导航提示
638 + // this.show_walk_route = false;
639 + // },
640 + addNavRoute(position) { // 新增导航路径
641 + function arraysEqual(a, b) {
642 + // 如果两个数组的长度不等，则它们不相等
643 + if (a.length !== b.length) {
644 + return false;
645 + }
646 +
647 + // 比较每个元素是否相等
648 + return a.every(function (element, index) {
649 + return element == b[index];
650 + });
651 + }
652 + let array = []; // 导航点所在路径集合
653 + my_router.forEach((route) => {
654 + route.path.forEach((item) => {
655 + if (arraysEqual(position, item)) {
656 + array.push(route);
657 + return false;
658 + }
659 + })
660 + });
661 + const lngLat = [120.587234, 31.314147]; // 左边
662 + // const lngLat = [120.588178, 31.314396]; // 右边
663 + // 构建路线结构
664 + const route_obj = array;
665 + // 计算距离最近的路径
666 + route_obj.forEach((line) => {
667 + line.distance = AMap.GeometryUtil.distanceToLine(lngLat, line.path);
668 + });
669 + let min = Math.min(...route_obj.map((line) => line.distance))
670 + let result = route_obj.filter((line) => line.distance === min);
671 + // 标记示例
574 this.current_route = new AMap.Polyline({ 672 this.current_route = new AMap.Polyline({
575 - path, 673 + path: result[0]['path'],
576 isOutline: true, 674 isOutline: true,
577 outlineColor: '#42a5f5', 675 outlineColor: '#42a5f5',
578 borderWeight: 1, 676 borderWeight: 1,
...@@ -588,52 +686,27 @@ export default { ...@@ -588,52 +686,27 @@ export default {
588 zIndex: 50 686 zIndex: 50
589 }) 687 })
590 this.map.add([this.current_route]); 688 this.map.add([this.current_route]);
591 - // 设置起始点标记 689 + this.location_marker = new AMap.Marker({
592 - var marker1 = new AMap.Marker({
593 - icon: new AMap.Icon({
594 - image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8D-%E5%B0%8Fz@2x.png',
595 - size: new AMap.Size(40, 40),
596 - // 图标所用图片大小
597 - imageSize: new AMap.Size(40, 40),
598 - // 图标取图偏移量
599 - imageOffset: new AMap.Pixel(0, 0)
600 - }),
601 - position: new AMap.LngLat(path[0][0], path[0][1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
602 - anchor: 'bottom-center',
603 - offset: new AMap.Pixel(0, 0)
604 - });
605 - marker1.setLabel({
606 - direction: 'right',
607 - offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
608 - content: "<div class='info'>终点</div>", //设置文本标注内容
609 - });
610 - var marker2 = new AMap.Marker({
611 icon: new AMap.Icon({ 690 icon: new AMap.Icon({
612 - image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8D-%E5%B0%8Fz@2x.png', 691 + image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A.png',
613 size: new AMap.Size(40, 40), 692 size: new AMap.Size(40, 40),
614 // 图标所用图片大小 693 // 图标所用图片大小
615 imageSize: new AMap.Size(40, 40), 694 imageSize: new AMap.Size(40, 40),
616 // 图标取图偏移量 695 // 图标取图偏移量
617 imageOffset: new AMap.Pixel(0, 0) 696 imageOffset: new AMap.Pixel(0, 0)
618 }), 697 }),
619 - position: new AMap.LngLat(path[path.length - 1][0], path[path.length - 1][1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9] 698 + position: new AMap.LngLat(...lngLat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
620 anchor: 'bottom-center', 699 anchor: 'bottom-center',
621 offset: new AMap.Pixel(0, 0) 700 offset: new AMap.Pixel(0, 0)
622 }); 701 });
623 - marker2.setLabel({ 702 + this.map.add([this.location_marker]);
624 - direction: 'right',
625 - offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
626 - content: "<div class='info'>起点</div>", //设置文本标注内容
627 - });
628 - // 新增逃生路线标记
629 - this.route_marker = [marker1, marker2]
630 - this.map.add(this.route_marker);
631 // 关闭导航提示 703 // 关闭导航提示
632 this.show_walk_route = false; 704 this.show_walk_route = false;
633 }, 705 },
634 removeNavRoute() { // 移除地图路线 706 removeNavRoute() { // 移除地图路线
635 this.map.remove([this.current_route]); // 删除地图折线 707 this.map.remove([this.current_route]); // 删除地图折线
636 - this.map.remove(this.route_marker); // 删除起始点标记 708 + // this.map.remove(this.route_marker); // 删除起始点标记
709 + this.map.remove(this.location_marker); // 删除当前定位标记
637 // 关闭导航提示 710 // 关闭导航提示
638 this.show_walk_route = true; 711 this.show_walk_route = true;
639 }, 712 },
...@@ -657,7 +730,7 @@ export default { ...@@ -657,7 +730,7 @@ export default {
657 if (z == id) { 730 if (z == id) {
658 const scope = _this.titleLayerSet[id]; 731 const scope = _this.titleLayerSet[id];
659 if (x < scope.x[0] || x > scope.x[1]) { 732 if (x < scope.x[0] || x > scope.x[1]) {
660 - fail() 733 + fail()
661 return; 734 return;
662 } 735 }
663 if (y < scope.y[0] || y > scope.y[1]) { 736 if (y < scope.y[0] || y > scope.y[1]) {
...@@ -768,15 +841,13 @@ export default { ...@@ -768,15 +841,13 @@ export default {
768 // } else { 841 // } else {
769 // this.setWalkRoute({ lng: this.current_lng, lat: this.current_lat }, { lng: position[0], lat: position[1] }) 842 // this.setWalkRoute({ lng: this.current_lng, lat: this.current_lat }, { lng: position[0], lat: position[1] })
770 // } 843 // }
771 - // if (this.walk_route) { // 清除前一条步行导航
772 - // this.walk_route.clear();
773 - // }
774 // 测试 844 // 测试
775 this.closeInfoWindow(); // 关闭弹框 845 this.closeInfoWindow(); // 关闭弹框
776 // this.setWalkRoute({ lng: 120.59014, lat: 31.310306 }, { lng: position[0], lat: position[1] }); 846 // this.setWalkRoute({ lng: 120.59014, lat: 31.310306 }, { lng: position[0], lat: position[1] });
777 if (this.current_route) { // 清除前一条步行导航 847 if (this.current_route) { // 清除前一条步行导航
778 this.map.remove([this.current_route]); // 删除地图折线 848 this.map.remove([this.current_route]); // 删除地图折线
779 - this.map.remove(this.route_marker); // 删除起始点标记 849 + // this.map.remove(this.route_marker); // 删除起始点标记
850 + this.map.remove(this.location_marker); // 删除当前定位标记
780 } 851 }
781 if (path.length) { 852 if (path.length) {
782 this.addNavRoute(path) 853 this.addNavRoute(path)
...@@ -797,7 +868,7 @@ export default { ...@@ -797,7 +868,7 @@ export default {
797 handleNavPopup() { 868 handleNavPopup() {
798 this.show_nav_popup = !this.show_nav_popup 869 this.show_nav_popup = !this.show_nav_popup
799 }, 870 },
800 - handleNavMarker (item) { // 底部列表点击跳转弹框判断 871 + handleNavMarker(item) { // 底部列表点击跳转弹框判断
801 if (item.window_type === 'normal') { 872 if (item.window_type === 'normal') {
802 this.positionMarker(item) 873 this.positionMarker(item)
803 } else if (item.window_type === 'lite') { 874 } else if (item.window_type === 'lite') {
...@@ -931,7 +1002,7 @@ export default { ...@@ -931,7 +1002,7 @@ export default {
931 }); 1002 });
932 } 1003 }
933 }, 1004 },
934 - onPlay (name) { 1005 + onPlay(name) {
935 // var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 }; 1006 // var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
936 // _.each(coord.spotInfo, (x, i) => { 1007 // _.each(coord.spotInfo, (x, i) => {
937 // var marker = new AMap.ElasticMarker({ 1008 // var marker = new AMap.ElasticMarker({
...@@ -972,7 +1043,7 @@ export default { ...@@ -972,7 +1043,7 @@ export default {
972 // }) 1043 // })
973 // this.map.add(this.spotInfo); 1044 // this.map.add(this.spotInfo);
974 }, 1045 },
975 - onPause (name) {}, 1046 + onPause(name) { },
976 } 1047 }
977 } 1048 }
978 </script> 1049 </script>
......
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: 2023-07-19 11:23:33 4 + * @LastEditTime: 2023-07-19 16:34:32
5 * @FilePath: /map-demo/src/views/inner.vue 5 * @FilePath: /map-demo/src/views/inner.vue
6 * @Description: 地图主体页面 6 * @Description: 地图主体页面
7 --> 7 -->
...@@ -40,10 +40,6 @@ ...@@ -40,10 +40,6 @@
40 <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8Dloc@2x.png" size="1.5rem" 40 <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8Dloc@2x.png" size="1.5rem"
41 style="vertical-align: middle;" /> 41 style="vertical-align: middle;" />
42 </div> 42 </div>
43 - <div class="item" @click="selectRoute">
44 - <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8Dloc@2x.png" size="1.5rem"
45 - style="vertical-align: middle;" />
46 - </div>
47 <div v-if="open_safe_route" class="item" @click="handleSafeRoute(true)"> 43 <div v-if="open_safe_route" class="item" @click="handleSafeRoute(true)">
48 <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E7%BA%BF%E8%B7%AF01.png" size="1.25rem" 44 <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E7%BA%BF%E8%B7%AF01.png" size="1.25rem"
49 style="vertical-align: middle;" /> 45 style="vertical-align: middle;" />
...@@ -88,7 +84,7 @@ ...@@ -88,7 +84,7 @@
88 <InfoWindowWarn v-show="showInfoWindowWarn" ref="infoWindowWarn" :info-window="infoWindowWarn" :info="itemInfo" 84 <InfoWindowWarn v-show="showInfoWindowWarn" ref="infoWindowWarn" :info-window="infoWindowWarn" :info="itemInfo"
89 :rect="rect"></InfoWindowWarn> 85 :rect="rect"></InfoWindowWarn>
90 <InfoWindowYard v-show="showInfoWindowYard" ref="infoWindowYard" :info-window="infoWindowYard" :info="itemInfo" 86 <InfoWindowYard v-show="showInfoWindowYard" ref="infoWindowYard" :info-window="infoWindowYard" :info="itemInfo"
91 - :rect="rect"></InfoWindowYard> 87 + :rect="rect" @onLocation="infoWindowLocation"></InfoWindowYard>
92 88
93 <!-- <audioBackground></audioBackground> --> 89 <!-- <audioBackground></audioBackground> -->
94 90
...@@ -99,13 +95,6 @@ ...@@ -99,13 +95,6 @@
99 {{ itemInfo.name }} 95 {{ itemInfo.name }}
100 </div> 96 </div>
101 <div v-for="(item, index) in itemInfo.details" :key="index" style="margin-bottom: 1rem;"> 97 <div v-for="(item, index) in itemInfo.details" :key="index" style="margin-bottom: 1rem;">
102 - <!-- 临时引用演示 -->
103 - <!-- <van-cell-group inset v-show="false">
104 - <van-cell title="姓名" :value="item.name" />
105 - <van-cell title="手机号" :value="item.contact" />
106 - <van-cell title="组别" :value="item.group" />
107 - </van-cell-group> -->
108 - <!-- end -->
109 <div class="van-cell-group van-cell-group--inset"> 98 <div class="van-cell-group van-cell-group--inset">
110 <div class="van-cell"> 99 <div class="van-cell">
111 <div class="van-cell__title"> <span>姓名</span> </div> 100 <div class="van-cell__title"> <span>姓名</span> </div>
...@@ -131,6 +120,7 @@ ...@@ -131,6 +120,7 @@
131 import coord from '@/common/map_data' 120 import coord from '@/common/map_data'
132 import map_max from '@/common/max' 121 import map_max from '@/common/max'
133 import map_yard from '@/common/yard' 122 import map_yard from '@/common/yard'
123 +import my_router from '@/common/my_router'
134 import map_members from '@/common/members' 124 import map_members from '@/common/members'
135 import _ from 'lodash'; 125 import _ from 'lodash';
136 import $ from 'jquery'; 126 import $ from 'jquery';
...@@ -239,7 +229,8 @@ export default { ...@@ -239,7 +229,8 @@ export default {
239 dialog_text: '', 229 dialog_text: '',
240 walk_route: '', 230 walk_route: '',
241 isActive: 0, 231 isActive: 0,
242 - route_marker: [], 232 + location_marker: '',
233 + // route_marker: [],
243 route_safe_marker: [], 234 route_safe_marker: [],
244 open_safe_route: true, 235 open_safe_route: true,
245 show_walk_route: true, 236 show_walk_route: true,
...@@ -654,10 +645,102 @@ export default { ...@@ -654,10 +645,102 @@ export default {
654 this.map.remove([this.current_safe_route]); // 删除地图折线 645 this.map.remove([this.current_safe_route]); // 删除地图折线
655 this.map.remove(this.route_safe_marker); // 删除起始点标记 646 this.map.remove(this.route_safe_marker); // 删除起始点标记
656 }, 647 },
657 - addNavRoute (path) { // 新增导航路径 648 + // addNavRoute (path) { // 新增导航路径
658 - // 生成折线地图路径 649 + // // 生成折线地图路径
650 + // this.current_route = new AMap.Polyline({
651 + // path,
652 + // isOutline: true,
653 + // outlineColor: '#42a5f5',
654 + // borderWeight: 1,
655 + // strokeColor: '#42a5f5',
656 + // strokeOpacity: 1,
657 + // strokeWeight: 2,
658 + // // 折线样式还支持 'dashed'
659 + // strokeStyle: 'dashed',
660 + // // strokeStyle是dashed时有效
661 + // strokeDasharray: [10, 5],
662 + // lineJoin: 'round',
663 + // lineCap: 'round',
664 + // zIndex: 50
665 + // })
666 + // this.map.add([this.current_route]);
667 + // // 设置起始点标记
668 + // var marker1 = new AMap.Marker({
669 + // icon: new AMap.Icon({
670 + // image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8D-%E5%B0%8Fz@2x.png',
671 + // size: new AMap.Size(40, 40),
672 + // // 图标所用图片大小
673 + // imageSize: new AMap.Size(40, 40),
674 + // // 图标取图偏移量
675 + // imageOffset: new AMap.Pixel(0, 0)
676 + // }),
677 + // position: new AMap.LngLat(path[0][0], path[0][1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
678 + // anchor: 'bottom-center',
679 + // offset: new AMap.Pixel(0, 0)
680 + // });
681 + // marker1.setLabel({
682 + // direction: 'right',
683 + // offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
684 + // content: "<div class='info'>终点</div>", //设置文本标注内容
685 + // });
686 + // var marker2 = new AMap.Marker({
687 + // icon: new AMap.Icon({
688 + // image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8D-%E5%B0%8Fz@2x.png',
689 + // size: new AMap.Size(40, 40),
690 + // // 图标所用图片大小
691 + // imageSize: new AMap.Size(40, 40),
692 + // // 图标取图偏移量
693 + // imageOffset: new AMap.Pixel(0, 0)
694 + // }),
695 + // position: new AMap.LngLat(path[path.length - 1][0], path[path.length - 1][1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
696 + // anchor: 'bottom-center',
697 + // offset: new AMap.Pixel(0, 0)
698 + // });
699 + // marker2.setLabel({
700 + // direction: 'right',
701 + // offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
702 + // content: "<div class='info'>起点</div>", //设置文本标注内容
703 + // });
704 + // // 新增逃生路线标记
705 + // this.route_marker = [marker1, marker2]
706 + // this.map.add(this.route_marker);
707 + // // 关闭导航提示
708 + // this.show_walk_route = false;
709 + // },
710 + addNavRoute(position) { // 新增导航路径
711 + function arraysEqual(a, b) {
712 + // 如果两个数组的长度不等，则它们不相等
713 + if (a.length !== b.length) {
714 + return false;
715 + }
716 +
717 + // 比较每个元素是否相等
718 + return a.every(function (element, index) {
719 + return element == b[index];
720 + });
721 + }
722 + let array = []; // 导航点所在路径集合
723 + my_router.forEach((route) => {
724 + route.path.forEach((item) => {
725 + if (arraysEqual(position, item)) {
726 + array.push(route);
727 + return false;
728 + }
729 + })
730 + });
731 + const lngLat = [120.587234, 31.314147]; // 左边
732 + // const lngLat = [120.588178, 31.314396]; // 右边
733 + // 构建路线结构
734 + const route_obj = array;
735 + // 计算距离最近的路径
736 + route_obj.forEach((line) => {
737 + line.distance = AMap.GeometryUtil.distanceToLine(lngLat, line.path);
738 + });
739 + let min = Math.min(...route_obj.map((line) => line.distance))
740 + let result = route_obj.filter((line) => line.distance === min);
741 + // 标记示例
659 this.current_route = new AMap.Polyline({ 742 this.current_route = new AMap.Polyline({
660 - path, 743 + path: result[0]['path'],
661 isOutline: true, 744 isOutline: true,
662 outlineColor: '#42a5f5', 745 outlineColor: '#42a5f5',
663 borderWeight: 1, 746 borderWeight: 1,
...@@ -673,52 +756,27 @@ export default { ...@@ -673,52 +756,27 @@ export default {
673 zIndex: 50 756 zIndex: 50
674 }) 757 })
675 this.map.add([this.current_route]); 758 this.map.add([this.current_route]);
676 - // 设置起始点标记 759 + this.location_marker = new AMap.Marker({
677 - var marker1 = new AMap.Marker({
678 - icon: new AMap.Icon({
679 - image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8D-%E5%B0%8Fz@2x.png',
680 - size: new AMap.Size(40, 40),
681 - // 图标所用图片大小
682 - imageSize: new AMap.Size(40, 40),
683 - // 图标取图偏移量
684 - imageOffset: new AMap.Pixel(0, 0)
685 - }),
686 - position: new AMap.LngLat(path[0][0], path[0][1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
687 - anchor: 'bottom-center',
688 - offset: new AMap.Pixel(0, 0)
689 - });
690 - marker1.setLabel({
691 - direction: 'right',
692 - offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
693 - content: "<div class='info'>终点</div>", //设置文本标注内容
694 - });
695 - var marker2 = new AMap.Marker({
696 icon: new AMap.Icon({ 760 icon: new AMap.Icon({
697 - image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8D-%E5%B0%8Fz@2x.png', 761 + image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A.png',
698 size: new AMap.Size(40, 40), 762 size: new AMap.Size(40, 40),
699 // 图标所用图片大小 763 // 图标所用图片大小
700 imageSize: new AMap.Size(40, 40), 764 imageSize: new AMap.Size(40, 40),
701 // 图标取图偏移量 765 // 图标取图偏移量
702 imageOffset: new AMap.Pixel(0, 0) 766 imageOffset: new AMap.Pixel(0, 0)
703 }), 767 }),
704 - position: new AMap.LngLat(path[path.length - 1][0], path[path.length - 1][1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9] 768 + position: new AMap.LngLat(...lngLat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
705 anchor: 'bottom-center', 769 anchor: 'bottom-center',
706 offset: new AMap.Pixel(0, 0) 770 offset: new AMap.Pixel(0, 0)
707 }); 771 });
708 - marker2.setLabel({ 772 + this.map.add([this.location_marker]);
709 - direction: 'right',
710 - offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
711 - content: "<div class='info'>起点</div>", //设置文本标注内容
712 - });
713 - // 新增逃生路线标记
714 - this.route_marker = [marker1, marker2]
715 - this.map.add(this.route_marker);
716 // 关闭导航提示 773 // 关闭导航提示
717 this.show_walk_route = false; 774 this.show_walk_route = false;
718 }, 775 },
719 removeNavRoute() { // 移除地图路线 776 removeNavRoute() { // 移除地图路线
720 this.map.remove([this.current_route]); // 删除地图折线 777 this.map.remove([this.current_route]); // 删除地图折线
721 - this.map.remove(this.route_marker); // 删除起始点标记 778 + // this.map.remove(this.route_marker); // 删除起始点标记
779 + this.map.remove(this.location_marker); // 删除当前定位标记
722 // 关闭导航提示 780 // 关闭导航提示
723 this.show_walk_route = true; 781 this.show_walk_route = true;
724 }, 782 },
...@@ -861,7 +919,8 @@ export default { ...@@ -861,7 +919,8 @@ export default {
861 // this.setWalkRoute({ lng: 120.59014, lat: 31.310306 }, { lng: position[0], lat: position[1] }); 919 // this.setWalkRoute({ lng: 120.59014, lat: 31.310306 }, { lng: position[0], lat: position[1] });
862 if (this.current_route) { // 清除前一条步行导航 920 if (this.current_route) { // 清除前一条步行导航
863 this.map.remove([this.current_route]); // 删除地图折线 921 this.map.remove([this.current_route]); // 删除地图折线
864 - this.map.remove(this.route_marker); // 删除起始点标记 922 + // this.map.remove(this.route_marker); // 删除起始点标记
923 + this.map.remove(this.location_marker); // 删除当前定位标记
865 } 924 }
866 if (path.length) { 925 if (path.length) {
867 this.addNavRoute(path) 926 this.addNavRoute(path)
...@@ -1110,59 +1169,6 @@ export default { ...@@ -1110,59 +1169,6 @@ export default {
1110 // this.map.add(this.spotInfo); 1169 // this.map.add(this.spotInfo);
1111 }, 1170 },
1112 onPause (name) {}, 1171 onPause (name) {},
1113 - selectRoute () { // 选择最近路线
1114 - // 获取实际定位
1115 - // const currentLngLat = [this.current_lng, this.current_lat];
1116 - // console.warn(currentLngLat);
1117 - const lngLat = [120.587234, 31.314147]; // 左边
1118 - // const lngLat = [120.588178, 31.314396]; // 右边
1119 - // 构建路线结构
1120 - const route_obj = [{
1121 - route: [[120.587728, 31.313561], [120.587479, 31.313545], [120.587449, 31.313643], [120.587436, 31.313763], [120.587417, 31.313884], [120.587398, 31.314015], [120.587382, 31.314175], [120.587371, 31.314292], [120.587703, 31.314378]],
1122 - distance: '',
1123 - }, {
1124 - route: [[120.587832, 31.313471], [120.588062, 31.313498], [120.588218, 31.313551], [120.588213, 31.313721], [120.588172, 31.31403], [120.588164, 31.314245], [120.588103, 31.314392], [120.587875, 31.314381], [120.587703, 31.314378]],
1125 - distance: '',
1126 - }];
1127 - // 计算距离最近的路径
1128 - route_obj.forEach((line) => {
1129 - line.distance = AMap.GeometryUtil.distanceToLine(lngLat, line.route);
1130 - });
1131 - let min = Math.min(...route_obj.map((line) => line.distance))
1132 - let result = route_obj.filter((line) => line.distance === min);
1133 - // 标记示例
1134 - const current_route = new AMap.Polyline({
1135 - path: result[0]['route'],
1136 - isOutline: true,
1137 - outlineColor: '#42a5f5',
1138 - borderWeight: 1,
1139 - strokeColor: '#42a5f5',
1140 - strokeOpacity: 1,
1141 - strokeWeight: 2,
1142 - // 折线样式还支持 'dashed'
1143 - strokeStyle: 'dashed',
1144 - // strokeStyle是dashed时有效
1145 - strokeDasharray: [10, 5],
1146 - lineJoin: 'round',
1147 - lineCap: 'round',
1148 - zIndex: 50
1149 - })
1150 - this.map.add([current_route]);
1151 - var marker = new AMap.Marker({
1152 - icon: new AMap.Icon({
1153 - image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A.png',
1154 - size: new AMap.Size(40, 40),
1155 - // 图标所用图片大小
1156 - imageSize: new AMap.Size(40, 40),
1157 - // 图标取图偏移量
1158 - imageOffset: new AMap.Pixel(0, 0)
1159 - }),
1160 - position: new AMap.LngLat(...lngLat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
1161 - anchor: 'bottom-center',
1162 - offset: new AMap.Pixel(0, 0)
1163 - });
1164 - this.map.add([marker]);
1165 - },
1166 } 1172 }
1167 } 1173 }
1168 </script> 1174 </script>
......