Gis 使用OpenLayers 5在地图上添加旋转的卫星图像

我正在尝试使用OpenLayers 5在地图上添加卫星图像

问题是我无法做到这一点，因为我刚刚找到了一个选项，可以在地图上添加一个图像，通过图像范围xmin、ymin、xmax、ymax，而不是边界框。图像应适合于边界框内。由于这个原因，图像被扭曲了

图像位于JPG文件属性feature.properties.icon中。例如：

我想要的结果是这样的：

我得到的结果是：

我在地图上添加此图像的代码如下：

import ImageLayer from 'ol/layer/Image'
import Static from 'ol/source/ImageStatic'

...

this.olmap = new Map({
    target: 'map',
    layers: [
      baseLayerGroup, rasterLayerGroup, vectorLayer
    ],
    view: new View({
        projection: 'EPSG:4326',
        center: [ -45.8392, -3.65286 ],
        zoom: 8
    })
})

...

this.rasterLayerGroup.getLayers().push(
    new ImageLayer({
        source: new Static({
            url: feature.properties.icon,
            projection: 'EPSG:4326',
            imageExtent: [
              feature.properties.bl_longitude, feature.properties.bl_latitude,
              feature.properties.tr_longitude, feature.properties.tr_latitude
            ]  
        })
    })
)

是否有人知道如何传递图像边界框而不仅仅是图像范围

先谢谢你

编辑1：迈克的解决方案

通过Mike的解决方案，我修复了一些图像在赤道线附近出现的错误。出于这个原因，他的回答解决了我的问题，并将图像插入到了一个更好的位置，这是我在提出问题的那一刻所期待的

然而，这个解决方案在赤道线附近的图像中对我有效。极点旁边的图像保持扭曲编辑2

我在下面发送了一张说明最终结果的图片：

编辑2：新问题

我正在测试一些图像，发现了一个新的bug。现在我发现图像应该适合于边界框。如果图像不适合bbox，它将保持扭曲，如我在下面发送的打印

该图像应与下图[PS 1]中的图像一样安装在bbox中：

我相信这可能是一个重投影的问题，但我不知道，因为视图投影和图像投影都是EPSG:4326

我试图在Openlayers网站上遵循关于光栅重投影[1]的解释，但是我无法复制它，因为正如我所说的，投影视图和图像都是相同的，或者应该是相同的

我在下面发送GeoJSON，其中包含与上面图像相关的信息。可以在properties.icon中找到该图像。bbox坐标可以在geometry.coordinates或properties.bl_latitude、properties.bl_longitude、properties.br_latitude等中找到。 bl表示左下角，br表示右下角，tl表示左上角，tr表示右上角。属性内的这些坐标与geometry.coordinates内的坐标相同

{
  "geometry": {
    "coordinates": [
      [
        [
          -77.7862,
          -50
        ],
        [
          -100,
          -60
        ],
        [
          -80,
          -60
        ],
        [
          -62.229,
          -50
        ],
        [
          -77.7862,
          -50
        ]
      ]
    ],
    "type": "Polygon"
  },
  "properties": {
    "alternate": "http://www.dpi.inpe.br/opensearch/v2/granule.json?uid=MOD13Q1.A2018017.h13v14",
    "auxpath": null,
    "bitslips": null,
    "bl_latitude": -60,
    "bl_longitude": -100,
    "br_latitude": -60,
    "br_longitude": -80,
    "centerlatitude": -55,
    "centerlongitude": -80.0038,
    "centertime": null,
    "cloud": 0,
    "cloudcovermethod": "M",
    "dataset": "MOD13Q1",
    "date": "2018-01-17T00:00:00",
    "enclosure": [
      {
        "band": "evi",
        "radiometric_processing": "SR",
        "type": "MOSAIC",
        "url": "http://www.dpi.inpe.br/newcatalog/tmp/MOD13Q1/2018/MOD13Q1.A2018017.h13v14.006.2018033223827.hdf"
      },
      {
        "band": "ndvi",
        "radiometric_processing": "SR",
        "type": "MOSAIC",
        "url": "http://www.dpi.inpe.br/newcatalog/tmp/MOD13Q1/2018/MOD13Q1.A2018017.h13v14.006.2018033223827.hdf"
      },
      ...
    ],
    "icon": "http://www.dpi.inpe.br/newcatalog/tmp/MOD13Q1/2018/MOD13Q1.A2018017.h13v14.jpg",
    "id": "http://www.dpi.inpe.br/opensearch/v2/granule.json?uid=MOD13Q1.A2018017.h13v14",
    "orbit": 0,
    "path": 14,
    "provider": "OP_CBERS1",
    "row": 13,
    "satellite": "T1",
    "sensor": "MODIS",
    "title": "MOD13Q1.A2018017.h13v14",
    "tl_latitude": -50,
    "tl_longitude": -77.7862,
    "tr_latitude": -50,
    "tr_longitude": -62.229,
    "type": "IMAGES",
    "updated": "2018-03-01T18:51:56",
    "via": "http://www.dpi.inpe.br/opensearch/v2/metadata/MOD13Q1.A2018017.h13v14"
  },
  "type": "Feature"
}

