cesium控制及效果(二)：openlayers鹰眼

1、概述

使用cesium结合openlayers实现鹰眼图

2、创建地图容器

<div id="cesiumContainer"></div>  //1、cesium容器
<div id="eye"></div>  //2、openlayers容器

3、地图初始化

import * as Cesium from 'cesium'
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
//getCurrentExtent,getCenter这两个方法实现参考其他文章：cesium获取场景--https://juejin.cn/post/7241492186918518821
//1、cesium初始化
const initViewer = (cesiumId:string) =>{
    viewer = new Cesium.Viewer(cesiumId,{
        ...
        //具体内容配置参考前面一篇文章：vue3+cesium项目初始化--https://juejin.cn/post/7234088398020067387
    })
}
//2、openlayers初始化
const initMap = (id:string) => {
   let layer = new TileLayer({
       source:  new XYZ({
            url: 'https://webrd03.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'
       })
   })
   map = new Map({
        layers: [layer],
        target: id,
        view: new View({
            projection: 'EPSG:4326',
            center: [116.240601, 39.827107],
            zoom: 3
        })
    })
 };

4、鹰眼地图与主地图联动

// 添加Cesium 视图监听事件                  
viewer.scene.postRender.addEventListener(sceneRenderHandler); 
const sceneRenderHandler = () => {
    //获取Cesium当前视图的范围
    let extent = getCurrentExtent(viewer)
    //获取Cesium当前视图的中心点
    let point = getCenter(viewer);
    let mapView = map.getView();
    if(extent.xmin == -180 && extent.xmax == 180 && extent.ymin == -90 && extent.ymax == 90){
        //整个地球在视域内
        mapView.animate({zoom:2},{
            center: [point?.lon,point?.lat],
            duration: 0
        })
    }else{
        // 根据当前地图范围和大小获取 分辨率
        let r = mapView.getResolutionForExtent([extent.xmin,extent.ymin,extent.xmax,extent.ymax],map.getSize());
        // 设置分辨率
        mapView.setResolution(r);
        // 设置鹰眼图中心点
        mapView.setCenter([point?.lon,point?.lat]);
    }
}

5、实现效果

项目地址：github.com/DLFouge/vue…

欢迎指正与star