cesium 实现2D模式下鹰眼图

我们先初始化地图(分为大地图和小地图),小地图作为鹰眼图来使用

// 初始化大地图
let viewer = new Cesium.Viewer('cesiumContainer', {
    //需要进行可视化的数据源的集合
    animation: false, //是否显示动画控件
    selectionIndicator: false,
    shouldAnimate: true,
    homeButton: false, //是否显示Home按钮
    fullscreenButton: false, //是否显示全屏按钮
    baseLayerPicker: false, //是否显示图层选择控件
    geocoder: false, //是否显示地名查找控件
    timeline: false, //是否显示时间线控件
    sceneModePicker: true, //是否显示投影方式控件
    navigationHelpButton: false, //是否显示帮助信息控件
    infoBox: false, //是否显示点击要素之后显示的信息
    requestRenderMode: true, //启用请求渲染模式
    scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存
    sceneMode: 1, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
    fullscreenElement: document.body, //全屏时渲染的HTML元素 暂时没发现用处
    imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
        url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
    })
});
// 初始化小地图
let miniViewer = new Cesium.Viewer('miniMap', {
    //需要进行可视化的数据源的集合
    animation: false, //是否显示动画控件
    shouldAnimate: true,
    homeButton: false, //是否显示Home按钮
    fullscreenButton: false, //是否显示全屏按钮
    baseLayerPicker: false, //是否显示图层选择控件
    geocoder: false, //是否显示地名查找控件
    timeline: false, //是否显示时间线控件
    sceneModePicker: false, //是否显示投影方式控件
    navigationHelpButton: false, //是否显示帮助信息控件
    infoBox: false, //是否显示点击要素之后显示的信息
    requestRenderMode: true, //启用请求渲染模式
    scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存
    sceneMode: 1, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
    fullscreenElement: document.body, //全屏时渲染的HTML元素 暂时没发现用处
    imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
        url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
    })
})

后面的思路就是如何实现大小地图的视图同步;那我的实现思路就是获取地图的中心点来完成地图的移动同步效果,由于cesium没有层级的概念,所以获取当前的高度来完成地图的缩放同步效果;当然你也可以实现高度到层级的转化方法;

// 2D视图同步
function getCenterPosition() {
    // 获取当前地图中心的经纬度  
    let centerResult = viewer.camera.pickEllipsoid(
        new Cesium.Cartesian2(
            viewer.canvas.clientWidth / 2,
            viewer.canvas.clientHeight / 2,
        ),
    )
    if (!centerResult) return
    let curPosition = Cesium.Ellipsoid.WGS84.cartesianToCartographic(centerResult);
    let curLongitude = (curPosition.longitude * 180) / Math.PI;
    let curLatitude = (curPosition.latitude * 180) / Math.PI;
    // 获取高度
    var height = viewer.camera.positionCartographic.height;
    miniViewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(curLongitude, curLatitude, height),
        duration: 0.0,
    })
}

上面代码获取需要的中心经纬度和高度值,也同步设置了小地图视图;那我们只要在施加一个地图监听方法

viewer.scene.preUpdate.addEventListener(getCenterPosition);

当然上面我们只是添加了大地图的监听,实现小地图对大地图的视图同步。同理在对小地图添加监听,实现大地图对小地图的视图同步。

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Cesium是一个基于Web的地理数据可视化引擎,可以实现类似百度地2D和3D小组件的功能。 首先,我们可以使用Cesium通过加载地瓦片进行2D的展示。地瓦片可以由百度地提供的地切片服务获得。使用Cesium提供的ImageryLayer可以将地瓦片部署到地上,并可以设置加载时的缩放级别、地范围等参数。通过这种方式,我们可以在Cesium实现类似百度地2D显示。 其次,Cesium提供了强大的3D地理数据可视化功能。我们可以将百度地提供的地理数据转换为Cesium支持的数据格式,如GeoJSON或KML等。然后,使用Cesium的Entity和Primitive等功能可以将这些数据呈现在3D场景中。例如,我们可以将建筑物、道路等地理要素以3D模型或纹理贴的形式展示出来,实现类似于百度地的3D视觉效果。同时,Cesium还支持添加层叠加效果,可以将地形、影像等各种维度的地理数据叠加在一起展示,提供更丰富的地理信息。 除此之外,Cesium还提供了丰富的交互功能,如平移、缩放、旋转、视角切换等。这些功能可以让用户自由浏览地,获取感兴趣的地理信息。同时,我们还可以通过添加标注、信息窗口等方式实现地点的查询和展示功能,使用户能够通过点击地获取具体的地点信息。 综上所述,Cesium作为一个强大的地理可视化引擎,可以通过加载地瓦片和支持的地理数据格式,实现类似于百度地2D和3D小组件的功能。同时,通过丰富的交互和数据展示方式,能够提供更好的用户体验和地理信息的展示效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值