rsmonitoring-app/pages/check/MapView.vue

<template>

	<view id="container" class="" :prop="maplist" :change:prop="mapModule.addGeoJson" :item="mapitem"
		:change:item="mapModule.flyto">
	</view>

</template>
<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')
				if(val)this.mapitem = val
			},
		}
	}
</script>
<script module="mapModule" lang="renderjs">
	// import Axios from "../../static";
	import "ol/ol.css";

	import {
		transform
	} from "ol/proj.js";
	import Map from "ol/Map";
	import View from "ol/View";
	// 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 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() {
			this.createMap();
		},
		methods: {
			createMap() {
				var view = new View({
					center: transform([116.40, 39.91], "EPSG:4326", "EPSG:3857"), //地图初始中心点
					projection: "EPSG:3857",
					zoom: 15,
					minZoom: 2,
					maxZoom: 18
				});
				this.addMap("container", view);
			},
			addMap(target, view) {
				if (this.maps[target]) return;

				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,
					}),
				});
				// 矢量标注
				var cvaLayer = new Tile({
					source: new XYZ({
						url: "http://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=" +
							key,
					}),
				});
				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: [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(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, // 允许视图超出分辨率限制
				});

			},
		},
	};
</script>
<style scoped>
	#container {
		width: 100vw;
		height: 40vh;
	}
</style>