当前位置:网站首页 > 大数据架构 > 正文

Cesium选择地图范围【 绘制矩形 坐标转换 局部放大】

Cesium绘制矩形 

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

var activeShapePoints = []; var activeShape; var floatingPoint; //查看器 var viewer = new Cesium.Viewer('cesiumContainer', { selectionIndicator: false, infoBox: false, // 注释时相当于使用默认地形,解开注释相当于使用全球地形 terrainProvider: Cesium.createWorldTerrain() }); var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas); //双击鼠标左键清除默认事件 viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK); //绘制图形 function drawShape(positionData) { var shape; //当positionData为数组时绘制最终图,如果为function则绘制动态图 var arr = typeof positionData.getValue === 'function' ? positionData.getValue(0) : positionData; shape = viewer.entities.add({ name: 'Blue translucent, rotated, and extruded ellipse with outline', rectangle : { coordinates : new Cesium.CallbackProperty(function () { var obj=Cesium.Rectangle.fromCartesianArray(arr); //if(obj.west==obj.east){ obj.east+=0.000001}; //if(obj.south==obj.north){obj.north+=0.000001}; return obj; }, false), material : Cesium.Color.RED.withAlpha(0.5) } }); return shape; } var we=[]; var ns=[]; var east; var west; var south; var north; //鼠标左键 handler.setInputAction(function (event) { // 我们在这里使用“viewer.scene.pickPosition”而不是“viewer.camera.pick椭球体” // 我们在地形上移动时得到了正确的点。 //var earthPosition = viewer.scene.pickPosition(event.position);//三维绘制 var earthPosition = viewer.camera.pickEllipsoid(event.position, viewer.scene.globe.ellipsoid); //返回在椭球上面的点的坐标 2维绘制 // `如果我们的鼠标不在地球上,地球位置将是不确定的 if (Cesium.defined(earthPosition)) { if (activeShapePoints.length === 0) { activeShapePoints.push(earthPosition); var dynamicPositions = new Cesium.CallbackProperty(function () { return activeShapePoints; }, false); activeShape = drawShape(dynamicPositions);//绘制动态图 } activeShapePoints.push(earthPosition); console.log(earthPosition,"笛卡尔"); //将笛卡尔坐标转换为地理坐标 var cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(earthPosition); //将弧度转为度的十进制度表示 var longitudeString = Cesium.Math.toDegrees(cartographic.longitude); var latitudeString = Cesium.Math.toDegrees(cartographic.latitude); we.push(longitudeString); ns.push(latitudeString); //获取相机高度 var height = Math.ceil(viewer.camera.positionCartographic.height); console.log( '(' + longitudeString + ', ' + latitudeString + "," + height + ')弧度' ); ns.sort(function (a, b) { return a-b; }); we.sort(function (a, b) { return a-b; }); east =we[we.length - 1] ; west =we[0] ; south = ns[0]; north = ns[ns.length - 1]; console.log(we,east,west);console.log(ns,south,north); } }, Cesium.ScreenSpaceEventType.LEFT_CLICK); //鼠标移动 handler.setInputAction(function (event) { if (Cesium.defined(floatingPoint)) { var newPosition = viewer.scene.pickPosition(event.endPosition); if (Cesium.defined(newPosition)) { floatingPoint.position.setValue(newPosition); activeShapePoints.pop(); activeShapePoints.push(newPosition); } } }, Cesium.ScreenSpaceEventType.MOUSE_MOVE); // 重新绘制形状,使其不是动态的,然后删除动态形状 function terminateShape() { activeShapePoints.pop();//去除最后一个动态点 if(activeShapePoints.length){ drawShape(activeShapePoints);//绘制最终图 we=[]; ns=[]; var rectangle = Cesium.Rectangle.fromDegrees(west, south, east, north); viewer.camera.flyTo({ destination : rectangle }); } //viewer.entities.remove(floatingPoint);//去除动态点图形(当前鼠标点) //viewer.entities.remove(activeShape);//去除动态图形 viewer.entities.removeAll(); floatingPoint = undefined; activeShape = undefined; activeShapePoints = []; } handler.setInputAction(function (event) { terminateShape(); }, Cesium.ScreenSpaceEventType.RIGHT_CLICK); // Zoom in to an area with mountains viewer.camera.lookAt(Cesium.Cartesian3.fromDegrees(-122.2058, 46.1955, 1000.0), new Cesium.Cartesian3(5000.0, 5000.0, 5000.0)); viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);

到此这篇Cesium选择地图范围【 绘制矩形 坐标转换 局部放大】的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章,希望大家都能在编程的领域有一番成就!

版权声明


相关文章:

  • NoSQL数据库(五)021-Egg+Redis+MongoDb实现登录流程——项目介绍、项目架构分析、cookie和session维持登录的原理2024-11-28 18:09:10
  • 设置es的最大查询长度2024-11-28 18:09:10
  • 推荐强大的开源媒体播放器:MPC-BE2024-11-28 18:09:10
  • 探秘Fake SMS:一款强大的模拟短信工具2024-11-28 18:09:10
  • 城堡幻想曲圣魔大战3(Castle Fantisia)新艾伦希亚战记(即重做版) 新增剧情简介2024-11-28 18:09:10
  • Cesium实现坐标转换;目标区域放大2024-11-28 18:09:10
  • Cesium资料大全2024-11-28 18:09:10
  • 泰拉瑞亚时间指令代码大全(泰拉瑞亚指令代码大全手游)2024-11-28 18:09:10
  • 时钟代码(时钟代码大全)2024-11-28 18:09:10
  • 工具类图书名称(工具类图书名称大全)2024-11-28 18:09:10
  • 全屏图片