arcgis jsapi接口入門系列（3）：各類類型的圖層添加

這裏說的tomcat切片，是指arcgis server切片後，把切片圖片文件用tomcat發佈（其餘任意web服務器發佈都行）

//添加tomcat切片圖層
        addTomcatTileLayer: function () {
            //圖層配置
            let layerConfig = {
                //切片所在的url，url結尾應該是 _alllayers/
                url: "http://xxx/Layers/_alllayers/",
                //圖層範圍
                tileExtent: "-0.5,-973.5,1919.5,0.5",
                //切片文件格式
                tileFormat: "png",
                //切片級別
                tileLevel: "0,1,2,3,4,5,6,7",
                //切片分辨率
                tileResolution: "2.1166709000084669,1.8520870375074086,1.5875031750063502,1.3229193125052918,1.0583354500042335,0.79375158750317509,0.52916772500211673,0.26458386250105836",
                //切片比例尺
                tileScale: "8000,7000,6000,5000,4000,3000,2000,1000",
                //切片大小cols
                tileSizeCols: 512,
                //切片大小rows
                tileSizeRows: 512,
                //地圖原點x
                tileZeroX: -5123200,
                //地圖原點y
                tileZeroY: 10002100,
                //壓縮質量
                compressionQuality: "0",
                //圖層的座標系wkid
                wkid: "4547",
                transparency: null,
            };

            //添加圖層到地圖
            //參數3：圖層id，能夠爲空，空則自動分配
            this.map.add(this.apiInstance.createWebTileLayer(null, layerConfig)[0]);

        },

上述封裝的部分函數

createWebTileLayer : function (map, layer, id, click) {
  var titleExtent = [];
  if (!!layer.tileExtent) {
    layer.tileExtent.split(',').forEach(function (extent) {
      titleExtent.push(parseFloat(extent))
    })
  }
  var tileInfoConfig = {
    url: layer.url,  //瓦片大小
    "size": parseFloat(layer.tileSizeRows),  //瓦片大小
    "compressionQuality": 0,
    "origin": {"x": parseFloat(layer.tileZeroX), "y": parseFloat(layer.tileZeroY)},  //切圖原點
    "spatialReference": {"wkid": parseInt(layer.wkid)},  //瓦片比例尺
    "format": layer.tileFormat
  };
  var tileResolutions = layer.tileResolution.split(',');
  var tileLevels = layer.tileLevel.split(',');
  var tileScales = layer.tileScale.split(',');
  var lods = [];
  if (tileResolutions.length !== tileLevels.length || tileScales.length !== tileResolutions.length) {
    console.error('地圖配置有誤', layer);
  }
  else {
    //lods：等級、比例尺、分辨率。從ArcGIS切圖配置文件conf.xml中獲取。設置lods會影響地圖比例尺控件的範圍。
    for (var i = 0; i < tileScales.length; i++) {
      lods.push({
        "level": parseInt(tileLevels[i]),
        "resolution": parseFloat(tileResolutions[i]),
        "scale": parseFloat(tileScales[i])
      });
    }
    tileInfoConfig.lods = lods;
    var tileInfo = new instance.TileInfo(tileInfoConfig);
    var spatialReference = new instance.SpatialReference({wkid: parseInt(layer.wkid)});
    var fullExtent = new instance.Extent(titleExtent[0], titleExtent[1], titleExtent[2], titleExtent[3], spatialReference);
    if (layer.type == 'ArcgisTile') {
      var tiledLayer = new instance.WebTileLayer({
        id: id,
        urlTemplate: layer.url + '/tile/{level}/{row}/{col}',
        copyright: "",
        spatialReference: spatialReference,
        fullExtent: fullExtent,
        tileInfo: tileInfo
      });
    } else {
      var tiledLayer = new instance.WebTileLayer({
        id: id,
        urlTemplate: layer.url,
        copyright: "",
        spatialReference: spatialReference,
        fullExtent: fullExtent,
        tileInfo: tileInfo,
        getTileUrl: function (level, row, col) {
          if (layer.ext1 == 'superMap') {
            return this.urlTemplate + level + "/" + row + "/" + col + "." + this.tileInfo.format;
          }
          return this.urlTemplate + "L" + dojo.string.pad(level, 2, '0') + "/" + "R" + (dojo.string.pad(row.toString(16), 8, '0')).toUpperCase() + "/" + "C" + (dojo.string.pad(col.toString(16), 8, '0')).toUpperCase() + "." + this.tileInfo.format;

        }
      });
    }

    if (!!click) {
      tiledLayer.on('layerview-create', function (evt) {
        var graView = evt.view;
        var graLayerView = evt.layerView;
        var layerId = evt.layerView.layer.id;
        graView.on('click', function (event) {
          graView.hitTest(event).then(click);
        });
      });
    }
    if (!!map) {
      map.add(tiledLayer);
    }
    return [tiledLayer];
  }
};

arcgis rest圖層指用arcgis server發佈的地圖服務，用rest方式加載

//添加arcgis rest圖層
        addArcgisRestLayer: function () {
            //圖層配置
            //PS：arcgis rest圖層傳入最小配置只要url就行，由於url有服務的詳細配置（瀏覽器訪問url可看詳細配置信息），jsapi會本身去讀
            let layerConfig = {
                //地圖服務url，url結尾應該是 /MapServer
                url: "http://xxx/arcgis/rest/services/yyy/MapServer",
                //圖層id，能夠爲空，空則自動分配
                // id: "eeee"
            };

            //根據圖層配置新建圖層
            let layer = new this.apiInstance.MapImageLayer(layerConfig);
            //圖層添加到map
            this.map.add(layer);
        },

天地圖互聯網版，注意這裏固定是加載wgs84座標系的（另外一種是web買卡託座標，不支持）

//添加天地圖（互聯網版）圖層
        addTdtLayer: function () {
            //建立天地圖圖層

            //圖層配置
            //PS：arcgis rest圖層傳入最小配置只要url就行，由於url有服務的詳細配置（瀏覽器訪問url可看詳細配置信息），jsapi會本身去讀
            let layerConfig = {
                //圖層id，能夠爲空，空則自動分配
                // id: "eeee"
            };

            //參數2：天地圖圖層類型，支持如下值：img=影像——經緯度，cia=影像註記——經緯度，vec=矢量——經緯度，cva=矢量註記——經緯度，ter=地形圖——經緯度，cta=地形圖註記——經緯度
            //參數3：圖層配置，值同官方建立圖層的配置，也可空
            let layer = mapUtil.layer.createTdtLayer(this.apiInstance, "vec", layerConfig);
            //圖層添加到map
            this.map.add(layer);
        },