GIS技术支持工程师日常工作随笔-SuperMapImagery

本文纯属个人见解，可能是正经的胡扯

SuperMapImageryProvider是SuperMa iClient3D for WebGL产品中提供的一个非常常用的类，用于对接SuperMap iServer发布的二维地图和三维服务中的影像图层，最近一直在折腾UrlTemplateImageryProvider，一时兴趣，对SuperMapImageryProvider可否自己原生实现下呢，先来看效果：

二维地图
二维地图和三维影像

对实现过程做下小结，主要有一下两点

1.瓦片请求url拼接
二维地图瓦片的请求url和三维场景影像瓦片的请求url必然是不一样的，需要注意理解瓦片行列号、层级、比例尺等之间的关系
2.比例尺设置
三维场景影像的剖分方式都是全球剖分，比例尺和层级都是固定的，不涉及变化，相对比较容易。但地图由于投影的方式不同，比例尺有细微的区别，具体区别可在代码中查看

核心代码参考：

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的使用应炉火纯青，深深感受到其强大之处。
以上代码封装还不够完善，仅供参考。