rsmonitoring-app/pages/index.vue

<template>
	<view class="orderPage">
		<hcCounts v-show="!showlist" ref="hcRef" @golist="golist"></hcCounts>
		<view v-show="showlist">
			<MapView ref="mapRef"></MapView>
			<hcList ref="hclistRef" v-show="!isdetail" @returnCount="returnCount" @addmap="addGeoJson"
				@goDetail="goDetail"></hcList>
			<hcDetails ref="detailsRef" v-show="isdetail" @returnList="returnList"></hcDetails>
		</view>
	</view>
</template>
<script>
	import hcCounts from "./index/common/hcCounts.vue";
	import hcList from "./index/common/hcList.vue";
	import hcDetails from "./index/common/hcDetails.vue";
	import MapView from "./check/MapView.vue";
	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";
	export default {
		name: "list",
		components: {
			hcCounts,
			MapView,
			hcList,
			hcDetails,

		},
		data() {
			return {
				showlist: false,
				isdetail: false,
				curPageResultLayer: {}
			};
		},
		onLoad() {},
		created() {},
		mounted() {},
		onReady() {

		},
		methods: {
			golist(a, hccount) {
				this.showlist = true;
				this.$refs.hclistRef.golist(a, hccount);
			},
			returnCount() {
				this.showlist = false;
				this.$refs.hcRef.getList();
			},
			returnList() {
				this.isdetail = false;
				this.$refs.hcRef.getList();
			},
			goDetail(val) {
				this.isdetail = true
				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, 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>

<style lang="scss">
	.orderPage {
		padding: 30rpx;
		//background: azure;
		padding-bottom: 50px;
		position: relative;
		height: 100vh;

	}
</style>