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