changshu_map/src/views/Index.vue

<template>
	<div>
		<div id="mapContainer" class="mapContainer"></div>

		<!-- 点位分类 -->
		<div class="type-box" v-if="typeShow">
			<div :class="['type-item',{'type-active': index == typeIndex}]" v-for="(item,index) in mapType"
				@click="getSpotsByCategory(index)">{{item.name}}</div>
		</div>

		<div class="area-box" v-if="typeShow">
			<!-- 区域分类 -->
			<div>
				<div class="area-item area-items" @click="areaMore = !areaMore">
					<img :src="'https://static.ticket.sz-trip.com/yandu/images/map/'+ (areaMore ? 'topIcon.png' : 'bottomIcon.png')"
						alt="" />
					{{areaMore ? '收起' : '展开'}}
				</div>
				<div v-if="areaMore">
					<div v-for="(item,index) in areaList" :key="index"
						:class="['area-item',{'area-active':index == areaIndex}]" @click="changeArea(index)">
						{{item.name}}
					</div>
				</div>
			</div>
			<!-- 行程线路 -->
			<div>
				<div class="area-item area-items" @click="addLine" v-if="isMyLine">
					<img src="https://static.ticket.sz-trip.com/yandu/images/map/myLine.png" alt="" />
					我的<br>行程
				</div>
				<div class="area-item area-items" @click="addLine" v-else>
					<img src="https://static.ticket.sz-trip.com/yandu/images/map/addLine.png" alt="" />
					添加<br>行程
				</div>
				<div class="area-item area-items" @click="gotoLine">
					<img src="https://static.ticket.sz-trip.com/yandu/images/map/line.png" alt="" />
					线路<br>推荐
				</div>
			</div>
		</div>

		<!-- 详情弹框 -->
		<van-popup v-model="detailShow" @close="audioPause" :overlay-style="{'background-color': 'rgba(0, 0, 0, 0)'}"
			position="bottom" round>
			<ProductDetail ref="detailRef" :type="productType" :info="detailInfo" :audioSrc="audioSrc" :genreType="genreType"/>
		</van-popup>

		<!-- 输入线路信息弹框 -->
		<van-popup v-model="addLineShow" position="center" round>
			<div class="addLine-box">
				添加行程
				<div class="addLine-item">
					线路名称: <input type="text" v-model="lineName" placeholder="请输入线路名称" />
				</div>
				<div class="addLine-item">
					开始时间: <input type="text" v-model="lineDate" placeholder="请选择出发时间" readonly
						@click="lineDateShow = true" />
					<img src="https://static.ticket.sz-trip.com/yandu/images/map/dateRight.png" alt="">
				</div>
				<div class="addLine-btn flex-around">
					<div @click="addLineShow = false">取消</div>
					<div @click="lineClick">下一步</div>
				</div>
			</div>
		</van-popup>

		<!-- 日期选择 -->
		<van-popup v-model="lineDateShow" round position="bottom">
			<van-datetime-picker v-model="currentDate" type="date" title="选择年月日" @confirm="lineDateConfirm" @cancel="lineDateShow = false" />
		</van-popup>

		<!-- 添加线路行程弹框 -->
		<van-popup v-model="lineRouteShow" round position="bottom">
			<LineRoute :lineItem="addLineInfo" />
		</van-popup>

		<!-- 线路详情弹框 -->
		<van-popup v-model="lineDetailShow" :overlay="false" :overlay-style="{'background-color': 'rgba(0, 0, 0, 0)'}" round
			position="bottom" @close="closeLine" class="linePopup">
			<div class="close-LineBtn" @click="closeLine">
				退出线路
			</div>
			<LineDetail @changeCenter="changeMapCenter"/>
		</van-popup>
	</div>
</template>

