Arcgis for js 加载本地影像数据VUE版本

本文介绍了如何在ArcGISJSAPI中利用BaseTileLayer创建TMSLayer,重点在于重写getTileUrl方法处理y轴编号,以适应TMS瓦片请求。并通过urlTemplate指定服务地址,实现离线切片服务的加载。
摘要由CSDN通过智能技术生成

引入BaseTileLayer 来创建TMSLayer对象。

ArcGIS JS API 本身不带有 TMSLayer 对象,但可以使用 BaseTileLayer 的 createSubclass 方法定义一个 TMSLayer 。我们需要给 TMSLayer 定义一个 urlTemplate 属性并重写getTileUrl方法。 核心在于 : 在重写 getTileUrl 方法时,对 y 轴编号做转置处理。 通过这一步告知 ArcGIS API 请求瓦片时,哪个才是正确的瓦片编号。 代码如下:

 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: "http://localhost:xxx/{z}/{x}/{y}.png"
      });

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

 将离线的切片服务加载

 imgMapClick() {
      if (shows == true) {
        this.basicMap.esriMap.basemap = this.localMap;

      } 
    }

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值