Cesium实现坐标转换；目标区域放大

最新推荐文章于 2024-07-30 10:56:44 发布

2401_84097745

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量181

点赞数 3

分类专栏：程序员文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/2401_84097745/article/details/138453674

版权

程序员专栏收录该内容

252 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Cesium库中的Rectangle对象来定义区域并控制相机视图，包括flyToRectangle函数实现的平移至矩形区域以及viewRectangle的视角展示功能。

摘要由CSDN通过智能技术生成

var south = 38.0;

var east = -72.0;

var north = 42.0;

var rectangle = Cesium.Rectangle.fromDegrees(west, south, east, north);

viewer.camera.setView({

    destination: rectangle

});

// Show the rectangle.  Not required; just for show.

viewer.entities.add({

    rectangle : {

        coordinates : rectangle,

        fill : false,

        outline : true,

        outlineColor : Cesium.Color.WHITE

    }

});

}

function flyToRectangle() {

Sandcastle.declare(flyToRectangle);

//得到当前三维场景

    var scene = viewer.scene;

    //得到当前三维场景的椭球体

    var ellipsoid = scene.globe.ellipsoid;

    var entity = viewer.entities.add({

        label : {

            show : false

        }

    });

    var longitudeString = null;

    var latitudeString = null;

    var cartesian = null;

    // 定义当前场景的画布元素的事件处理

    var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);

    //设置鼠标移动事件的处理函数，这里负责监听x,y坐标值变化

    handler.setInputAction(function(movement) {

        //通过指定的椭球或者地图对应的坐标系，将鼠标的二维坐标转换为对应椭球体三维坐标

        cartesian = viewer.camera.pickEllipsoid(movement.endPosition, ellipsoid);

        if (cartesian) {

            //将笛卡尔坐标转换为地理坐标

            var cartographic = ellipsoid.cartesianToCartographic(cartesian);

            //将弧度转为度的十进制度表示

            longitudeString = Cesium.Math.toDegrees(cartographic.longitude);

            latitudeString = Cesium.Math.toDegrees(cartographic.latitude);

            entity.position = cartesian;

            entity.label.show = true;

            entity.label.text = '(' + longitudeString + ', ' + latitudeString + ')' ;

        }else {

            entity.label.show = false;

        }

    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

var west = -90.0;

var south = 40.1;

var east = -87.0;

var north = 40.2;

var rectangle = Cesium.Rectangle.fromDegrees(west, south, east, north);

viewer.camera.flyTo({

    destination : rectangle

});

// Show the rectangle.  Not required; just for show.

viewer.entities.add({

    rectangle : {

        coordinates : rectangle,

        fill : false,

        outline : true,

        outlineColor : Cesium.Color.WHITE

    }

});

}

var viewChanged = document.getElementById(‘viewChanged’);

var removeStart;

var removeEnd;

Sandcastle.addToolbarMenu([{

text : 'Fly to Rectangle',

onselect : function() {

    flyToRectangle();

    Sandcastle.highlight(flyToRectangle);

}

}, {

text : 'View a Rectangle',

onselect : function() {

    viewRectangle();

    Sandcastle.highlight(viewRectangle);

}

}

]);

scene.morphComplete.addEventListener(function() {

Sandcastle.reset();

});


#  最后

**自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。**

**深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。**

**因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**

![img](https://img-blog.csdnimg.cn/img_convert/4bacd518bd38c4aabd7257208c5b4acc.jpeg)

![](https://img-blog.csdnimg.cn/img_convert/0e035e432bd48056a4a46242497becba.png)

![](https://img-blog.csdnimg.cn/img_convert/27de8aca599530df9dfadff46dc33edd.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

[**如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！**](https://bbs.csdn.net/topics/618191877)

**由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**
的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

[**如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！**](https://bbs.csdn.net/topics/618191877)

**由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**