yjdp-web/src/components/Map/index.vue

<template>
  <div class="map-container">
    <div id="yztMap" class="map-container"></div>
<!--    <el-button type="primary" class="btn" @click="switchMap('satellite')">切换卫星图</el-button>-->
<!--    <el-button type="primary" class="btn" style="left: 150px" @click="removeLayers()">清除图层</el-button>-->
  </div>
</template>
<script setup lang="ts">
import { getMapProduct } from '@/api/globalMap';
import WMTSManager from "@/utils/wmtsManager";
import AMapLoader from "@amap/amap-jsapi-loader";

interface Props {
  center?: number[];
  zoom?: number;
  minZoom?: number;
  maxZoom?: number;
  activeMap: string;
}

const props = withDefaults(defineProps<Props>(), {
  center: [110.93154257997, 21.669064031332],
  zoom: 11,
  minZoom: 6,
  maxZoom: 16
});

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

let map, wmtsManager, wmtslayergroup;

// 初始化事件
const initMapEvent = () => {
  const simple = {
    version: 8,
    sources: {},
    layers: []
  };
  const wgs84_wgs84_mapcrs = {
    topTileExtent: [-180, -270, 180, 90],
    coordtransform: 'none',
    tileSize: 256
  };
  map = new GeoGlobe.Map({
    mapCRS: wgs84_wgs84_mapcrs,
    style: simple,
    maxZoom: props.maxZoom,
    zoom: props.zoom,
    minZoom: props.minZoom,
    center: props.center,
    container: 'yztMap'
  });
  // style加载完成
  map.on('style.load', function (e) {
    const token = '3e25b8af23f8d5194175220fe67fe941';
    const layer_vtc = new GeoGlobe.TDTLayer('vec_c', token);
    const layer_cva = new GeoGlobe.TDTLayer('cva_c', token);
    layer_vtc.metadata = { group: 'basemap' };
    layer_cva.metadata = { group: 'basemap' };
    map.addLayer(layer_vtc);
    map.addLayer(layer_cva);
    if (props.activeMap !== 'vectorgraph') {
      removeLayers();
      switchMap(props.activeMap);
    }
  });
};
// 切换地图
const switchMap = (type) => {
  let queryParamsArr = [];
  if (type === 'satellite') {
    queryParamsArr = [
      {
        serviceCode: 'YZT1715739306532'
      },
      {
        serviceCode: 'YZT1695608158269',
        REQUEST: 'GetCapabilities'
      }
    ];
  }
  if (!wmtsManager) {
    wmtsManager = new WMTSManager(map);
    wmtsManager.init();
  }
  wmtsManager.addWmtsLayers(queryParamsArr, (res) => {});
  // AMapLoader.load({
  //   // key: 'ef9090f018b879c7b896b352c01816dd', // 申请好的Web端开发者Key，首次调用 load 时必填
  //   key: '30d3d8448efd68cb0b284549fd41adcf', // 申请好的Web端开发者Key，首次调用 load 时必填
  //   version: '2.0' // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
  // }).then(AMap => {
  //   let map = new AMap.Map('yztMap', {
  //     // 是否为3D地图模式
  //     viewMode: '3D',
  //     pitch: 0,
  //     // 初始化地图级别
  //     zoom: 9.4,
  //     // 初始化地图中心点位置
  //     // center: [props.center[0], props.center[1]],
  //     center: [121.456493, 31.252764],
  //     // // 是否可拖拽
  //     // dragEnable: false,
  //     // // 是否允许通过鼠标滚轮来缩放
  //     // scrollWheel: false
  //   });
  //   // map.setFeatures([]);
  //   var wms = new AMap.TileLayer.WMTS({
  //     url: 'http://t0.tianditu.gov.cn/img_c/wmts',
  //     // url: 'http://10.181.7.236:9988/api/oneShare/proxyHandler/mm/' + queryParamsArr[0].serverCode,
  //     // blend: true,
  //     // tileSize: 256,
  //     params: {
  //       Layer: "img",
  //       Version: "1.0.0",
  //       Format: "tiles",
  //       TileMatrixSet: "w",
  //       STYLE: "default",
  //       tk: 'd31190edaa4190af833234ab7b1a6f27'
  //     }
  //   });
  //   wms.setMap(map);
  // });
};

// 清除图层
const removeLayers = () => {
  if (wmtsManager) {
    wmtsManager.removeWmtsLayers();
  }
};

// 加载事件
onMounted(() => {
  initMapEvent();
});
</script>
<style scoped>
.map-container {
  width: 100%;
  height: 100%;
  position: relative;
  .btn {
    position: absolute;
    bottom: 20px;
    left: 20px;
  }
}
</style>