Cesium 目前只支持wgs84地理坐标系和web魔卡托投影坐标系。其中地形一般是wgs84。问题1：如何使用web魔卡托投影坐标系的影像正确的贴图到wgs84地形上？问题2：是否可以扩展使Cesium支持多种坐标系的影像数据？假设现有一份wgs84地理坐标系地形数据和一份web魔卡托投影坐标系影像数据，如何完成影像贴图？步骤一：根据地形瓦片的四至范围计算对应的影像瓦片 ImageryLayer.prototype._createTileImagerySkeletons = function (tile, terrainProvider, insertionPoint) { //...省略部分代码 //影像图层的地理范围 var imageryBounds = Rectangle.intersection(imageryProvider.rectangle, this._rectangle, imageryBoundsScratch); //获取影像范围与当前地形瓦块范围的交集 var rectangle = Rectangle.intersection(tile.rectangle, imageryBounds, tileImageryBoundsScratch); //...省略部分代码 //获取当前影像的切片规则 var imageryTilingScheme = imageryProvider.tilingScheme; //根据影像与地形瓦块的范围交集计算左上角对应影像的XY行列号 var northwestTileCoordinates = imageryTilingScheme.positionToTileXY(Rectangle.northwest(rectangle), imageryLevel); //根据影像与地形瓦块的范围交集计算右下角对应影像的XY行列号 var southeastTileCoordinates = imageryTilingScheme.positionToTileXY(Rectangle.southeast(rectangle), imageryLevel); //...省略部分代码 //通过起始行列号获取该地形瓦块需要的所有影像瓦片 for (var i = northwestTileCoordinates.x; i <= southeastTileCoordinates.x; i++) { //...省略部分代码 for (var j = northwestTileCoordinates.y; j <= southeastTileCoordinates.y; j++) { //...省略部分代码 var imagery = this.getImageryFromCache(i, j, imageryLevel); surfaceTile.imagery.splice(insertionPoint, 0, new TileImagery(imagery, texCoordsRectangle, useWebMercatorT)); ++insertionPoint; } } return true; }; 其中用到了imageryTilingScheme.positionToTileXY方法，该方法做了wgs84到web魔卡托的投影变换，通过该变换获取wgs84坐标系对应的web魔卡托投影坐标系的影像瓦片。 WebMercatorTilingScheme.prototype.positionToTileXY = function (position, level, result) { var rectangle = this._rectangle; if (!Rectangle.contains(rectangle, position)) { // outside the bounds of the tiling scheme return undefined; } var xTiles = this.getNumberOfXTilesAtLevel(level); var yTiles = this.getNumberOfYTilesAtLevel(level); var overallWidth = this._rectangleNortheastInMeters.x - this._rectangleSouthwestInMeters.x; var xTileWidth = overallWidth / xTiles; var overallHeight = this._rectangleNortheastInMeters.y - this._rectangleSouthwestInMeters.y; var yTileHeight = overallHeight / yTiles; var projection = this._projection; var webMercatorPosition = projection.project(position); var distanceFromWest = webMercatorPosition.x - this._rectangleSouthwestInMeters.x; var distanceFromNorth = this._rectangleNortheastInMeters.y - webMercatorPosition.y; var xTileCoordinate = distanceFromWest / xTileWidth | 0; if (xTileCoordinate >= xTiles) { xTileCoordinate = xTiles - 1; } var yTileCoordinate = distanceFromNorth / yTileHeight | 0; if (yTileCoordinate >= yTiles) { yTileCoordinate = yTiles - 1; } if (!defined(result)) { return new Cartesian2(xTileCoordinate, yTileCoordinate); } result.x = xTileCoordinate; result.y = yTileCoordinate; return result; }; 下面是wgs84到web魔卡托和web魔卡托到wgs84的互换代码： WebMercatorProjection.prototype.project = function (cartographic, result) { var semimajorAxis = this._semimajorAxis; var x = cartographic.longitude * semimajorAxis; var y = WebMercatorProjection.geodeticLatitudeToMercatorAngle(cartographic.latitude) * semimajorAxis; var z = cartographic.height; if (!defined(result)) { return new Cartesian3(x, y, z); } result.x = x; result.y = y; result.z = z; return result; }; /** * Converts Web Mercator X, Y coordinates, expressed in meters, to a {@link Cartographic} * containing geodetic ellipsoid coordinates. The Z coordinate is copied unmodified to the * height. * * @param {Cartesian3} cartesian The web mercator Cartesian position to unrproject with height (z) in meters. * @param {Cartographic} [result] The instance to which to copy the result, or undefined if a * new instance should be created. * @returns {Cartographic} The equivalent cartographic coordinates. */ WebMercatorProjection.prototype.unproject = function (cartesian, result) { //>>includeStart('debug', pragmas.debug); if (!defined(cartesian)) { throw new DeveloperError('cartesian is required'); } //>>includeEnd('debug'); var oneOverEarthSemimajorAxis = this._oneOverSemimajorAxis; var longitude = cartesian.x * oneOverEarthSemimajorAxis; var latitude = WebMercatorProjection.mercatorAngleToGeodeticLatitude(cartesian.y * oneOverEarthSemimajorAxis); var height = cartesian.z; if (!defined(result)) { return new Cartographic(longitude, latitude, height); } result.longitude = longitude; result.latitude = latitude; result.height = height; return result; }; 到这里，第一步差不多已经完成了。步骤二：从web魔卡托投影到wgs84纹理贴图坐标生成。最初，有一个简单的顶点着色器和包含计算web魔卡托纹理坐标的片元着色器，实现动态投影效果很好。但是在一些移动设备上，片元着色器的精度有限。这样导致在中等缩放级别上影像涂抹问题，因为根据不同的地理坐标计算投影到web魔卡托的纹理坐标值相同。比如：vs传给fs顶点参数为：（114.0,30.0），在fs中计算出web魔卡托的纹理坐标为（0.5,0.5），然而当vs传给fs顶点参数为：（114.1,30.0），在fs中计算出web魔卡托的纹理坐标也为（0.5,0.5），这样会导致不同的地理位置纹理相同的情况。后来，其解决方案是在顶点着色器中计算重新投影到web魔卡托的纹理坐标，而不是在片元着色器中计算。这样就需要更多的顶点数据，使用片元着色器计算纹理坐标只需要一个四边形。要通过顶点着色器重新投影实现相同的精度，我们需要为每个输出像素提供一个顶点。因此，cesium使用了256x256顶点的网格，因为大多数图像图块都是256x256。幸运的是，可以只创建一次网格并将其上传到GPU，然后将其重新用于所有的投影，因此与原始的片元着色器方法相比，性能几乎没有变化。及采用RTT的方式，生成一张新的纹理，替代原始的web魔卡托纹理。但是由于一些GPU上的GLSL sin函数在精细范围内不连续，会出现严重伪像问题，才有了Cesium现在的解决方案。当前，通过基于CORDIC算法实现更可靠的sin函数，Cesium解决了上面问题，即使每个顶点要执行大量代码，但在大多数GPU上，性能似乎都还不错。不幸的是，在某些GPU上，性能很糟糕。因此，Cesium在CPU上计算Web墨卡托纹理坐标，并将T坐标与每个顶点一起存储（S坐标在“地理和Web墨卡托”中是相同的）。为了使其更快，Cesium将重投影网格减小为仅2个顶点宽和64个顶点高。高度为64从技术上讲，重投影精度比以前有所降低，但速度上提高了四倍。 function reprojectToGeographic(command, context, texture, rectangle) { var reproject = context.cache.imageryLayer_reproject; if (!defined(reproject)) { reproject = context.cache.imageryLayer_reproject = { vertexArray : undefined, shaderProgram : undefined, sampler : undefined, destroy : function() { if (defined(this.framebuffer)) { this.framebuffer.destroy(); } if (defined(this.vertexArray)) { this.vertexArray.destroy(); } if (defined(this.shaderProgram)) { this.shaderProgram.destroy(); } } }; var positions = new Float32Array(2 * 64 * 2); var index = 0; for (var j = 0; j < 64; ++j) { var y = j / 63.0; positions[index++] = 0.0; positions[index++] = y; positions[index++] = 1.0; positions[index++] = y; } var reprojectAttributeIndices = { position : 0, webMercatorT : 1 }; var indices = TerrainProvider.getRegularGridIndices(2, 64); var indexBuffer = Buffer.createIndexBuffer({ context : context, typedArray : indices, usage : BufferUsage.STATIC_DRAW, indexDatatype : IndexDatatype.UNSIGNED_SHORT }); reproject.vertexArray = new VertexArray({ context : context, attributes : [{ index : reprojectAttributeIndices.position, vertexBuffer : Buffer.createVertexBuffer({ context : context, typedArray : positions, usage : BufferUsage.STATIC_DRAW }), componentsPerAttribute : 2 },{ index : reprojectAttributeIndices.webMercatorT, vertexBuffer : Buffer.createVertexBuffer({ context : context, sizeInBytes : 64 * 2 * 4, usage : BufferUsage.STREAM_DRAW }), componentsPerAttribute : 1 }], indexBuffer : indexBuffer }); var vs = new ShaderSource({ sources : [ReprojectWebMercatorVS] }); reproject.shaderProgram = ShaderProgram.fromCache({ context : context, vertexShaderSource : vs, fragmentShaderSource : ReprojectWebMercatorFS, attributeLocations : reprojectAttributeIndices }); reproject.sampler = new Sampler({ wrapS : TextureWrap.CLAMP_TO_EDGE, wrapT : TextureWrap.CLAMP_TO_EDGE, minificationFilter : TextureMinificationFilter.LINEAR, magnificationFilter : TextureMagnificationFilter.LINEAR }); } texture.sampler = reproject.sampler; var width = texture.width; var height = texture.height; uniformMap.textureDimensions.x = width; uniformMap.textureDimensions.y = height; uniformMap.texture = texture; var sinLatitude = Math.sin(rectangle.south); var southMercatorY = 0.5 * Math.log((1 + sinLatitude) / (1 - sinLatitude)); sinLatitude = Math.sin(rectangle.north); var northMercatorY = 0.5 * Math.log((1 + sinLatitude) / (1 - sinLatitude)); var oneOverMercatorHeight = 1.0 / (northMercatorY - southMercatorY); var outputTexture = new Texture({ context : context, width : width, height : height, pixelFormat : texture.pixelFormat, pixelDatatype : texture.pixelDatatype, preMultiplyAlpha : texture.preMultiplyAlpha }); // Allocate memory for the mipmaps. Failure to do this before rendering // to the texture via the FBO, and calling generateMipmap later, // will result in the texture appearing blank. I can't pretend to // understand exactly why this is. if (CesiumMath.isPowerOfTwo(width) && CesiumMath.isPowerOfTwo(height)) { outputTexture.generateMipmap(MipmapHint.NICEST); } var south = rectangle.south; var north = rectangle.north; var webMercatorT = float32ArrayScratch; var outputIndex = 0; for (var webMercatorTIndex = 0; webMercatorTIndex < 64; ++webMercatorTIndex) { var fraction = webMercatorTIndex / 63.0; var latitude = CesiumMath.lerp(south, north, fraction); sinLatitude = Math.sin(latitude); var mercatorY = 0.5 * Math.log((1.0 + sinLatitude) / (1.0 - sinLatitude)); var mercatorFraction = (mercatorY - southMercatorY) * oneOverMercatorHeight; webMercatorT[outputIndex++] = mercatorFraction; webMercatorT[outputIndex++] = mercatorFraction; } reproject.vertexArray.getAttribute(1).vertexBuffer.copyFromArrayView(webMercatorT); command.shaderProgram = reproject.shaderProgram; command.outputTexture = outputTexture; command.uniformMap = uniformMap; command.vertexArray = reproject.vertexArray; } 以上将整个动态投影变换的关键步骤已指出，利用Proj4更改相应代码就可以扩展实现其他坐标系的影像数据动态投影。

Cesium原理之动态投影

vip888

Cesium 目前只支持wgs84地理坐标系和web魔卡托投影坐标系。其中地形一般是wgs84。

问题1：如何使用web魔卡托投影坐标系的影像正确的贴图到wgs84地形上？

问题2：是否可以扩展使Cesium支持多种坐标系的影像数据？

假设现有一份wgs84地理坐标系地形数据和一份web魔卡托投影坐标系影像数据，如何完成影像贴图？

步骤一：根据地形瓦片的四至范围计算对应的影像瓦片

ImageryLayer.prototype._createTileImagerySkeletons = function (tile, terrainProvider, insertionPoint) {
    //...省略部分代码
    //影像图层的地理范围
    var imageryBounds = Rectangle.intersection(imageryProvider.rectangle, this._rectangle, imageryBoundsScratch);
    //获取影像范围与当前地形瓦块范围的交集
    var rectangle = Rectangle.intersection(tile.rectangle, imageryBounds, tileImageryBoundsScratch);

//...省略部分代码

//获取当前影像的切片规则
var imageryTilingScheme = imageryProvider.tilingScheme;

//根据影像与地形瓦块的范围交集计算左上角对应影像的XY行列号
var northwestTileCoordinates = imageryTilingScheme.positionToTileXY(Rectangle.northwest(rectangle), imageryLevel);
//根据影像与地形瓦块的范围交集计算右下角对应影像的XY行列号
var southeastTileCoordinates = imageryTilingScheme.p

此内容登录或注册后可见