JT-CIM/src/views/Map3d/components/manage-basemap.vue

<script setup>
	/**
	 * element-plus组件
	 */
	import {
		ElMessage
	} from 'element-plus';

	import {
		Store
	} from '@/store/index'
	store = Store();

	import no_img from '@/assets/images/no_img.png';
</script>

<template>
	<jt-popup title="底图切换">
		<div class="jt-basemap">
			<div class="top">
				<div class="onceLayer" v-for="(item,index) in baseMaps" :key="index" @click="changeBasicLayer(item)">
					<img v-if="item.imageurl" :src="item.imageurl" :class="item.layerorder===selectImg?'selectImg':''" />
				</div>
			</div>
			<div class="bottom">
				<el-switch v-model="terrain.isTerrain" @change="changeTerrain" />
				<span>显示地形</span>
				<span> </span>
				<el-switch v-model="mark.isMark" @change="changeMark" />
				<span>显示标注</span>
			</div>
		</div>
	</jt-popup>

</template>

<script>
	let store = undefined

	import * as mapWork from "../map"

	export default {
		data() {
			return {
				//底图数据
				baseMaps: [], //底图
				selectImg: store.basemap.selectImg, //选中的底图图片
				selectBaseMap: store.basemap.selectBaseMap, //选中的底图数据

				//地形数据
				terrain: {
					isTerrain: store.terrain.isTerrain, //是否切换地形
					terrainData: store.terrain.terrainData, //地形数据
				},

				//标注数据
				mark: {
					isMark: store.mark.isMark, //是否显示标注
					markData: store.mark.markData, //地形数据
				}

			}
		},
		methods: {

			/**
			 * 切换地形事件
			 */
			changeTerrain() {
				mapWork.setLayersControl(window.viewer, this.terrain.terrainData, this.terrain.isTerrain);
			},

			/**
			 * 切换标注
			 */
			changeMark() {
				//图层ID
				let serviceId = "service_" + this.mark.markData.layercode + this.mark.markData.layerorder;
				this.mark.markData.serviceId = serviceId;

				//透明度
				let opacity = 1;
				if (this.mark.markData.opacity == null) {
					opacity = 1;
				} else {
					opacity = Number(this.mark.markData.opacity);
				}
				this.mark.markData.opacity = opacity;

				mapWork.setLayersControl(window.viewer, this.mark.markData, this.mark.isMark).then(res => {
					if (res === true) {

					} else {
						ElMessage(res)
					}
				});
			},

			/**
			 * 切换底图事件
			 * @param {Object} item
			 */
			changeBasicLayer(item) {

				this.selectImg = item.layerorder;
				store.basemap.selectImg = item.layerorder;


				//删除底图后再添加
				mapWork.setLayersControl(window.viewer, this.selectBaseMap, false).then(res => {

					//图层ID
					let serviceId = "service_" + item.layercode + item.layerorder;
					item.serviceId = serviceId;

					//透明度
					let opacity = 1;
					if (item.opacity == null) {
						opacity = 1;
					} else {
						opacity = Number(item.opacity);
					}
					item.opacity = opacity;

					store.basemap.selectBaseMap = item;
					this.selectBaseMap = item;

					mapWork.setLayersControl(window.viewer, item, true).then(res => {
						if (res === true) {

						} else {
							ElMessage(res)
						}
					});

				});
			},

			/**
			 * 添加底图图集
			 */
			initBaseMap() {
				let _self = this;

				mapWork.getBaseMaps().then(basemaps => {
					basemaps.forEach(item => {
						let parameterset = item.parameterset;
						if (item.parameterset instanceof Object) {
							parameterset = item.parameterset;
						} else if (item.parameterset != "" && item.parameterset != null && item.parameterset != undefined) {
							parameterset = JSON.parse(item.parameterset);
						}

						if (item.datasource && item.datasource != '#' && item.layertype != '地形' && item.layertype != '标注') {
							if (parameterset) {
								if (parameterset.imgurl) {
									item.imageurl = parameterset.imgurl;
								} else {
									item.imageurl = no_img;
									ElMessage("请检查底图图层表parameterset字段是否设置imgurl");
								}
								_self.baseMaps.push(item);
							}
						}
					});

					//底图组件高度不变
					if (_self.baseMaps.length % 3 == 1) {
						_self.baseMaps.push({}, {})
					} else if (_self.baseMaps.length % 3 == 2) {
						_self.baseMaps.push({})
					} else if (_self.baseMaps.length % 3 == 0) {
						_self.baseMaps.push({}, {}, {})
					}
				});
			}
		},
		mounted() {
			this.initBaseMap();
		}
	}
</script>

<style scoped lang="scss">
	@charset "UTF-8";

	@font-face {
		font-family: "TTTGB-Medium";
		src: url("@/assets/fonts/fonts/TTTGB-Medium.ttf") format("truetype"),
			url("@/assets/fonts/fonts/TTTGB-Medium.eot") format("embedded-opentype"),
			url("@/assets/fonts/fonts/TTTGB-Medium.svg") format("svg");
		font-weight: normal;
		font-style: normal;
	}

	::v-deep .is-checked .el-switch__core .el-switch__action {
		margin-left: calc(-1rem - 14rem);
	}

	::v-deep .el-switch__core .el-switch__action {
		top: 1rem;
	}

	::v-deep .el-switch__core .el-switch__action {
		width: 14rem;
		height: 14rem;
	}

	::v-deep .el-switch__core {
		width: 40rem !important;
		height: 20rem !important;
	}

	.jt-basemap {
		position: absolute;
		width: 350rem;
		height: calc(100% - 105rem);

		.top {
			height: calc(100% - 50rem);
			padding: 10rem;
			flex-wrap: wrap;
			justify-content: space-around;
			overflow-y: scroll; // 设置y轴方向的滚动条
			overflow: hidden; // 超出部分隐藏

			.onceLayer {
				display: inline-block;
				padding: 5rem;
				width: 100rem;
				height: 120rem;

				img {
					height: 100%;
					width: 100%;
					border-radius: 5rem;
				}

				img:hover {
					cursor: pointer;
					height: calc(100% - 0rem);
					width: calc(100% - 0rem);
					border: 0rem solid rgba(255, 255, 255, .8);
					box-shadow: 0 0 2rem 2rem rgba(255, 255, 255, .5);
					transition: all .2s;
				}

				//选中图片样式
				.selectImg {
					border: 0rem solid rgba(255, 255, 255, .8);
					box-shadow: 0 0 3rem 3rem rgba(255, 255, 255, .5);
				}

				span {
					font-size: 14rem;
					display: inline-block;
				}
			}
		}

		.bottom {
			width: 100%;
			height: 40rem;
			line-height: 40rem;
			text-align: left;
			padding-left: 10rem;
			border: 0px solid red;

			el-switch {
				margin: 3rem 0rem;
				width: 36rem !important;
			}

			span {
				margin: 4rem 4rem;
			}
		}
	}
</style>