openlayers imagestatics

使用 ImageStatic 在 OpenLayers 中配置静态图像图层
在 OpenLayers 中，ImageStatic 是一种用于显示固定边界框内的静态图像的地图源。这使得可以轻松集成各种类型的栅格数据到地图应用中。
要创建 ImageStatic 图像图层，需定义几个关键参数：

url: 静态图片的位置路径。
imageSize: 定义加载图像的尺寸大小 (宽度,高度)，单位为像素。
projection: 设置投影坐标系，默认情况下是 EPSG:3857 Web 墨卡托投影。
imageExtent: 指定地理空间范围 [minX,minY,maxX,maxY] ，即该图像覆盖的实际地理位置区域[^1]。

下面是一个完整的例子来展示如何设置并添加一个 ImageStatic 到 OpenLayers 地图上:
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source.OSM';
import Static from 'ol/source/ImageStatic';
import {getCenter} from 'ol.extent';

const map = new Map({
layers: [
new TileLayer({
source: new OSM()
}),
new ImageLayer({
source: new Static({
url: './data/my-image.png',
imageSize: [900, 600],
projection: 'EPSG:4326', // WGS84 geographic coordinate system
imageExtent: [-120.0, 30.0, -100.0, 45.0]
})
})
],
target: document.getElementById('map'),
view: new View({
center: getCenter([-110.0, 37.5]),
zoom: 4,
projection: 'EPSG:4326'
})
});
登录后复制
此代码片段展示了如何叠加一幅自定义 PNG 文件作为背景底图上的另一图层，并指定了其对应的地理界限以及分辨率信息。