<script>
	import moment from 'moment'
	import ProductDetail from './compoents/productDetail'
	import LineRoute from './compoents/lineRoute'
	import LineDetail from './compoents/lineDetail'
	export default {
		components: {
			ProductDetail,
			LineRoute,
			LineDetail
		},
		data() {
			return {
				mapObj: null,
				mapMarker: null,
				basics: {},
				mapType: [],
				typeShow: true,
				typeIndex: -1,
				areaList: [],
				areaIndex: 0,
				areaMore: true,
				detailShow: false, // 详情弹框
				productType: true,
				addLineShow: false, // 输入线路名称和日期弹框
				lineName: '',
				lineDate: '',
				lineDateShow: false, // 选择日期弹框
				currentDate: new Date(),
				lineRouteShow: false, // 添加线路行程弹框
				lineAddStatus: false, // 点击添加行程时为true，地图景点图标改变为加号
				addLineInfo: '',
				maps: [], //热点
				lineDetailShow: false, // 线路弹框
				lineInfo: {},
				detailInfo: {},
				audioSrc: '',
				genreType: '',
				isMyLine: false, // 是否有我的线路
			};
		},
		mounted() {
			if(this.$route.query.token) this.$store.commit('changeUserInfo', {token: this.$route.query.token})
			this.getAreaList()
			
			// 判断是否是线路列表过来的
			if(sessionStorage.getItem('lineDetail') && JSON.parse(sessionStorage.getItem('lineDetail')).points.length > 0) {
				setTimeout(() => {
					this.showLineDetail()
				},500)
			}
			
			// 如果从我的行程里点击添加线路
			if(sessionStorage.getItem('addUserLine')) {
				this.lineName = ''
				this.lineDate = ''
				this.addLineShow = true
				sessionStorage.removeItem("addUserLine")
			}
		},
		activated() {
			
		},
		methods: {
			// 获取全部区域
			getAreaList() {
				this.post({}, '/api/emap/get_map_list').then(res => {
					this.areaList = res.data
					if (res.data.length > 0) {
						this.getAreaDetail()
						this.getCategory()
						this.getMyLine()
					}
				})
			},
			// 更改地图区域
			changeArea(index) {
				this.areaIndex = index
				// 销毁地图
				this.mapObj.destroy()
				this.getAreaDetail()
				this.getCategory()
				this.getMyLine()
			},
			// 根据code获取当前区域信息
			getAreaDetail() {
				this.post({
					code: this.areaList[this.areaIndex].code
				}, '/api/emap/get_init').then(res => {
					this.basics = res.data
					this.basics.center_poi = JSON.parse(this.basics.center_poi)
					this.basics.lb_poi = JSON.parse(this.basics.lb_poi)
					this.basics.rt_poi = JSON.parse(this.basics.rt_poi)
					this.$nextTick(() => {
						this.initMap()
					})
				})
			},
			// 根据code获取热点分类
			getCategory() {
				this.post({
					code: this.areaList[this.areaIndex].code
				}, '/api/emap/getByCategory').then(res => {
					this.mapType = res.data
					if (this.mapType.length > 0) this.getSpotsByCategory(0)
				})
			},
			// 根据code、热点分类获取热点
			getSpotsByCategory(index) {
				this.typeIndex = index
				this.post({
					code: this.areaList[this.areaIndex].code,
					category_id: this.mapType[this.typeIndex].id
				}, '/api/emap/getSpotsByCategory').then(res => {
					this.maps = res.data
					this.lineAddStatus = false
					// 移除原先点位
					this.clearMarkers()
					if (this.maps.length > 0) this.setMarkers()
				})
			},
			// 查询是否有我的线路
			getMyLine() {
				this.post({
					type: 1,
					code: this.areaList[this.areaIndex].code
				},'/api/emap/getLineByCode').then(res => {
					if(res.data.length > 0) {
						this.isMyLine = true
					}else {
						this.isMyLine = false
					}
				})
			},
			initMap() {
				let centerLat = this.basics.center_poi[1]
				let centerLon = this.basics.center_poi[0]
				var center = new TMap.LatLng(this.basics.center_poi[1], this.basics.center_poi[0]) //设置中心点坐标
				var sw = new TMap.LatLng(this.basics.rt_poi[1], this.basics.rt_poi[0]); //东北角坐标,
				var ne = new TMap.LatLng(this.basics.lb_poi[1], this.basics.lb_poi[0]); //西南角坐标,
				var latlngBounds = new TMap.LatLngBounds(ne, sw);
				// 初始化地图
				this.mapObj = new TMap.Map("mapContainer", {
					center: center,
					boundary: latlngBounds,
					zoom: 12, // 地图默认缩放级别
					minZoom: 12,
					maxZoom: 15,
					showControl: true, // 是否显示地图上的控件
					// viewMode: '2D',  // 地图视图模式，支持2D和3D，默认为3D。2D模式下俯仰角和旋转角度始终为0
					rotatable: false,
					rotation: 0, //设置地图旋转角度
				});

				this.mapObj.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM); // 移除缩放控件
				this.mapObj.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION); // 移除旋转控件

				// 初始化瓦片
				// 瓦片图需要切好每个位置的图
				// x,y,z 为上图的坐标
				new TMap.ImageTileLayer({
					getTileUrl: function(x, y, z) {
						console.log(x, y, z)
						//拼接瓦片URL
						let url =
							`https://static.ticket.sz-trip.com/yandu/images/maps/` +
							z +
							"/" +
							x +
							"/" +
							y +
							".png";
						return url;
					},
					tileSize: 256, //瓦片像素尺寸
					minZoom: 12, //显示自定义瓦片的最小级别
					maxZoom: 15, //显示自定义瓦片的最大级别
					visible: true, //是否可见
					zIndex: 5000, //层级高度（z轴）
					opacity: 1, //图层透明度：1不透明，0为全透明
					map: this.mapObj, //设置图层显示到哪个地图实例中
				});

				// 创建点聚合实例
				// this.markerCluster = new TMap.MarkerCluster({
				// 	id: "cluster",
				// 	map: this.mapObj,
				// 	enableDefaultStyle: true, // 是否启用默认样式
				// 	minimumClusterSize: 5, // 形成聚合簇的最小个数
				// 	geometries: [],	// 点数组
				// 	zoomOnClick: true,
				// 	gridSize: 60,
				// 	averageCenter: true,
				// });
			},
			// 地图打点
			setMarkers() {
				// 聚合点点位
				// this.markerCluster.setGeometries([
				// 	{
				// 		position: new TMap.LatLng(33.332682, 120.16451)
				// 	},
				// 	{
				// 		position: new TMap.LatLng(33.329281, 120.161117)
				// 	}
				// ]);
				let markers = []
				let labels = []
				this.maps.forEach(item => {
					markers.push({
						"styleId": 'marker',
						id: item.goods ? (item.goods.genre == 'food' ? item.goods.id : item.goods.scenic_id) : '', // 产品id
						genre: item.goods ? item.goods.genre : '', // 产品类型
						name: item.name, // 产品名称
						address: item.address, // 详情地址
						audioSrc: item.audio_file, // 音频路径
						spotId: item.id, // 点位id
						position: new TMap.LatLng(item.poi_gcj02[1], item.poi_gcj02[0])
					})

					labels.push({
						id: 'label', // 点图形数据的标志信息
						styleId: 'label', // 样式id
						position: new TMap.LatLng(item.poi_gcj02[1], item.poi_gcj02[0]), // 标注点位置
						content: item.name, // 标注文本
						properties: {
							// 标注点的属性数据
							title: 'label',
						},
					})
				})

				// 添加marker点
				this.multiMarker = new TMap.MultiMarker({
					id: 'marker-layer',
					map: this.mapObj,
					styles: {
						"marker": new TMap.MarkerStyle({
							"width": 24,
							"height": 30,
							"src": 'https://static.ticket.sz-trip.com/yandu/images/map/scenic.png',
							"src": this.util.showImg(this.mapType.find(i => {
								return i.id == this.maps[0].category_id
							}).icon_image)
						})
					},
					// 点数组
					geometries: markers,
				})

				// 标记点点击事件
				this.multiMarker.on("click", this.markerClick)

				// 文本标记
				this.multiLabel = new TMap.MultiLabel({
					id: 'label-layer',
					map: this.mapObj,
					collisionOptions: {
						sameSource: true,
					}, //开启图层内部的文本标注碰撞
					styles: {
						label: new TMap.LabelStyle({
							color: '#FFF', // 颜色属性
							size: 13, // 文字大小属性
							offset: {
								x: 0,
								y: 15
							}, // 文字偏移属性单位为像素
							angle: 0, // 文字旋转属性
							alignment: 'center', // 文字水平对齐属性
							verticalAlignment: 'middle', // 文字垂直对齐属性
							backgroundColor: 'rgba(0, 0, 0, .5)',
							borderRadius: 7,
							padding: '2px 8px',
						}),
					},
					geometries: labels,
				})

				// 标记文本点击事件
				// this.multiLabel.on("click", this.markerClick)
			},
			// 移除点位
			clearMarkers() {
				if (this.multiMarker) {
					this.multiMarker.setMap(null);
					this.multiMarker = null;
				}

				if (this.multiLabel) {
					this.multiLabel.setMap(null);
					this.multiLabel = null;
				}
			},
			// 改变地图中心
			changeMapCenter(item) {
				this.mapObj.panTo(new TMap.LatLng(item[1], item[0]));
			},
			// 标记点点击事件
			markerClick(evt) {
				console.log(evt.geometry)
				if (this.lineAddStatus) {
					//添加行程时
					this.$dialog.confirm({
						title: '',
						message: '是否将' + evt.geometry.name + '加入行程?'
					}).then(() => {
						this.addLineInfo = evt.geometry
					}).catch(() => {

					})
				} else {
					this.audioSrc = evt.geometry.audioSrc
					this.genreType = evt.geometry.genre
					if(['ticket', 'hotel'].includes(evt.geometry.genre)) {
						// 景点酒店
						this.get({
							id: evt.geometry.id
						},'/api/scenic/getScenicById').then(res => {
							if(res.data) {
								this.productType = true
								this.detailInfo = res.data
								this.detailShow = true
							}
						})
					}else if(evt.geometry.genre == 'food') {
						this.get({
							goods_id: evt.geometry.id
						},'/api/goods/getGoodDetail').then(res => {
							if(res.data) {
								this.productType = true
								this.detailInfo = res.data
								this.detailShow = true
							}
						})
					}else {
						// 停车场 卫生间等
						this.detailInfo = {
							title: evt.geometry.name,
							address: evt.geometry.address,
							lon: evt.geometry.position.lng,
							lat: evt.geometry.position.lat
						}
						this.productType = false
						this.detailShow = true
					}
				}
			},
			// 路线规划
			gotoLine() {
				this.$router.push({
					path: '/lineList',
					query: {
						code: this.areaList[this.areaIndex].code
					}
				})
			},
			// 关闭弹框后暂停音频
			audioPause() {
				this.$refs.detailRef.audioPlay(false)
			},
			// 添加线路
			addLine() {
				if(this.isMyLine) {
					// 已有我的行程
					this.$router.push({
						path: '/lineList',
						query: {
							code: this.areaList[this.areaIndex].code,
							type: '1'
						}
					})
				}else {
					this.lineName = ''
					this.lineDate = ''
					this.addLineShow = true
				}
			},
			// 确认日期
			lineDateConfirm() {
				this.lineDate = moment(this.currentDate).format('YYYY-MM-DD')
				this.lineDateShow = false
			},
			// 输入线路名称和时间,下一步
			lineClick() {
				if (this.lineName.trim().length == 0 || this.lineDate.trim().length == 0) {
					this.$toast('请输入行程信息')
				} else {
					sessionStorage.setItem('lineName', this.lineName)
					sessionStorage.setItem('lineDate', this.lineDate)
					sessionStorage.setItem('lineCode', this.areaList[this.areaIndex].id)
					this.addLineShow = false
					this.lineRouteShow = true
				}
			},
			// 点击添加行程、关闭添加行程弹框，改变景点标识图标
			addlineRoute(status) {
				this.lineRouteShow = false

				if (status) {
					// 点击添加行程重新绘制热点,只展示景点 酒店 餐饮三类
					this.post({
						code: this.areaList[this.areaIndex].code,
					},'/api/emap/getUserSpotsByCategory').then(res => {
						if(res.code == 1) {
							this.maps = res.data
							// 添加行程时为true
							this.lineAddStatus = true
							// 添加行程时隐藏上方分类和右方区域选择
							this.typeShow = false
							// 移除原先点位
							this.clearMarkers()
							if (this.maps.length > 0) this.setMarkers()
							
							// 点击添加行程更换marker样式
							this.multiMarker.setStyles({
								"marker": new TMap.MarkerStyle({
									"width": 24,
									"height": 30,
									"src": 'https://static.ticket.sz-trip.com/yandu/images/map/add.png'
								})
							})
						}
					})
				} else {
					// 移除原先点位
					this.clearMarkers()
					this.typeShow = true
					this.lineAddStatus = false
					this.setMarkers()
				}
			},
			// 线路详情弹框
			showLineDetail() {
				// 移除原先点位
				this.clearMarkers()
				// 隐藏上方分类
				this.typeShow = false
				
				this.lineDetailShow = true
				
				let data = JSON.parse(sessionStorage.getItem('lineDetail'))
				let paths = []
				let labels = []
				
				data.points.forEach((item,index) => {
					paths.push(
						new TMap.LatLng(item.lonlat[1], item.lonlat[0])
					)
					
					labels.push({
						id: 'label', // 点图形数据的标志信息
						styleId: 'label', // 样式id
						position: new TMap.LatLng(item.lonlat[1], item.lonlat[0]), // 标注点位置
						content: (index == 0 ? '起' : (index+1 == data.points.length ? '终' : (index + 1).toString())), // 标注文本
						properties: {
							// 标注点的属性数据
							title: 'label',
						},
					})
				})
				
				// 文本标记
				this.multiLabel = new TMap.MultiLabel({
					id: 'label-layer',
					map: this.mapObj,
					collisionOptions: {
						sameSource: true,
					}, //开启图层内部的文本标注碰撞
					styles: {
						label: new TMap.LabelStyle({
							color: '#FF7F00', // 颜色属性
							size: 16, // 文字大小属性
							offset: {
								x: 0,
								y: 0	
							}, // 文字偏移属性单位为像素
							angle: 0, // 文字旋转属性
							alignment: 'center', // 文字水平对齐属性
							verticalAlignment: 'middle', // 文字垂直对齐属性
							backgroundColor: '#fff',
							borderRadius: 50,
							padding: '8px',
							width: 23,
							height: 23
						}),
					},
					geometries: labels,
				})
				
				// 线路
				this.MultiPolyline = new TMap.MultiPolyline({
					id: 'polyline-layer',
					map: this.mapObj,
					styles: {
						"style_blue": new TMap.PolylineStyle({
							"width": 4,
							'color': '#3777FF', //线填充色
							'borderWidth': 2, //边线宽度
							'borderColor': '#FFF', //边线颜色
							'lineCap': 'butt' //线端头方式
						})
					},
					// 折线数据定义
					geometries: [{
						"id": 'style_blue',
						"styleId": 'style_blue',
						"paths": paths
					}]
				})
				
				setTimeout(() => {
					sessionStorage.removeItem('lineDetail')
				}, 500)
			},
			// 退出线路
			closeLine() {
				this.lineDetailShow = false
				// 移除原先点位
				this.clearMarkers()
				// 移除路线
				if (this.MultiPolyline) {
					this.MultiPolyline.setMap(null);
					this.MultiPolyline = null;
				}
				// 显示上方分类
				this.typeShow = true
				// 地图打点
				this.setMarkers()
			}
		},
		beforeRouteLeave(to, from, next) {
			next(vm => {
				vm.closeLine()
			})
		}
	};
