Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
a398fe2a 1 parent b09468d5

步行导航更新到手绘操作

Inline Side-by-side
Showing 4 changed files with 112 additions and 25 deletions
......@@ -118,6 +118,13 @@ var spotInfo = [
],
// zoom: { 17: 0, 18: 0, 19: 0, 20: 0 },
window_type: 'normal',
path: [
[120.58769, 31.313319],
[120.587631, 31.313058],
[120.587575, 31.312943],
[120.587538, 31.312777],
[120.587894, 31.312779],
],
},
{
name: '福德智慧二桥',
......@@ -132,6 +139,11 @@ var spotInfo = [
],
// zoom: { 17: 1, 18: 1, 19: 0, 20: 0 },
window_type: 'normal',
path: [
[120.588046, 31.313359],
[120.588138, 31.313203],
[120.588168, 31.313004],
],
},
{
name: '御赐牌楼',
......
......@@ -249,7 +249,8 @@ export default {
}
},
goToLocation () {
this.$emit('onLocation', this.info.position)
// this.$emit('onLocation', this.info.position)
this.$emit('onLocation', this.info.path)
}
}
}
......
......@@ -97,7 +97,8 @@ export default {
location.href = this.info.details[this.isActive].url;
},
goToLocation() {
this.$emit('onLocation', this.info.position)
// this.$emit('onLocation', this.info.position)
this.$emit('onLocation', this.info.path)
}
}
}
......
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-06-28 11:02:03
* @LastEditTime: 2023-06-28 14:13:45
* @FilePath: /map-demo/src/views/index.vue
* @Description: 地图主体页面
-->
......@@ -36,10 +36,10 @@
</div>
<div class="operate-bar-wrapper">
<div class="box-wrapper">
<div class="item" @click="setLocation">
<!-- <div class="item" @click="setLocation">
<van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8Dloc@2x.png" size="1.5rem"
style="vertical-align: middle;" />
</div>
</div> -->
<div v-if="open_safe_route" class="item" @click="handleSafeRoute(true)">
<van-icon name="https://cdn.ipadbiz.cn/xys/map/%E7%BA%BF%E8%B7%AF@2x.png" size="1.25rem"
style="vertical-align: middle;" />
......@@ -51,7 +51,10 @@
</div>
</div>
<div v-if="!show_walk_route" @click="removeWalkRoute" class="walk-nav-text">
<!-- <div v-if="!show_walk_route" @click="removeWalkRoute" class="walk-nav-text">
关闭步行导航
</div> -->
<div v-if="!show_walk_route" @click="removeNavRoute" class="walk-nav-text">
关闭步行导航
</div>
......@@ -195,7 +198,7 @@ export default {
walk_route: '',
toolBar: '',
isActive: 0,
safe_route: [],
route_marker: [],
open_safe_route: true,
show_walk_route: true,
popup_title: '',
......@@ -555,7 +558,7 @@ export default {
this.map.setZoom(zoom - 1)
}
},
setRoute() { // 生成路径
addSafeRoute() { // 新增路径
// 行动路线
var path = [
[120.587512, 31.313796],
......@@ -563,9 +566,9 @@ export default {
[120.586862, 31.314304],
[120.586841, 31.314543]
];
// 生成折线地图路径
this.current_route = new AMap.Polyline({
path: path,
path,
isOutline: true,
outlineColor: '#7F7F7F',
borderWeight: 1,
......@@ -580,11 +583,72 @@ export default {
lineCap: 'round',
zIndex: 50
})
this.map.add([this.current_route]);
// 设置起始点标记
var marker1 = new AMap.Marker({
icon: new AMap.Icon({
image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8D-%E5%B0%8F1@2x.png',
size: new AMap.Size(40, 40),
// 图标所用图片大小
imageSize: new AMap.Size(40, 40),
// 图标取图偏移量
imageOffset: new AMap.Pixel(0, 0)
}),
position: new AMap.LngLat(path[0][0], path[0][1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
anchor: 'bottom-center',
offset: new AMap.Pixel(0, 0)
});
marker1.setLabel({
direction: 'right',
offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
content: "<div class='info'>起点</div>", //设置文本标注内容
});
var marker2 = new AMap.Marker({
icon: new AMap.Icon({
image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8D-%E5%B0%8F1@2x.png',
size: new AMap.Size(40, 40),
// 图标所用图片大小
imageSize: new AMap.Size(40, 40),
// 图标取图偏移量
imageOffset: new AMap.Pixel(0, 0)
}),
position: new AMap.LngLat(path[path.length - 1][0], path[path.length - 1][1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
anchor: 'bottom-center',
offset: new AMap.Pixel(0, 0)
});
marker2.setLabel({
direction: 'right',
offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
content: "<div class='info'>终点</div>", //设置文本标注内容
});
// 新增逃生路线标记
this.route_marker = [marker1, marker2]
this.map.add(this.route_marker);
},
addSafeRoute() { // 新增路径
this.setRoute();
removeSafeRoute() { // 移除地图路线
this.map.remove([this.current_route]); // 删除地图折线
this.map.remove(this.route_marker); // 删除起始点标记
},
addNavRoute (path) { // 新增导航路径
// 生成折线地图路径
this.current_route = new AMap.Polyline({
path,
isOutline: true,
outlineColor: '#7F7F7F',
borderWeight: 1,
strokeColor: '#7F7F7F',
strokeOpacity: 1,
strokeWeight: 1,
// 折线样式还支持 'dashed'
strokeStyle: 'solid',
// strokeStyle是dashed时有效
strokeDasharray: [10, 5],
lineJoin: 'round',
lineCap: 'round',
zIndex: 50
})
this.map.add([this.current_route]);
//
// 设置起始点标记
var marker1 = new AMap.Marker({
icon: new AMap.Icon({
image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8D-%E5%B0%8F1@2x.png',
......@@ -594,7 +658,7 @@ export default {
// 图标取图偏移量
imageOffset: new AMap.Pixel(0, 0)
}),
position: new AMap.LngLat(120.587506, 31.313787), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
position: new AMap.LngLat(path[0][0], path[0][1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
anchor: 'bottom-center',
offset: new AMap.Pixel(0, 0)
});
......@@ -612,7 +676,7 @@ export default {
// 图标取图偏移量
imageOffset: new AMap.Pixel(0, 0)
}),
position: new AMap.LngLat(120.586825, 31.314543), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
position: new AMap.LngLat(path[path.length - 1][0], path[path.length - 1][1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
anchor: 'bottom-center',
offset: new AMap.Pixel(0, 0)
});
......@@ -622,12 +686,16 @@ export default {
content: "<div class='info'>终点</div>", //设置文本标注内容
});
// 新增逃生路线标记
this.safe_route = [marker1, marker2]
this.map.add(this.safe_route);
this.route_marker = [marker1, marker2]
this.map.add(this.route_marker);
// 关闭导航提示
this.show_walk_route = false;
},
removeSafeRoute() { // 删除路径
this.map.remove([this.current_route]);
this.map.remove(this.safe_route);
removeNavRoute() { // 移除地图路线
this.map.remove([this.current_route]); // 删除地图折线
this.map.remove(this.route_marker); // 删除起始点标记
// 关闭导航提示
this.show_walk_route = true;
},
setTitleLayer() { // 生成瓦片图
var layer = new AMap.TileLayer.Flexible({
......@@ -806,7 +874,7 @@ export default {
this.walk_route.clear();
this.show_walk_route = true;
},
infoWindowLocation(position) { // 监听前往按钮回调
infoWindowLocation(path) { // 监听前往按钮回调
// TODO: 实际获取精确定位后导航到位置
// // 判断是否在范围内
// if (!this.isPointInRing()) {
......@@ -814,12 +882,17 @@ export default {
// } else {
// this.setWalkRoute({ lng: this.current_lng, lat: this.current_lat }, { lng: position[0], lat: position[1] })
// }
if (this.walk_route) { // 清除前一条步行导航
this.walk_route.clear();
}
// if (this.walk_route) { // 清除前一条步行导航
// this.walk_route.clear();
// }
// 测试
this.closeInfoWindow(); // 关闭弹框
this.setWalkRoute({ lng: 120.59014, lat: 31.310306 }, { lng: position[0], lat: position[1] });
// this.setWalkRoute({ lng: 120.59014, lat: 31.310306 }, { lng: position[0], lat: position[1] });
if (this.current_route) { // 清除前一条步行导航
this.map.remove([this.current_route]); // 删除地图折线
this.map.remove(this.route_marker); // 删除起始点标记
}
this.addNavRoute(path)
},
setNavLayer({ key }, index) { // 选择地图图层显示
this.isActive = index;
......