改用天地图

pages/check/MapView.vue

@@ -1,92 +1,143 @@
 <template>
-	<view id="container" class=""></view>
+  <view id="container" class=""></view>
 </template>
 <script>
-	import "ol/ol.css";
-	import gcoord from "gcoord";
-	import Map from "ol/Map";
-	import View from "ol/View";
-	import TileLayer from "ol/layer/Tile";
-	import OSM from 'ol/source/OSM';
-	import XYZ from 'ol/source/XYZ'
-	// const getUserInfo = () => {
-	// 	apiUserInfo().then(res => {
-	// 		console.log(res);
-	// 		userinfo.value = res.data
-	// 	})
-	// }
-	let map: any = null
-	export default {
-		name: "map-view",
-		data() {
-			return {
-				maps: {}
-			}
-		},
-		mounted() {
-			// this.initAMap();
-			this.createMap();
-		},
-		unmounted() {
-			map && map.destroy();
-		},
-		methods: {
-			initAMap() {
-				map = new AMap.Map("container", {
-					viewMode: "3D", // 是否为3D地图模式
-					zoom: 11,
-					center: [116.397428, 39.90923],
-				});
-				// 设置离线地图
-				map.setPlugins({
-					'AMap.Offline': {}
-				});
-				// 添加离线地图数据
-				map.offline.setCity('北京');
-			},
-			createMap() {
-				var view = new View({
-					// center: transform([103.23, 35.33], "EPSG:4326", "EPSG:3857"), //地图初始中心点
-					center: gcoord.transform(
-						[106.67591743605254, 38.21012898330025],
-						gcoord.WGS84,
-						gcoord.BD09
-					), //地图初始中心点
-					projection: "EPSG:4326",
-					zoom: 4,
-					minZoom: 1,
-				});
-				this.addMap("container", view);
-
-			},
-			addMap(target:any, 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,
-					}),
-				});
-				let map = new Map({
-					//地图容器div的ID
-					target,
-					//地图容器中加载的图层
-					layers: [gaodeMapLayer],
-					//地图视图设置
-					view, //同一个view
-				});
-				this.maps[target] = map;
-				window.map = this.maps;
-				console.log(window.map, "window.map");
-			},
-		},
-
-	};
+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";
+// const getUserInfo = () => {
+// 	apiUserInfo().then(res => {
+// 		console.log(res);
+// 		userinfo.value = res.data
+// 	})
+// }
+let map: any = null;
+export default {
+  name: "map-view",
+  data() {
+    return {
+      maps: {},
+    };
+  },
+  mounted() {
+    // this.initAMap();
+    this.createMap();
+  },
+  unmounted() {
+    map && map.destroy();
+  },
+  methods: {
+    initAMap() {
+      map = new AMap.Map("container", {
+        viewMode: "3D", // 是否为3D地图模式
+        zoom: 11,
+        center: [116.397428, 39.90923],
+      });
+      // 设置离线地图
+      map.setPlugins({
+        "AMap.Offline": {},
+      });
+      // 添加离线地图数据
+      map.offline.setCity("北京");
+    },
+    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: any, 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,
+        }),
+      });
+	  
+      // 影像底图
+      var imgLayer = new Tile({
+        source: new XYZ({
+          url:
+            "http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=" +
+            key,
+        }),
+      });
+	  // 影像标注
+      var imgCiaLayer = new Tile({
+        source: new XYZ({
+          url:
+            "http://t0.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=" +
+            key,
+        }),
+      });
+      // 地形晕染
+      var terLayer = new Tile({
+        source: new XYZ({
+          url:
+            "http://t0.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=" +
+            key,
+        }),
+      });
+      // 地形标注层
+      var ctaLayer = new Tile({
+        source: new XYZ({
+          url:
+            "http://t0.tianditu.gov.cn/cta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&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: 100vh;
-	}
+#container {
+  width: 100%;
+  height: 100vh;
+}
 </style>