check-uniapp/pages/check/MapView.vue

<template>
  <view id="container" class=""></view>
  <!-- <link href="ol/ol.css"></link> -->
</template>
<script module="ol" lang="renderjs">
	// import "ol/ol.css";
	import gcoord from "gcoord";
	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";
	let map = null;
	export default {
		name: "map-view",
		data() {
			return {
				maps: {},
			};
		},
		mounted() {
			this.createMap();
		},
		methods: {
			createMap() {
				var view = new View({
					center: transform([103.23, 35.33], "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:4326",
					zoom: 4,
					minZoom: 1,
				});
				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,
				// 	}),
				// });
				var key = "12df6e32906dbb916fad14dc65ebdbf8"; // 请替换成你的key
				// 矢量底图
				var vecLayer = new Tile({
					source: new XYZ({
						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,
					}),
				});


				let map = new Map({
					//地图容器div的ID
					target,
					//地图容器中加载的图层
					// layers: [gaodeMapLayer],
					layers: [vecLayer, cvaLayer],
					//地图视图设置
					view, //同一个view
				});
				this.maps[target] = map;
				window.map = this.maps;
				console.log(window.map, "window.map");
			},
		},
	};
</script>
<style scoped>
#container {
  width: 100%;
  height: 50vh;
}
</style>