<!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 onload="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>