</script>

<style scoped lang="scss">
	div {
		box-sizing: border-box;
	}

	.mapContainer {
		width: 100%;
		height: 100vh;
	}

	.type-box {
		position: fixed;
		z-index: 2000;
		width: 723px;
		height: 53px;
		top: 22px;
		left: 27px;
		display: flex;
		overflow-x: auto;

		.type-item {
			padding: 0 26px;
			line-height: 53px;
			background: #FFFFFF;
			border-radius: 13px;
			font-weight: 500;
			font-size: 27px;
			color: #000000;
			margin-right: 27px;
			flex-shrink: 0;
		}

		.type-active {
			background: linear-gradient(130deg, #9EE4FE, #7FD491);
			font-weight: bold;
		}
	}

	.type-box::-webkit-scrollbar {
		display: none;
	}

	.area-box {
		position: fixed;
		z-index: 2000;
		top: 153px;
		right: 17px;

		&>div {
			width: 87px;
			height: auto;
			background: #FFFFFF;
			border-radius: 43px;
			border: 2px solid #FFFFFF;
			overflow: hidden;
		}

		&>div:last-child {
			margin-top: 24px;

			.area-items {
				height: 133px !important;
			}
		}

		.area-item {
			height: 93px;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			border-top: 1px solid #D8D8D8;
			font-weight: 500;
			font-size: 22px;
			color: #666666;
		}

		.area-items {
			flex-direction: column;
			justify-content: space-around;
			height: 100px;

			img {
				width: 38px;
				height: 38px;
			}
		}

		.area-active {
			background: linear-gradient(130deg, #9EE4FE, #7FD491);
			color: #000000;
			font-weight: bold;
		}
	}

	// 线路弹框
	.addLine-box {
		width: 673px;
		height: 413px;
		background: #FFFFFF;
		border-radius: 27px;
		padding: 32px 33px 0 37px;
		font-weight: bold;
		font-size: 40px;
		color: #000000;

		.addLine-item {
			font-weight: 400;
			font-size: 29px;
			margin-top: 40px;

			input {
				outline: none;
				border: none;
				height: 27px;
				width: 380px;
				margin-left: 30px;
			}

			input::placeholder {
				color: #BEBEBE;
			}

			img {
				width: 20px;
				height: 20px;
			}
		}

		.addLine-btn {
			margin-top: 50px;

			div {
				width: 233px;
				line-height: 67px;
				background: #EAEAEA;
				border-radius: 13px;
				text-align: center;
				font-weight: 500;
				font-size: 29px;
				color: #000000;
			}

			div:last-child {
				background: #71B580;
				color: #FFFFFF;
			}
		}
	}
	
	.linePopup {
		overflow: visible;
		
		.close-LineBtn {
			width: 147px;
			line-height: 67px;
			background: rgba(0, 0, 0, .56);
			border-radius: 13px;
			text-align: center;
			font-weight: 500;
			font-size: 27px;
			color: #FFFFFF;
			position: absolute;
			right: 20px;
			top: -100px;
		}
	}
</style>