cesium教程3-加载3dtile模型,并调整位置
作者:互联网
直接上示例代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>cesium示例</title> <!-- 引用cesium的js和css,天地图的扩展js --> <script src="https://cesium.com/downloads/cesiumjs/releases/1.92/Build/Cesium/Cesium.js"></script> <link rel="stylesheet" href="https://cesium.com/downloads/cesiumjs/releases/1.92/Build/Cesium/Widgets/widgets.css"/> <script src="http://api.tianditu.gov.cn/cdn/plugins/cesium/cesiumTdt.js" ></script> <style type="text/css"> html, body, #tiandituContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } </style> </head> <body onl oad="loadData()"> <div id="tiandituContainer"> </div> <script> //Cesium官网注册后的授权token,没有token不能使用cesium在线的地形服务,这里需要改成自己的token Cesium.Ion.defaultAccessToken = ""; var viewer; function loadData() { //默认会调用微软virtualearth地图 viewer = new Cesium.Viewer('tiandituContainer',{ animation:false, //是否显示动画控件 homeButton:true, //是否显示home键 geocoder:true, //是否显示地名查找控件,如果设置为true,则无法查询 baseLayerPicker:true, //是否显示图层选择控件 timeline:false, //是否显示时间线控件 fullscreenButton:true, //是否全屏显示 infoBox:true, //是否显示点击要素之后显示的信息 sceneModePicker:true, //是否显示投影方式控件 三维/二维 navigationInstructionsInitiallyVisible:false, //导航指令 navigationHelpButton:false, //是否显示帮助信息控件 selectionIndicator:false, //是否显示指示器组件 }); //隐藏cesium的logo viewer._cesiumWidget._creditContainer.style.display = "none"; //默认的Cesium会加载一个bingMap底图,这个地图网络不太好,一般要先去掉这个默认的 viewer.imageryLayers.remove(viewer.imageryLayers.get(0)); //arcgis在线影像地图 viewer.imageryLayers.addImageryProvider(new Cesium.ArcGisMapServerImageryProvider({ name:"img_arcgis", url:"https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer" })); viewer.scene.globe.depthTestAgainstTerrain = true;//地形遮挡效果开关,打开后地形会遮挡看不到的区域 viewer.scene.globe.enableLighting = true; //对大气和雾启用动态照明效果 add3DTiles("https://data.mars3d.cn/3dtiles/max-fsdzm/tileset.json",121.479394, 29.791416,8); } function add3DTiles(url,longitude, latitude, height) { var tileset = viewer.scene.primitives.add( new Cesium.Cesium3DTileset({ url:url, maximumScreenSpaceError: 2,//默认16,最大屏幕空间错误 //maximumNumberOfLoadedTiles: 1000, maximumMemoryUsage:512//默认512,内存MB的最大数量 })); tileset.readyPromise.then((tileset) => { //模型加载后可能会有便宜和高度不对,需要对模型进行调整 tileSet(tileset,longitude, latitude, height) //tileSetAll(tileset,longitude, latitude, height,0,0,0,1); viewer.zoomTo(tileset); }); } //利用translation对模型的经度、纬度、高度进行修改 function tileSet(tileset,longitude, latitude, height) { //3dtile模型的边界球体 var boundingSphere = tileset.boundingSphere; //迪卡尔空间直角坐标=>地理坐标(弧度制) var cartographic_original = Cesium.Cartographic.fromCartesian(boundingSphere.center); //设置新的经度、纬度、高度 var cartographic_offset = Cesium.Cartographic.fromDegrees(longitude, latitude, height) //地理坐标(弧度制)=>迪卡尔空间直角坐标 var Cartesian3_original = Cesium.Cartesian3.fromRadians(cartographic_original.longitude, cartographic_original.latitude, cartographic_original.height); var Cartesian3_offset = Cesium.Cartesian3.fromRadians(cartographic_offset.longitude, cartographic_offset.latitude, cartographic_offset.height); //获得地面和offset的转换 var translation = Cesium.Cartesian3.subtract(Cartesian3_offset, Cartesian3_original, new Cesium.Cartesian3()); //修改模型矩阵 tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation); } //利用transform对模型的所有参数进行修改 function tileSetAll(tileset,longitude,latitude,height,rotateX,rotateY,rotateZ,scale) { //旋转角度设置 var mx = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(rotateX)); var my = Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(rotateY)); var mz = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(rotateZ)); var rotationX = Cesium.Matrix4.fromRotationTranslation(mx); var rotationY = Cesium.Matrix4.fromRotationTranslation(my); var rotationZ = Cesium.Matrix4.fromRotationTranslation(mz); //平移 修改经纬度 var position = Cesium.Cartesian3.fromDegrees(longitude,latitude,height); var transform = Cesium.Transforms.eastNorthUpToFixedFrame(position); //旋转、平移矩阵相乘 Cesium.Matrix4.multiply(transform, rotationX, transform); Cesium.Matrix4.multiply(transform, rotationY, transform); Cesium.Matrix4.multiply(transform, rotationZ, transform); //缩放 修改缩放比例 var scale1 = Cesium.Matrix4.fromUniformScale(scale); Cesium.Matrix4.multiply(transform, scale1, transform); //赋值给tileset tileset._root.transform = transform; } </script> </body> </html>
标签:tileset,3dtile,viewer,transform,var,Cesium,cesium,height,加载 来源: https://www.cnblogs.com/tiandi/p/16589892.html