底图切换和图层控制结合

src/views/Map3d/components/basicLayer.vue

@@ -20,26 +20,24 @@
 <template>
 	<div class="basicLayer" ref="popup">
 		<div class="borderstyle">
-			<!-- <div class="angle-border-blue left-top-border"></div> -->
-			<!-- <div class="angle-border-blue right-top-border"></div> -->
 			<div class="angle-border left-bottom-border"></div>
 			<div class="angle-border right-bottom-border"></div>
 			<div class="header">
 				<div style="width: 20rem;"></div>
 				<span>底图</span>
-				<i :class="store.userport == 'PC'?'iconfont icon-youjiantou':'iconfont icon-youjiantou'" @click="closebasicLayer" style="font-size: 16rem;" />
+				<i :class="store.userport == 'PC'?'iconfont icon-youjiantou':'iconfont icon-youjiantou'" @click="closeBasicLayer" style="font-size: 16rem;" />
 			</div>
 			<div class="middle">
-				<div class="onceLayer" v-for="(item,index) in layerList" :key="index" @click="changeBasicLayer(item.url,item.layerorder,item.imageurl)">
+				<div class="onceLayer" v-for="(item,index) in layerList" :key="index" @click="changeBasicLayer(item)">
 					<img v-if="item.imageurl" :src="item.imageurl" :class="item.layerorder==selectImg?'selectImg':''" />
 					<!-- <span>{{item.title}}</span> -->
 				</div>
 			</div>
 			<div class="footer">
-				<el-switch v-model="terrainData.isterrain" @change="changeTerrain" />
+				<el-switch v-model="terrain.isTerrain" @change="changeTerrain" />
 				<span>显示地形</span>
 				<span> </span>
-				<el-switch v-model="markData.ismark" @change="changeMark" />
+				<el-switch v-model="mark.isMark" @change="changeMark" />
 				<span>显示标注</span>
 			</div>
 			<div class="footers">
@@ -61,30 +59,23 @@
 				layerID: '', //底图切换唯一ID
 				layerList: [], //图层列表
 
-				baseMapData: {
-					url: "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
-					minimumLevel: 1,
-					maximumLevel: 18
-				},
-
 				//地形数据
