1

components/layer-checkbox.vue

@@ -32,7 +32,8 @@
 
 <style scoped>
 	.checked {
-		border-color: #ff0 !important;
+		border-color:  #f00 !important;
+		/* border-width: 4px; */
 		color: #01D393 !important;
 	}
 
@@ -42,13 +43,13 @@
 	}
 
 	.icon {
-		width: 72px;
-		height: 72px;
+		width: 60px;
+		height: 60px;
 		position: absolute;
-		left: -6px;
-		right: -6px;
-		top: -6px;
-		bottom: -6px;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
 	}
 
 	.check-icon {
@@ -60,7 +61,7 @@
 	.content {
 		width: 60px;
 		height: 60px;
-		border: 1px solid #ddd;
+		border: 2px solid #dddddd00;
 		border-radius: 12px;
 		margin-bottom: 8px;
 		position: relative;

manifest.json

@@ -2,8 +2,8 @@
     "name" : "草原管理",
     "appid" : "__UNI__BBBC950",
     "description" : "",
-    "versionName" : "1.0.2",
-    "versionCode" : 102,
+    "versionName" : "1.0.4",
+    "versionCode" : 104,
     "transformPx" : false,
     "app-plus" : {
         /* 5+App特有相关 */

pages/index/index.vue

@@ -22,7 +22,7 @@
 			</view>
 			<view class="btn-location right-btn" @click="location">
 				<image src="/static/dw.png" class="img-location" />
-				<view>定位</view>
+				<view>{{locationing?'定位中':'定位'}}</view> 
 			</view>
 			<view class="btn-mjcl right-btn" @click="showJwdPopup">
 				<image src="/static/jwd.png" class="img-jwd" />
@@ -135,6 +135,7 @@
 	export default {
 		data() {
 			return {
+				locationing: false,
 				searchVisible: false,
 				searchValue: '',
 				mapData: {
@@ -384,14 +385,18 @@
 				console.log('查询值：' + res.value);
 			},
 			location() {
+				this.locationing = true;
 				uni.getLocation({
 					type: 'gcj02',
 					success: (res) => {
-						console.log('当前位置的经度：' + res.longitude);
-						console.log('当前位置的纬度：' + res.latitude);
+						console.log(res);
+						this.locationing = false;
 						this.mapData = {
 							center: [res.longitude, res.latitude, Math.random()]
 						}
+					},
+					fail: () => {
+						this.locationing = false;
 					}
 				});
 			},
@@ -515,10 +520,12 @@
 	} from 'ol/style'
 	import helper from '../../common/helper';
 	import {
-		Image
+		Image,
+		Tile
 	} from 'ol/layer';
 	import {
-		ImageWMS
+		ImageWMS,
+		WMTS
 	} from 'ol/source';
 	import {
 		GeoJSON,
@@ -527,6 +534,9 @@
 	import {
 		getForViewAndSize
 	} from 'ol/extent';
+	import {
+		WMTS as WMTSGrid
+	} from 'ol/tilegrid'
 	let map, vectorLayer;
 	export default {
 		name: 'c-ol-map',
@@ -549,13 +559,26 @@
 						const pFeature = new Feature({
 							geometry: point
 						});
-						pFeature.setStyle(new Style({
+						pFeature.setStyle([new Style({
 								image: new IconStyle({
 									src: './static/wz.png',
 									scale: 0.5,
-								anchor: [0.5, 0]
+									anchor: [0.5, 1]
 								})
-						}))
+							})
+							// , new Style({
+							// 	image: new CircleStyle({
+							// 		radius: 8,
+							// 		fill: new Fill({
+							// 			color: 'rgba(0,0,0,0)',
+							// 		}),
+							// 		stroke: new Stroke({
+							// 			width: 3,
+							// 			color: '#00ffff'
+							// 		}),
+							// 	})
+							// })
+						])
 						vectorLayer.getSource().clear();
 						vectorLayer.getSource().addFeature(pFeature);
 						map.getView().fit(point, {
@@ -571,13 +594,58 @@
 								return l.get('businessIndex') === opt.layerIndex;
 							})
 							if (!layer) {
+								if (opt.layerType === 'wmts') {
+									var gridsetName = 'EPSG:4326';
+									var gridNames = ['EPSG:4326:0', 'EPSG:4326:1', 'EPSG:4326:2', 'EPSG:4326:3',
+										'EPSG:4326:4', 'EPSG:4326:5', 'EPSG:4326:6', 'EPSG:4326:7',
+										'EPSG:4326:8', 'EPSG:4326:9', 'EPSG:4326:10', 'EPSG:4326:11',
+										'EPSG:4326:12', 'EPSG:4326:13', 'EPSG:4326:14', 'EPSG:4326:15',
+										'EPSG:4326:16', 'EPSG:4326:17', 'EPSG:4326:18', 'EPSG:4326:19',
+										'EPSG:4326:20', 'EPSG:4326:21'
+									];
+									var resolutions = [0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125,
+										0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125,
+										0.001373291015625, 6.866455078125E-4, 3.4332275390625E-4,
+										1.71661376953125E-4, 8.58306884765625E-5, 4.291534423828125E-5,
+										2.1457672119140625E-5, 1.0728836059570312E-5, 5.364418029785156E-6,
+										2.682209014892578E-6, 1.341104507446289E-6, 6.705522537231445E-7,
+										3.3527612686157227E-7
+									];
+
+									// const url = `${opt.geoserverUrl}/geoserver/${opt.layerWorkspace}/gwc/service/wmts?layer=${opt.layerWorkspace}:${opt.layerName}&style=${opt.layerStyle||''}&tilematrixset=EPSG:4326&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix=EPSG:4326:{z}&TileCol={y}&TileRow={x}`
+									// console.log(url)
+									var source = new WMTS({
+										url: `${opt.geoserverUrl}/geoserver/${opt.layerWorkspace}/gwc/service/wmts`,
+										// url,
+										layer: `${opt.layerWorkspace}:${opt.layerName}`,
+										matrixSet: gridsetName,
+										format: 'image/png',
+										projection: "EPSG:4326",
+										tileGrid: new WMTSGrid({
+											tileSize: [256, 256],
+											extent: [-180.0, -90.0, 180.0, 90.0],
+											origin: [-180.0, 90.0],
+											resolutions: resolutions,
+											matrixIds: gridNames
+										}),
+										style: opt.layerStyle || '',
+										wrapX: true
+									});
+									layer = new Tile({
+										businessId: 'business-layer',
+										businessName: opt.layerName,
+										businessIndex: opt.layerIndex,
+										zIndex: opt.zIndex,
+										source
+									});
+								} else {
 									layer = new Image({
 										businessId: 'business-layer',
 										businessName: opt.layerName,
 										businessIndex: opt.layerIndex,
 										source: new ImageWMS({
 											ratio: 1,
-										url: `${opt.geoserverUrl}/geoserver/yzt/wms`,
+											url: `${opt.geoserverUrl}/geoserver/${opt.layerWorkspace}/wms`,
 											params: {
 												'FORMAT': 'image/png',
 												'VERSION': '1.1.1',
@@ -588,6 +656,7 @@
 										}),
 										zIndex: opt.zIndex
 									});
+								}
 								businessLayers.push(layer);
 								map.addLayer(layer);
 							} else {