使用传单将 GeoTiff 渲染到浏览器答案

【问题标题】：Render GeoTiff to on browser with leaflet使用传单将 GeoTiff 渲染到浏览器
【发布时间】：2018-11-30 15:48:00
【问题描述】：

我有一个带有以下 gdalinfo 的大 GeoTiff 图像：

Driver: GTiff/GeoTIFF 
Files: ImageNew.tif
Size is 8501, 8544
Coordinate System is:
PROJCS["WGS 84 / Pseudo-Mercator",
    GEOGCS["WGS 84",
        DATUM["WGS_1984",
            SPHEROID["WGS 84",6378137,298.257223563,
                AUTHORITY["EPSG","7030"]],
            AUTHORITY["EPSG","6326"]],
        PRIMEM["Greenwich",0,
            AUTHORITY["EPSG","8901"]],
        UNIT["degree",0.0174532925199433,
            AUTHORITY["EPSG","9122"]],
        AUTHORITY["EPSG","4326"]],
    PROJECTION["Mercator_1SP"],
    PARAMETER["central_meridian",0],
    PARAMETER["scale_factor",1],
    PARAMETER["false_easting",0],
    PARAMETER["false_northing",0],
    UNIT["metre",1,
        AUTHORITY["EPSG","9001"]],
    AXIS["X",EAST],
    AXIS["Y",NORTH],
    EXTENSION["PROJ4","+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs"],
    AUTHORITY["EPSG","3857"]]
Origin = (8267060.670175411738455,3458242.195657447911799)
Pixel Size = (0.583831698389895,-0.583831698389895)
Metadata:
  AREA_OR_POINT=Area
Image Structure Metadata:
  INTERLEAVE=BAND
Corner Coordinates:
Upper Left  ( 8267060.670, 3458242.196) ( 74d15'51.37"E, 29d38'48.83"N)
Lower Left  ( 8267060.670, 3453253.938) ( 74d15'51.37"E, 29d36'28.61"N)
Upper Right ( 8272023.823, 3458242.196) ( 74d18'31.88"E, 29d38'48.83"N)
Lower Right ( 8272023.823, 3453253.938) ( 74d18'31.88"E, 29d36'28.61"N)
Center      ( 8269542.247, 3455748.067) ( 74d17'11.62"E, 29d37'38.73"N)
Band 1 Block=8501x1 Type=Byte, ColorInterp=Palette

我想做的是在浏览器上渲染图像并获得实际的经纬度坐标（如谷歌地图的点）

我使用以下库将图像转换为图块： https://github.com/commenthol/gdal2tiles-leaflet

还有https://github.com/commenthol/leaflet-rastercoords

在网络浏览器上渲染马赛克。

似乎一切正常。但是当我点击它时，与实际的谷歌 latlong 和渲染图像 latlng 相比，它返回了错误的 lat lng 坐标。

我在某个地方出错了吗？

【问题讨论】：

这些坐标怎么错了？你能提供例子吗？
我发现我们得到的坐标来自浏览器像素。使用 proj4js。
您用来获取点击坐标的 javascript 代码是什么？
[github.com/commenthol/leaflet-rastercoords] // 分配地图和图像尺寸 var rc = new L.RasterCoords(map, img); // 在地图中的点击事件上设置标记 `map.on('click', function (event) { var coords = rc .project(event.latlng)`

标签： javascript leaflet gdal rgdal geotiff

【解决方案1】：

使用 gdal2tiles 传单我在浏览器上渲染光栅图像 GeoTiff 图像。 https://github.com/commenthol/gdal2tiles-leaflet

我正在做什么从投影地图转换以获得实际坐标（纬度，经度）

// 地理变换数据

var xoff = 424562.64403639885,
        a   = 0.5064676564009486,
        b   = 0,
        yoff = 3285265.740653501,
        d   = 0,
        e   = -0.5064676564009355;


var X_proj = a * coords.x + b * coords.y + xoff
var Y_proj = d * coords.x + e * coords.y + yoff

其中 coords.x 和 coords.y 是 ( {x: 15336, y: 14088} ) 浏览器地图的像素点。从点击事件返回，例如：https://commenthol.github.io/leaflet-rastercoords/。

然后使用proj4js转换栅格点（X_proj和Y_proj）得到lat,lng

【讨论】：