<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <!-- Use Chrome Frame in IE -->
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta name="description" content="A sample Vector dataset on terrain rendered with 3D Tiles.">
<meta name="cesium-sandcastle-labels" content="Showcases, 3D Tiles">
<title>3dtiles加载demo</title>
<script type="text/javascript" src="./Build/CesiumUnminified/Cesium.js"></script>
<script type="text/javascript" src="./Build/CustomCesiumSDK.js"></script>
</head>
<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
<style>
@import url(../Build/Cesium/Widgets/widgets.css);
html,
body,
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.cesium-viewer,
.cesium-viewer-cesiumWidgetContainer,
.cesium-widget {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
canvas {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
<div id="cesiumContainer" class="fullSize"></div>
<script id="cesium_sandcastle_script">
createMap();
var viewer;
var envelopeModelImageryProvider;
function createMap() {
viewer = new Cesium.Viewer('cesiumContainer', {
selectionIndicator: false,
useBrowserRecommendedResolution: true,
animation: false, //是否显示动画控件
baseLayerPicker: false, //是否显示图层选择控件
geocoder: false, //是否显示地名查找控件
timeline: false, //是否显示时间线控件
sceneModePicker: true, //是否显示投影方式控件
navigationHelpButton: false, //是否显示帮助信息控件
infoBox: false, //是否显示点击要素之后显示的信息
imageryProvider: false,
fullscreenButton: true
});
viewer.scene.globe.preloadAncestors = false;
viewer.scene.primitives.destroyPrimitives = false;
viewer.scene.globe.depthTestAgainstTerrain = true;
var imageryLayers = viewer.imageryLayers;
Cesium.viewer = viewer;
//加载天地图影像图层
var tiandituImageLayer1 = new Cesium.ImageryLayer(new Cesium.WebMapTileServiceImageryProvider({
url: "http://{s}.tianditu.gov.cn/img_c/wmts?service=wmts&request=GetTile&version=1.0.0" +
"&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
"&style=default&format=tiles&tk=55b4d4eaef95384c946e9bd1b99c5610",
layer: "tdtImg_c",
style: "default",
format: "tiles",
tileMatrixSetID: "c",
subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tilingScheme: new Cesium.GeographicTilingScheme(),
tileMatrixLabels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"],
maximumLevel: 17,
}));
viewer.imageryLayers.add(tiandituImageLayer1);
Cesium.ExperimentalFeatures.enableModelExperimental = true;
//加载倾斜模型
var tile3d = new Cesium.Cesium3DTileset({
url: 'http://127.0.0.1:5500/ware/upload/%E6%B2%A7%E5%B7%9E%E6%B8%AF%E8%A5%BF/%E6%B2%A7%E5%B7%9E%E6%B8%AF%E8%A5%BF/merge_tile.json',
});
viewer.scene.primitives.add(tile3d);
// 地图飞到模型所在位置,如果要手动设置地图位置，请关闭此方法
tile3d.readyPromise.then(function (tileset) {
viewer.flyTo(tileset);
});
return
}
</script>
</body>
</html>