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