本文純屬個人見解，可能是正經(jīng)的胡扯
SuperMapImageryProvider是SuperMa iClient3D for WebGL產(chǎn)品中提供的一個非常常用的類，用于對接SuperMap iServer發(fā)布的二維地圖和三維服務(wù)中的影像圖層，最近一直在折騰UrlTemplateImageryProvider，一時興趣，對SuperMapImageryProvider可否自己原生實現(xiàn)下呢，先來看效果：
二維地圖
二維地圖和三維影像
對實現(xiàn)過程做下小結(jié)，主要有一下兩點
1.瓦片請求url拼接
二維地圖瓦片的請求url和三維場景影像瓦片的請求url必然是不一樣的，需要注意理解瓦片行列號、層級、比例尺等之間的關(guān)系
2.比例尺設(shè)置
三維場景影像的剖分方式都是全球剖分，比例尺和層級都是固定的，不涉及變化，相對比較容易。但地圖由于投影的方式不同，比例尺有細(xì)微的區(qū)別，具體區(qū)別可在代碼中查看
核心代碼參考：
function SuperMap3DImageryProvider(viewer, url, options) {
this.layerProvider = ''
this.options = options || {}
this.viewer = viewer
var _that = this
$.ajax({
type: "get",
url: url + '/config',
success: function(result) {
var xml = string2XML(result)
var allobjs = xml.children[0]
var name = _that.options.name || allobjs.getElementsByTagName('sml:CacheName')
var xmlbounds = allobjs.getElementsByTagName('sml:Bounds')
var bounsleft = parseFloat(xmlbounds[0].children[0].innerHTML)
var bounstop = parseFloat(xmlbounds[0].children[1].innerHTML)
var bounsright = parseFloat(xmlbounds[0].children[2].innerHTML)
var bounsbottom = parseFloat(xmlbounds[0].children[3].innerHTML)
var xmllevels = allobjs.getElementsByTagName('sml:Levels')
var xmlminlevel = _that.options.minimumLevel || parseInt(xmllevels[0].children[0].innerHTML)
var xmlmaxlevel = _that.options.maximumLevel || parseInt(xmllevels[0].children[xmllevels[0].children.length - 1].innerHTML)
_that.layerProvider = new Cesium.UrlTemplateImageryProvider({
url: url + '/data/index/{y}/{x}.{fileExtension}?level={level}',
rectangle: Cesium.Rectangle.fromDegrees(bounsleft, bounsbottom, bounsright, bounstop),
minimumLevel: xmlminlevel,
maximumLevel: xmlmaxlevel,
tilingScheme: new Cesium.GeographicTilingScheme(),
customTags: {
fileExtension: function(imageryProvider, x, y, level) {
return 'jpg_png'
},
level: function(imageryProvider, x, y, level) {
return level
}
}
});
var layer = viewer.imageryLayers.addImageryProvider(_that.layerProvider);
_that.viewer.zoomTo(layer)
return layer
},
error: function(msg) {
console.log(msg);
}
})
}
function SuperMap2DImagryProvider(viewer, url, options) {
this.layerProvider = ''
this.viewer = viewer
this.options = options || {}
this.scales84 = [3.38032714321E-9, 6.76065428641E-9, 1.352130857282E-8, 2.704261714564E-8, 5.408523429128E-8, 1.0817046858257E-7, 2.1634093716514E-7, 4.3268187433028E-7, 8.6536374866056E-7, 1.73072749732112E-6, 3.46145499464224E-6, 6.92290998928448E-6, 1.3845819978568952E-5, 2.7691639957137904E-5, 5.538327991427581E-5, 1.1076655982855162E-4, 2.2153311965710323E-4, 4.4306623931420646E-4, 8.861324786284129E-4, 0.0017722649572568258, 0.0035445299145136517, 0.007089059829027303]
this.scalesweb = [1.69016357160E-9, 3.38032714321E-9, 6.76065428641E-9, 1.352130857282E-8, 2.704261714564E-8, 5.408523429128E-8, 1.0817046858257E-7, 2.1634093716514E-7, 4.3268187433028E-7, 8.6536374866056E-7, 1.73072749732112E-6, 3.46145499464224E-6, 6.92290998928448E-6, 1.3845819978568952E-5, 2.7691639957137904E-5, 5.538327991427581E-5, 1.1076655982855162E-4, 2.2153311965710323E-4, 4.4306623931420646E-4, 8.861324786284129E-4, 0.0017722649572568258, 0.0035445299145136517, 0.007089059829027303]
var _that = this
$.ajax({
type: "get",
url: url + '.json',
success: function(result) {
console.log(result)
var name = _that.options.name || result.name;
//var rectangle = Cesium.Rectangle.fromDegrees(result.bounds.left, result.bounds.bottom, result.bounds.right, result.bounds.top)
var rectangle = Cesium.Rectangle.fromDegrees(-180, -90, 180, 90)
var epsgcode = result.prjCoordSys.epsgCode
var tilingScheme = ''
var minlevel = 0
var maxlevel = 22
var originx = 0
var originy = 0
if(epsgcode === 4326) {
tilingScheme = new Cesium.GeographicTilingScheme({
numberOfLevelZeroTilesX: 2,
numberOfLevelZeroTilesY: 1
})
originx = -180
originy = 90
if(_that.options.minimumLevel !== undefined) {
minlevel = _that.options.minimumLevel
} else {
minlevel = _that.compareLevel(result.visibleScales[0],_that.scales84)
}
if(_that.options.maximumLevel !== undefined) {
maxlevel = _that.options.maximumLevel
} else {
maxlevel = _that.compareLevel(result.visibleScales[result.visibleScales.length - 1],_that.scales84)
}
}
if(epsgcode === 3857) {
tilingScheme = new Cesium.WebMercatorTilingScheme()
originx = -20037508.34
originy = 20037508.34
if(_that.options.minimumLevel !== undefined) {
minlevel = _that.options.minimumLevel
} else {
minlevel = _that.compareLevel(result.visibleScales[0],_that.scalesweb)
}
if(_that.options.maximumLevel !== undefined) {
maxlevel = _that.options.maximumLevel
} else {
maxlevel = _that.compareLevel(result.visibleScales[result.visibleScales.length - 1],_that.scalesweb)
}
}
_that.layerProvider = new Cesium.UrlTemplateImageryProvider({
url: url + "/tileImage.png?transparent=true&cacheEnabled=true&width=256&height=256&x={x}&y={y}&scale={scale}&redirect=false&overlapDisplayed=false&origin={'x':" + originx + ",'y':" + originy + "}",
rectangle: rectangle,
minimumLevel: minlevel || 0,
maximumLevel: maxlevel || 22,
tilingScheme: tilingScheme,
customTags: {
scale: function(imageryProvider, x, y, level) {
if(epsgcode===4326)
{
return _that.scales84[level]
}
if(epsgcode===3857)
{
return _that.scalesweb[level]
}
}
}
});
var layer = viewer.imageryLayers.addImageryProvider(_that.layerProvider);
// _that.viewer.zoomTo(layer)
return layer
},
error: function(msg) {
console.log(msg);
}
})
SuperMap2DImagryProvider.prototype.compareLevel = function(value, scales) {
var val = value.toFixed(18)
for(var i = 0, len = scales.length; i < len; i++) {
var scale = scales[i].toFixed(18)
if(val === scale) {
return i
}
}
}
}
至此，我對UrlTemplateImageryProvider的使用應(yīng)爐火純青，深深感受到其強大之處。
以上代碼封裝還不夠完善，僅供參考。
