源代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>天地图</title>
<!-- 引用cesium的js和css，天地图的扩展js -->
<!-- <script src="https://cesium.com/downloads/cesiumjs/releases/1.92/Build/Cesium/Cesium.js"></script>
<script src="http://api.tianditu.gov.cn/cdn/plugins/cesium/cesiumTdt.js" ></script>
<link rel="stylesheet" href="https://cesium.com/downloads/cesiumjs/releases/1.92/Build/Cesium/Widgets/widgets.css"/> -->
<script src="js/cesium1.97/Cesium.js"></script>
<script src="js/cesiumTdt.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 onl oad="loadData()">
<div id="tiandituContainer">
</div>
<script>
// 服务负载子域
var subdomains=['0','1','2','3','4','5','6','7'];
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 ion
viewer._cesiumWidget._creditContainer.style.display = "none";
add3DTiles("http://211.143.122.110:18062/fish/01911456/tileset.json",120.131172,30.471307,0);
// 将三维球定位到中国
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(120.131372,30.471317, 100),
orientation: {
heading : Cesium.Math.toRadians(250.4202942851978),
pitch : Cesium.Math.toRadians(-78.74026687972041),
roll : Cesium.Math.toRadians(0)
},
complete:function callback() {
// 定位完成之后的回调函数
}
});
mapPickEvent();
}
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) => {
tileSetAll(tileset,longitude, latitude, height,0,0,108,1);
viewer.zoomTo(tileset);
});
}
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;
}
function mapPickEvent()
{
// 用html的div实现，在鼠标悬停时显示要素名称
const nameOverlay = document.createElement("div");
viewer.container.appendChild(nameOverlay);
nameOverlay.style.display = "none";
nameOverlay.style.position = "absolute";
nameOverlay.style.bottom = "0";
nameOverlay.style.left = "0";
nameOverlay.style["pointer-events"] = "none";
nameOverlay.style.padding = "4px";
nameOverlay.style.backgroundColor = "black";
nameOverlay.style.color = "white";
// 关于当前选择要素的信息
const selected = {
feature: undefined,
originalColor: new Cesium.Color(),
};
//实体对象，将用来保当前选择要素的信息
const selectedEntity = new Cesium.Entity();
// 左键点击的处理程序，？？？
const clickHandler = viewer.screenSpaceEventHandler.getInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
// Silhouette，如果支持轮廓，悬浮显示蓝色，点击显示绿色
if (Cesium.PostProcessStageLibrary.isSilhouetteSupported(viewer.scene)) {
const silhouetteBlue = Cesium.PostProcessStageLibrary.createEdgeDetectionStage();
silhouetteBlue.uniforms.color = Cesium.Color.BLUE;
silhouetteBlue.uniforms.length = 0.01;
silhouetteBlue.selected = [];
const silhouetteGreen = Cesium.PostProcessStageLibrary.createEdgeDetectionStage();
silhouetteGreen.uniforms.color = Cesium.Color.LIME;
silhouetteGreen.uniforms.length = 0.01;
silhouetteGreen.selected = [];
// 将2个轮廓绘制添加到viewer
viewer.scene.postProcessStages.add(
Cesium.PostProcessStageLibrary.createSilhouetteStage([
silhouetteBlue,
silhouetteGreen,
])
);
// 悬浮要素事件，轮廓显示蓝色Blue
viewer.screenSpaceEventHandler.setInputAction(function onm ouseMove(movement) {
silhouetteBlue.selected = [];
// pick一个新要素
const pickedFeature = viewer.scene.pick(movement.endPosition);
//如果选择的要素没有定义，则返回空
if (!Cesium.defined(pickedFeature)) {
nameOverlay.style.display = "none";
return;
}
// pick要素之后，显示内容
nameOverlay.style.display = "block";
nameOverlay.style.bottom = `${viewer.canvas.clientHeight - movement.endPosition.y}px`;
nameOverlay.style.left = `${movement.endPosition.x}px`;
const name = pickedFeature.getProperty("name");
nameOverlay.textContent = name;
// 高亮要素，如果没有被选择
if (pickedFeature !== selected.feature) {
silhouetteBlue.selected = [pickedFeature];
}
},Cesium.ScreenSpaceEventType.MOUSE_MOVE);
// 鼠标点击事件，轮廓显示绿色Green，弹框显示详细信息
viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
silhouetteGreen.selected = [];
// pick要素
const pickedFeature = viewer.scene.pick(movement.position);
//如果选择的要素没有定义，就返回空
if (!Cesium.defined(pickedFeature)) {
//clickHandler(movement);
return;
}
// 如果选择要素不是选中内容，就返回
if (silhouetteGreen.selected[0] === pickedFeature) {
return;
}
// 保存选定要素的原始颜色
const highlightedFeature = silhouetteBlue.selected[0];
if (pickedFeature === highlightedFeature) {
silhouetteBlue.selected = [];
}
// 高亮最新的选择要素
silhouetteGreen.selected = [pickedFeature];
// 设置要素弹框描述信息
const featureName = pickedFeature.getProperty("id");
selectedEntity.name = featureName;
selectedEntity.description =
`${'<table class="cesium-infoBox-defaultTable"><tbody>'+
"<tr><th>ID</th><td>"}${pickedFeature.getProperty("id")}</td></tr>` +
`<tr><th>NAME</th><td>${pickedFeature.getProperty("name")}</td></tr>` +
`</tbody></table>`;
viewer.selectedEntity = selectedEntity;//选择实体添加到视图
},Cesium.ScreenSpaceEventType.LEFT_CLICK);
} else {
// 如果轮廓不支持，则什么也不做
}
}
</script>
</body>
</html>
最后附上官方示例：
标签：nameOverlay,教程,示例,viewer,style,var,Cesium,pickedFeature,cesium From： https://www.cnblogs.com/tiandi/p/16715318.html