131 lines
4.8 KiB
HTML
131 lines
4.8 KiB
HTML
<!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>
|