81 lines
2.9 KiB
HTML
81 lines
2.9 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";
|
||
|
||
var viewer = new Cesium.Viewer("cesiumContainer", {
|
||
scene3DOnly: true,
|
||
selectionIndicator: false,
|
||
baseLayerPicker: false,
|
||
// imageryProvider: esriImagery,
|
||
});
|
||
//清除影像图层集合中的图层
|
||
viewer.imageryLayers.removeAll();
|
||
|
||
// 添加 ArcGIS 影像地图服务
|
||
const esriImagery = new Cesium.ArcGisMapServerImageryProvider({
|
||
url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
|
||
// url: "http://server.arcgisonline.com/arcgis/rest/services/Specialty/DeLorme_World_Base_Map/MapServer",
|
||
});
|
||
viewer.imageryLayers.addImageryProvider(esriImagery);
|
||
|
||
// viewer.scene.primitives.add(Cesium.createOsmBuildings());
|
||
/**
|
||
* createOsmBuildings(options) → Cesium3DTileset
|
||
* Creates a Cesium3DTileset instance for the Cesium OSM Buildings tileset.
|
||
* options:
|
||
* - defaultColor: 设置默认颜色，默认为COlor.WHITE
|
||
* - style: Cesium3DTileStyle实例，可进行条件渲染
|
||
* - enableShowOutline: 是否能渲染建筑轮廓，默认为true
|
||
* - showOutline: 是否渲染建筑轮廓，默认为true
|
||
*/
|
||
viewer.scene.primitives.add(Cesium.createOsmBuildings({
|
||
style: new Cesium.Cesium3DTileStyle({
|
||
color: {
|
||
conditions: [
|
||
["${feature['building']} === 'hospital'", "color('#0000FF')"],
|
||
["${feature['building']} === 'school'", "color('#00FF00')"],
|
||
[true, "color('#ffffff')"]
|
||
]
|
||
}
|
||
})
|
||
}));
|
||
|
||
viewer.camera.setView({
|
||
destination: new Cesium.Cartesian3(
|
||
-17496366.690809526,
|
||
24190921.159874767,
|
||
15328247.514523579
|
||
),
|
||
orientation: {
|
||
heading: 6.221014343645461,
|
||
pitch: -1.5703113877434678,
|
||
roll: 0,
|
||
},
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|