tdzcxx-frontend/src/components/OneMap/widgets/BaseMap.vue

<template>
  <div class='baseMap'>
    <div id='vecMap' class='mapType vecMap' :class='{ active: vecActive }' @click='vecMapClick'>
      <div class='lblImgType'>地图</div>
    </div>
    <div id='imgMap' class='mapType imgMap' :class='{ active: imgActive }' @click='imgMapClick'>
      <div class='lblImgType'>影像</div>
    </div>
  </div>
</template>

<script>

import Basemap from '@arcgis/core/Basemap';
import BasemapToggle from '@arcgis/core/widgets/BasemapToggle';
import WebTileLayer from "@arcgis/core/layers/WebTileLayer";
import BaseTileLayer from "@arcgis/core/layers/BaseTileLayer";
import TileInfo from '@arcgis/core/layers/support/TileInfo';
import SpatialReference from '@arcgis/core/geometry/SpatialReference';
import Extent from '@arcgis/core/geometry/Extent';

const tdt_tk = '1be60f2d95f809a5dbe14ca7ddfd3d5b';

export default {
  name: 'BaseMap',
  props: {
    wkid: {
      type: Number,
      default: 102100
    }
  },
  data() {
    return {
      show: false,
      vceShow: false,
      vecActive: false,
      imgActive: false,
      imgBasemap: {},
      vecBasemap: {},
      localMap:{}
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.createBaseLayers2();
    });

  },
  inject: ['basicMap'],
  methods: {
    //影像图
    createBaseLayers2() {
      let TMSLayer = BaseTileLayer.createSubclass({
        properties: {
          urlTemplate: null
        },
        getTileUrl: function (z, y, x) {
          let y2 = Math.pow(2, z) - y - 1;
          return this.urlTemplate
            .replace("{z}", z)
            .replace("{x}", x)
            .replace("{y}", y2);
        },
      });
      let tmsLayer = new TMSLayer({
        // urlTemplate: "/sd_dom/sd/{z}/{x}/{y}.png"
        urlTemplate: "http://218.59.194.82:12682/sd_dom/sd/{z}/{x}/{y}.png"
        //urlTemplate: "http://218.59.194.82:13480/sddltbtiles01/{z}/{x}/{y}.png"
      });

      this.localMap=new Basemap({
        baseLayers: [tmsLayer],
      });

      let tdt_vec = new WebTileLayer({
        urlTemplate: 'http://{subDomain}.tianditu.gov.cn/DataServer?T=vec_w&x={col}&y={row}&l={level}&tk=' + tdt_tk,
        subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7']
      });

      let tdt_cva = new WebTileLayer({
        urlTemplate: 'http://{subDomain}.tianditu.gov.cn/DataServer?T=cva_w&x={col}&y={row}&l={level}&tk=' + tdt_tk,
        subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7']
      });
      this.vecBasemap = new Basemap({
        baseLayers: [tdt_vec],
        referenceLayers: [tdt_cva]
      });
      let tdt_img = new WebTileLayer({
        urlTemplate: 'http://{subDomain}.tianditu.gov.cn/DataServer?T=img_w&x={col}&y={row}&l={level}&tk=' + tdt_tk,
        subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7']
      });
      let tdt_cia = new WebTileLayer({
        urlTemplate: 'http://{subDomain}.tianditu.gov.cn/DataServer?T=cia_w&x={col}&y={row}&l={level}&tk=' + tdt_tk,
        subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7']
      });
      this.imgBasemap = new Basemap({
        baseLayers: [tdt_img],
        referenceLayers: [tdt_cia]
      });

    },
    //天地图
    createBaseLayers() {
      const tdt_tk = '1be60f2d95f809a5dbe14ca7ddfd3d5b';
      let tileInfo = new TileInfo({
        'dpi': 96,
        'rows': 256,
        'cols': 256,
        'compressionQuality': 0,
        'origin': {
          'x': -180,
          'y': 90
        },
        'spatialReference': {
          wkid: this.wkid
        },
        'lods': [
          {level: 0, levelValue: 1, resolution: 0.703125, scale: 295497593.05875003},
          {level: 1, levelValue: 2, resolution: 0.3515625, scale: 147748796.52937502},
          {level: 2, levelValue: 3, resolution: 0.17578125, scale: 73874398.264687508},
          {level: 3, levelValue: 4, resolution: 0.087890625, scale: 36937199.132343754},
          {level: 4, levelValue: 5, resolution: 0.0439453125, scale: 18468599.566171877},
          {level: 5, levelValue: 6, resolution: 0.02197265625, scale: 9234299.7830859385},
          {level: 6, levelValue: 7, resolution: 0.010986328125, scale: 4617149.8915429693},
          {level: 7, levelValue: 8, resolution: 0.0054931640625, scale: 2308574.9457714846},
          {level: 8, levelValue: 9, resolution: 0.00274658203125, scale: 1154287.4728857423},
          {level: 9, levelValue: 10, resolution: 0.001373291015625, scale: 577143.73644287116},
          {level: 10, levelValue: 11, resolution: 0.0006866455078125, scale: 288571.86822143558},
          {level: 11, levelValue: 12, resolution: 0.00034332275390625, scale: 144285.93411071779},
          {level: 12, levelValue: 13, resolution: 0.000171661376953125, scale: 72142.967055358895},
          {level: 13, levelValue: 14, resolution: 8.58306884765625e-005, scale: 36071.483527679447},
          {level: 14, levelValue: 15, resolution: 4.291534423828125e-005, scale: 18035.741763839724},
          {level: 15, levelValue: 16, resolution: 2.1457672119140625e-005, scale: 9017.8708819198619},
          {level: 16, levelValue: 17, resolution: 1.0728836059570313e-005, scale: 4508.9354409599309},
          {level: 17, levelValue: 18, resolution: 5.3644180297851563e-006, scale: 2254.4677204799655},
          // { level: 18, levelValue: 19, resolution: 2.68220901489257815e-006, scale: 1127.23386023998275 },
          // { level: 19, levelValue: 20, resolution: 1.341104507446289075e-006, scale: 563.616930119991375 }
        ]
      });

      let tdt_img = new WebTileLayer({
        urlTemplate: 'http://{subDomain}.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=' + tdt_tk,
        subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
        tileInfo: tileInfo,
        spatialReference: {
          wkid: this.wkid
        }
      });
      let tdt_cia = new WebTileLayer({
        urlTemplate: 'http://{subDomain}.tianditu.gov.cn/cia_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=' + tdt_tk,
        subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
        tileInfo: tileInfo,
        spatialReference: {
          wkid: this.wkid
        }
      });
      let tdt_vec = new WebTileLayer({
        urlTemplate: 'http://{subDomain}.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=' + tdt_tk,
        subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
        tileInfo: tileInfo,
        spatialReference: {
          wkid: this.wkid
        }
      });
      let tdt_cva = new WebTileLayer({
        urlTemplate: 'http://{subDomain}.tianditu.gov.cn/cva_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=' + tdt_tk,
        subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
        tileInfo: tileInfo,
        spatialReference: {
          wkid: this.wkid
        }
      });

      this.imgBasemap = new Basemap({
        baseLayers: [tdt_img],
        referenceLayers: [tdt_cia]
      })
      this.vecBasemap = new Basemap({
        baseLayers: [tdt_vec],
        referenceLayers: [tdt_cva]
      })
    },
    vecMapClick() {
		if(this.vceShow) return
      let vceShows = !this.vceShow
      this.vceShow = vceShows
      if (vceShows == true) {
        this.basicMap.esriMap.basemap = this.vecBasemap;
      } else if( vceShows == false)  {
        this.basicMap.esriMap.basemap = null;
      }

      this.vecActive = true;
      this.imgActive = false;
	  this.show = false
    },
    imgMapClick() {
		if(this.show) return
      let shows = !this.show
      this.show = shows
      if (shows == true) {
        this.basicMap.esriMap.basemap = this.localMap;
      } else {
        this.basicMap.esriMap.basemap = null;
      }
      this.vecActive = false;
      this.imgActive = true;
	  this.vceShow = false
    }
  }
};
</script>

<style scoped='scoped'>
.baseMap {
  border-radius: 3px;
  width: 164px;
  height: 84px;
  position: absolute;
  bottom: 0.5em;
  right: 0.5em;
  background-color: #ffffff;
  box-shadow: 0 0 5px #357ee5;
  z-index: 2;
  padding: 2px;
  margin: 0;
}

.mapType {
  border: 2px solid #fff;
  top: 4px;
  cursor: pointer;
  position: absolute;
  width: 76px;
  height: 76px;
}

.mapType.active {
  border: 2px solid #409eff;
}

.vecMap {
  background-image: url("../static/maptype.jpg");
  background-position: 0 0;
  right: 4px;
}

.imgMap {
  background-image: url("../static/maptype.jpg");
  background-position: 0 -228px;
  left: 4px;
}

.lblImgType {
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 35px;
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  background-color: rgba(0, 121, 210, .5);
  color: #fff;
  text-align: center;
}
</style>