update

src/store/modules/bigScreen.ts

@@ -3,6 +3,7 @@ import { appconfig } from '@/config/bigScreenConfig'
 const state = {
   view: null,
   //地图配置信息
+  tdttoken: '75293e320524bb2be0a5f14fa887e46f',
   mapConfig: {},
   isInitViewer: false,//三维场景是否初始化
   mapContainerId: '',//地图容器Id

src/views/groupPage/districtPageModules/commonModules/SearchBox.vue

@@ -16,6 +16,7 @@
           @focus="inputFocus()"
           @blur="inputBlur()"
           @clear="clearInput()"
+          @keyup.enter.native="searching()"
         >
           <el-select v-model="selectType" slot="prepend" placeholder="请选择" :popper-append-to-body="false">
             <el-option label="工程" value="4"></el-option>
@@ -165,6 +166,41 @@ export default class SearchBox extends Vue {
   //     this.isShowInfoPanel = false
   //   }
   // }
+
+  /**页面全局键盘事件监听 */
+  // created() {
+  //   this.keyDown()
+  // }
+  // beforeDestroy() {
+  //   this.keyDownReview()
+  // }
+  // //按键恢复
+  // keyDownReview() {
+  //   document.onkeydown = function (event) {
+  //     var e = event || window.event
+  //     e.returnValue = true
+  //   }
+  // }
+  // //按钮监听键盘
+  // keyDown() {
+  //   //监听键盘按钮
+  //   document.onkeydown = function (event) {
+  //     var e: any = event || window.event
+  //     var keyCode = e.keyCode || e.which
+  //     switch (keyCode) {
+  //       case 13: //enter
+  //         alert('enter')
+  //         break
+  //       default:
+  //         break
+  //     }
+  //     if (e && e.preventDefault) {
+  //       e.preventDefault()
+  //     } else {
+  //       window.event.returnValue = false
+  //     }
+  //   }
+  // }
   //工程搜索模块
   init() {
     this.apiurl.sjfw = this.mapConfig.gisResource.tiplayers.config['sjfw'].url
@@ -440,7 +476,6 @@ export default class SearchBox extends Vue {
   }
   //选择搜索
   pbsTreeSelectChange(data) {
-    console.log(data)
     this.searchInput = data.originname
   }
   filterPbsTree(input) {

src/views/groupPage/districtPageModules/commonModules/ToolBox.vue

@@ -28,6 +28,7 @@
                   v-model="labelOn"
                   class="baseMapItemLabel"
                   label="注记"
+                  @change="layerLabelCheckChange(item.TdtType, item.PoiType, $event)"
                   :class="{ baseMapItemLabelHide: selectTdtType !== item.TdtType }"
                 ></el-checkbox>
                 <div class="baseMapItemName">{{ item.name }}</div>
@@ -35,7 +36,7 @@
                   class="baseMapItemImage"
                   :src="item.url"
                   fit="cover"
-                  @click="layerItemClick(item.TdtType, '')"
+                  @click="layerItemClick(item.TdtType, item.PoiType)"
                 ></el-image>
               </div>
             </div>
@@ -67,9 +68,19 @@ const viewMemoryType = {
 @Component({ name: 'ToolBox', components: { ViewManagement } })
 export default class ToolBox extends Vue {
   baseMapList: Array<any> = [
-    { name: '电子地图', url: require('@/views/groupPage/images/工具栏/电子地图.png'), TdtType: 'vec_w' },
-    { name: '影像地图', url: require('@/views/groupPage/images/工具栏/影像地图.png'), TdtType: 'img_w' },
-    { name: '大屏地图', url: require('@/views/groupPage/images/工具栏/大屏地图.png'), TdtType: 'bs_w' }
+    {
+      name: '电子地图',
+      url: require('@/views/groupPage/images/工具栏/电子地图.png'),
+      TdtType: 'vec_w',
+      PoiType: 'cva_w'
+    },
+    {
+      name: '影像地图',
+      url: require('@/views/groupPage/images/工具栏/影像地图.png'),
+      TdtType: 'img_w',
+      PoiType: 'cia_w'
+    },
+    { name: '大屏地图', url: require('@/views/groupPage/images/工具栏/大屏地图.png'), TdtType: 'bs_w', PoiType: '' }
   ]
   labelOn: boolean = true
   selectTdtType = 'bs_w'
@@ -283,10 +294,149 @@ export default class ToolBox extends Vue {
   } //地图选择面板点击事件
   layerItemClick(layerType, poiType) {
     if (layerType === this.selectTdtType) return
-    // this.initTianditu(layerType, poiType)
+    this.initTianditu(layerType, poiType)
     this.labelOn = true
     this.selectTdtType = layerType
   }
+  //切换加载天地图
+  initTianditu(layerType, poiType) {
+    const layerName = layerType.split('_')[0]
+    const poiName = poiType.split('_')[0]
+    //地形影像高级别无图
+    const maximumLevel = layerType === 'ter_w' ? 13 : 17
+    const token = this.$store.state.bigScreen.tdttoken
+    const url =
+      'https://t{s}.tianditu.gov.cn/' +
+      layerType +
+      '/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=' +
+      layerName +
+      '&TILEMATRIXSET=w&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&STYLE=default&FORMAT=tiles&tk=' +
+      token
+    const poiurl =
+      'https://t{s}.tianditu.gov.cn/' +
+      poiType +
+      '/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=' +
+      poiName +
+      '&TILEMATRIXSET=w&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&STYLE=default&FORMAT=tiles&tk=' +
+      token
+    const subdomains = ['0', '1', '2', '3', '4', '5', '6', '7']
+    const imagelayers = this.viewer.imageryLayers
+    const layerlen = imagelayers.length
+    //清除所有底图
+    const removedLayers = []
+    for (let i = 0; i < layerlen; i++) {
+      const layer = imagelayers.get(i)
+      const provider = layer.imageryProvider
+      if (
+        provider.credit &&
+        (provider.credit.html === 'tianditu_base' ||
+          provider.credit.html === 'tianditu_poi' ||
+          provider.credit.html === 'chinavec2d')
+      ) {
+        removedLayers.push(layer)
+      }
+    }
+    removedLayers.forEach((item) => {
+      imagelayers.remove(item)
+    })
+    //添加大屏底图
+    if (layerType == 'bs_w') {
+      this.initBigScreenBaseMap()
+      return
+    }
+    //添加图层
+    const imglayer = new Cesium.WebMapTileServiceImageryProvider({
+      //影像底图
+      url: new Cesium.Resource({
+        url: url,
+        headers: {
+          Accept: 'image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8'
+        }
+      }),
+      subdomains,
+      credit: 'tianditu_base',
+      layer: 'tdtVecLayer',
+      style: 'default',
+      maximumLevel: maximumLevel,
+      format: 'image/jpeg',
+      tileMatrixSetID: 'GoogleMapsCompatible', //使用谷歌的瓦片切片方式
+      show: true
+    })
+
+    const poilayer = new Cesium.WebMapTileServiceImageryProvider({
+      url: new Cesium.Resource({
+        url: poiurl,
+        headers: {
+          Accept: 'image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8'
+        }
+      }),
+      subdomains: subdomains,
+      credit: 'tianditu_poi',
+      layer: 'tdtCvaLayer',
+      style: 'default',
+      format: 'image/jpeg',
+      maximumLevel: maximumLevel,
+      tileMatrixSetID: 'GoogleMapsCompatible', //使用谷歌的瓦片切片方式
+      show: true
+    })
+    imagelayers.addImageryProvider(imglayer, 1)
+
+    imagelayers.addImageryProvider(poilayer, 2)
+  }
+  //注记勾选事件
+  layerLabelCheckChange(layerType, poiType, event) {
+    const token = this.$store.state.bigScreen.tdttoken
+    const poiName = poiType.split('_')[0]
+    const poiurl =
+      'https://t{s}.tianditu.gov.cn/' +
+      poiType +
+      '/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=' +
+      poiName +
+      '&TILEMATRIXSET=w&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&STYLE=default&FORMAT=tiles&tk=' +
+      token
+
+    const subdomains = ['0', '1', '2', '3', '4', '5', '6', '7']
+    const imagelayers = this.viewer.imageryLayers
+    const check = event
+    if (check) {
+      const poilayer2 = new Cesium.WebMapTileServiceImageryProvider({
+        url: new Cesium.Resource({
+          url: poiurl,
+          headers: {
+            Accept: 'image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8'
+          }
+        }),
+        subdomains: subdomains,
+        credit: 'tianditu_poi',
+        layer: 'tdtCvaLayer',
+        style: 'default',
+        format: 'image/jpeg',
+        maximumLevel: 17,
+        tileMatrixSetID: 'GoogleMapsCompatible', //使用谷歌的瓦片切片方式
+        show: true
+      })
+      imagelayers.addImageryProvider(poilayer2, 2)
+    } else {
+      for (let i = 0; i < imagelayers.length; i++) {
+        const layer = imagelayers.get(i)
+        const provider = layer.imageryProvider
+        if (provider.credit && provider.credit.html === 'tianditu_poi') {
+          imagelayers.remove(layer)
+          break
+        }
+      }
+    }
+  }
+  //初始化加载大屏底图
+  initBigScreenBaseMap() {
+    const imagelayers = this.viewer.imageryLayers
+    const url = this.mapConfig.gisResource.img.config['chinavec2d'].url
+    const imglayer = new Cesium.SuperMapImageryProvider({
+      url: url,
+      credit: 'chinavec2d'
+    })
+    imagelayers.addImageryProvider(imglayer)
+  }
 }
 </script>
 <style lang="scss">