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