1

components/layer-checkbox.vue

@@ -0,0 +1,74 @@
+<template>
+	<view class="uni-flex uni-column" style="align-items: center;" @click="valueChange(value)">
+		<view class="content" :class="checked?'checked':''">
+			<image :src="'/static/layer-'+icon+'.png'" :class="icon==='cd'?'icon2':'icon'"></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>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "layer-checkbox",
+		props: {
+			label: String,
+			value: String,
+			change: Function,
+			icon: String,
+			checked: Boolean
+		},
+		data() {
+			return {
+			};
+		},
+		methods: {
+			valueChange(value) {
+				this.$emit('change', value);
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.checked {
+		border-color: #ff0 !important;
+		color: #01D393 !important;
+	}
+
+	.icon2 {
+		position: absolute;
+		width: 60px;
+		height: 60px;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+	}
+
+	.icon {
+		width: 72px;
+		height: 72px;
+		position: absolute;
+		left: -6px;
+		right: -6px;
+		top: -6px;
+		bottom: -6px;
+	}
+
+	.check-icon {
+		position: absolute;
+		top: 0;
+		right: 0;
+	}
+
+	.content {
+		width: 60px;
+		height: 60px;
+		border: 1px solid #ddd;
+		border-radius: 12px;
+		margin-bottom: 8px;
+		position: relative;
+		overflow: hidden;
+	}
+</style>

main.js

@@ -2,8 +2,10 @@ import Vue from 'vue'
 import App from './App'
 import imageButton from './components/image-button.vue'
 import customAttr from './components/custom-attr.vue'
+import layerCheckbox from './components/layer-checkbox'
 Vue.component('image-button', imageButton)
 Vue.component('custom-attr', customAttr)
+Vue.component('layer-checkbox', layerCheckbox)
 Vue.config.productionTip = false
 
 App.mpType = 'app'

pages/index/index.vue

@@ -32,14 +32,19 @@
 			<!-- 普通弹窗 -->
 			<uni-popup ref="popup" background-color="#fff" @change="popupChange">
 				<view class="popup-title">图层叠加</view>
-				<view class="popup-content">
+				<view class="popup-content uni-flex uni-row" style="align-items: center;justify-content: center;">
-					<uni-data-checkbox mode="tag" v-model="currentLayer" :localdata="layerItems"></uni-data-checkbox>
+					<view class="uni-flex uni-row" style="justify-content: space-around;flex:1;">
+						<layer-checkbox v-for="item in layerItems" :icon="item.icon" :label="item.text"
+							:value="item.value" @change="checkLayer"
+							:checked="currentLayers.indexOf(item.value)>-1"></layer-checkbox>
+					</view>
 				</view>
 			</uni-popup>
 			<!-- 普通弹窗 -->
 			<uni-popup ref="popupDetail" background-color="#fff">
 				<view class="popup-detail-title">
-					<text style="flex:1;font-size: 18px; font-weight: bold;">详情</text>
+					<text
+						style="flex:1;font-size: 18px; font-weight: bold;">{{currentClickLayerItem?currentClickLayerItem.text:''}}详情</text>
 					<text @click="closeDetail()" style="font-size: 16px;color: #555; padding-bottom: 4px;">关闭</text>
 				</view>
 				<view class="popup-content" style="padding: 12px;">
@@ -106,35 +111,54 @@
 				mapData: {
 					center: [102.45438, 32.53223]
 				},
+				currentLayers: [],
 				currentLayer: null,
 				layerItems: [{
-					text: '生态修复工程图层',
+					text: '生态修复工程',
-					value: 'stxfgc'
+					value: 'stxfgc',
+					icon: 'stxfgc',
+					zIndex: 99,
+					detailUrl: '/stxh/details'
 				}, {
-					text: '征占用图层',
+					text: '征占用',
-					value: 'cdzzy_view'
+					value: 'cdzzy_view',
+					icon: 'zzy',
+					zIndex: 88,
+					detailUrl: '/cdzhy/details'
 				}, {
-					text: '非法占用图层',
+					text: '非法占用',
-					value: 'ffzy_layer'
+					value: 'ffzy_layer',
+					icon: 'ffzy',
+					zIndex: 77,
+					detailUrl: '/cdzhy/ffzyDetails'
 				}, {
-					text: '草地图层',
+					text: '草地',
-					value: 't_grassland_result'
+					value: 't_grassland_result',
+					icon: 'cd',
+					zIndex: 66,
+					detailUrl: '/cdzy/cdDetails'
 				}],
 				detailItems: [],
 				detailGroups: [],
 				currentGroupTab: null,
 				token: '',
-				measureStatus: ''
+				measureStatus: '',
+				currentClickLayerItem: null
 			}
 		},
 		watch: {
-			currentLayer(newVal, oldVal) {
+			currentLayers(newVal, oldVal) {
 				const map = this.$map;
 				console.log(newVal, oldVal, map);
-				this.$refs.popup.close()
 				if (newVal) {
 					this.mapData = {
-						layerName: newVal
+						layerOpts: newVal?.map(val => {
+							const item = this.layerItems.find(l => l.value === val);
+							return {
+								layerName: val,
+								...item
+							}
+						})
 					}
 
 				}
@@ -149,6 +173,14 @@
 			})
 		},
 		methods: {
+			checkLayer(value) {
+				const index = this.currentLayers.findIndex(l => l === value);
+				if (index > -1) {
+					this.currentLayers.splice(index, 1);
+				} else {
+					this.currentLayers.push(value)
+				}
+			},
 			closeMeasureStatus() {
 				this.measureStatus = ''
 				this.mapData = {}
@@ -177,7 +209,9 @@
 			},
 			showFfzy(id) {
 				console.log(id)
-				this.currentLayer = 'ffzy_layer'
+				if (!this.currentLayers.find(l => l === 'ffzy_layer')) {
+					this.currentLayers.push('ffzy_layer')
+				}
 				uni.request({
 					url: `${helper.serverUrl}/ffzy/ffzy/${id}`,
 					header: {
@@ -292,40 +326,50 @@
 			showLayerModal() {
 				this.$refs.popup.open('bottom')
 			},
-			requestDetail({
+			_request(index, wkt, apis, callback) {
-				wkt,
+				if (apis[index]) {
-				url
-			}) {
-				uni.request({
-					url,
-					success: (resp) => {
-						console.log(resp?.data?.features?.[0])
-						if (resp?.data?.features?.[0]) {
-							this.mapData = {
-								highLightData: resp?.data?.features?.[0]
-							}
-							let apiStr = '';
-							switch (this.currentLayer) {
-								case 'stxfgc':
-									apiStr = '/stxh/details';
-									break;
-								case 't_grassland_result':
-									apiStr = '/cdzy/cdDetails';
-									break;
-								case 'cdzzy_view':
-									apiStr = '/cdzhy/details';
-									break;
-								case 'ffzy_layer':
-									apiStr = '/cdzhy/ffzyDetails';
-									break;
-							}
-							if (apiStr) {
 					uni.request({
-									url: `${helper.mgServerUrl}${apiStr}?wkt=${wkt}`,
+						url: `${helper.mgServerUrl}${apis[index]}?wkt=${wkt}`,
 						success: (resp2) => {
 							console.log(resp2)
-										const groups = _.groupBy(resp2?.data?.data
+							if (resp2?.data?.data?.dyColumn?.length > 0) {
-											.dyColumn, 'tab');
+								const layerItem = this.layerItems.find(item => item.detailUrl === apis[index]);
+								this.currentClickLayerItem = layerItem;
+								callback(resp2?.data?.data, layerItem)
+							} else {
+								this._request(++index, wkt, apis, callback)
+							}
+						}
+					})
+				} else {
+					callback();
+				}
+			},
+			requestDetail({
+				wkt
+			}) {
+				// if (resp?.data?.features?.[0]) {
+				// 	this.mapData = {
+				// 		highLightData: resp?.data?.features?.[0]
+				// 	}
+
+				// }
+				const apis = [];
+				this.layerItems.forEach(item => {
+					const layerStr = this.currentLayers.find(l => l === item.value);
+					if (layerStr) {
+						apis.push(item.detailUrl);
+					}
+				});
+				this._request(0, wkt, apis, (resp) => {
+					if (resp) {
+						if (resp.geom) {
+							this.mapData = {
+								highLightWkt: resp.geom
+							}
+
+						}
+						const groups = _.groupBy(resp.dyColumn, 'tab');
 						this.detailGroups = _.keys(groups).map(key => {
 							return {
 								tab: key,
@@ -339,25 +383,9 @@
 						});
 						this.currentGroupTab = this.detailGroups?.[0]?.tab;
 						this.$refs.popupDetail.open('bottom');
+
 					}
-								})
+				});
-							}
-						}
-						// const props = resp?.data?.features?.[0]?.properties;
-						// if (helper.layerDetails[this.currentLayer]) {
-						// 	this.detailItems = helper.layerDetails[this.currentLayer].map(item => {
-						// 		return {
-						// 			...item,
-						// 			value: props[item.field]
-						// 		}
-						// 	});
-						// 	this.$refs.popupDetail.open('bottom');
-						// }
-					},
-					fail: (resp) => {
-						console.log(resp)
-					}
-				})
 			}
 		}
 	}
@@ -446,9 +474,18 @@
 							maxZoom: 18
 						});
 					}
