133 lines
4.5 KiB
HTML
133 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<script src="./Build/Cesium/Cesium.js"></script>
|
|
<link href="./Build/Cesium/Widgets/widgets.css" rel="stylesheet" />
|
|
<style>
|
|
@import url(./Build/Cesium/Widgets/widgets.css);
|
|
html,
|
|
body,
|
|
#cesiumContainer {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
<!-- <script src="https://cesium.com/downloads/cesiumjs/releases/1.68/Build/Cesium/Cesium.js"></script> -->
|
|
<!-- <link href="https://cesium.com/downloads/cesiumjs/releases/1.68/Build/Cesium/Widgets/widgets.css" rel="stylesheet"> -->
|
|
</head>
|
|
<body>
|
|
<div id="cesiumContainer"></div>
|
|
<script>
|
|
// Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZjRjNTZkNC01NDYxLTRhMjQtOGEwZC1kZjA3YzQ5YTJlZDkiLCJpZCI6MjYwODQsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODcxOTMwODN9.prGsSKyAW_9Ow5zHYPhbm3LsQL-ApQw5-5PNJkDaHi8';
|
|
Cesium.Ion.defaultAccessToken =
|
|
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZjRjNTZkNC01NDYxLTRhMjQtOGEwZC1kZjA3YzQ5YTJlZDkiLCJpZCI6MjYwODQsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODcxOTMwODN9.prGsSKyAW_9Ow5zHYPhbm3LsQL-ApQw5-5PNJkDaHi8";
|
|
var viewer = new Cesium.Viewer("cesiumContainer", {
|
|
terrainProvider: Cesium.createWorldTerrain(),
|
|
});
|
|
|
|
var layerMap = {};
|
|
let models = [
|
|
{
|
|
name: "朱店朱楼",
|
|
url: "http://localhost:8078/3dtiles/zhudian/tileset.json",
|
|
},
|
|
{
|
|
name: "魏店邵楼",
|
|
url: "http://localhost:8078/3dtiles/weidian/tileset.json",
|
|
},
|
|
{
|
|
name: "chendazhuangzhulouxiangdian",
|
|
url: "http://localhost:8078/3dtiles/chendazhuangzhulouxiangdian/tileset.json",
|
|
},
|
|
{
|
|
name: "liudamiao",
|
|
url: "http://localhost:8078/3dtiles/liudamiao/tileset.json",
|
|
},
|
|
{
|
|
name: "luloulilouchendazhuang",
|
|
url: "http://localhost:8078/3dtiles/luloulilouchendazhuang/tileset.json",
|
|
},
|
|
{
|
|
name: "xulou",
|
|
url: "http://localhost:8078/3dtiles/xulou/tileset.json",
|
|
},
|
|
{
|
|
name: "zhangzhaicun",
|
|
url: "http://localhost:8078/3dtiles/zhangzhaicun/tileset.json",
|
|
},
|
|
];
|
|
models.forEach((item) => {
|
|
let tile = loadTileset(item.url);
|
|
layerMap[item.name] = tile;
|
|
});
|
|
function loadTileset(tilesetUrl) {
|
|
let vm = this;
|
|
let tileset = new Cesium.Cesium3DTileset({
|
|
url: tilesetUrl,
|
|
maximumScreenSpaceError: 100,
|
|
maximumMemoryUsage: 1024,
|
|
// dynamicScreenSpaceError: true,
|
|
// dynamicScreenSpaceErrorDensity: 0.00278,
|
|
// dynamicScreenSpaceErrorFactor: 4.0,
|
|
// dynamicScreenSpaceErrorHeightFalloff: 0.25,
|
|
});
|
|
viewer.scene.primitives.add(tileset);
|
|
// viewer.zoomTo(tileset);
|
|
// tileset.readyPromise.then(function (tileset_) {
|
|
// vm.setTilesetHeightAndOffset(tileset_, -45);
|
|
// });
|
|
return tileset;
|
|
}
|
|
function setTilesetHeightAndOffset(tileset, height, x, y) {
|
|
x = x ? x : 0;
|
|
y = y ? y : 0;
|
|
let center;
|
|
if (tileset.boundingSphere) {
|
|
// 3dtiles
|
|
center = tileset.boundingSphere.center;
|
|
} else if (
|
|
tileset._boundingSpheres &&
|
|
tileset._boundingSpheres.length > 0
|
|
) {
|
|
// Primitive
|
|
center = tileset._boundingSpheres[0].center;
|
|
}
|
|
const cartographic = Cesium.Cartographic.fromCartesian(center);
|
|
const surface = Cesium.Cartesian3.fromRadians(
|
|
cartographic.longitude,
|
|
cartographic.latitude,
|
|
0.0
|
|
);
|
|
const offset = Cesium.Cartesian3.fromRadians(
|
|
cartographic.longitude + x,
|
|
cartographic.latitude + y,
|
|
height
|
|
);
|
|
const translation = Cesium.Cartesian3.subtract(
|
|
offset,
|
|
surface,
|
|
new Cesium.Cartesian3()
|
|
);
|
|
const modelMaxtrix = Cesium.Matrix4.fromTranslation(translation);
|
|
tileset.modelMatrix = modelMaxtrix;
|
|
}
|
|
viewer.camera.setView({
|
|
destination: new Cesium.Cartesian3(
|
|
-2271166.6153620477,
|
|
4895271.132853246,
|
|
3392415.511149057
|
|
),
|
|
orientation: {
|
|
heading: 6.283185307179586,
|
|
pitch: -0.5007510959829942,
|
|
roll: 6.283185307179586,
|
|
},
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|