<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Include the CesiumJS JavaScript and CSS files -->
<!--Cesium js文件引入 -->
<!-- <script src="https://cesium.com/downloads/cesiumjs/releases/1.83/Build/Cesium/Cesium.js"></script>-->
<!-- <link href="https://cesium.com/downloads/cesiumjs/releases/1.83/Build/Cesium/Widgets/widgets.css" rel="stylesheet">-->
<script src="./cesium/Cesium.js"></script>
<script src="http://api.tianditu.gov.cn/cdn/plugins/cesium/cesiumTdt.js" ></script>
<link href="./cesium/widgets.css" rel="stylesheet"/>
</head>
<style>
*{
margin: 0;
padding: 0;
}
#cesiumContainer{
width: 100vw;
height: 100vh;
}
</style>
<body>
<!-- 视图显示容器 -->
<div id="cesiumContainer"></div>
<script>
var tiandituTk='e8a16137fd226a62a23cc7ba5c9c78ce';
var subdomains=['0','1','2','3','4','5','6','7'];
// 注册密钥: https://cesium.com/ion/tokens.
// 账号密钥
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkOWQ0MGYwMy0yODUwLTQ1YzktOGM4OC02MTMwY2UyZjNlMzQiLCJpZCI6MTY0NTUwLCJpYXQiOjE2OTM4OTU1Mjd9.1cC0sSzyj79LZv0ILNCcl0Mabw6hl8TNngFNFr7H8f4';
// 初始化容器 （容器：`cesiumContainer` ）
const viewer = new Cesium.Viewer('cesiumContainer', {
// terrainProvider: Cesium.createWorldTerrain()
animation:false, //动画
homeButton:true, //home键
geocoder:true, //地址编码
baseLayerPicker:false, //图层选择控件
timeline:false, //时间轴
fullscreenButton:true, //全屏显示
infoBox:true, //点击要素之后浮窗
sceneModePicker:true, //投影方式 三维/二维
navigationInstructionsInitiallyVisible:false, //导航指令
navigationHelpButton:false, //帮助信息
selectionIndicator:false, // 选择
imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
//影像底图
url: "http://t{s}.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk="+tiandituTk,
subdomains: subdomains,
layer: "tdtImgLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible",//使用谷歌的瓦片切片方式
show: true
})
});
viewer._cesiumWidget._creditContainer.style.display = "none"; // 隐藏cesium ion
viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
//影像注记
url: "http://t{s}.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk="+tiandituTk,
subdomains: subdomains,
layer: "tdtCiaLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible",
show: true
}));
// 添加资源
const buildingTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings());
// 视图缩放至加载资源位置
viewer.camera.flyTo({
//设置中心点,x,y,缩放等级
destination: Cesium.Cartesian3.fromDegrees(119.60, 39.94, 178500),
orientation: {
heading : Cesium.Math.toRadians(348.4202942851978),
pitch : Cesium.Math.toRadians(-89.74026687972041),
roll : Cesium.Math.toRadians(0)
},
complete:function callback() {
// 定位完成之后的回调函数
}
});
// 添加图标
viewer.entities.add({
id: 'id',
position: Cesium.Cartesian3.fromDegrees(119.60, 39.94),
billboard: {
image: './operation-icon.png',
height: 50,
width: 50,
}
})
const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
handler.setInputAction(function (movement) {
let pick = viewer.scene.pick(movement.position);
if (Cesium.defined(pick) && (pick.id.id)) {
const div=document.createElement("div")
div.id = pick.id.id;
div.style.position = "absolute";
div.style.width = "300px";
div.style.height = "30px";
div.style.background = "#00ffef66";
div.style.border = "1px solid #08f8a7";
div.innerText = `${pick.id.id}弹出`;
viewer.cesiumWidget.container.appendChild(div);
viewer.scene.postRender.addEventListener(() => {
const canvasHeight = viewer.scene.canvas.height;
const windowPosition = new Cesium.Cartesian2();
Cesium.SceneTransforms.wgs84ToWindowCoordinates(
viewer.scene,
Cesium.Cartesian3.fromDegrees(119.60, 39.94),
windowPosition
);
div.style.bottom = canvasHeight - windowPosition.y + 20 + "px";
const elWidth = div.offsetWidth;
div.style.left = windowPosition.x - elWidth / 2 + "px";
});
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
</script>
</body>
</html>