Question

我有一个问题是使用OpenLayers正确定位图像。我有一个网络软件如何在网页上创建KML文件或显示地图。

此处是Google地球上地图显示的屏幕截图，以及与openlayers相同的显示屏（Google地球是一个很好的可视化）。地图在北方有点拉伸

什么是假的？ epsg转换？我需要用gdalwarp重新制作图像吗？

这是我的代码示例

function ConvertLonLatFromESPG4326ToESPG900913(LonLat) {
var lonlatTransforme = LonLat.clone();
if (map == null) {
    lonlatTransforme.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));
}
else {
    lonlatTransforme.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection(map.getProjectionObject().projCode));
}
return lonlatTransforme;

}

var bounds = new OpenLayers.Bounds();
bounds.extend(ConvertLonLatFromESPG4326ToESPG900913(new OpenLayers.LonLat(y1, x1)));
bounds.extend(ConvertLonLatFromESPG4326ToESPG900913(new OpenLayers.LonLat(y2, x2)));

var graphic = new OpenLayers.Layer.Image(
            nomImage,
            url,
            bounds,
            new OpenLayers.Size($("#map").width(), $("#map").height()),
            {
                //http://www.forumsig.org/showthread.php?t=26393
                maxResolution: map.layers[0].resolutions[0],
                resolutions: map.layers[0].resolutions,                    
                isBaseLayer: false,
                displayInLayerSwitcher: true
            }
        );
map.addLayer(graphic);

感谢您的帮助

Answer 1

我终于得到了解决方案，因为我认为它必须使用gdalwarp。

这是我重建图片的代码

var buffer = null;
var newBuffer = null;
var image = new Image();
image.src = "images/test.jpg"
image.onload = function() {
    render(image);
}
function render(image) {
    var c = document.getElementById("c");
    c.width = window.innerWidth * 0.90;
    c.height = window.innerHeight * 0.90;
    var canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth * 0.90;
    canvas.height = window.innerHeight * 0.90;        
    var context = c.getContext('2d');
    context.drawImage(image, 0, 0);
    var imageData = context.getImageData(0, 0, image.width, image.height);
    buffer = imageData.data.buffer; // ArrayBuffer
    newBuffer = new ArrayBuffer(buffer.byteLength);
    var dataTypedArray = new Uint8Array(newBuffer);
    var actualData = new Uint8Array(buffer);
    var j = 0;
    for (var i = 0; i <= image.width; i++) {
        for (j = 0; j <= image.height*4; j++) {
            dataTypedArray[i + image.width * j] = actualData[i + image.width * j];
        }
        renderImgSlowly(canvas, image, dataTypedArray);
    }
}
function renderImgSlowly (canvas, image, dataTypedArray)  {
    //some animation to render the image slowly line by line
}

我希望这可以帮助别人。（我现在明白为什么OpenLayers，虽然它知道解析kml，但不管理地面覆盖，因为结果将与我有同样的问题

OpenLayers.Image在kml与openlayers之间的位置差异

1 个答案: