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);
        },