check-uniapp/pages/check/MapView.vue

<template>
  <view id="container" class=""></view>
</template>
<script>
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;
}
</style>