rsmonitoring-app/pages/check/MapView.vue

<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> -->
</template>
<script module="ol" 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'
	let map = null;
	export default {
		name: "map-view",
		data() {
			return {
				maps: {},
			};
		},
		mounted() {
			this.createMap();
		},
		methods: {
			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,
					minZoom: 2,
					maxZoom: 20
				});
				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,
					}),
				});
				// 矢量标注
				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,
					}),
				});
				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;
				// window.map = this.maps;
				console.log(map, "window.map", lyr);
			},
		},
	};
</script>
<style scoped>
	#container {
		width: 100vw;
		height: 40vh;
	}
</style>