揭秘OpenLayers加载静态图片的秘密武器

2023-11-23 19:53:43

揭开 OpenLayers 的神秘面纱：构建 WebGIS 应用程序

简介

OpenLayers 是一把构建地理信息系统（GIS）和 Web 地图应用程序的利器。这款强大的开源 JavaScript 库拥有丰富的功能，包括加载和显示地图、添加交互式要素以及自定义图层。准备好踏上 WebGIS 开发之旅，解锁 OpenLayers 的无限可能吧！

载入静态图像：让地图栩栩如生

第一步是载入静态图像，为你的地图注入鲜活的生命力。借助 OpenLayers 的 ol.source.ImageStatic 类，你可以轻松加载图像并定义其范围。然后，创建一个 ol.layer.Image 类实例，将图像源添加到其中，最后将图像图层添加到地图。几行代码，一幅静态图像即可在你的地图上大放异彩。

import {ImageStatic, Image} from 'ol';

const imageSource = new ImageStatic({
  url: 'path/to/image.png',
  imageExtent: [xmin, ymin, xmax, ymax],
});

const imageLayer = new Image({
  source: imageSource,
});

map.addLayer(imageLayer);

添加标记：标注你关心的地点

接下来，是时候在地图上添加标记，标注那些对你至关重要的地点。使用 ol.source.Vector 和 ol.Feature 创建标记数据源和标记要素。然后，创建一个 ol.layer.Vector 图层并将其添加到地图。最后，将标记要素添加到矢量图层，即可在地图上标记出你所需的位置。

import {VectorLayer, VectorSource, Feature} from 'ol';

const vectorSource = new VectorSource();

const feature = new Feature({
  geometry: new Point([0, 0]),
  name: 'My Marker',
});

const vectorLayer = new VectorLayer({
  source: vectorSource,
});

map.addLayer(vectorLayer);

vectorSource.addFeature(feature);

预览图片：获取地图的鸟瞰图

OpenLayers 还允许你预览地图上的图像，这对于直观地了解地图内容非常有用。使用 ol.proj.transform 和 ol.coordinate.toLonLat 函数，你可以将坐标从 Web 墨卡托投影转换为经纬度坐标，然后在页面上显示它们。还可以显示地图的缩放级别，并在地图上移动鼠标时更新经纬度坐标。

import {transform, toLonLat} from 'ol/proj';
import {coordinate} from 'ol/coordinate';

const lonLat = toLonLat(transform([0, 0], 'EPSG:3857', 'EPSG:4326'));

document.getElementById('lon').innerHTML = lonLat[0].toFixed(2);
document.getElementById('lat').innerHTML = lonLat[1].toFixed(2);

map.getView().on('change:resolution', function() {
  document.getElementById('zoom').innerHTML = map.getView().getZoom();
});

map.on('pointermove', function(evt) {
  const lonLat = toLonLat(evt.coordinate);
  document.getElementById('lon').innerHTML = lonLat[0].toFixed(2);
  document.getElementById('lat').innerHTML = lonLat[1].toFixed(2);
});