426 lines
18 KiB
HTML
426 lines
18 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>
|
||
<style>
|
||
@import url(./Build/Cesium/Widgets/widgets.css);
|
||
html,
|
||
body,
|
||
#app,
|
||
#cesiumContainer {
|
||
width: 100%;
|
||
height: 100%;
|
||
margin: 0;
|
||
padding: 0;
|
||
overflow: hidden;
|
||
}
|
||
.fly-path-box{
|
||
position: absolute;
|
||
top: 100px;
|
||
left: 80px;
|
||
}
|
||
</style>
|
||
<!-- 引入样式 -->
|
||
<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>
|
||
</head>
|
||
<body>
|
||
<div id="app">
|
||
<div id="cesiumContainer"></div>
|
||
<div class="fly-path-box">
|
||
<el-row>
|
||
<el-button @click="flyPath">开始</el-button>
|
||
<el-button @click="pauseFly" type="primary">暂停</el-button>
|
||
<!-- <el-button type="success">成功按钮</el-button>
|
||
<el-button type="info">信息按钮</el-button>
|
||
<el-button type="warning">警告按钮</el-button>
|
||
<el-button type="danger">危险按钮</el-button> -->
|
||
</el-row>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<script type="module">
|
||
import viewUtil from "./js/utils/viewUtil.js";
|
||
import {getRiverLevel1,getRiverLevel2,getHanjiangFeature} from "/js/api/hubei.js"
|
||
import {
|
||
cesiumToken,
|
||
geoserverConfig,
|
||
geoqConfig,
|
||
} from "./js/mapConfig.js";
|
||
Cesium.Ion.defaultAccessToken = cesiumToken;
|
||
let flyHeight = 13177;
|
||
new Vue({
|
||
el: "#app",
|
||
data: {
|
||
regions:[
|
||
{ name:"长江干流流域",level:"一级流域",coord:[114.721069,30.855776]},
|
||
{ name:"汉江流域",level:"一级流域",coord:[111.319383,32.038113]},
|
||
{ name:"清江流域",level:"一级流域",coord:[109.483509,30.107393]},
|
||
|
||
{ name:"乌江片区",level:"二级流域",coord:[108.870317,29.909681]},
|
||
{ name:"清江片区",level:"二级流域",coord:[110.050511,29.912557]},
|
||
{ name:"沅江片区",level:"二级流域",coord:[110.210396,30.451736]},
|
||
|
||
{ name:"三峡库区",level:"二级流域",coord:[110.548268,31.133949]},
|
||
{ name:"黄柏河片区",level:"二级流域",coord:[111.337632,30.918915]},
|
||
{ name:"荆南四河片区",level:"二级流域",coord:[111.927106,30.038710]},
|
||
|
||
{ name:"沮漳河片区",level:"二级流域",coord:[111.835033,31.079421]},
|
||
|
||
{ name:"四湖片区",level:"二级流域",coord:[112.833908,30.004803]},
|
||
{ name:"鄂东南片区",level:"二级流域",coord:[114.246797,29.964106]},
|
||
{ name:"富水片区",level:"二级流域",coord:[114.794233,29.674242]},
|
||
{ name:"鄂东五河片区",level:"二级流域",coord:[115.316260,30.830389]},
|
||
|
||
{ name:"府澴河片区",level:"二级流域",coord:[113.740907,31.576125]},
|
||
{ name:"汉江下游片区",level:"二级流域",coord:[113.321659,30.668325]},
|
||
{ name:"唐白河片区",level:"二级流域",coord:[112.329638,32.207771]},
|
||
{ name:"汉江中游片区",level:"二级流域",coord:[111.721511,31.839883]},
|
||
{ name:"汉江丹库以上片区",level:"二级流域",coord:[110.071016,32.370220]},
|
||
],
|
||
level1Color:"rgba(65, 110, 255, 0.5)",
|
||
level2Color:"rgba(44, 239, 243, 0.5)",
|
||
path:[
|
||
[106.506124,33.116968,flyHeight],//发源地
|
||
[109.852000,33.070824,flyHeight],
|
||
[110.615992,32.828365,flyHeight],
|
||
[111.069476,32.622887,flyHeight],//中游
|
||
[111.710542,32.231320,flyHeight],
|
||
[112.143726,31.848392,flyHeight],
|
||
[112.447286,31.399614,flyHeight],
|
||
[112.565470,31.005892,flyHeight],
|
||
[112.825239,30.784890,flyHeight],
|
||
[113.651361,30.865274,flyHeight],
|
||
[114.282617,30.568286,flyHeight],// 入江口
|
||
]
|
||
},
|
||
computed:{
|
||
regionLevel1: function () {
|
||
return this.regions.filter(region=>region.level == "一级流域")
|
||
},
|
||
regionLevel2: function () {
|
||
return this.regions.filter(region=>region.level == "二级流域")
|
||
},
|
||
},
|
||
methods: {
|
||
initViewer() {
|
||
var viewer = new Cesium.Viewer("cesiumContainer", {
|
||
geocoder: false, //位置查找
|
||
homeButton: false, //视图返回初始位置
|
||
sceneModePicker: false, //视角选择器
|
||
baseLayerPicker:false,//底图选择器
|
||
navigationHelpButton: false, //导航帮助按钮
|
||
animation: false, //动画控制器
|
||
creditContainer:document.createElement("div"),//版权显示
|
||
timeline: true, //时间线
|
||
fullscreenButton: false, //全屏控件
|
||
vrButton: false,
|
||
infoBox: false,
|
||
selectionIndicator: false,
|
||
terrainProvider: Cesium.createWorldTerrain({
|
||
requestVertexNormal: true, //添加地形光照
|
||
requestWaterMask: true, //添加水面波浪效果
|
||
}),
|
||
});
|
||
window.viewer = viewer;
|
||
this._viewer = viewer;
|
||
let imageryLayers = viewer.imageryLayers;
|
||
imageryLayers.removeAll();
|
||
viewUtil.addGeoVisImagerLayer(viewer,"yingxiang");
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
// 将三维球定位到汉江
|
||
viewer.camera.flyTo({
|
||
destination: new Cesium.Cartesian3(
|
||
-2568409.0296040955, 6087054.075714171, 3869940.8638977357
|
||
),
|
||
orientation: {
|
||
heading: 0.1017466880023612,
|
||
pitch: -1.5281789831506378,
|
||
roll: 0,
|
||
},
|
||
});
|
||
this.initEvent(viewer);
|
||
|
||
// 创建自定义数据源
|
||
this.level1DataSource = new Cesium.CustomDataSource("level1");
|
||
viewer.dataSources.add(this.level1DataSource);
|
||
|
||
// 创建自定义数据源
|
||
this.level2DataSource = new Cesium.CustomDataSource("level2");
|
||
viewer.dataSources.add(this.level2DataSource);
|
||
|
||
// 用于存储汉江图元的集合
|
||
this.riverPrimitives = viewer.scene.primitives.add(new Cesium.PrimitiveCollection());
|
||
|
||
this.drawShap();
|
||
|
||
|
||
// 创建轨迹实体数据源
|
||
window.pathSource = new Cesium.CustomDataSource("pathSource");
|
||
viewer.dataSources.add(window.pathSource);
|
||
},
|
||
async drawShap(){
|
||
// 添加一级、二级流域面和注记
|
||
let level1 = await getRiverLevel1();
|
||
level1.features.forEach(feature=>{
|
||
feature.properties.layerName = "riverLevel";
|
||
feature.properties.selectedColor = this.level1Color;
|
||
viewUtil.createOutlinePolygon(this.level1DataSource,feature,"rgba(255,255,255,0)","rgba(255,255,255)",2,true)
|
||
})
|
||
let level2 = await getRiverLevel2();
|
||
level2.features.forEach(feature=>{
|
||
feature.properties.layerName = "riverLevel";
|
||
feature.properties.selectedColor = this.level2Color;
|
||
viewUtil.createOutlinePolygon(this.level2DataSource,feature,"rgba(255,255,255,0)","#2CEFF3",2,true)
|
||
})
|
||
|
||
this.addPoiData(this.level1DataSource,this.regionLevel1);
|
||
this.addPoiData(this.level2DataSource,this.regionLevel2);
|
||
this.level2DataSource.show = false;//默认显示一级
|
||
|
||
// 添加汉江水面动态效果
|
||
let hanjiang = await getHanjiangFeature();
|
||
hanjiang.features.forEach(feature=>{
|
||
viewUtil.addWaterFeature(this.riverPrimitives,feature)
|
||
})
|
||
},
|
||
initEvent(viewer){
|
||
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
|
||
handler.setInputAction((evt) => {
|
||
//捕获椭球体，将笛卡尔二维平面坐标转为椭球体的笛卡尔三维坐标，返回球体表面的点
|
||
var cartesian3 = viewer.camera.pickEllipsoid(evt.position);
|
||
// let cartesian3 = viewer.scene.pickPosition(evt.position);
|
||
if (cartesian3) {
|
||
//将笛卡尔三维坐标转为地图坐标（弧度）
|
||
var cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian3);
|
||
//将地图坐标（弧度）转为十进制的度数
|
||
var lat_String = Cesium.Math.toDegrees(cartographic.latitude).toFixed(6);
|
||
var log_String = Cesium.Math.toDegrees(cartographic.longitude).toFixed(6);
|
||
var alti_String = (viewer.camera.positionCartographic.height / 1000).toFixed(2);
|
||
console.log(log_String+","+lat_String)
|
||
}
|
||
|
||
var picks = viewer.scene.drillPick(evt.position);
|
||
console.log(picks)
|
||
if(picks.length){
|
||
picks.forEach(item=>{
|
||
let attr = JSON.parse(item.id.id);
|
||
if(attr.layerName == "riverLevel"){
|
||
item.id.polygon.material = new Cesium.ColorMaterialProperty(Cesium.Color.fromCssColorString(attr.selectedColor)) ;
|
||
if(this.selectedEntity ){
|
||
this.selectedEntity.polygon.material = new Cesium.ColorMaterialProperty(Cesium.Color.fromCssColorString("rgba(0,0,0,0)")) ;
|
||
}
|
||
this.selectedEntity = item.id;
|
||
}
|
||
})
|
||
}else{
|
||
if(this.selectedEntity ){
|
||
this.selectedEntity.polygon.material = new Cesium.ColorMaterialProperty(Cesium.Color.fromCssColorString("rgba(0,0,0,0)")) ;
|
||
}
|
||
}
|
||
|
||
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)
|
||
|
||
// 监听地图缩放控制实体的显示，另一种方案是使用 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>1200000){
|
||
this.level1DataSource.show = true;
|
||
this.level2DataSource.show = false;
|
||
}else{
|
||
this.level1DataSource.show = false;
|
||
this.level2DataSource.show = true;
|
||
}
|
||
})
|
||
},
|
||
async createRiverLabel(text){
|
||
// 创建画布对象
|
||
let canvas = document.createElement("canvas");
|
||
let url1 = "/images/hanjiang/river_location.png";
|
||
const image = await new Cesium.Resource.fetchImage(url1);
|
||
let padding = 8;
|
||
let len = text.split("").length;
|
||
let ww = 14*len+padding*2;
|
||
|
||
canvas.width = ww>image.width?ww:image.width;
|
||
canvas.height = image.height;
|
||
|
||
let ctx = canvas.getContext("2d");
|
||
ctx.drawImage(image, 0, 0, ww>image.width?ww:image.width, image.height);
|
||
ctx.font = 'bold 14px Arial';
|
||
ctx.textAlign = 'left';
|
||
ctx.textBaseline = 'middle';
|
||
ctx.fillStyle = 'rgba(255, 255, 255, 1)';
|
||
ctx.fillText(text, ww>image.width?8:(image.width-ww+2*padding)/2, image.height/4);
|
||
return canvas;
|
||
},
|
||
addPoiData(source,data,option){
|
||
data.forEach(item=>{
|
||
let image = this.createRiverLabel(item.name)
|
||
|
||
let opt = {
|
||
id: JSON.stringify({ ...item, layerName: "poi" }),
|
||
position: Cesium.Cartesian3.fromDegrees(item.coord[0], item.coord[1], 0),
|
||
billboard: {
|
||
eyeOffset: new Cesium.Cartesian3(0.0, 1.0, 0.0),
|
||
image:image, // default: undefined
|
||
show: true, // default
|
||
// pixelOffset:new Cesium.Cartesian2(-60, 0),
|
||
// width: 120, // default: undefined
|
||
// height: 80, // default: undefined
|
||
disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
||
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
|
||
// 10.0,
|
||
// 30000.0
|
||
// ), //根据到相机的距离确定可见性。
|
||
scaleByDistance: new Cesium.NearFarScalar(10, 1, 60000000, 0.0),
|
||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
||
},
|
||
}
|
||
source.entities.add(opt)
|
||
})
|
||
},
|
||
initTimeline(len){
|
||
var start = Cesium.JulianDate.fromDate(new Date("2023-2-13"));
|
||
var stop = Cesium.JulianDate.addSeconds( start, len, new Cesium.JulianDate() );
|
||
this.start = start;
|
||
this.stop = stop;
|
||
//Make sure viewer is at the desired time.
|
||
this._viewer.clock.startTime = start.clone();
|
||
this._viewer.clock.stopTime = stop.clone();
|
||
this._viewer.clock.currentTime = start.clone();
|
||
this._viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; //Loop at the end
|
||
this._viewer.clock.multiplier = 0.1;
|
||
//Set timeline to simulation bounds
|
||
this._viewer.timeline.zoomTo(start, stop);
|
||
this._viewer.clock.shouldAnimate = false
|
||
},
|
||
flyPath(){
|
||
// 设置时间
|
||
this.initTimeline(this.path.length - 1);
|
||
// 设置坐标的时间，使用 SampledPositionProperty进行插值
|
||
let positions = this.getPositionProperty(this.path);
|
||
let orientation = new Cesium.VelocityOrientationProperty( positions );
|
||
|
||
// 创建轨迹实体
|
||
let flyEntity = window.pathSource.entities.add({
|
||
show: true,
|
||
//Set the entity availability to the same interval as the simulation time.
|
||
availability: new Cesium.TimeIntervalCollection([
|
||
new Cesium.TimeInterval({
|
||
start: this.start,
|
||
stop: this.stop,
|
||
}),
|
||
]),
|
||
//使用计算的位置
|
||
position: positions,
|
||
//Automatically compute orientation based on position movement.
|
||
orientation: orientation,
|
||
//Load the Cesium plane model to represent the entity
|
||
model: {
|
||
show: false,
|
||
uri:"./SampleData/models/CesiumAir/Cesium_Air.glb",
|
||
minimumPixelSize: 64,
|
||
},
|
||
path: {
|
||
show:true,
|
||
resolution: 1,
|
||
material: new Cesium.PolylineGlowMaterialProperty({
|
||
glowPower: 0.1,
|
||
color: Cesium.Color.YELLOW,
|
||
}),
|
||
width: 10,
|
||
},
|
||
});
|
||
flyEntity.position.setInterpolationOptions({
|
||
interpolationDegree: 5,
|
||
interpolationAlgorithm: Cesium.HermitePolynomialApproximation,
|
||
});
|
||
//监听时间变化,【关键代码】。保存返回值，是一个移除事件的回调函数
|
||
this.tickCallBack&&this.tickCallBack();
|
||
this.tickCallBack = viewer.clock.onTick.addEventListener( (e)=> {
|
||
if (viewer.clock.shouldAnimate === true) {
|
||
let ori = orientation.getValue(viewer.clock.currentTime); //获取偏向角
|
||
let center = positions.getValue(viewer.clock.currentTime); //获取位置
|
||
let transform = Cesium.Matrix4.fromRotationTranslation(
|
||
Cesium.Matrix3.fromQuaternion(ori),
|
||
center
|
||
); //将偏向角转为3*3矩阵，利用实时点位转为4*4矩阵
|
||
viewer.camera.lookAtTransform(
|
||
transform,
|
||
new Cesium.Cartesian3(-10, 0, 3)
|
||
); //将相机向后面放一点， 第二个参数可以调整相机的姿态 [前后，左右，上下]
|
||
}
|
||
});
|
||
// 修改飞行状态
|
||
// path.playing = true;
|
||
// 飞行的时候隐藏轨迹相关的实体
|
||
window.pathSource.show = false;
|
||
this._viewer.trackedEntity = flyEntity;
|
||
this._viewer.clock.shouldAnimate = true;
|
||
},
|
||
getPositionProperty(coords){
|
||
// 给轨迹点关联时间和插值
|
||
const property = new Cesium.SampledPositionProperty();
|
||
for (var i = 0; i < coords.length; i++) {
|
||
var time = Cesium.JulianDate.addSeconds( this.start, i, new Cesium.JulianDate() );
|
||
var position = Cesium.Cartesian3.fromDegrees( coords[i][0], coords[i][1], coords[i][2] );
|
||
property.addSample(time, position);
|
||
window.pathSource.entities.add({
|
||
position: position,
|
||
point: {
|
||
color: Cesium.Color.SKYBLUE,
|
||
pixelSize: 10,
|
||
outlineColor: Cesium.Color.YELLOW,
|
||
outlineWidth: 3,
|
||
disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
||
// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
||
},
|
||
});
|
||
}
|
||
return property;
|
||
},
|
||
pauseFly(){
|
||
window.pathSource.show = true;
|
||
this._viewer.trackedEntity = null;
|
||
this._viewer.clock.shouldAnimate = false;
|
||
}
|
||
},
|
||
mounted() {
|
||
this.initViewer();
|
||
},
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|