275 lines
12 KiB
HTML
275 lines
12 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<!-- Use correct character set. -->
|
|||
|
|
<meta charset="utf-8" />
|
|||
|
|
<!-- Tell IE to use the latest, best version. -->
|
|||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|||
|
|
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
|
|||
|
|
<meta
|
|||
|
|
name="viewport"
|
|||
|
|
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
|
|||
|
|
/>
|
|||
|
|
<title>Learning Cesium!</title>
|
|||
|
|
<script src="./Build/Cesium/Cesium.js"></script>
|
|||
|
|
<script src="./js/utils/EllipsoidFadeMaterialProperty.js"></script>
|
|||
|
|
<style>
|
|||
|
|
@import url(./Build/Cesium/Widgets/widgets.css);
|
|||
|
|
html,
|
|||
|
|
body,
|
|||
|
|
#cesiumContainer {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div id="cesiumContainer"></div>
|
|||
|
|
<script>
|
|||
|
|
Cesium.Ion.defaultAccessToken =
|
|||
|
|
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZjRjNTZkNC01NDYxLTRhMjQtOGEwZC1kZjA3YzQ5YTJlZDkiLCJpZCI6MjYwODQsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODcxOTMwODN9.prGsSKyAW_9Ow5zHYPhbm3LsQL-ApQw5-5PNJkDaHi8";
|
|||
|
|
|
|||
|
|
var viewer = new Cesium.Viewer("cesiumContainer", {
|
|||
|
|
geocoder: false, //位置查找
|
|||
|
|
homeButton: false, //视图返回初始位置
|
|||
|
|
sceneModePicker: true, //视角选择器
|
|||
|
|
// baseLayerPicker:false,//底图选择器
|
|||
|
|
navigationHelpButton: false, //导航帮助按钮
|
|||
|
|
animation: false, //动画控制器
|
|||
|
|
// creditContainer:"credit",//版权显示
|
|||
|
|
timeline: false, //时间线
|
|||
|
|
fullscreenButton: false, //全屏控件
|
|||
|
|
vrButton: false,
|
|||
|
|
infoBox:false,
|
|||
|
|
selectionIndicator:false,
|
|||
|
|
// terrainProvider: Cesium.createWorldTerrain({
|
|||
|
|
// requestVertexNormal: true, //添加地形光照
|
|||
|
|
// requestWaterMask: true, //添加水面波浪效果
|
|||
|
|
// }),
|
|||
|
|
// skyBox:false,//去除天空盒
|
|||
|
|
});
|
|||
|
|
var imageryLayers = viewer.scene.imageryLayers;
|
|||
|
|
//清除影像图层集合中的图层
|
|||
|
|
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",
|
|||
|
|
// });
|
|||
|
|
// imageryLayers.addImageryProvider(esriImagery);
|
|||
|
|
|
|||
|
|
var gaode = imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
|
|||
|
|
// url : "GlobalTMS/satellite/{z}/{x}/{y}.jpg",
|
|||
|
|
url:"http://localhost:8078/hubei/googleno/湖北省_卫图/瓦片_谷歌/{z}/{x}/{y}.png",
|
|||
|
|
fileExtension : "png",
|
|||
|
|
rectangle:Cesium.Rectangle.fromDegrees(108.36246969, 29.03262428, 116.12996348, 33.27754197)//108.3624696908001539,29.0326242875031930 : 116.1299634847461846,33.2775419731286846
|
|||
|
|
}));
|
|||
|
|
var customTerrainLayer = new Cesium.CesiumTerrainProvider({
|
|||
|
|
// url:"http://localhost:8078/terrain/terrain",
|
|||
|
|
// url:"http://121.33.231.74:5097/geoserver/rest/resource/terrains/hubei",
|
|||
|
|
// url:"http://localhost:9000/terrain/d6aec170b1d911ed9369fd04343ad6bb",
|
|||
|
|
// "http://localhost:8088/geoserver/rest/resource/terrains/hubei"
|
|||
|
|
url: new Cesium.Resource({
|
|||
|
|
// url: "http://localhost:8080/geoserver/rest/resource/terrains/hubei",
|
|||
|
|
// url:"http://localhost:8080/geoserver/rest/resource/data/hubei",
|
|||
|
|
url:"http://localhost:8880/terrains/hanjiang",
|
|||
|
|
// url: "http://121.33.231.74:5097/geoserver/rest/resource/terrains/hubei",
|
|||
|
|
headers: {
|
|||
|
|
'Authorization': "Basic YWRtaW46Z2Vvc2VydmVy",
|
|||
|
|
},
|
|||
|
|
}),
|
|||
|
|
requestWaterMask:false,
|
|||
|
|
credit:"版权信息"
|
|||
|
|
});
|
|||
|
|
viewer.terrainProvider = customTerrainLayer;
|
|||
|
|
|
|||
|
|
// 隐藏大气
|
|||
|
|
viewer.scene.skyAtmosphere.show=false;
|
|||
|
|
// 允许相机可以进入地下
|
|||
|
|
viewer.scene.screenSpaceCameraController.enableCollisionDetection = true; //true 禁止 false 允许
|
|||
|
|
//用于夸大地形的标量。默认为1.0（不夸张）。值2.0将地形缩放 2 倍。的值0.0使地形完全平坦。请注意，地形夸大不会修改任何其他图元，因为它们是相对于椭圆体定位的。
|
|||
|
|
viewer.scene.globe.terrainExaggeration=4;
|
|||
|
|
//夸大地形的高度。默认为0.0（相对于椭球表面缩放）。高于此高度的地形将向上缩放，低于此高度的地形将向下缩放。请注意，地形夸大不会修改任何其他图元，因为它们是相对于椭圆体定位的。如果Globe#terrainExaggeration是1.0这个值将没有效果。
|
|||
|
|
viewer.scene.globe.terrainExaggerationRelativeHeight=1.0;
|
|||
|
|
|
|||
|
|
// 开启地形检测后，会计算其他地理要素和地形之间的遮挡关系。未开启时，将会出现场景变化时，地物位置显示不正确。
|
|||
|
|
viewer.scene.globe.depthTestAgainstTerrain = true
|
|||
|
|
// viewer.scene.globe.fillHighlightColor = Cesium.Color.fromBytes(255, 255, 0).withAlpha(0.7)
|
|||
|
|
|
|||
|
|
viewer.scene.globe.showGroundAtmosphere = false;
|
|||
|
|
viewer.scene.globe.baseColor = Cesium.Color.TRANSPARENT//Cesium.Color.fromCssColorString("#032b4c"); // 设置没有瓦片时，椭球的颜色
|
|||
|
|
viewer.scene.globe.translucency.enabled = true;
|
|||
|
|
viewer.scene.globe.undergroundColor = Cesium.Color.TRANSPARENT;
|
|||
|
|
|
|||
|
|
viewer.scene.skyBox.show = false //关闭天空盒，否则会显示天空颜色
|
|||
|
|
viewer.scene.backgroundColor = Cesium.Color.fromCssColorString("#032b4c");
|
|||
|
|
// 设置光照没有效果
|
|||
|
|
// const flashlight = new Cesium.DirectionalLight({
|
|||
|
|
// direction: viewer.scene.camera.directionWC, // Updated every frame
|
|||
|
|
// });
|
|||
|
|
// const customColorLight = new Cesium.DirectionalLight({
|
|||
|
|
// direction: new Cesium.Cartesian3(
|
|||
|
|
// -0.2454278300540191,
|
|||
|
|
// 0.8842635425193919,
|
|||
|
|
// 0.39729481195458805
|
|||
|
|
// ),
|
|||
|
|
// color: Cesium.Color.fromCssColorString("#FFF"),
|
|||
|
|
// });
|
|||
|
|
// viewer.scene.light = flashlight;
|
|||
|
|
// viewer.scene.globe.dynamicAtmosphereLighting = false;
|
|||
|
|
|
|||
|
|
// Set oceans on Bing base layer to transparent
|
|||
|
|
// viewer.scene.baseLayer.colorToAlpha = new Cesium.Color(0.0, 0.016, 0.059);
|
|||
|
|
// viewer.scene.baseLayer.colorToAlphaThreshold = 0.2;
|
|||
|
|
|
|||
|
|
let boundaryUrl = "/data/hubei/hubei_boundary.geojson"
|
|||
|
|
// let url = "http://121.33.231.74:5097/geoserver/iot/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=iot%3Azhujiang_boundary&maxFeatures=99999&outputFormat=application%2Fjson"
|
|||
|
|
fetch(boundaryUrl).then(res=>res.json()).then(result=>{
|
|||
|
|
let geometry = result.features[0].geometry;
|
|||
|
|
if(geometry.type == "MultiPolygon"){
|
|||
|
|
let multiPolygonCoord = geometry.coordinates;
|
|||
|
|
multiPolygonCoord.forEach(polygon=>{
|
|||
|
|
let outRing = polygon[0];
|
|||
|
|
let innerRings = [];
|
|||
|
|
if(polygon.length > 1){}
|
|||
|
|
viewer.entities.add({
|
|||
|
|
name: "Green wall from surface with outline",
|
|||
|
|
wall: {
|
|||
|
|
positions: Cesium.Cartesian3.fromDegreesArray(outRing.flat(2)),
|
|||
|
|
material: new Cesium.ColorMaterialProperty(Cesium.Color.fromBytes(22, 103, 151).withAlpha(0.6),),
|
|||
|
|
minimumHeights:Array(outRing.length).fill(0),
|
|||
|
|
maximumHeights:Array(outRing.length).fill(-20000),
|
|||
|
|
outline: false,
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// viewer.entities.add({
|
|||
|
|
// polygon: {
|
|||
|
|
// hierarchy: new Cesium.PolygonHierarchy(
|
|||
|
|
// Cesium.Cartesian3.fromDegreesArray(outRing.flat(2))
|
|||
|
|
// ),
|
|||
|
|
// extrudedHeight: -3000.0,
|
|||
|
|
// material: Cesium.Color.fromRandom({ alpha: 1.0 }),
|
|||
|
|
// },
|
|||
|
|
// });
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
// addPolylineGraphic(result.features[0],'rgb( 22, 103, 151)')
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
let xzbjUrl = "/data/hubei/hubei_full.json"
|
|||
|
|
fetch(xzbjUrl).then(res=>res.json()).then(result=>{
|
|||
|
|
let colorStr = 'rgb( 255, 0, 0)';
|
|||
|
|
result.features.forEach(feature=>{
|
|||
|
|
addGlowFeature(feature,true,colorStr)
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
function addPolylineGraphic(feature,colorStr,width){
|
|||
|
|
let geometryType = feature.geometry.type;
|
|||
|
|
let coord = feature.geometry.coordinates;
|
|||
|
|
if(geometryType == "MultiPolygon"){
|
|||
|
|
// let polygon = coord[0];
|
|||
|
|
coord.forEach(polygon =>{
|
|||
|
|
viewer.entities.add({
|
|||
|
|
polyline: {
|
|||
|
|
positions: Cesium.Cartesian3.fromDegreesArray(polygon[0].flat(2)),// 只取外环，构造边界线
|
|||
|
|
width: 5,
|
|||
|
|
material: new Cesium.ColorMaterialProperty(Cesium.Color.fromCssColorString(colorStr?colorStr:"red")),
|
|||
|
|
followSurface: true, //是否贴着地表
|
|||
|
|
clampToGround:true,
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
function addGlowFeature(feature,show,colorStr){
|
|||
|
|
let geometryType = feature.geometry.type;
|
|||
|
|
let coord = feature.geometry.coordinates;
|
|||
|
|
if(geometryType == "MultiPolygon"){
|
|||
|
|
// let polygon = coord[0];
|
|||
|
|
coord.forEach(polygon =>{
|
|||
|
|
viewer.entities.add({
|
|||
|
|
show:show,
|
|||
|
|
name: "具有发光效果的线",
|
|||
|
|
polyline: {
|
|||
|
|
positions: Cesium.Cartesian3.fromDegreesArray(polygon[0].flat(2)),// 只取外环，构造边界线
|
|||
|
|
width: 10,
|
|||
|
|
material: new Cesium.PolylineGlowMaterialProperty({
|
|||
|
|
glowPower: 0.25,
|
|||
|
|
color: Cesium.Color.CORNFLOWERBLUE,//指定灼热光的颜色
|
|||
|
|
}),
|
|||
|
|
followSurface: true, //是否贴着地表
|
|||
|
|
clampToGround:true,
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// // 动态扩展圆效果
|
|||
|
|
// viewer.entities.add({
|
|||
|
|
// name: 'EllipsoidFade',
|
|||
|
|
// position: Cesium.Cartesian3.fromDegrees(112.528048,30.941807, -100.0),
|
|||
|
|
// ellipse: {
|
|||
|
|
// height: 0,
|
|||
|
|
// semiMinorAxis: 400000.0,
|
|||
|
|
// semiMajorAxis: 400000.0,
|
|||
|
|
// material: new Cesium.EllipsoidFadeMaterialProperty(Cesium.Color.fromBytes(22, 103, 151).withAlpha(0.6), 3000)
|
|||
|
|
// },
|
|||
|
|
// });
|
|||
|
|
|
|||
|
|
// 设置旋转效果
|
|||
|
|
// let circleRotate = viewer.entities.add({
|
|||
|
|
// position: Cesium.Cartesian3.fromDegrees(112.528048,30.941807,20000),
|
|||
|
|
// id: 'circleRotateTest',
|
|||
|
|
// ellipse: {
|
|||
|
|
// semiMinorAxis: 400000.0,
|
|||
|
|
// semiMajorAxis: 400000.0,
|
|||
|
|
// heightReference : Cesium.HeightReference.RELATIVE_TO_GROUND,
|
|||
|
|
// // height: -10000.0,
|
|||
|
|
// material: new Cesium.ImageMaterialProperty({
|
|||
|
|
// image: './data/hubei/d/地图底座.png'
|
|||
|
|
// }),
|
|||
|
|
// outline: true,
|
|||
|
|
// fill:true,
|
|||
|
|
// }
|
|||
|
|
// })
|
|||
|
|
// rotateMaterial(circleRotate.ellipse, 0, 1);
|
|||
|
|
// const greenCircle = viewer.entities.add({
|
|||
|
|
// position: Cesium.Cartesian3.fromDegrees(112.528048,30.941807, -150000.0),
|
|||
|
|
// name: "Green circle at height with outline",
|
|||
|
|
// ellipse: {
|
|||
|
|
// semiMinorAxis: 300000.0,
|
|||
|
|
// semiMajorAxis: 300000.0,
|
|||
|
|
// height: -200000.0,
|
|||
|
|
// material: new Cesium.ImageMaterialProperty({
|
|||
|
|
// image: './data/hubei/d/地图底座.png'
|
|||
|
|
// }),
|
|||
|
|
// outline: true, // height must be set for outline to display
|
|||
|
|
// },
|
|||
|
|
// });
|
|||
|
|
function rotateMaterial(instance, _stRotation, _amount) {
|
|||
|
|
instance.stRotation = new Cesium.CallbackProperty(function() {
|
|||
|
|
_stRotation += _amount;
|
|||
|
|
if (_stRotation >= 360 || _stRotation <= -360) {
|
|||
|
|
_stRotation = 0;
|
|||
|
|
}
|
|||
|
|
return Cesium.Math.toRadians(_stRotation);
|
|||
|
|
}, false)
|
|||
|
|
}
|
|||
|
|
viewer.camera.setView({
|
|||
|
|
destination : new Cesium.Cartesian3(-2356756.15965061, 5772015.66176657, 3168029.199415899),
|
|||
|
|
orientation: {
|
|||
|
|
heading : 0.01658837002956659, // east, default value is 0.0 (north)
|
|||
|
|
pitch : -1.0356538269507363, // default value (looking down)
|
|||
|
|
roll : 6.283178308645091 // default value
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|