278 lines
12 KiB
HTML
278 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>
|
||
<!-- 引入样式 -->
|
||
<link rel="stylesheet" href="./js/elementui/index.css" />
|
||
<!-- import Vue before Element -->
|
||
<script src="./js/vue2710.js"></script>
|
||
<!-- import JavaScript -->
|
||
<script src="./js/elementui/index.js"></script>
|
||
|
||
<script src="./Build/CesiumUnminified/Cesium.js"></script>
|
||
<script src="./js/utils/EllipsoidFadeMaterialProperty.js"></script>
|
||
<script src="./js/PolylineTrailMaterial.js"></script>
|
||
<style>
|
||
@import url(./Build/Cesium/Widgets/widgets.css);
|
||
html,
|
||
body,
|
||
#app,#cesiumContainer {
|
||
width: 100%;
|
||
height: 100%;
|
||
margin: 0;
|
||
padding: 0;
|
||
overflow: hidden;
|
||
background-image: url("/images/53bg.png");
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="app">
|
||
<div id="cesiumContainer"></div>
|
||
</div>
|
||
|
||
<script type="module">
|
||
|
||
import viewUtil from "./js/utils/viewUtil.js";
|
||
import * as xiXianApi from "./js/api/xixian.js";
|
||
import DynamicRange from "./js/utils/DynamicRange.js";
|
||
|
||
Cesium.Ion.defaultAccessToken =
|
||
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZjRjNTZkNC01NDYxLTRhMjQtOGEwZC1kZjA3YzQ5YTJlZDkiLCJpZCI6MjYwODQsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODcxOTMwODN9.prGsSKyAW_9Ow5zHYPhbm3LsQL-ApQw5-5PNJkDaHi8";
|
||
|
||
new Vue({
|
||
el: "#app",
|
||
data: {
|
||
|
||
},
|
||
methods:{
|
||
initViewer(){
|
||
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,
|
||
// requestRenderMode: true,
|
||
// terrainProvider: Cesium.createWorldTerrain({
|
||
// requestVertexNormal: true, //添加地形光照
|
||
// requestWaterMask: true, //添加水面波浪效果
|
||
// }),
|
||
skyBx:false,//去除天空盒 Front Back Right Left Up Down
|
||
orderIndependentTranslucency: false,//orderIndependentTranslucency需要设置为true，才能去掉地球表面的大气效果的黑圈问题
|
||
contextOptions: {
|
||
webgl: {
|
||
alpha: true,
|
||
}
|
||
},
|
||
});
|
||
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 ulp = new Cesium.UrlTemplateImageryProvider({
|
||
// url : "GlobalTMS/satellite/{z}/{x}/{y}.jpg",
|
||
url:"http://localhost:8078/tilesz/{z}/{x}/{y}.png",
|
||
// url:"http://localhost:8078/newdata/xixian/arcgis_tiles/{z}/{x}/{y}.png",
|
||
fileExtension : "png",
|
||
rectangle:Cesium.Rectangle.fromDegrees(114.569511, 32.135612, 115.129434, 32.659965)//108.3624696908001539,29.0326242875031930 : 116.1299634847461846,33.2775419731286846
|
||
})
|
||
var gaode = imageryLayers.addImageryProvider(ulp);
|
||
|
||
// 隐藏大气
|
||
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)
|
||
// Cesium.Color.TRANSPARENT
|
||
|
||
// 设置椭球透明
|
||
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 = undefined;//Cesium.Color.WHILE;
|
||
|
||
viewer.scene.skyBox.show = false //关闭天空盒，否则会显示天空颜色
|
||
viewer.scene.backgroundColor = new Cesium.Color(0.0, 0.0, 0.0, 0.0);//其他颜色会影响最终效果
|
||
|
||
// 限制相机高度
|
||
viewer.scene.screenSpaceCameraController.maximumZoomDistance =200000;
|
||
viewer.scene.screenSpaceCameraController.minimumZoomDistance = 10;
|
||
|
||
//抗锯齿
|
||
viewer.scene.fxaa = true;
|
||
viewer.scene.postProcessStages.fxaa.enabled = true;
|
||
//清除月亮太阳
|
||
viewer.scene.moon.show = false
|
||
viewer.scene.sun.show = false
|
||
|
||
viewer.camera.setView({
|
||
destination: new Cesium.Cartesian3(
|
||
-2310077.324570175, 4994509.116378295, 3387357.260308099
|
||
),
|
||
orientation: {
|
||
heading: 0.030200504415429208,
|
||
pitch: -0.9328766727816555,
|
||
roll: 0.00001552501464363587,
|
||
},
|
||
});
|
||
viewer.scene.globe.depthTestAgainstTerrain = true;
|
||
|
||
|
||
// 创建自定义数据源
|
||
this.wallDataSource = new Cesium.CustomDataSource("walldata");
|
||
viewer.dataSources.add(this.wallDataSource);
|
||
|
||
// 创建primitive集合，存储水系图元对象
|
||
this.riverPrimitives = viewer.scene.primitives.add(
|
||
new Cesium.PrimitiveCollection()
|
||
);
|
||
// 创建primitive集合，存储水系图元对象
|
||
this.tdlyPrimitives = viewer.scene.primitives.add(
|
||
new Cesium.PrimitiveCollection()
|
||
);
|
||
// 创建土地利用的自定义数据源
|
||
this.tdlyDataSource = new Cesium.CustomDataSource("tdlydata");
|
||
viewer.dataSources.add(this.tdlyDataSource);
|
||
|
||
this.viewer = viewer;
|
||
this.drawShp();
|
||
this.initEvent();
|
||
},
|
||
async drawShp(){
|
||
// 添加底座
|
||
const data = await xiXianApi.getXiXian();
|
||
data.features.forEach(feature=>{
|
||
viewUtil.addWallByFeature(this.wallDataSource,feature,"#5884dd",-2000,"0")
|
||
})
|
||
// 添加动态路网
|
||
const wayData = await xiXianApi.getOsmWay();
|
||
wayData.features.forEach(feature=>{
|
||
if(feature.geometry.type == "MultiLineString"){
|
||
let coords = feature.geometry.coordinates[0];
|
||
this.addDynamicLine(coords);
|
||
}
|
||
})
|
||
|
||
// 添加动态水面
|
||
const riverData = await xiXianApi.getRiver();
|
||
riverData.features.forEach(feature=>{
|
||
viewUtil.addWaterFeature(this.riverPrimitives,feature);
|
||
})
|
||
|
||
this.addTdlyPolygon();
|
||
},
|
||
async addTdlyPolygon(){
|
||
const result = await fetch('http://127.0.0.1:8088/geoserver/allRegion/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=allRegion:wlccyd&maxFeatures=9999&outputFormat=application/json&srsname=EPSG:4326').then(res=>res.json());
|
||
result.features.forEach(feature=>{
|
||
viewUtil.addPolygonPrimitiveByFeature(this.tdlyPrimitives,feature,'#ff0000')
|
||
})
|
||
},
|
||
addDynamicLine(coords){
|
||
const {viewer,wallDataSource} = this;
|
||
const glowingLine = viewer.entities.add({
|
||
name: "Glowing blue line on the surface",
|
||
polyline: {
|
||
positions: Cesium.Cartesian3.fromDegreesArray(coords.flat(2)),
|
||
width: 1,
|
||
// material: new Cesium.PolylineGlowMaterialProperty({
|
||
// glowPower: 0.2,
|
||
// taperPower: 0.5,
|
||
// color: Cesium.Color.CORNFLOWERBLUE,
|
||
// }),
|
||
material: new PolylineTrailMaterial({
|
||
color: Cesium.Color.YELLOW,
|
||
duration:5000
|
||
}),
|
||
},
|
||
});
|
||
},
|
||
initEvent(){
|
||
const {viewer,wallDataSource} = this;
|
||
// 监听地图缩放控制实体的显示，另一种方案是使用 DistanceDisplayCondition 参数配置
|
||
viewer.scene.camera.moveEnd.addEventListener(()=>{
|
||
//获取当前相机高度
|
||
let height = Math.ceil(viewer.camera.positionCartographic.height);
|
||
// console.log('height：' + height);
|
||
// 获取相机位置的大小
|
||
// var currentMagnitude = viewer.camera.getMagnitude();
|
||
// console.log('currentMagnitude：' + currentMagnitude);
|
||
|
||
if(height>30000){
|
||
wallDataSource.show = true;
|
||
}else{
|
||
wallDataSource.show = false;
|
||
}
|
||
// this.popup&&console.log(this.popup.level)
|
||
})
|
||
}
|
||
},
|
||
mounted(){
|
||
this.initViewer();
|
||
}
|
||
});
|
||
|
||
|
||
|
||
|
||
//拦截清除
|
||
// const dummySend = XMLHttpRequest.prototype.send;
|
||
// XMLHttpRequest.prototype.send = function () {
|
||
// const _onreadystatechange = this.onreadystatechange;
|
||
|
||
// this.onreadystatechange = function () {
|
||
// if (this.readyState === 4) {
|
||
// if (this.status === 200 || this.status === 1223) {
|
||
// // as response is read-only and configurable, make it writable
|
||
// // Object.defineProperty(this, 'response', {writable: true});
|
||
// // this.response = modifyResponse(this.response);
|
||
// }else{
|
||
// // 错误处理
|
||
// // console.log("出错了 ", this.statusText);
|
||
// console.clear();
|
||
// }
|
||
// }
|
||
// if (_onreadystatechange) {
|
||
// _onreadystatechange.apply(this, arguments);
|
||
// }
|
||
// }
|
||
// // this.onerror= function(e) {
|
||
// // // console.clear();
|
||
// // };
|
||
// dummySend.apply(this, arguments);
|
||
// }
|
||
|
||
|
||
</script>
|
||
</body>
|
||
</html>
|