-				terrainData: {
-					isterrain: false, //是否切换地形
-					terrainUrl: "http://202.102.167.52:16381/crdata/dem", //地形地址
-					terrainExaggeration: 1, //地形夸张系数
+				terrain: {
+					isTerrain: false, //是否切换地形
+					terrainData: {}, //地形数据
 				},
 
 				//标注数据
-				markData: {
-					ismark: false, //是否显示标注
-					markId: '', //标注id
-					markUrl: "http://202.102.167.52:16381/crdata/mpbz", //标注地址
+				mark: {
+					isMark: false, //是否显示标注
+					markID: '', //标注服务ID
+					markData: {}, //地形数据
 				}
 			}
 		},
 		methods: {
 			//关闭模块事件
-			closebasicLayer() {
+			closeBasicLayer() {
 				let style = document.styleSheets[0];
 				style.insertRule(
 					"@keyframes move-right {0% {opacity: 1;transform: translateX(-100%)}100% {opacity: 1;transform: translateX(0%)}}",
@@ -110,8 +101,8 @@
 			 * 切换地形事件
 			 */
 			changeTerrain() {
-				if (this.terrainData.isterrain) {
-					this.addTerrain();
+				if (this.terrain.isTerrain) {
+					this.$parent.$refs.refLayer.setLayersControl(jt3d, this.terrain.terrainData, true);
 				} else {
 					jt3d.layer.removeTerrain();
 				}
@@ -121,69 +112,32 @@
 			 * 切换标注
 			 */
 			changeMark() {
-				if (this.markData.ismark) {
-					this.addMark();
+				if (this.mark.isMark) {
+					this.$parent.$refs.refLayer.setLayersControl(jt3d, this.mark.markData, true);
+					this.mark.markID = this.$parent.$refs.refLayer.mark + "_" + this.mark.markData.layercode + this.mark.markData.layerorder;
 				} else {
 					jt3d.layer.removeImageryProvider({
-						serviceId: store.markID,
+						serviceId: this.mark.markID,
 					});
 				}
 			},
 
 			/**
-			 * 切换底图事件，接收点击传来的url
-			 * @param {Object} url
-			 * @param {Object} index
-			 * @param {Object} imgurl
+			 * 切换底图事件
+			 * @param {Object} item
 			 */
-			changeBasicLayer(url, index, imgurl) {
-				if (!imgurl) return
-				this.selectImg = index
-				let self = this
+			changeBasicLayer(item) {
+
+				let _self = this;
+
+				this.selectImg = item.layerorder;
+
 				//删除底图后再添加
 				jt3d.layer.removeImageryProvider({
 					serviceId: this.layerID,
 				}).then(res => {
-					let options = {
-						url: url, //服务地址
-						minimumLevel: this.baseMapData.minimumLevel,
-						maximumLevel: this.baseMapData.maximumLevel
-					};
-					if (url.indexOf("map.geoq.cn") != -1) {
-						options.CRS = "WGS84";
-					}
-
-					jt3d.layer.addUrlTemplateImagery(options, function(serviceId) {
-						self.layerID = serviceId;
-					});
-
-					var imageryLayers = window["viewer"].imageryLayers;
-					imageryLayers.lowerToBottom(window[self.layerID]);
-					imageryLayers.raise(window[self.layerID]);
-				})
-			},
-
-			/**
-			 * 添加地形
-			 */
-			addTerrain() {
-				jt3d.layer.addTerrain({
-					url: this.terrainData.terrainUrl,
-					terrainExaggeration: this.terrainData.terrainExaggeration,
-				})
-			},
-
-			/**
-			 * 添加标注
-			 */
-			addMark() {
-				jt3d.layer.addTileMapServiceImagery({
-					url: this.markData.markUrl
-				}, function(serviceId) {
-					store.markID = serviceId;
-
-					var imageryLayers = window["viewer"].imageryLayers;
-					imageryLayers.raiseToTop(window[store.markID]);
+					_self.$parent.$refs.refLayer.setLayersControl(jt3d, item, true);
+					_self.layerID = _self.$parent.$refs.refLayer.mark + "_" + item.layercode + item.layerorder;;
 				})
 			},
 
@@ -210,55 +164,35 @@
 						}
 
 						if (item.layertype === '地形') {
-							_self.terrainData.terrainUrl = item.datasource;
-							if (parameterset) {
-								if (parameterset.terrainExaggeration) { //地形夸张系数
-									_self.terrainData.terrainExaggeration = parameterset
-										.terrainExaggeration;
-								}
-							}
+							_self.terrain.terrainData = item;
 						}
 						if (item.layertype === '标注') {
-							_self.markData.markUrl = item.datasource;
+							_self.mark.markData = item;
 						}
 
 						if (item.isinit === '1' && item.layertype === '地形') {
-							_self.terrainData.isterrain = true;
-							_self.addTerrain();
+							_self.terrain.isTerrain = true;
+							//默认加载的地形
+							_self.$parent.$refs.refLayer.setLayersControl(jt3d, item, true);
 						} else if (item.isinit === '1' && item.layertype === '标注') {
-							_self.markData.ismark = true;
-							_self.addMark();
+							_self.mark.isMark = true;
+							_self.mark.markID = _self.$parent.$refs.refLayer.mark + "_" + item.layercode + item.layerorder;
+
+							//默认加载的标注
+							_self.$parent.$refs.refLayer.setLayersControl(jt3d, item, true);
 						} else if (item.isinit === '1') {
 							_self.selectImg = item.layerorder;
+							_self.layerID = _self.$parent.$refs.refLayer.mark + "_" + item.layercode + item.layerorder;
 
-							//设置参数
-							let options = {
-								url: item.datasource, //服务地址
-								minimumLevel: _self.baseMapData.minimumLevel,
-								maximumLevel: _self.baseMapData.maximumLevel
-							};
-							if (item.datasource.indexOf("map.geoq.cn") != -1) {
-								options.CRS = "WGS84";
-							}
 							//默认加载的底图
-							jt3d.layer.addUrlTemplateImagery(options, function(serviceId) {
-								_self.layerID = serviceId;
-
-								var imageryLayers = window["viewer"].imageryLayers;
-								imageryLayers.lowerToBottom(window[_self.layerID]);
-								imageryLayers.raise(window[_self.layerID]);
-							});
+							_self.$parent.$refs.refLayer.setLayersControl(jt3d, item, true);
 						}
 
 						if (item.datasource && item.datasource != '#' && item.layertype != '地形' && item.layertype != '标注') {
 							if (parameterset) {
 								if (parameterset.imgurl) {
-									_self.layerList.push({
-										title: item.layername,
-										url: item.datasource,
-										imageurl: parameterset.imgurl,
-										layerorder: item.layerorder
-									})
+									item.imageurl = parameterset.imgurl;
+									_self.layerList.push(item);
 								} else {
 									ElMessage("请检查底图图层表parameterset字段是否设置imgurl");
 								}
@@ -471,19 +405,7 @@
 				height: 30rem;
 			}
 
-			.left-top-border {
-				top: -2rem;
-				left: -2rem;
-				border-left: 2rem solid #008affdd;
-				border-top: 2rem solid #008affdd;
-			}
 
-			.right-top-border {
-				top: -2rem;
-				right: -2rem;
-				border-right: 2rem solid #008affdd;
-				border-top: 2rem solid #008affdd;
-			}
 
 			.left-bottom-border {
 				bottom: -2rem;

src/views/Map3d/components/layer.vue

@@ -883,12 +883,6 @@
 
 				var imageryLayers = jt3d._viewer.imageryLayers;
 
-				//标注层置顶
-				if (store.markID) {
-					console.log('标注id', store.markID)
-					imageryLayers.raiseToTop(window[store.markID]);
-				}
-
 				//设置图层初始顺序
 				imageryLayers.lowerToBottom(window[serviceId]);
 				imageryLayers.raise(window[serviceId]);
@@ -906,10 +900,7 @@
 								imageryLayers.raise(window[serviceId])
 								console.log('aaa', serviceId)
 
-							} else {
-								// imageryLayers.raiseToTop(window[store.markID]);
-								// break;
-							}
+							} 
 						}
 					}
 				})