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/service ... ot%3B,
//图层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);
},
