1

components/layer-checkbox.vue

@@ -1,7 +1,7 @@
 <template>
-	<view class="uni-flex uni-column" style="align-items: center;" @click="valueChange(value)">
+	<view class="uni-flex uni-column" style="align-items: center;margin-right: 16px;" @click="valueChange(value)">
 		<view class="content" :class="checked?'checked':''">
-			<image :src="'/static/layer-'+icon+'.png'" :class="icon==='cd'?'icon2':'icon'"></image>
+			<image :src="icon.startsWith('http')?icon:'/static/layer-'+icon+'.png'" class="icon" :style="iconStyle"></image>
 			<uni-icons v-if="checked" type="checkbox-filled" class="check-icon" color="#fff"></uni-icons>
 		</view>
 		<view style="text-align: center;width: 64px;" :class="checked?'checked':''">{{label}}</view>
@@ -13,14 +13,14 @@
 		name: "layer-checkbox",
 		props: {
 			label: String,
-			value: String,
+			value: Number,
 			change: Function,
 			icon: String,
-			checked: Boolean
+			checked: Boolean,
-		},
+			iconStyle: String
+		}, 
 		data() {
-			return {
+			return {};
-			};
 		},
 		methods: {
 			valueChange(value) {
@@ -38,12 +38,7 @@
 
 	.icon2 {
 		position: absolute;
-		width: 60px;
+		width: 60px;height: 60px;left: 0;right: 0;top: 0;bottom: 0;
-		height: 60px;
-		left: 0;
-		right: 0;
-		top: 0;
-		bottom: 0;
 	}
 
 	.icon {

pages/index/index.vue

@@ -36,10 +36,10 @@
 			<uni-popup ref="popup" background-color="#fff" @change="popupChange">
 				<view class="popup-title">图层叠加</view>
 				<view class="popup-content uni-flex uni-row" style="align-items: center;justify-content: center;">
-					<view class="uni-flex uni-row" style="justify-content: space-around;flex:1;">
+					<view class="uni-flex uni-row" style="flex:1;flex-wrap: wrap;">
-						<layer-checkbox v-for="item in layerItems" :icon="item.icon" :label="item.text"
+						<layer-checkbox v-for="(item,i) in layerItems" :icon="item.icon" :label="item.text" :value="i"
-							:value="item.value" @change="checkLayer"
+							@change="checkLayer" :checked="currentLayers.indexOf(i)>-1"
-							:checked="currentLayers.indexOf(item.value)>-1"></layer-checkbox>
+							:iconStyle="item.iconStyle"></layer-checkbox>
 					</view>
 				</view>
 			</uni-popup>
@@ -116,31 +116,7 @@
 				},
 				currentLayers: [],
 				currentLayer: null,
-				layerItems: [{
+				layerItems: [],
-					text: '生态修复工程',
-					value: 'stxfgc',
-					icon: 'stxfgc',
-					zIndex: 99,
-					detailUrl: '/stxh/appDetails'
-				}, {
-					text: '征占用',
-					value: 'cdzzy_view',
-					icon: 'zzy',
-					zIndex: 88,
-					detailUrl: '/cdzhy/appDetails'
-				}, {
-					text: '非法占用',
-					value: 'ffzy_layer',
-					icon: 'ffzy',
-					zIndex: 77,
-					detailUrl: '/cdzhy/appFfzyDetails'
-				}, {
-					text: '草地',
-					value: 't_grassland_result',
-					icon: 'cd',
-					zIndex: 66,
-					detailUrl: '/cdzy/appDetails'
-				}],
 				detailItems: [],
 				detailGroups: [],
 				currentGroupTab: null,
@@ -158,9 +134,10 @@
 				if (newVal) {
 					this.mapData = {
 						layerOpts: newVal?.map(val => {
-							const item = this.layerItems.find(l => l.value === val);
+							const item = this.layerItems[val];
 							return {
-								layerName: val,
+								layerName: item.value,
+								layerIndex: val,
 								...item
 							}
 						})
@@ -196,10 +173,11 @@
 			})
 
 			this.compassHandler = res => {
-				console.log(res)
 				this.compassNum = res.direction;
 			}
 			uni.onCompassChange(this.compassHandler);
+
+			this.loadLayerItems();
 		},
 		onShow() {
 			uni.startCompass()
@@ -208,7 +186,34 @@
 			uni.stopCompass();
 		},
 		methods: {
+			loadLayerItems() {
+				uni.request({
+					url: `${helper.mgServerUrl}/app/config/layer`,
+					header: {
+						Authorization: `Bearer ${this.token}`
+					},
+					success: (resp) => {
+						console.log(resp)
+						if (resp.data.data) {
+							const item = resp.data.data;
+							this.layerItems = item?.layerItems.map(layerItem => {
+								return {
+									text: layerItem.title,
+									value: layerItem.layerName,
+									icon: layerItem.icon,
+									zIndex: 99,
+									detailUrl: layerItem.detailUrl,
+									geoserverUrl: layerItem.geoserverUrl || item.geoserverUrl,
+									layerWorkspace: layerItem.layerWorkspace || item.layerWorkspace,
+									...layerItem
+								}
+							})
+						}
+					},
+				})
+			},
 			checkLayer(value) {
+				console.log('check', value)
 				const index = this.currentLayers.findIndex(l => l === value);
 				if (index > -1) {
 					this.currentLayers.splice(index, 1);
@@ -251,8 +256,9 @@
 			},
 			showFfzy(id) {
 				console.log(id)
-				if (!this.currentLayers.find(l => l === 'ffzy_layer')) {
+				const ffzyLayerIndex = this.layerItems.findIndex(item => item.value === 'ffzy_layer')
-					this.currentLayers.push('ffzy_layer')
+				if (!this.currentLayers.find(l => l === ffzyLayerIndex)) {
+					this.currentLayers.push(ffzyLayerIndex)
 				}
 				uni.request({
 					url: `${helper.serverUrl}/ffzy/ffzy/${id}`,
@@ -356,9 +362,9 @@
 
 				// }
 				const apis = [];
-				this.layerItems.forEach(item => {
+				this.layerItems.forEach((item, i) => {
-					const layerStr = this.currentLayers.find(l => l === item.value);
+					const layerIndex = this.currentLayers.findIndex(l => l === i);
-					if (layerStr) {
+					if (layerIndex > -1) {
 						apis.push(item.detailUrl);
 					}
 				});
@@ -483,20 +489,21 @@
 						}) || []
 						const layers = newValue.layerOpts.map(opt => {
 							let layer = businessLayers.find(l => {
-								return l.get('businessName') === opt.layerName;
+								return l.get('businessIndex') === opt.layerIndex;
 							})
 							if (!layer) {
 								layer = new Image({
 									businessId: 'business-layer',
 									businessName: opt.layerName,
+									businessIndex: opt.layerIndex,
 									source: new ImageWMS({
 										ratio: 1,
-										url: `${helper.geoserverUrl}/geoserver/yzt/wms`,
+										url: `${opt.geoserverUrl}/geoserver/yzt/wms`,
 										params: {
 											'FORMAT': 'image/png',
 											'VERSION': '1.1.1',
-											"STYLES": '',
+											"STYLES": opt.layerStyle || '',
-											"LAYERS": `yzt:${opt.layerName}`,
+											"LAYERS": `${opt.layerWorkspace}:${opt.layerName}`,
 											"exceptions": 'application/vnd.ogc.se_inimage',
 										}
 									}),
@@ -511,8 +518,8 @@
 						})
 						vectorLayer.getSource().clear();
 						businessLayers.forEach(layer => {
-							const index = newValue.layerOpts.findIndex(opt => opt.layerName === layer.get(
+							const index = newValue.layerOpts.findIndex(opt => opt.layerIndex === layer.get(
-								'businessName'));
+								'businessIndex'));
 							if (index === -1) {
 								layer.setVisible(false);
 							}