1. 程式人生 > >arcgis jsapi介面入門系列(3):各種型別的圖層新增

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