图斑上图问题研究解决

pages/check/MapView.vue

@@ -1,14 +1,43 @@
 <template>
-	<view id="container" class=""></view>
-	<!-- <image src="@/static/images/logo2.jpg"></image> -->
-	<!-- <image src="@/static/images/xxmLogo.png"></image> -->
-	<!-- <image src="@/static/roadmap/3/6/3.png"></image> -->
-	<!-- <image src="../../static/roadmap/3/6/3.png"></image> -->
-	<!-- <link href="ol/ol.css"></link> -->
+
+	<view id="container" class="" :prop="maplist" :change:prop="mapModule.addGeoJson" :item="mapitem"
+		:change:item="mapModule.flyto">
+	</view>
+
 </template>
-<script module="ol" lang="renderjs">
+<script>
+	export default {
+		props: {
+			// maplist: {
+			// 	type: Array,
+			// 	default: []
+			// },
+		},
+		data() {
+			return {
+				maps: {},
+				maplist: [],
+				mapitem: {},
+			};
+		},
+		mounted() {
+			// console.log(mapModule, 'zmapModule')
+		},
+		methods: {
+			setlist(list) {
+				console.log(list, 'list')
+				this.maplist = list
+			},
+			setitem(val) {
+				console.log(val, 'val')
+				this.mapitem = val
+			},
+		}
+	}
+</script>
+<script module="mapModule" lang="renderjs">
 	// import Axios from "../../static";
-	// import "ol/ol.css";
+	import "ol/ol.css";
 
 	import {
 		transform
@@ -18,13 +47,24 @@
 	// import TileLayer from "ol/layer/Tile";
 	import XYZ from "ol/source/XYZ";
 	import Tile from "ol/layer/Tile";
-	import OSM from 'ol/source/OSM'
+	import OSM from 'ol/source/OSM';
+	import parse from "wellknown";
+	import VectorLayer from "ol/layer/Vector";
+	import VectorSource from "ol/source/Vector";
+	import {
+		Style,
+		Icon
+	} from "ol/style";
+	import Stroke from "ol/style/Stroke";
+	import GeoJSON from "ol/format/GeoJSON";
 	let map = null;
 	export default {
 		name: "map-view",
 		data() {
 			return {
 				maps: {},
+				vectorLayer: {},
+				curPageResultLayer: {}
 			};
 		},
 		mounted() {
@@ -34,49 +74,24 @@
 			createMap() {
 				var view = new View({
 					center: transform([116.40, 39.91], "EPSG:4326", "EPSG:3857"), //地图初始中心点
-					// center: gcoord.transform([103.23, 35.33], "EPSG:4326", "EPSG:3857"), //地图初始中心点
-					// 	[106.67591743605254, 38.21012898330025],
-					// 	gcoord.WGS84,
-					// 	gcoord.BD09
-					// ), //地图初始中心点
 					projection: "EPSG:3857",
-					zoom: 12,
+					zoom: 15,
 					minZoom: 2,
-					maxZoom: 20
+					maxZoom: 18
 				});
 				this.addMap("container", view);
 			},
 			addMap(target, view) {
 				if (this.maps[target]) return;
-				// var gaodeMapLayer = new TileLayer({
-				// 	title: "高德地图",
-				// 	source: new XYZ({
-				// 		url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
-				// 		wrapX: false,
-				// 	}),
-				// });
-				// 使用OpenStreetMap地图源
-				// var osm= new Tile({
-				//              source: new OSM(), 
-				//            });
-				// var osm = new Tile({
-				// 	source: new XYZ({
-				// 		url: "@/static/roadmap/{z}/{x}/{y}.png",
-				// 	}),
-				// });
-				//console.log('../../../www/static/roadmap/{2}/{3}/{1}.png')
-				//var vecLayer1 = new Tile({
-				//	source: new XYZ({
-				//		url: "../../../www/static/roadmap/{z}/{x}/{y}.png",
-				//	}),
-				//});
+
 				var key = "12df6e32906dbb916fad14dc65ebdbf8"; // 请替换成你的key
 				// 矢量底图
 				var vecLayer = new Tile({
 					source: new XYZ({
 						//url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png'
 						//'&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
-						url:"http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=" +key,
+						url: "http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=" +
+							key,
 					}),
 				});
 				// 矢量标注
@@ -86,30 +101,126 @@
 							key,
 					}),
 				});
-				console.log("瓦片路径：..doc/tiles/{z}/{x}/{y}.png");
 				var lyr = new Tile({
 					source: new XYZ({
 						//url: "http://49.232.215.206:3001/static/tiles/gg/{z}/{x}/{-y}.png"
 						url: "../doc/tiles/{z}/{x}/{-y}.png"
 					}),
 				});
-
-
-
 				let map = new Map({
 					//地图容器div的ID
 					target,
 					//地图容器中加载的图层
-					// layers: [gaodeMapLayer],
-					//  layers: [lyr],
 					layers: [vecLayer, cvaLayer, lyr],
 					//地图视图设置
 					view, //同一个view
 
 				});
 				this.maps[target] = map;
+				// uni.$globalData = this.maps
+				// this.$ownerInstance.callMethod('setmap', this.maps);
+				this.initVectorLayer()
 				// window.map = this.maps;
