<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单加载一张图</title>
<link type="text/css" rel="stylesheet" href="http://58.220.249.164:8084/arcgis_api/js/esri/css/esri.css"/>
<script src="utils/jquery-1.12.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://58.220.249.164:8084/arcgis_api/js/init.js" type="text/javascript" charset="utf-8"></script>
<style>
html,
body,
#map {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
require(["esri/map",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/ArcGISImageServiceLayer",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/geometry/Extent",
"dojo/domReady"
], function (Map,
ArcGISTiledMapServiceLayer,
ArcGISImageServiceLayer,
ArcGISDynamicMapServiceLayer,
Extent
) {
map = new Map("map", {
logo: false,
center: [118.33968629192982,33.79184491354436],
zoom: 9,
// lods:lods,
// minZoom: 9,
// extent:new Extent(118.33340229246559, 33.790497195027314,118.3445000985968,33.79612224084511),
sliderPosition: "bottom-left" });
//添加wms图层
map.addWMSLayer(url1);
//添加wmts图层
map.addLayer(new WMTSLayer(url2));
/**
* 添加wms图层
* @param url
*/
function addWMSLayer(url) {
var self = this;
var bbox = mapMain.GetQueryString(url, 'bbox');
var westBoundLongitude = parseFloat(bbox.split(',')[0]);
var eastBoundLongitude = parseFloat(bbox.split(',')[1]);
var southBoundLatitude = parseFloat(bbox.split(',')[2]);
var northBoundLatitude = parseFloat(bbox.split(',')[3]);
var resourceInfo = {
extent: new Extent(westBoundLongitude, eastBoundLongitude, southBoundLatitude, northBoundLatitude, new SpatialReference({ wkid:4490 })),
layerInfos: [],
version: '1.1.1'
};
mapMain.lyrWms = new WMSLayer(url.split('?')[0], {
resourceInfo: resourceInfo
});
mapMain.lyrWms.setImageFormat('png');
mapMain.lyrWms.setVisibleLayers(mapMain.GetQueryString(url, 'layers'));
self.map.addLayer(mapMain.lyrWms , index);
}
dojo.declare("WMTSLayer",esri.layers.TiledMapServiceLayer {
declaredClass: "WMTSLayer",
_type: "",
constructor: function (url,id) {
this.id = id || this.id;
this.url = url;
this.spatialReference = new esri.SpatialReference({
wkid: 4326
});
this.fullExtent = new esri.geometry.Extent(116.814695, 39.826827, 117.065624, 39.974418, this.spatialReference);
this.tileInfo = new esri.layers.TileInfo({
"dpi": "96",
"format": "image/png",
"compressionQuality": 0,
"spatialReference": {"wkid": 4326},
"rows": 256,
"cols": 256,
"origin": {"x": -180, "y": 90},
"lods" : [
{"level" : 1, "resolution" : 0.703125, "scale" : 295497593.05875003},
{"level" : 2, "resolution" : 0.3515625, "scale" : 147748796.52937502},
{"level" : 3, "resolution" : 0.17578125, "scale" : 73874398.264687508},
{"level" : 4, "resolution" : 0.087890625, "scale" : 36937199.132343754},
{"level" : 5, "resolution" : 0.0439453125, "scale" : 18468599.566171877},
{"level" : 6, "resolution" : 0.02197265625, "scale" : 9234299.7830859385},
{"level" : 7, "resolution" : 0.010986328125, "scale" : 4617149.8915429693},
{"level" : 8, "resolution" : 0.0054931640625, "scale" : 2308574.9457714846},
{"level" : 9, "resolution" : 0.00274658203125, "scale" : 1154287.4728857423},
{"level" : 10, "resolution" : 0.001373291015625, "scale" : 577143.73644287116},
{"level" : 11, "resolution" : 0.0006866455078125, "scale" : 288571.86822143558},
{"level" : 12, "resolution" : 0.00034332275390625, "scale" : 144285.93411071779},
{"level" : 13, "resolution" : 0.000171661376953125, "scale" : 72142.967055358895},
{"level" : 14, "resolution" : 8.58306884765625e-005, "scale" : 36071.483527679447},
{"level" : 15, "resolution" : 4.291534423828125e-005, "scale" : 18035.741763839724},
{"level" : 16, "resolution" : 2.1457672119140625e-005, "scale" : 9017.8708819198619},
{"level" : 17, "resolution" : 1.0728836059570313e-005, "scale" : 4508.9354409599309},
{"level" : 18, "resolution" : 5.3644180297851563e-006, "scale" : 2254.4677204799655}
]
});
this.loaded = true;
this.onLoad(this);
},
getTileUrl: function (level, row, col) {
return this.url + "&z="+level+"&y="+row+"&x="+col+"&rgb=" + Global.color;
}
});
});
</script>
</body>
</html>