92.在 Vue 3 中使用 OpenLayers 设置和适应地图范围（set extent 和 fit extent）

### 在 Vue 中使用 OpenLayers 实现带雷达扫描线效果的地图图层 为了实现在 Vue 项目中利用 OpenLayers 加载图片并添加雷达扫描线的效果，可以按照如下方法操作： #### 准备工作 确保已经成功安装了 `ol` (OpenLayers) 库以及任何必要的样式文件。对于 Vue 项目的集成，推荐采用 npm 或 yarn 安装方式来引入依赖项。 ```bash npm install ol ``` 或者 ```bash yarn add ol ``` #### 创建地图实例 初始化一个基本的地图容器，并设置基础参数如视图中心点、缩放级别等。这里假设已有一个 div 元素用于容纳地图组件[^1]。 ```javascript import 'ol/ol.css'; import { Map, View } from 'ol'; import TileLayer from 'ol/layer/Tile'; import XYZSource from 'ol/source/XYZ'; // 初始化地图对象 const map = new Map({ target: 'map', // 对应 HTML 页面中的 id="map" layers: [ new TileLayer({ source: new XYZSource({ url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png' }) }), // 可在此处加入其他图层... ], view: new View({ center: [0, 0], zoom: 2, }) }); ``` #### 添加静态图像作为底图 当希望以特定图片而非网络瓦片服务为基础时，则需创建 ImageStatic 类型的数据源，并指定该图片的具体位置及其地理范围（即坐标边界）。这一步骤允许自定义背景图为任意本地或远程存储的 PNG/JPEG 文件。 ```javascript import StaticImage from 'ol/source/ImageStatic'; import Projection from 'ol/proj/Projection'; import Extent from 'ol/extent'; let imageExtent = [-180, -90, 180, 90]; // 自定义图片覆盖的实际地理位置区域 new TileLayer({ extent: imageExtent, source: new StaticImage({ attributions: '', url: './path/to/image.png', projection: new Projection({code: 'EPSG:4326'}), imageLoadFunction(image, src){ fetch(src).then(response => response.blob()).then(blob =>{ let objectUrl = URL.createObjectURL(blob); image.getImage().src = objectUrl; }); }, imageSize:[width,height], // 图像尺寸(px)，根据实际情况调整 imageExtent:imageExtent }) }) ``` #### 构建动态雷达扫描动画 要模拟雷达扫描光束移动的过程，可以通过定时器不断更新一条或多条矢量线条的位置属性，从而形成连续变化的视觉效果。此过程涉及 VectorLayer 和 Feature 的组合应用，其中每根射线由 LineString 几何体表示，并随时间推移改变端点坐标达到旋转目的。 ```javascript import VectorLayer from 'ol/layer/Vector'; import VectorSource from 'ol/source/Vector'; import Style from 'ol/style/Style'; import Stroke from 'ol/style/Stroke'; import Point from 'ol/geom/Point'; import LineString from 'ol/geom/LineString'; import Feature from 'ol/Feature'; function createRadarBeam(centerLonLat, radiusInPixels, angleDegrees=0){ const startPx = map.getPixelFromCoordinate(centerLonLat); function rotateAroundCenter(pixelCoord, radians){ var cx=startPx[0]; var cy=startPx[1]; var px=pixelCoord[0]-cx; var py=pixelCoord[1]-cy; var cosTheta=Math.cos(radians); var sinTheta=Math.sin(radians); return[ Math.round(cx+(px*cosTheta)-(py*sinTheta)), Math.round(cy+(px*sinTheta)+(py*cosTheta)) ]; } let endPx=[startPx[0]+radiusInPixels*Math.cos(angleDegrees*(Math.PI/180)), startPx[1]-radiusInPixels*Math.sin(angleDegrees*(Math.PI/180))]; let rotatedEndPx=rotateAroundCenter(endPx,(angleDegrees+90)*(Math.PI/180)); return new LineString([ map.getCoordinateFromPixel(startPx), map.getCoordinateFromPixel(rotatedEndPx) ]); } var radarBeam=new Feature(createRadarBeam([centerLongitude,centerLatitude],beamLength)); radarBeam.setStyle(new Style({ stroke:new Stroke({color:'rgba(255,0,0,.7)', width:2}) })); var vectorSource=new VectorSource(); vectorSource.addFeature(radarBeam); var beamLayer=new VectorLayer({ source:vectorSource }); map.addLayer(beamLayer); setInterval(() => { let currentAngle=(Date.now()/10)%360; // 让角度随着时间均匀增加 radarBeam.setGeometry(createRadarBeam([centerLongitude,centerLatitude],beamLength,currentAngle)); }, 16); // 大约等于60帧每秒刷新率 ``` 上述代码片段展示了如何构建一个简单的雷达扫掠动画逻辑框架，实际部署过程中可能还需要考虑更多细节优化，比如性能调优、响应式设计等方面的问题。