Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
c2353497 1 parent 8181be2b

地图样式新增

Inline Side-by-side
Showing 3 changed files with 215 additions and 41 deletions
<!--
* @Date: 2023-01-09 15:22:38
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-05-26 16:14:24
* @FilePath: /tswj/index.html
* @LastEditTime: 2023-05-29 14:18:36
* @FilePath: /map-demo/index.html
* @Description: 文件描述
-->
<!DOCTYPE html>
......@@ -22,6 +22,6 @@
securityJsCode:'8602057c4c8dae5bed9a240c0582c46f',
}
</script>
<script src="https://webapi.amap.com/maps?v=2.0&key=381c6763e1fefd810fbab697f470149c&plugin=AMap.ElasticMarker,AMap.ImageLayer"></script>
<script src="https://webapi.amap.com/maps?v=2.0&key=381c6763e1fefd810fbab697f470149c&plugin=AMap.ElasticMarker,AMap.ImageLayer,AMap.ToolBar"></script>
</body>
</html>
......
......@@ -119,9 +119,18 @@ var toiletInfo = [
},
];
var activityInfo = [
{
name: '素食',
position: [120.587152, 31.314396],
icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
},
];
export default {
sheshi,
touristSpots,
spotInfo,
toiletInfo,
activityInfo,
};
......
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-05-29 06:15:20
* @FilePath: /tswj/src/views/Map.vue
* @LastEditTime: 2023-05-29 17:21:49
* @FilePath: /map-demo/src/views/index.vue
* @Description: 文件描述
-->
<template>
<div class="">
<div style="height: 100vh; position: relative;">
<div id="container"></div>
<div class="input-card">
<div class="input-item">
<!-- <div class="input-item">
<span @click="showPublic" class="btn">显示公共设施</span>
<span @click="hidePublic" class="btn">隐藏公共设施</span>
</div>
<div class="input-item">
</div> -->
<!-- <div class="input-item">
<button class="btn" @click="addLayer" style="margin-right:1rem;">添加图层</button>
<button class="btn" @click="removeLayer">删除图层</button>
</div>
</div> -->
<div class="input-item">
<button class="btn" @click="setLocation" style="margin-right:1rem;">定位服务</button>
<!-- <button class="btn" @click="setLocation" style="margin-right:1rem;">定位服务</button>
<button class="btn" @click="addLocation" style="margin-right:1rem;">添加定位路线</button>
<button class="btn" @click="removeLocation" style="margin-right:1rem;">删除定位路线</button>
<button class="btn" @click="removeLocation" style="margin-right:1rem;">删除定位路线</button> -->
<button class="btn" @click="setTitleLayer" style="margin-right:1rem;">添加贴片</button>
</div>
<div class="input-item">
<button class="btn" @click="setSpotLayer" style="margin-right:1rem;">景点信息</button>
<button class="btn" @click="setToiletLayer" style="margin-right:1rem;">卫生间</button>
</div>
<div class="input-item">
<button class="btn" @click="setWalkRoute" style="margin-right:1rem;">步行导航</button>
<button class="btn" @click="removeWalkRoute" style="margin-right:1rem;">移除步行导航</button>
</div>
</div>
<div class="nav-bar-wrapper">
<van-row>
<van-col span="8" :class="[isActive === 0 ? 'checked' : '', 'item']" @click="setNavLayer(0)">
<van-icon name="shop-o" size="1.25rem" /><br/>
<span style="font-size: 0.85rem;">景区信息</span>
</van-col>
<van-col span="8" :class="[isActive === 1 ? 'checked' : '', 'item']" @click="setNavLayer(1)">
<van-icon name="shop-o" size="1.25rem" /><br/>
<span style="font-size: 0.85rem;">卫生间</span>
</van-col>
<van-col span="8" :class="[isActive === 2 ? 'checked' : '', 'item']" @click="setNavLayer(2)">
<van-icon name="shop-o" size="1.25rem" /><br/>
<span style="font-size: 0.85rem;">活动中心</span>
</van-col>
</van-row>
</div>
<div class="safe-route-wrapper">
<span v-if="open_safe_route" @click="handleSafeRoute(true)">打开安全路线</span>
<span v-else @click="handleSafeRoute(false)">关闭安全路线</span>
</div>
<div class="tool-bar-wrapper">
<van-icon name="plus" style="margin-bottom: 1rem;" @click="setZoom('plus')" />
<van-icon name="minus" style="margin-bottom: 1rem;" @click="setZoom('minus')" />
<van-icon name="aim" @click="setLocation" />
</div>
<van-popup v-model:show="show_popup" position="bottom" :overlay="false" closeable
:style="{ padding: '64px' }">内容</van-popup>
......@@ -139,22 +160,29 @@ export default {
current_route: '',
spotInfo: [], // 景点信息实体
toiletInfo: [], // 厕所信息实体
activityInfo: [], // 活动场所信息实体
show_popup: false,
dialog_show: false,
xys_lng: '',
xys_lat: '',
walk_route: '',
toolBar: '',
isActive: 0,
safe_route: [],
open_safe_route: true
}
},
mounted() {
// 初始化地图
this.initMap();
this.loadPublicEquipment();
this.loadScenicSpot();
this.loadPlant();
// this.loadPublicEquipment();
// this.loadScenicSpot();
// this.loadPlant();
// this.setMapBoundary();
// 使用之前都要再获取一下地址
this.getLocation()
// 打开贴片地图
// this.setTitleLayer()
},
methods: {
// addMarker () {
......@@ -190,7 +218,7 @@ export default {
showIndoorMap: false,
defaultCursor: 'pointer', // 地图默认鼠标样式
showBuildingBlock: false, // 是否展示地图 3D 楼块
zooms: [17, 19], // 地图显示的缩放级别范围, 默认为 [2, 20] ，取值范围 [2 ~ 30]
zooms: [17, 18], // 地图显示的缩放级别范围, 默认为 [2, 20] ，取值范围 [2 ~ 30]
showLabel: true, // 是否展示地图文字和 POI 信息
zoom: 18, // 设置地图显示的缩放级别
pitch: 0, // 俯仰角度，默认 0，最大值根据地图当前 zoom 级别不断增大，2D地图下无效 。
......@@ -204,6 +232,8 @@ export default {
});
// 添加地图点击事件
this.map.on("click", this.showInfoClick);
//
this.setSpotLayer()
},
layerMap() {
// 图层地图
......@@ -508,6 +538,56 @@ export default {
})
this.map.add(this.toiletInfo);
},
loadActivityMaker() { // 加载活动标记
var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
_.each(coord.activityInfo, (x, i) => {
var marker = new AMap.ElasticMarker({
position: coord.activityInfo[i].position,
zooms: [17, 19],
styles: [{
icon: {
img: coord.activityInfo[i].icon,
size: [16, 16], // 可见区域的大小
anchor: 'bottom-center', // 锚点
fitZoom: 14, // 最合适的级别
scaleFactor: 2, // 地图放大一级的缩放比例系数
maxScale: 1.4, // 最大放大比例
minScale: 0.8 // 最小放大比例
},
label: {
content: coord.activityInfo[i].name,
position: 'TM',
minZoom: 18
}
}],
zoomStyleMapping
});
// let infoWindowContent =
// '<div className="custom-infowindow input-card">' +
// '<label style="color:grey">公共厕所</label>' +
// // 为 infowindow 添加自定义事件
// '<div id="lnglat2container" class="btn">我要走过去</div>' +
// '</div>';
// // 创建一个自定义内容的 infowindow 实例
// let infoWindow = new AMap.InfoWindow({
// position: coord.spotInfo[i].position,
// offset: new AMap.Pixel(0, -30),
// content: infoWindowContent
// });
if (clickListener) {
marker.off('click', clickListener)
}
// 绑定景点的点击事件 - 文字出现才能触发
var clickListener = marker.on('click', (e) => {
// infoWindow.open(this.map);
this.show_popup = true;
})
//
this.activityInfo.push(marker);
})
this.map.add(this.activityInfo);
},
setMapBoundary() { // 地图描边
new AMap.Polygon({
cursor: 'pointer',
......@@ -543,19 +623,23 @@ export default {
},
setLocation() { // 开启定位服务
// this.map.addControl(this.geolocation); // 添加定位图标 自动跳转当前位置
// 使用纠正偏移后的地址，打一个定位标记
var marker = new AMap.Marker({
position: new AMap.LngLat(this.current_lng, this.current_lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
});
this.map.add(marker);
// 定位到地图中心-西园寺
this.map.setCenter([120.587334, 31.314823]);
// 判断是否在范围内
let isPointInRing = AMap.GeometryUtil.isPointInRing([this.current_lng, this.current_lat], [
[120.585111, 31.316084], [120.585111, 31.316084], [120.589488, 31.313197], [120.585422, 31.313005]
]);
if (!isPointInRing) {
this.dialog_show = true;
if (!this.current_lng || !this.current_lat) {
this.getLocation()
} else {
// 使用纠正偏移后的地址，打一个定位标记
var marker = new AMap.Marker({
position: new AMap.LngLat(this.current_lng, this.current_lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
});
this.map.add(marker);
// 定位到地图中心-西园寺
this.map.setCenter([120.587334, 31.314823]);
// 判断是否在范围内
let isPointInRing = AMap.GeometryUtil.isPointInRing([this.current_lng, this.current_lat], [
[120.585111, 31.316084], [120.585111, 31.316084], [120.589488, 31.313197], [120.585422, 31.313005]
]);
if (!isPointInRing) {
this.dialog_show = true;
}
}
},
getLocation() {
......@@ -577,13 +661,22 @@ export default {
})
});
},
setZoom (type) { // 设置放大缩小地图
const zoom = this.map.getZoom();
if (type === 'plus') {
this.map.setZoom(zoom + 1)
}
if (type === 'minus') {
this.map.setZoom(zoom - 1)
}
},
setRoute() { // 生成路径
// 行动路线
var path = [
[116.413384, 39.874071],
[116.413141, 39.877934],
[116.411469, 39.878175],
[this.current_lng, this.current_lat]
[120.587512, 31.313796],
[120.587495, 31.314204],
[120.586862, 31.314304],
[120.586841, 31.314543]
];
this.current_route = new AMap.Polyline({
......@@ -603,12 +696,23 @@ export default {
zIndex: 50
})
},
addLocation() { // 新增路径
addSafeRoute() { // 新增路径
this.setRoute();
this.map.add([this.current_route]);
//
var marker1 = new AMap.Marker({
position: new AMap.LngLat(120.587506, 31.313787), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
});
var marker2 = new AMap.Marker({
position: new AMap.LngLat(120.586825, 31.314543), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
});
// 新增逃生路线标记
this.safe_route = [marker1, marker2]
this.map.add(this.safe_route);
},
removeLocation() { // 删除路径
removeSafeRoute() { // 删除路径
this.map.remove([this.current_route]);
this.map.remove(this.safe_route);
},
setTitleLayer() {
//该demo可模拟水印效果
......@@ -662,25 +766,36 @@ export default {
layer.setMap(this.map);
// 只显示相应区域，移动会回到选定范围
this.lockMapBounds()
// this.lockMapBounds()
},
setSpotLayer() { // 设置景点图层
this.removeToiletLayer()
this.removeActivityLayer()
// 加载地图标记
this.loadSpotMaker()
},
setToiletLayer() { // 设置景点图层
this.removeSpotLayer()
this.removeActivityLayer()
// 加载厕所标记
this.loadToiletMaker()
},
setActivityLayer() { // 设置活动图层
this.removeSpotLayer();
this.removeToiletLayer()
// 加载活动标记
this.loadActivityMaker()
},
removeSpotLayer() { // 删除景点标记
this.map.remove(this.spotInfo);
},
removeToiletLayer() { // 删除景点标记
this.map.remove(this.toiletInfo);
},
removeActivityLayer() { // 删除活动标记
this.map.remove(this.activityInfo);
},
// 限制地图范围
lockMapBounds() {
// var bounds = this.map.getBounds();
......@@ -724,6 +839,27 @@ export default {
},
removeWalkRoute () {
this.walk_route.clear()
},
setNavLayer (index) { // 选择地图图层显示
this.isActive = index;
if (index === 0) {
this.setSpotLayer()
}
if (index === 1) {
this.setToiletLayer()
}
if (index === 2) {
this.setActivityLayer()
}
},
handleSafeRoute (status) { // 打开/关闭逃生路线线
if (status) {
this.addSafeRoute()
this.open_safe_route = false;
} else {
this.removeSafeRoute()
this.open_safe_route = true;
}
}
}
}
......@@ -768,10 +904,39 @@ export default {
border-radius: 0.4rem;
box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
position: fixed;
top: 1rem;
top: 4rem;
right: 1rem;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 0.75rem 1.25rem;
}
.tool-bar-wrapper {
position: absolute;
left: 20px;
bottom: 40px;
width: 20px;
}
.nav-bar-wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3.5rem;
background-color: white;
text-align: center;
box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
.item {
padding-top: 0.5rem;
}
.checked {
color: red;
}
}
.safe-route-wrapper {
position: absolute;
bottom: 1rem;
right: 1rem;
background-color: white;
}
</style>
......