cesium获取经纬度

实现效果

必须要用的插件：widgets.css Cesium.js 在官网可以下载。

css设置：

<style>
           html, body, #cesiumContainer {
               width: 100%;
               height: 100%;
               margin: 0;
               padding: 0;
           }

       </style>

 <body><div id="cesiumContainer"></div><script>//定义初始化变量var viewer, scene; //初始地图参数var tileset; //调整模型所需tileset对象// 初始化三维地球viewer = new Cesium.Viewer("cesiumContainer", {infoBox: false,// 地图默认点击弹窗selectionIndicator: false,// 地图默认点击元素绿色框框// 导航栏animation: false,baseLayerPicker: false,geocoder: false,timeline: false,//时间线sceneModePicker: false,//场景模式选择器navigationHelpButton: false,//导航帮助按钮fullscreenButton: false,//全屏按钮homeButton: false, //主页按钮orderIndependentTranslucency: false,contextOptions: { webgl: { alpha: true, } }});// 获取场景scene = viewer.scene;//加载模型数据，并添加到三维地球场景里面var url="./congreng_20200926090152_fbx_3dtiles/congreng/tileset.json"//   file:///F:/GIS3dmax/GIShomework/school/congreng_20200926090152_fbx_3dtiles/congreng/tileset.jsontileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url: url,//数据路径maximumScreenSpaceError: 2,// 最大的屏幕空间误差maximumNumberOfLoadedTiles: 1000 // 最大加载瓦片个数}));//加载模型完成执行tileset.readyPromise.then(function(tileset) {changeHeight(0);viewer.zoomTo(tileset);}).otherwise(function(error) {throw (error);});//直接调用函数，调整高度,height表示物体离地面的高度function changeHeight(height) {height = Number(height);if (isNaN(height)) {return;}var cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center);var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height);var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude,height);var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);}                   //监听点击事件var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);handler.setInputAction(function(movement) {// 笛卡尔坐标var cartesian = viewer.scene.pickPosition(movement.position);console.log("笛卡尔坐标:"+cartesian);// 经纬度坐标var ellipsoid = scene.globe.ellipsoid;var xyz = new Cesium.Cartesian3(cartesian.x, cartesian.y, cartesian.z);var wgs84 = ellipsoid.cartesianToCartographic(xyz);console.log('lon=' + Cesium.Math.toDegrees(wgs84.longitude) + ',lat=' +     Cesium.Math.toDegrees(wgs84.latitude) + ',height=' + wgs84.height);// 视角角度console.log("viewer.camera.heading="+viewer.camera.heading);console.log("viewer.camera.pitch="+viewer.camera.pitch);console.log("viewer.camera.roll="+viewer.camera.roll);console.log("viewer.camera.position="+viewer.camera.position);// 笛卡尔坐标转换经纬度坐标var ellipsoid1 = scene.globe.ellipsoid;var xyz1 = new Cesium.Cartesian3(viewer.camera.position.x, viewer.camera.position.y, viewer.camera.position.z);var wgs841 = ellipsoid1.cartesianToCartographic(xyz1);console.log('lon=' + Cesium.Math.toDegrees(wgs841.longitude) + ',lat=' + Cesium.Math.toDegrees(wgs841.latitude) + ',height=' + wgs841.height);}, Cesium.ScreenSpaceEventType.LEFT_CLICK);var redTube = viewer.entities.add({name : 'Red tube with rounded corners',polylineVolume : {positions : Cesium.Cartesian3.fromDegreesArray([-85.0, 32.0,-85.0, 36.0,-89.0, 36.0]),//返回给定的经度和纬度值数组（以度为单位），该数组由Cartesian3位置组成。shape : computeCircle(6000.0),//颜色回调  ColorMaterialProperty颜色材质   //CallbackProperty 其值由回调函数延迟计算。material : new Cesium.ColorMaterialProperty(new Cesium.CallbackProperty(function() { return Cesium.Color.fromRandom({ //使用提供的选项创建随机颜色。对于可复制的随机颜色minimumRed : 0.75,minimumGreen : 0.75,minimumBlue : 0.75,alpha : 1.0});}, false))}});function computeCircle(radius) {var positions = [];for (var i = 0; i < 360; i++) {var radians = Cesium.Math.toRadians(i);positions.push(new Cesium.Cartesian2(radius * Math.cos(radians), radius * Math.sin(radians)));}return positions;}//添加广告牌//========================鼠标点击获取经纬度var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);//todo：在显示地形情况下点击创建点handler.setInputAction(function (event) {if (!Cesium.Entity.supportsPolylinesOnTerrain(viewer.scene)) {console.log('当前浏览器不支持地形图');return;}var earthPosition = viewer.scene.pickPosition(event.position); //获取到地形图上面的坐标if (Cesium.defined(earthPosition)) {createPoint(earthPosition); //调用创建点的方法}}, Cesium.ScreenSpaceEventType.LEFT_CLICK);//todo：在椭球下点击创建点handler.setInputAction(function (event) {var earthPosition = viewer.camera.pickEllipsoid(event.position, viewer.scene.globe.ellipsoid); //返回在椭球上面的点的坐标if (Cesium.defined(earthPosition)) {createPoint(earthPosition); //在点击位置添加一个点}}, Cesium.ScreenSpaceEventType.LEFT_CLICK);//todo：拾取模型表面的位置handler.setInputAction(function (evt) {var scene = viewer.scene;var pickedObject = scene.pick(evt.position); //判断是否拾取到模型if (scene.pickPositionSupported && Cesium.defined(pickedObject)) {var cartesian = viewer.scene.pickPosition(evt.position);if (Cesium.defined(cartesian)) {var cartographic = Cesium.Cartographic.fromCartesian(cartesian); //根据笛卡尔坐标获取到弧度var lng = Cesium.Math.toDegrees(cartographic.longitude); //根据弧度获取到经度var lat = Cesium.Math.toDegrees(cartographic.latitude); //根据弧度获取到纬度var height = cartographic.height;//模型高度annotate(cartesian, lng, lat, height);}}}, Cesium.ScreenSpaceEventType.LEFT_CLICK);var annotations = viewer.scene.primitives.add(new Cesium.LabelCollection());//信息提示框function annotate(cartesian, lng, lat, height) {createPoint(cartesian);annotations.add({position: cartesian,text:'纬度: ' + lng.toFixed(5) + '\u00B0' +'\经度: ' + lat.toFixed(5) + '\u00B0' +"\高度: " + height.toFixed(2) + "m",showBackground: true,font: '14px monospace',horizontalOrigin: Cesium.HorizontalOrigin.LEFT,verticalOrigin: Cesium.VerticalOrigin.BOTTOM,disableDepthTestDistance: Number.POSITIVE_INFINITY});}//添加点function createPoint(worldPosition) {var point = viewer.entities.add({position: worldPosition,point: {color: Cesium.Color.WHITE,pixelSize: 5}});return point;}      </script></body>