有人会有新想法吗

[PS 1]：使图像适合bbox的原始代码是传单代码[2]，我将其发送到下面：

var map = L.map('map').setView([-15.22, -53.23], 5)

...

var anchor = [
    [feature.properties.tl_latitude, feature.properties.tl_longitude],
    [feature.properties.tr_latitude, feature.properties.tr_longitude],
    [feature.properties.br_latitude, feature.properties.br_longitude],
    [feature.properties.bl_latitude, feature.properties.bl_longitude]
]

layer._quicklook = L.imageTransform(feature.properties.icon, anchor).addTo(map)

[1]

---

[2.]

如果坐标是照片的坐标，且包含旋转照片的jpg位于EPSG:4326中，即与子午线和平行线对齐，则需要一个包含照片所有角点的边界框

import {boundingExtent} from 'ol/extent';

....

this.rasterLayerGroup.getLayers().push(
    new ImageLayer({
        source: new Static({
            url: feature.properties.icon,
            projection: 'EPSG:4326',
            imageExtent: boundingExtent([
              [feature.properties.bl_longitude, feature.properties.bl_latitude],
              [feature.properties.br_longitude, feature.properties.br_latitude],
              [feature.properties.tl_longitude, feature.properties.tl_latitude],
              [feature.properties.tr_longitude, feature.properties.tr_latitude]
            ])  
        })
    })
)

但是，您的顶部屏幕截图旋转了jpg本身。如果需要，投影不是EPSG:4326，您需要定义一个自定义投影来处理旋转

我已经设法让一些接近，但简单地拉伸图像，以适应多边形不能提供准确的路线，在一边的传单方法做

变量属性={ 基隆纬度：-60， 基隆经度：-100， 纬度：-60， 经度：-80度， 中心纬度：-55， 中心经度：-80.0038， 偶像：https://www.mikenunn.net/demo/MOD13Q1.A2018017.h13v14.jpg, tl_纬度：-50， tl_经度：-77.7862， tr_纬度：-50， 经度：-62.229， }; 函数覆盖源属性{ var projection=ol.proj.get'EPSG:3857'；//小叶投影 var extentSize=[0,0,4096,4096]；//投影变换的任意范围 var size0=扩展大小[2]； 变量大小1=扩展大小[3]； var url=properties.icon； var bl=ol.proj.transform[properties.bl_经度，properties.bl_纬度]，'EPSG:4326'，投影； var tl=ol.proj.transform[properties.tl_经度，properties.tl_纬度]，'EPSG:4326'，投影； var br=ol.proj.transform[properties.br_longitude，properties.br_lation]，'EPSG:4326'，投影； var tr=ol.proj.transform[properties.tr_longitude，properties.tr_lation]，'EPSG:4326'，投影； 函数：坐标、输出、尺寸{ var dims=尺寸| | 2；

---

对于var i=0；我是否有tl和br的lon/lat值或旋转值？是的，我有图像边界框的四个点的lon/lat值。它们是bl_纬度、bl_经度、br_纬度、br_经度、tl_纬度、tl_经度、tr_纬度、tr_经度。我没有旋转值。我应该用bbox值计算它吗？不是吗属于GIS SE站点？在OpenLayers站点上，问一个问题，重定向到StackOverflow而不是GIS SE。您的解决方案适用于我靠近赤道线的图像，但不幸的是，靠近极点的图像仍然扭曲。现在我发现图像应该适合边界b

---

牛通过了bl_经度，bl_纬度。。。。你会有一个新的提示，你想分享吗？非常感谢你的回复。你能发布南美洲那一部分的原始图像和所有坐标吗。显然，它需要某种旋转投影。我已经为谷歌地球设计的KML地面覆盖层管理了这些，以便与OpenLayers一起工作，这样类似的东西可能会与您的一样。我更新了问题，包括您想要什么。真的，这两种情况看起来很相似。如何旋转PNG图像？在这个问题中，我加入了一个单张代码，它在地图上描绘了南美洲的形象。非常感谢。我添加了一些工作片段，以尝试复制传单结果和KML覆盖。非常感谢迈克的帮助。