-				console.log(map, "window.map", lyr);
+				// console.log(window.map, "window.map", 'lyr');
+			},
+			getMap() {
+				return this.maps
+			},
+			initVectorLayer(name = 'container') {
+				if (!this.vectorLayer[name]) {
+					let vectorSource = new VectorSource({
+						// projection: "EPSG:3857",
+					});
+					this.vectorLayer[name] = new VectorLayer({
+						source: vectorSource,
+						style: new Style({
+							stroke: new Stroke({
+								color: "#f00",
+								width: 2,
+							}),
+						}),
+					});
+					this.maps[name].addLayer(this.vectorLayer[name]);
+				}
+
+				if (!this.curPageResultLayer[name]) {
+					let vectorSource = new VectorSource();
+					this.curPageResultLayer[name] = new VectorLayer({
+						source: vectorSource,
+						zIndex: 999,
+						style: new Style({
+							stroke: new Stroke({
+								color: "#1f1cd3",
+								width: 2,
+							}),
+						}),
+					});
+					this.maps[name].addLayer(this.curPageResultLayer[name]);
+				}
+			},
+			//创建监测图斑列表实体
+			addGeoJson(maplist, ) {
+
+				maplist.forEach((titem, i) => {
+					if (titem.geom && titem.geom != "") {
+						if (typeof titem.geom === "string") {
+							titem.geom = parse(titem.geom);
+						}
+						let features = new GeoJSON().readFeatures(titem.geom, {
+							dataProjection: "EPSG:4326",
+							featureProjection: "EPSG:3857"
+						});
+						var tempName = name + i;
+						this.curPageResultLayer[tempName] = new VectorLayer({
+							source: new VectorSource({
+								features: features,
+							}),
+							style: function(feature) {
+								return new Style({
+									stroke: new Stroke({
+										//边界样式
+										color: "rgba(0, 0, 255, 1)",
+										width: 2,
+									}),
+								});
+							},
+							zIndex: 9999,
+						});
+						this.maps.container.addLayer(this.curPageResultLayer[tempName]);
+
+
+					}
+				});
+
+				if (maplist.length) {
+					this.flytoByLayer(this.curPageResultLayer[0])
+
+				}
+			},
+			flyto(item) {
+				// window.map["mapDiv"]
+				if (!this.maps['container']) return
+				this.maps['container'].getView().animate({
+					center: transform([item.lzb, item.bzb], "EPSG:4326", "EPSG:3857"),
+					zoom: 18,
+					duration: 20, // 动画持续时间，单位毫秒
+				});
+
+			},
+			flytoByLayer(layer) {
+				let fullExtent = layer
+					.getSource()
+					.getExtent();
+				console.log('maplist', fullExtent)
+				let map = this.maps.container
+				map.getView().fit(fullExtent, {
+					duration: 3, //动画的持续时间,
+					callback: null,
+					size: map.getSize(),
+					padding: [100, 100, 100, 100],
+					constrainResolution: false, // 允许视图超出分辨率限制
+				});
+
 			},
 		},
 	};

pages/index.vue

@@ -60,66 +60,12 @@
 			},
 			goDetail(val) {
 				this.isdetail = true
+				this.$refs.mapRef.setitem(val)
 				this.$refs.detailsRef.handleClick(val);
 			},
-			flyto(item) {
-				// window.map["mapDiv"]
-				this.$refs.mapRef.maps['container'].getView().animate({
-					center: [item.lzb, item.bzb],
-					zoom: 16.5,
-					duration: 2000, // 动画持续时间，单位毫秒
-				});
+			addGeoJson(maplist) {
+				this.$refs.mapRef.setlist(maplist)
 			},
-			//创建监测图斑列表实体
-			addGeoJson(maplist, name = 'container', isfly = true) {
-
-				maplist.forEach((titem, i) => {
-					if (titem.geom && titem.geom != "") {
-						if (typeof titem.geom === "string") {
-							// let geom = this.tableData[i].geom;
-							titem.geom = parse(titem.geom);
-						}
-						let features = new GeoJSON().readFeatures(titem.geom);
-						var tempName = name + i;
-						this.curPageResultLayer[tempName] = new VectorLayer({
-							source: new VectorSource({
-								features: features,
-							}),
-							style: function(feature) {
-								return new Style({
-									stroke: new Stroke({
-										//边界样式
-										color: "rgba(0, 0, 255, 1)",
-										width: 2,
-									}),
-								});
-							},
-							zIndex: 9999,
-						});
-						this.$refs.mapRef.maps[name].addLayer(this.curPageResultLayer[tempName]);
-					}
-				});
-				let map = this.$refs.mapRef.maps[name]
-				console.log(map.getSize(), name, isfly)
-				if (isfly) {
-					// this.flyto(maplist[0])
-					let fullExtent = this.curPageResultLayer[
-							name + (maplist.length - 1)
-						]
-						.getSource()
-						.getExtent();
-					console.log(fullExtent, name, isfly)
-					map.getView().fit(fullExtent, {
-						duration: 3, //动画的持续时间,
-						callback: null,
-						//size: map.getSize(),
-						padding: [0, 0, 0, 0],
-						//constrainResolution: false, // 允许视图超出分辨率限制
-					});
-				}
-			},
-
-
 		},
 	};
 </script>