openlayers鹰眼图实现

客官°小女子只卖身不卖艺 2023-06-27 05:55 105阅读 0赞

**这个是Cesium三维地图结合openlayers二维地图的鹰眼图实现，代码有相关注释。**

// 创建鹰眼图
    this.map = new Map({ 
        layers: [layers_arcgis],
        target: 'map2d',
        view: new View({ 
            projection: 'EPSG:4326',
            center: [116.240601, 39.827107],
            zoom: 13
        })
    });
    // 添加Cesium 视图监听事件
    this.viewer.scene.postRender.addEventListener(this.sceneRenderHandler, this);
    
    // 监听事件所执行的方法
    sceneRenderHandler: function (e) { 
        let extend = mars3d.point.getExtent(this.viewer);  //获取Cesium当前视图的范围
        let point = mars3d.point.getCenter(this.viewer);  //获取Cesium当前视图的中心点
    
        if (extend.xmin == -180 && extend.xmax == 180
            && extend.ymax == 90 && extend.ymin == -90) {  //整个地球在视域内
            this.map.getView().setZoom(2);
            this.map.getView().animate({ 
                center: [point.x, point.y],
                duration: 0
            });
        } else { 
            // 根据当前地图范围和大小获取 分辨率
            let r = this.map.getView().getResolutionForExtent([extend.xmin, extend.ymin, extend.xmax, extend.ymax], this.map.getSize());
            // 设置分辨率
            this.map.getView().setResolution(r);
            // 设置鹰眼图中心点
            this.map.getView().setCenter(extentGetCenter([extend.xmin, extend.ymin, extend.xmax, extend.ymax]));
        }
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，105人围观）

还没有评论，来说两句吧...

相关阅读

相关 leaflet 实现鹰眼图（代码示例043）

![在这里插入图片描述][804c6d40d4d24c23bc0d621973afeef0.png_pic_center] 第043个 [点击查看专栏目录][Link 1]

男娘i/ 2024年03月31日 10:01/ 0 赞/ 182 阅读

相关 029: cesium鹰眼缩略图

![在这里插入图片描述][8e6fb03228114687897d406ccc58f3ed.png_pic_center] 第029个 [点击查看专栏目录][Link 1]

àì夳堔傛蜴生んèń/ 2024年03月25日 21:39/ 0 赞/ 134 阅读

相关 WebGis鹰眼图

WebGis鹰眼图&全屏显示鹰眼图是GIS中一个基本的功能，鹰眼图，顾名思义，在鹰眼图上可以像从空中俯视一样查看地图框中所显示的地图在整个图中的位置。直接贴代码了，

我会带着你远行/ 2023年10月09日 11:08/ 0 赞/ 131 阅读

相关 openlayers鹰眼图实现

这个是Cesium三维地图结合openlayers二维地图的鹰眼图实现，代码有相关注释。 // 创建鹰眼图 this.map = new Map({

客官°小女子只卖身不卖艺/ 2023年06月27日 05:55/ 0 赞/ 106 阅读

相关 Android鹰眼轨迹追踪

先看下实现效果： ![开启服务.png][.png] ![轨迹查询.png][.png 1] ![实时监控.png][.png 2] 鹰眼是一套轨迹管理服务

谁践踏了优雅/ 2023年06月15日 06:52/ 0 赞/ 136 阅读

相关 ArcGIS出图小技巧——比例尺、鹰眼图、表格、文本、图片

> 欢迎大家关注我的公众号，最新内容先在公众号发布。点击[这里][Link 1]查看近期文章合集。文章目录一、比例尺

雨点打透心脏的1/2处/ 2022年02月05日 12:31/ 1 赞/ 3798 阅读

相关鹰眼轨迹管理平台移植

部署下载一份源码到本地： [https://github.com/baidu-openmap-trace/web-demo-v3/][https_github.c

深碍√TFBOYSˉ_/ 2022年01月27日 12:39/ 0 赞/ 390 阅读

相关 ArcEngine中鹰眼实现

private void axMapControl1_OnMapReplaced_1(object sender, ESRI.ArcGIS.Controls.IMapC

淩亂°似流年/ 2021年09月16日 12:26/ 0 赞/ 554 阅读

相关 ArcGIS API forJavaScript实现鹰眼功能

实现代码： // 鹰眼 var overviewMapDijit = new OverviewMap({ map: map, // 必要的

本是古典何须时尚/ 2021年09月14日 03:58/ 0 赞/ 509 阅读

相关 mapbox中添加鹰眼

main.js import 'mapbox-gl/dist/mapbox-gl.css' import mapBoxGl from 'mapbox-gl'

亦凉/ 2021年08月27日 16:07/ 0 赞/ 724 阅读