引入天地图卫星图

src/components/Map/YztMap/index.vue

@@ -73,7 +73,7 @@ watch(
 );
 const mapList = reactive({
   satellite2: ['YZT1715739306532', 'YZT1695608158269'],
-  satellite3: ['YZT1708679726700', 'YZT1695608158269'],
+  satellite3: ['tianditu'],
   imageMap: ['YZT1640925052482', 'YZT1695608158269'],
   imageMap2: ['YZT1640925052482', 'YZT1695608158269']
 });

src/components/Map/index.vue

@@ -82,6 +82,7 @@ const mapUtils = useAMap({
     AMap = getAMap();
     map = getMap();
     scale = getScale();
+    debugger
     if (!['logical', 'vectorgraph'].includes(props.activeMap)) {
       switchMap(props.activeMap);
     } else {

src/hooks/AMap/useAMap.ts

@@ -20,7 +20,19 @@ export function useAMap(options) {
       version: !!options.version ? options.version : '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
       plugins: options.plugins
         ? options.plugins
-        : ['AMap.Scale', 'AMap.RangingTool', 'AMap.MouseTool', 'AMap.PolygonEditor', 'AMap.MarkerCluster', 'AMap.DistrictSearch', 'AMap.MoveAnimation', 'AMap.Driving', 'AMap.Geocoder', 'AMap.PlaceSearch', 'AMap.GeoJSON']
+        : [
+            'AMap.Scale',
+            'AMap.RangingTool',
+            'AMap.MouseTool',
+            'AMap.PolygonEditor',
+            'AMap.MarkerCluster',
+            'AMap.DistrictSearch',
+            'AMap.MoveAnimation',
+            'AMap.Driving',
+            'AMap.Geocoder',
+            'AMap.PlaceSearch',
+            'AMap.GeoJSON'
+          ]
     }).then((res) => {
       AMap = res;
       map = new AMap.Map(options.el ? options.el : 'aMap', {
@@ -63,9 +75,24 @@ export function useAMap(options) {
     if (type === 'vectorgraph') {
       map.removeLayer(nowLayer);
     } else if (type === 'satellite') {
-      const satellite = new AMap.TileLayer.Satellite();
-      map.addLayer(satellite);
-      nowLayer = satellite;
+      const wms = new AMap.TileLayer.WMTS({
+        // url: 'http://t0.tianditu.gov.cn/img_c/wmts',
+        url: 'http://t4.tianditu.gov.cn/img_w/wmts',
+        blend: false,
+        tileSize: 256,
+        params: {
+          Layer: 'img',
+          Version: '1.0.0',
+          Format: 'tiles',
+          TileMatrixSet: 'w',
+          STYLE: 'default',
+          tk: 'a8df87f1695d224d2679aa805c1268d9' // 申请的天地图开发者key
+        }
+      });
+      wms.setMap(map);
+      // const satellite = new AMap.TileLayer.Satellite();
+      // map.addLayer(satellite);
+      // nowLayer = satellite;
     }
   };
   // 添加搜索的标记的
@@ -120,7 +147,7 @@ export function useAMap(options) {
       context.marker.setContent(content);
       context.marker.setOffset(offset);
       context.marker.setExtData(context.data[0]);
-      context.marker.on('click', function(e) {
+      context.marker.on('click', function (e) {
         const extData = e.target.getExtData();
         let index = 0;
         let index2 = 0;
@@ -242,7 +269,7 @@ export function useAMap(options) {
     new AMap.DistrictSearch({
       extensions: 'all',
       subdistrict: 0
-    }).search(name, function(status, result) {
+    }).search(name, function (status, result) {
       // 外多边形坐标数组和内多边形坐标数组
       const outer = [
         new AMap.LngLat(-360, 90, true),
@@ -252,7 +279,7 @@ export function useAMap(options) {
       ];
       options.forEach((option) => {
         const holes = result.districtList[0].boundaries;
-        let pathArray = [outer];
+        const pathArray = [outer];
         pathArray.push.apply(pathArray, holes);
         maskPolygon = new AMap.Polygon({
           pathL: pathArray,
@@ -389,12 +416,12 @@ export function useAMap(options) {
       strokeWeight: 6 //线宽
     });
 
-    moveMarker.on('moving', function(e) {
+    moveMarker.on('moving', function (e) {
       movePassedPolyline.setPath(e.passedPath);
       map.setCenter(e.target.getPosition(), true);
     });
 
-    moveMarker.on('moveend', function(e) {
+    moveMarker.on('moveend', function (e) {
       index++;
       if (index === lineArr.length - 1) {
         timerId = setTimeout(() => {
@@ -413,7 +440,7 @@ export function useAMap(options) {
   };
 
   const drawData = (data) => {
-    let res = [];
+    const res = [];
     data.forEach((item) => {
       let graphic;
       if (['rectangle', 'polygon', 'anyLine'].includes(item.type)) {

src/utils/olMap/olMap.ts

@@ -35,6 +35,7 @@ import { click } from 'ol/events/condition';
 import Circle from 'ol/geom/Circle';
 import { hexToRgba } from '@/utils';
 
+const tk = 'a8df87f1695d224d2679aa805c1268d9';
 const commonUrl = import.meta.env.VITE_APP_BASE_API2 + 'api/oneShare/proxyHandler/gd/';
 // proj4.defs('EPSG:4490', '+proj=longlat +ellps=GRS80 +no_defs +type=crs');
 proj4.defs('EPSG:4490', 'GEOGCS["China Geodetic Coordinate System 2000",DATUM["China_2000",SPHEROID["CGCS2000",6378137,298.257222101,AUTHORITY["EPSG","1024"]],AUTHORITY["EPSG","1043"]],PRIMEM["Greenwich",0,AUTHORITY["EPSG","8901"]],UNIT["degree",0.0174532925199433,AUTHORITY["EPSG","9122"]],AUTHORITY["EPSG","4490"]]');
@@ -178,6 +179,8 @@ export class olMap {
           await this.formatXml(layer.id, layer.minZoom, layer.maxZoom, layer.zIndex, layer.visible); // 等待当前 layer 处理完成
         }
       }
+    } else if (options.id === 'tianditu') {
+      await this.formatXml2();
     } else if (options.id) {
       // 如果 options.id 不是数组，但确实是一个图层，则直接处理
       await this.formatXml(options.id, options.minZoom, options.maxZoom, options.zIndex, options.visible);
@@ -193,7 +196,30 @@ export class olMap {
       this.options.onLoadCompleted(this.map);
     }
   }
-
+  formatXml2() {
+    const baseUrl = 'https://t{0-7}.tianditu.gov.cn/';
+    const vecType = 'vec'; // 矢量图层类型
+    const projType = 'w'; // 投影类型：web mercator
+    const reqParams = {
+      SERVICE: 'WMTS',
+      REQUEST: 'GetTile',
+      VERSION: '1.0.0',
+      LAYER: '',
+      STYLE: 'default',
+      TILEMATRIXSET: projType,
+      FORMAT: 'tiles',
+      TILECOL: '{x}',
+      TILEROW: '{y}',
+      TILEMATRIX: '{z}',
+      tk: key,
+    };
+    const newParams = Object.assign({}, params, { LAYER: dataType });
+    let paramsStr = '';
+    for (let [k, v] of Object.entries(newParams)) {
+      paramsStr += `${k}=${v}&`;
+    }
+    return `${baseUrl}${dataType}_${projType}/wmts?${paramsStr.slice(0, -1)}`;
+  }
   formatXml(code: string, minZoom?: number, maxZoom?: number, zIndex?: number, visible?: boolean) {
     const xml = new WMTSCapabilities();
     return this.getCapabilities(code).then((lists) => {

src/views/globalMap/RightMenu/DrawTools.vue

@@ -52,7 +52,9 @@
     </div>
     <div class="draw-item" @click="openDraw">{{ mouseToolState.drawing ? '关闭绘制' : '开启绘制' }}</div>
     <div class="draw-item" @click="handleUndo">撤销</div>
-    <div id="control-box"></div>
+    <div id="menu-box">
+      <div class="menu-item">删除</div>
+    </div>
   </div>
 </template>
 
@@ -495,4 +497,9 @@ onBeforeUnmount(() => {
 .active {
   background-color: rgba(22, 73, 142, 0.5);
 }
+.menu-box {
+  .menu-item {
+    font-size: 32px;
+  }
+}
 </style>

src/views/globalMap/index.vue

@@ -73,7 +73,7 @@ let map2Ref = ref(null);
 let leftMenuRef = ref(null);
 let showMask = ref(true);
 //  vectorgraph satellite imageMap imageMap3 logical satellite2 satellite3
-let activeMap = ref('imageMap');
+let activeMap = ref('satellite');
 // 附近视频菜单数据
 let tempMenu = ref({
   name: '',