cesium控制及效果(三)：leaflet鹰眼

1、概述

使用cesium结合leaflet实现鹰眼图

2、创建地图容器

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

3、地图初始化

import * as Cesium from 'cesium'
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
//这两个方法实现参考其他文章：cesium获取场景--https://juejin.cn/post/7241492186918518821
  // getCurrentExtent,getCenter
//1、cesium初始化
const initViewer = (cesiumId:string) =>{
    viewer = new Cesium.Viewer(cesiumId,{
        ...
        //具体内容配置参考前面一篇文章：vue3+cesium项目初始化--https://juejin.cn/post/7234088398020067387
    })
}
//2、leaflet初始化
const initMap = (id:string) => {
    //1、定义图层样式
    const layer = L.tileLayer("http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}");
    //2、创建地图
    let map = L.map(id, {
        center: [39.89854, 116.3347],//中心坐标
        zoom: 3,//缩放级别
        minZoom: 3,
        maxZoom: 14,
        zoomControl: false, //缩放组件
        attributionControl: false, //去掉右下角logo
        layers: [layer],//图层
    });
};

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

// 添加Cesium 视图监听事件                  
viewer.scene.postRender.addEventListener(sceneRenderHandler); 
const sceneRenderHandler = () => {
    //获取Cesium当前视图的范围
    let extent = getCurrentExtent(viewer)
    //获取Cesium当前视图的中心点
    let point = getCenter(viewer);
    if(extent.xmin == -180 && extent.xmax == 180 && extent.ymin == -90 && extent.ymax == 90){
        //整个地球在视域内
       map.setView([point?.lat,point?.lon],0)
    }else{
        // 设置鹰眼图范围
        let i = L.latLng(extent.ymin,extent.xmin);
        let s = L.latLng(extent.ymax,extent.xmax);
        let bounds = L.latLngBounds(i,s);
        let oBounds = bounds.pad(.5);
        map.fitBounds(oBounds);
    }
}

5、实现效果

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

欢迎指正与star