cesium获取经纬度相关推荐

cesium 获取当前经纬度和视角还有当前level层级
cesium 获取当前经纬度和视角还有当前level层级 // 跟随鼠标获取经纬度和视角高度var longitude_show=document.getElementById('longitude_ ...
Cesium 根据经纬度获取地形高程
标题 Cesium 根据经纬度获取地形高程 var positions = Cesium.Cartographic.fromDegrees(lon, lat); Cesium.when(new Ces ...
Android笔记之使用LocationManager获取经纬度
LocationManager.getLastKnownLocation(String provider)有可能返回null,概率还挺高 findViewById(R.id.llMain).setOn ...
php根据位置获取经纬度(百度地图)
注意:申请的ak填写服务器端 1.根据地址获取经纬度 /**根据位置获取经纬度* @param $area* @return mixed*/protected function getLonLLat( ...
HTML自动获取地址,网页中自动获取经纬度值并在地图中显示当前位置实例代码...
下面的HTML代码就是实例完整代码,如果你需要本项目完整实例代码,下载链接在文章最底部网页中自动获取经纬度值并在地图中显示当前位置,可在地图中进行拖动选择当前位置并输出经纬度,这是项目实例代码,可参 ...
腾讯地图api如何根据地址获取经纬度
腾讯地图api如何根据地址获取经纬度 /** * 根据地址得到经纬度 //GET请求 */ @GetMapping("tencentGetLatLngBy/{a ...
php根据地址获取经纬度
使用得是高德开放平台,网址为:https://lbs.amap.com/ 第一步,申请"Web服务API"密钥(Key): 第二步,拼接HTTP请求URL,第一步申请的Key需作为 ...
全球地区资料json 含中英文经纬度_爬虫实战（三）使用百度API获取经纬度/地址...
点击上方"蓝字"关注我们百度API获取经纬度/地址Mar 28, 2020 本期介绍给定地址/经纬度,使用百度API来获取经纬度/地址. 本文约3k字,预计阅读18分钟. 本次是第 ...
基于vue 2.X和高德地图的vue-amap组件获取经纬度
今天我就讲了一下怎么通过vue和高德地图开发的vue-amap组件来获取经纬度. 这是vue-amap的官网文档:https://elemefe.github.io/vue-amap/#/ 这是我的码 ...
reactnative 获取定位_【React Native】定位获取经纬度，当前城市等地址信息
最近做React Native时,需要用到城市定位的功能,React Native中文网的定位部分中也提供了相应的方法.主要用到的方法有: 这里只需要获取到经纬度,城市等信息,持续监听的函数就不需要了 ...

cesium获取经纬度

cesium获取经纬度相关推荐

最新文章

热门文章