vue-arcigs-for-js载入天地图

HTML和vue载入天地图的方式基本一致

下面示例vue载入天地图，需要载入BaseTileLayer功能模块:
官网文档地址

自定义扩展BaseTileLayer

 const TintLayer = BaseTileLayer.createSubclass({
            properties: {
              urlTemplate: null,
              tint: {
                value: null,
                type: Color
              }
            },

            // generate the tile url for a given level, row and column
            getTileUrl: function (level, row, col) {
              return this.urlTemplate.replace("{z}", level).replace("{x}",
                col).replace("{y}", row);
            },

            // This method fetches tiles for the specified level and size.
            // Override this method to process the data returned from the server.
            fetchTile: function (level, row, col) {

              // call getTileUrl() method to construct the URL to tiles
              // for a given level, row and col provided by the LayerView
              let url = this.getTileUrl(level, row, col);

              // request for tiles based on the generated url
              // set allowImageDataAccess to true to allow
              // cross-domain access to create WebGL textures for 3D.
              return esriRequest(url, {
                responseType: "image",
                allowImageDataAccess: true
              })
                .then(function (response) {
                  // when esri request resolves successfully
                  // get the image from the response
                  let image = response.data;
                  let width = this.tileInfo.size[0];
                  let height = this.tileInfo.size[0];

                  // create a canvas with 2D rendering context
                  let canvas = document.createElement("canvas");
                  let context = canvas.getContext("2d");
                  canvas.width = width;
                  canvas.height = height;


                  // Draw the blended image onto the canvas.
                  context.drawImage(image, 0, 0, width, height);

                  return canvas;
                }.bind(this));
            }
          });

使用自定义的方法，其中tiandituVec，tiandituImg在data的return中定义了，tdt_tk为天地图的秘钥

          //随机算出八个数带入url
          const tdt_n = Math.floor(Math.random() * 8);
          this_.tiandituVec = new TintLayer({
            // urlTemplate: "http://www.google.cn/maps/vt/lyrs=s@142&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}&s=Galil",
            urlTemplate: "http://t" + tdt_n + ".tianditu.gov.cn/DataServer?T=vec_w&tk=" + this_.tdt_tk + "&x={x}&y={y}&l={z}",
            tint: new Color("#004FBB"),
            title: "矢量图"
          });
          this_.tiandituImg = new TintLayer({
            // urlTemplate: "http://www.google.cn/maps/vt/lyrs=s@142&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}&s=Galil",
            urlTemplate: "http://t" + tdt_n + ".tianditu.gov.cn/DataServer?T=img_w&tk=" + this_.tdt_tk + "&x={x}&y={y}&l={z}",
            tint: new Color("#004FBB"),
            title: "影像图"
          });

地图加载，以图层的形式载入

          this.map = new Map({
            //basemap: 'dark-gray',// 底图类型，详见BaseMap类
            layers: [this_.tiandituVec, this_.tiandituImg],
          });
          
          this.view = new MapView({
            container: this.$refs.baseMap, // 视图的容器
            map: this.map, // Map的实例放入视图中
            center: [118.805, 32.055], // 初始显示的地图中心点，经纬度
            zoom: 10,// 当前地图缩放等级
          });

使用visible属性来控制图层的现实和隐藏(可结合vue来使用)

this_.tiandituVec.visible = false;