完整示例代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>天地图</title> <!-- 引用cesium的js和css，天地图的扩展js --> <script src="js/cesium1.97/Cesium.js"></script> <link rel="stylesheet" href="js/cesium1.97//Widgets/widgets.css"/> <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" style=""> </div> <script> var cesiumAsset='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5NjE1MDIwOC1jOGYxLTQzZWItYjNhOC1iNjZlMWM1OGYxMDIiLCJpZCI6MTAyODY5LCJpYXQiOjE2NTkwMDA3ODN9.Vy4hW4jpjbZs6ee4BcRl3-cCl-oRGn42e2_Hjbo5nas'; Cesium.Ion.defaultAccessToken = cesiumAsset; const poinArr = [{ id: '12321321', name: "颍红测试点", type: "固定枪机", state: "在线", position: { x: 111.11974175706595, y: 36.8798251193496 }, text: '1' }, { id: '43244324', name: "解放修理厂门口", type: "固定枪机", state: "在线", position: { x: 111.11837977115736, y: 36.88012118794686 }, text: '2' }, { id: '43764324', name: "新华路加油站", type: "固定枪机", state: "在线", position: { x: 111.12272473055148, y: 36.87860860195417 }, text: '3' } ] 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, //是否显示指示器组件 contextOptions: { webgl: { alpha: true, } }, }); //默认的Cesium会加载一个bingMap底图，网络不太好，一般要先去掉这个默认的 viewer.imageryLayers.remove(viewer.imageryLayers.get(0)); // 隐藏cesium ion viewer._cesiumWidget._creditContainer.style.display = "none"; //地形遮挡效果开关，打开后地形会遮挡看不到的区域 viewer.scene.globe.depthTestAgainstTerrain = true; //关闭天空盒，否则会显示天空颜色 viewer.scene.skyBox.show = false //背景透明 viewer.scene.backgroundColor = new Cesium.Color(0.0, 0.0, 0.0, 0.0); //关闭大气 viewer.scene.skyAtmosphere.show = false //抗锯齿 viewer.scene.fxaa = true; viewer.scene.postProcessStages.fxaa.enabled = true; //清除月亮太阳 viewer.scene.moon.show = false viewer.scene.sun.show = false //加载模型 addSlope("*************",30); //加载点位标记 addEntity(poinArr); //注册点击事件 leftDownAction(); } //加载广告牌和文字 function addEntity(pointArr) { let pinBuilder = new Cesium.PinBuilder() pointArr.map(res => { let poin = viewer.entities.add({ id: res.id, name: res.name, position: Cesium.Cartesian3.fromDegrees(res.position.x, res.position.y,50), label: { text: '测试点位', font: '16px sans-serif', // 字体大小 style: Cesium.LabelStyle.FILL_AND_OUTLINE, // 字体样式 fillColor: new Cesium.Color.fromCssColorString("#ffffff"), // 字体填充色 outlineWidth: 1, // 字体外圈线宽度（同样也有颜色可设置） outlineColor: new Cesium.Color.fromCssColorString("#000000"), verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 垂直位置 pixelOffset: new Cesium.Cartesian2(0, 15), // 中心位置 disableDepthTestDistance: Number.POSITIVE_INFINITY }, billboard: { image: pinBuilder.fromText(res.text, Cesium.Color.ROYALBLUE, 48).toDataURL(), verticalOrigin: Cesium.VerticalOrigin.BOTTOM, }, monitoItems: { data: res }, }) //添加线-地面0到50米高度的线 viewer.entities.add({ name: "line", // 线的name属性 polyline: { // 线 positions: [Cesium.Cartesian3.fromDegrees(res.position.x, res.position.y, 0), Cesium.Cartesian3.fromDegrees(res.position.x, res.position.y, 50)], // 由点构线 width: 1.0, // 线的宽度 material: new Cesium.PolylineGlowMaterialProperty({ color: new Cesium.Color.fromCssColorString("#ff0000"), }), // 线的材质、样式 } }); }) } //加载三维倾斜模型 function addSlope(url,height) { var tileset = viewer.scene.primitives.add( new Cesium.Cesium3DTileset({ url:url, maximumScreenSpaceError: 16,//默认16,最大屏幕空间错误 maximumNumberOfLoadedTiles: 1000, maximumMemoryUsage:1024//默认512,内存MB的最大数量 })); tileset.readyPromise.then((tileset) => { tileSet(tileset,height) //viewer.zoomTo(tileset);//视野定位到模型处 viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(Cesium.Math.toRadians(155), Cesium.Math.toRadians(-30),tileset.boundingSphere.radius * 1.3)); }); } //处理切片的高度信息 function tileSet(tileset, height) { //3dtile模型的边界球体 var boundingSphere = tileset.boundingSphere; //迪卡尔空间直角坐标=>地理坐标（弧度制） var cartographic_original = Cesium.Cartographic.fromCartesian(boundingSphere.center); //地理坐标（弧度制）=>迪卡尔空间直角坐标 var Cartesian3_original = Cesium.Cartesian3.fromRadians(cartographic_original.longitude, cartographic_original.latitude, cartographic_original.height); var Cartesian3_offset = Cesium.Cartesian3.fromRadians(cartographic_original.longitude, cartographic_original.latitude, height); //获得地面和offset的转换 var translation = Cesium.Cartesian3.subtract(Cartesian3_offset, Cartesian3_original, new Cesium.Cartesian3()); //修改模型矩阵 tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation); } //点击事件处理 function leftDownAction() { viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) { var picked = viewer.scene.pick(movement.position) if (Cesium.defined(picked) && picked.id.id) { console.log('点击标记：',picked.id._id,picked.id._name); } else { return } }, Cesium.ScreenSpaceEventType.LEFT_CLICK) } </script> </body> </html>