-					if (newValue.layerName) {
+					if (newValue.layerOpts) {
-						const layer = new Image({
+						const businessLayers = map.getAllLayers().filter(l => {
-							id: 'business-layer',
+							return l.get('businessId') === 'business-layer';
+						}) || []
+						const layers = newValue.layerOpts.map(opt => {
+							let layer = businessLayers.find(l => {
+								return l.get('businessName') === opt.layerName;
+							})
+							if (!layer) {
+								layer = new Image({
+									businessId: 'business-layer',
+									businessName: opt.layerName,
 									source: new ImageWMS({
 										ratio: 1,
 										url: `${helper.geoserverUrl}/geoserver/yzt/wms`,
@@ -456,20 +493,30 @@
 											'FORMAT': 'image/png',
 											'VERSION': '1.1.1',
 											"STYLES": '',
-									"LAYERS": `yzt:${newValue.layerName}`,
+											"LAYERS": `yzt:${opt.layerName}`,
 											"exceptions": 'application/vnd.ogc.se_inimage',
 										}
-							})
+									}),
+									zIndex: opt.zIndex
 								});
-						vectorLayer.getSource().clear();
+								businessLayers.push(layer);
-						map.removeLayer(map.getAllLayers().find(layer => {
-
-							return layer.get('id') === 'business-layer'
-						}))
 								map.addLayer(layer);
+							} else {
+								layer.setVisible(true)
+							}
+							return layer;
+						})
+						vectorLayer.getSource().clear();
+						businessLayers.forEach(layer => {
+							const index = newValue.layerOpts.findIndex(opt => opt.layerName === layer.get(
+								'businessName'));
+							if (index === -1) {
+								layer.setVisible(false);
 							}
-					if (newValue.highLightData) {
+						})
-						const feature = new GeoJSON().readFeature(newValue.highLightData)
+					}
+					if (newValue.highLightWkt) {
+						const feature = new WKT().readFeature(newValue.highLightWkt)
 						feature.setStyle(new Style({
 							fill: new Fill({
 								color: 'rgba(0,0,0,0)',
@@ -547,7 +594,7 @@
 				vectorLayer = new VectorLayer({
 					id: 'v-layer',
 					source: new VectorSource(),
-					zIndex: 99
+					zIndex: 999
 				})
 				map.addLayer(vectorLayer);
 				map.on('singleclick', evt => {
@@ -557,8 +604,8 @@
 				})
 			},
 			showByWkt(coordinate) {
-				const source = map.getAllLayers().find(l => l.get('id') === 'business-layer')?.getSource();
+				// const source = map.getAllLayers().find(l => l.get('id') === 'business-layer')?.getSource();
-				if (source) {
+				// if (source) {
 				const view = map.getView();
 				const viewResolution = view.getResolution();
 				const [x1] = map.getCoordinateFromPixel([0, 0]);
@@ -567,18 +614,15 @@
 				const circle = new Circle(coordinate, radius);
 				const polygon = fromCircle(circle);
 				const wkt = new WKT().writeGeometry(polygon);
-					const url = source.getFeatureInfoUrl(
+				// const url = source.getFeatureInfoUrl(
-						coordinate, viewResolution, view.getProjection(), {
+				// 	coordinate, viewResolution, view.getProjection(), {
-							'INFO_FORMAT': 'application/json',
+				// 		'INFO_FORMAT': 'application/json',
-							'FEATURE_COUNT': 50
+				// 		'FEATURE_COUNT': 50
-						});
+				// 	});
-					if (url) {
 				this.ownerInstance?.callMethod('requestDetail', {
-							wkt: wkt,
+					wkt: wkt
-							url
 				})
-					}
+				// }
-				}
 			}
 		}
 	}