arcgisjs之天地圖加載封裝

arcgisjs之天地圖加載封裝

layer.js

// // 天地圖影像圖層
export const tdtTdtlayer = async () => {
  let BaseTileLayer = await arcgisPackage('BaseTileLayer');
  let Request = await arcgisPackage('Request');
  let WMTSLayer = await arcgisPackage('WMTSLayer');
  let WebTileLayer = await arcgisPackage('WebTileLayer');
  console.log(mapConfig.list.tk);
  let TDT = await BaseTileLayer.createSubclass({
    properties: {
      urlTemplate: null,
    },
    spatialReference: mapConfig.centerPoint,
    title: '天地圖影像地圖',
    getTileUrl: function (level, row, col) {
      // let url = 'http://t' + col % 8 + '.tianditu.gov.cn/DataServer?T=img_w&tk=ec7fe0feda91baac20f7835cfdce24c5&x=' + col + '&y=' + row + '&l=' + level
      let url = `http://t${col % 8}.tianditu.gov.cn/DataServer?T=img_w&tk=${
        mapConfig.list.tk
      }&x=${col}&y=${row}&l=${level}`;
      return url;
    },
    fetchTile: function (level, row, col) {
      let url = this.getTileUrl(level, row, col);
      return Request(url, {
        responseType: 'image',
      }).then((response) => {
        let image = response.data;
        let width = this.tileInfo.size[0];
        let height = this.tileInfo.size[0];

        let canvas = document.createElement('canvas');
        let context = canvas.getContext('2d');
        canvas.width = width;
        canvas.height = height;

        context.drawImage(image, 0, 0, width, height);

        return canvas;
      });
    },
  });
  let layer = await new TDT();
  return layer;
};
// // 天地圖影像標註圖層cia_c
export const tdtTdtyNoteslayer = async () => {
  let BaseTileLayer = await arcgisPackage('BaseTileLayer');
  let Request = await arcgisPackage('Request');
  let TDT = await BaseTileLayer.createSubclass({
    properties: {
      urlTemplate: null,
    },
    getTileUrl: function (level, row, col) {
      let url = `http://t${col % 8}.tianditu.gov.cn/DataServer?T=cia_w&tk=${
        mapConfig.list.tk
      }&x=${col}&y=${row}&l=${level}`;
      return url;
    },
    fetchTile: function (level, row, col) {
      let url = this.getTileUrl(level, row, col);
      return Request(url, {
        responseType: 'image',
      }).then((response) => {
        let image = response.data;
        let width = this.tileInfo.size[0];
        let height = this.tileInfo.size[0];

        let canvas = document.createElement('canvas');
        let context = canvas.getContext('2d');
        canvas.width = width;
        canvas.height = height;
        context.drawImage(image, 0, 0, width, height);
        return canvas;
      });
    },
  });
  let layer = new TDT();
  return layer;
};
// // 天地圖矢量圖層
export const tdtTdtclayer = async () => {
  let BaseTileLayer = await arcgisPackage('BaseTileLayer');
  let Request = await arcgisPackage('Request');
  let TDT = await BaseTileLayer.createSubclass({
    properties: {
      urlTemplate: null,
    },
    getTileUrl: function (level, row, col) {
      let url =
        'http://t' +
        (col % 8) +
        `.tianditu.gov.cn/DataServer?T=vec_w&tk=${mapConfig.list.tk}&x=` +
        col +
        '&y=' +
        row +
        '&l=' +
        level;
      return url;
    },
    fetchTile: function (level, row, col) {
      let url = this.getTileUrl(level, row, col);
      return Request(url, {
        responseType: 'image',
      }).then((response) => {
        let image = response.data;
        let width = this.tileInfo.size[0];
        let height = this.tileInfo.size[0];

        let canvas = document.createElement('canvas');
        let context = canvas.getContext('2d');
        canvas.width = width;
        canvas.height = height;

        context.drawImage(image, 0, 0, width, height);

        return canvas;
      });
    },
  });
  let layer = await new TDT();
  return layer;
};
// // 天地圖矢量標註圖層
export const tdtTdtcNoteslayer = async () => {
  let BaseTileLayer = await arcgisPackage('BaseTileLayer');
  let Request = await arcgisPackage('Request');
  let TDT = await BaseTileLayer.createSubclass({
    properties: {
      urlTemplate: null,
    },
    getTileUrl: function (level, row, col) {
      let url =
        'http://t' +
        (col % 8) +
        `.tianditu.gov.cn/DataServer?T=cva_w&tk=${mapConfig.list.tk}&x=` +
        col +
        '&y=' +
        row +
        '&l=' +
        level;
      return url;
    },
    fetchTile: function (level, row, col) {
      let url = this.getTileUrl(level, row, col);
      return Request(url, {
        responseType: 'image',
      }).then((response) => {
        let image = response.data;
        let width = this.tileInfo.size[0];
        let height = this.tileInfo.size[0];

        let canvas = document.createElement('canvas');
        let context = canvas.getContext('2d');
        canvas.width = width;
        canvas.height = height;
        context.drawImage(image, 0, 0, width, height);
        return canvas;
      });
    },
  });
  let layer = new TDT();
  layer.id = 'ctdtNote';
  return layer;
};

// 天地圖影像地圖
export const tdtlayer = async () => {
  return tdtTdtlayer().then((res) => {
    return res;
  });
};
// 天地圖影像標註圖層
export const tdtyNoteslayer = async () => {
  return tdtTdtyNoteslayer().then((res) => {
    return res;
  });
};
// 天地圖矢量圖層
export const tdtclayer = async () => {
  return tdtTdtclayer().then((res) => {
    return res;
  });
};
// 天地圖矢量標註圖層
export const tdtcNoteslayer = async () => {
  return tdtTdtcNoteslayer().then((res) => {
    return res;
  });
};

引用

import { tdtlayer } from '/@/utils/arcgis/layers.js';
let tdtlayer = await tdtlayer().then((res) => {
          return res;
        });
map.add(tdtlayer)

　　

 

鑽研不易，轉載請註明處處......