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>
|