491 lines
22 KiB
HTML
491 lines
22 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>
|
||
|
||
|
||
<!-- 引入样式 -->
|
||
<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>
|
||
|
||
<style>
|
||
@import url(./Build/Cesium/Widgets/widgets.css);
|
||
html,
|
||
body,
|
||
#app,
|
||
#cesiumContainer {
|
||
width: 100%;
|
||
height: 100%;
|
||
margin: 0;
|
||
padding: 0;
|
||
overflow: hidden;
|
||
}
|
||
#controler-panel{
|
||
position: absolute;
|
||
top: 90px;
|
||
left: 100px;
|
||
background: rgba(0,0,0,0.3);
|
||
color: white;
|
||
padding: 15px;
|
||
}
|
||
.block{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.slider{
|
||
width: 400px;
|
||
display: inline-block;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="app">
|
||
<div id="cesiumContainer"></div>
|
||
<div id="controler-panel">
|
||
<el-select v-model="value" placeholder="请选择" @change="changeModel">
|
||
<el-option
|
||
v-for="item in models"
|
||
:key="item.name"
|
||
:label="item.name"
|
||
:value="item.name">
|
||
</el-option>
|
||
</el-select>
|
||
|
||
<div class="block">
|
||
<span class="demonstration">模型位置-X</span>
|
||
<el-slider class="slider" v-model="x" @change="changePos" :max="7000000" :min="-7000000" :step="0.0001" show-input></el-slider>
|
||
</div>
|
||
<div class="block">
|
||
<span class="demonstration">模型位置-Y</span>
|
||
<el-slider class="slider" v-model="y" @change="changePos" :max="7000000" :min="-7000000" :step="0.0001" show-input></el-slider>
|
||
</div>
|
||
<div class="block">
|
||
<span class="demonstration">模型位置-Z</span>
|
||
<el-slider class="slider" v-model="z" @change="changePos" show-input-controls :input-size="'mini'" :step="0.1" :max="7000000" :min="-7000000" show-input></el-slider>
|
||
</div>
|
||
<div class="block">
|
||
<span class="demonstration">模型姿态-Heading</span>
|
||
<el-slider class="slider" v-model="heading" :max="7000000" @change="changeRoate" :min="-7000000" :step="0.1" show-input></el-slider>
|
||
</div>
|
||
<div class="block">
|
||
<span class="demonstration">模型姿态-Pitch</span>
|
||
<el-slider class="slider" v-model="pitch" :max="7000000" @change="changeRoate" :min="-7000000" :step="1" show-input></el-slider>
|
||
</div>
|
||
<div class="block">
|
||
<span class="demonstration">模型姿态-Roll</span>
|
||
<el-slider class="slider" v-model="roll" :max="7000000" @change="changeRoate" :min="-7000000" :step="1" show-input></el-slider>
|
||
</div>
|
||
<div class="block">
|
||
<span class="demonstration">模型大小-scale</span>
|
||
<el-slider class="slider" v-model="scale" :max="7000000" @change="changeScale" :min="-7000000" :step="0.1" show-input></el-slider>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
Cesium.Ion.defaultAccessToken =
|
||
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZjRjNTZkNC01NDYxLTRhMjQtOGEwZC1kZjA3YzQ5YTJlZDkiLCJpZCI6MjYwODQsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODcxOTMwODN9.prGsSKyAW_9Ow5zHYPhbm3LsQL-ApQw5-5PNJkDaHi8";
|
||
|
||
new Vue({
|
||
el:"#app",
|
||
data(){
|
||
return {
|
||
x:0,
|
||
y:0,
|
||
z:0,
|
||
heading:0,
|
||
pitch:0,
|
||
roll:0,
|
||
scale:0,
|
||
models:[
|
||
{name:"白河水库",uri:"./data/Custom/baihe.glb",lon:111.59417,lat:30.733737,height:-10,heading:89.5,scale:1800},
|
||
{name:"白河水电站",uri:"./data/Custom/白河水电站.glb",lon:110.019616,lat:32.874257,height:0,heading:-3,scale:1.6},
|
||
{name:"崔家营航电枢纽大坝",uri:"./data/Custom/崔家营航电枢纽大坝1.1.glb",lon:112.163566,lat:31.956524,height:0,heading:96.6,scale:9.6},
|
||
{name:"兴隆水利枢纽大坝",uri:"./data/Custom/兴隆水利枢纽大坝.glb",lon:112.673178,lat:30.599353,height:0,heading:89.3,scale:31},
|
||
{name:"陶岔渠首",uri:"./data/Custom/陶岔渠首2.glb",lon:111.70915,lat:32.67431,height:18,heading:-47.3,scale:47},
|
||
|
||
{name:"丹江口水库大坝",uri:"./data/Custom/丹江口水库大坝.glb",lon:111.48912,lat:32.55599,height:0,heading:-270,scale:0.7},
|
||
{name:"黄龙滩水力发电厂2.0",uri:"./data/Custom/黄龙滩水力发电厂2.0.glb",lon:110.52266 , lat:32.67627,height:0,heading:-60,scale:8.4},
|
||
|
||
{name:"雅口航运枢纽大坝",uri:"./data/Custom/雅口航运枢纽大坝.glb",lon:112.37811, lat:31.66334 ,height:0,heading:88,scale:3.45},
|
||
],
|
||
value:"",
|
||
}
|
||
},
|
||
methods:{
|
||
changeModel(name){
|
||
let item = this.models.filter(item=>item.name == name)[0]
|
||
this.addModel(
|
||
item.uri,
|
||
item.lon,
|
||
item.lat,
|
||
item.height,
|
||
item.heading,
|
||
item.scale
|
||
)
|
||
},
|
||
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,
|
||
terrainProvider: Cesium.createWorldTerrain({
|
||
requestVertexNormal: true, //添加地形光照
|
||
requestWaterMask: true, //添加水面波浪效果
|
||
}),
|
||
});
|
||
this.viewer = viewer;
|
||
let imageryLayers = viewer.imageryLayers;
|
||
// imageryLayers.removeAll();
|
||
|
||
// 叠加影像服务
|
||
var token = "bf156eb3c72350d62b008dc8a4ae1016";
|
||
// 服务域名
|
||
var tdtUrl = "https://t{s}.tianditu.gov.cn/";
|
||
// 服务负载子域,天地图地图服务二级域名包括t0-t7，可以随机选择使用，如http://t2.tianditu.gov.cn/vec_c/wmts?tk=您的密钥
|
||
var subdomains = ["0", "1", "2", "3", "4", "5", "6", "7"];
|
||
var imgMap = new Cesium.UrlTemplateImageryProvider({
|
||
url: tdtUrl + "DataServer?T=img_w&x={x}&y={y}&l={z}&tk=" + token,
|
||
subdomains: subdomains,
|
||
tilingScheme: new Cesium.WebMercatorTilingScheme(),
|
||
maximumLevel: 18,
|
||
});
|
||
// viewer.imageryLayers.addImageryProvider(imgMap);
|
||
|
||
// 叠加国界服务
|
||
// var iboMap = new Cesium.UrlTemplateImageryProvider({
|
||
// url: tdtUrl + "DataServer?T=ibo_w&x={x}&y={y}&l={z}&tk=" + token,
|
||
// subdomains: subdomains,
|
||
// tilingScheme: new Cesium.WebMercatorTilingScheme(),
|
||
// maximumLevel: 10,
|
||
// });
|
||
// viewer.imageryLayers.addImageryProvider(iboMap);
|
||
|
||
viewer.scene.globe.depthTestAgainstTerrain = false;
|
||
// this.addCuiModel();
|
||
// this.addBaiHeModel();
|
||
// this.addXinglongModel();
|
||
// this.addTaoChaModel();
|
||
// this.addDanJiangKouModel();
|
||
this.initEvent();
|
||
},
|
||
addModel(uri,lon,lat,height,heading,scale){
|
||
let that = this;
|
||
const position = Cesium.Cartesian3.fromDegrees(lon,lat,height);
|
||
const hpr = new Cesium.HeadingPitchRoll(
|
||
Cesium.Math.toRadians(heading),
|
||
Cesium.Math.toRadians(0),
|
||
Cesium.Math.toRadians(0)
|
||
);
|
||
const orientation = Cesium.Transforms.headingPitchRollQuaternion(
|
||
position,
|
||
hpr
|
||
);
|
||
var entity = this.viewer.entities.add({
|
||
position : position,
|
||
orientation: orientation,
|
||
model : {
|
||
uri : uri,
|
||
scale:scale
|
||
}
|
||
});
|
||
window.baihe = entity
|
||
this.viewer.zoomTo(entity)
|
||
|
||
let cartesian3 = entity.position.getValue()
|
||
//将笛卡尔三维坐标转为地图坐标（弧度）
|
||
var cartographic = that.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 height_String = cartographic.height.toFixed(6);
|
||
|
||
that.x = Number(log_String);
|
||
that.y = Number(lat_String);
|
||
that.z = Number(height_String);
|
||
that.heading = heading
|
||
that.scale = scale
|
||
},
|
||
addCuiModel(){
|
||
let that = this;
|
||
const position = Cesium.Cartesian3.fromDegrees(112.163566,31.956524,0);
|
||
const heading = Cesium.Math.toRadians(96.6);
|
||
const pitch = Cesium.Math.toRadians(0);
|
||
const roll = 0;
|
||
const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
|
||
const orientation = Cesium.Transforms.headingPitchRollQuaternion(
|
||
position,
|
||
hpr
|
||
);
|
||
var entity = this.viewer.entities.add({
|
||
position : position,
|
||
orientation: orientation,
|
||
model : {
|
||
uri : './data/Custom/崔家营航电枢纽大坝1.1.glb',
|
||
scale:9.6
|
||
}
|
||
});
|
||
window.baihe = entity
|
||
this.viewer.zoomTo(entity)
|
||
|
||
let cartesian3 = entity.position.getValue()
|
||
//将笛卡尔三维坐标转为地图坐标（弧度）
|
||
var cartographic = that.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 height_String = cartographic.height.toFixed(6);
|
||
|
||
that.x = Number(log_String);
|
||
that.y = Number(lat_String);
|
||
that.z = Number(height_String);
|
||
that.heading = 96.6
|
||
that.scale = 9.6
|
||
},
|
||
addBaiHeModel(){
|
||
let that = this;
|
||
const position = Cesium.Cartesian3.fromDegrees(110.019616 ,32.874257,0);
|
||
const heading = Cesium.Math.toRadians(-3);
|
||
const pitch = Cesium.Math.toRadians(0);
|
||
const roll = 0;
|
||
const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
|
||
const orientation = Cesium.Transforms.headingPitchRollQuaternion(
|
||
position,
|
||
hpr
|
||
);
|
||
var entity = this.viewer.entities.add({
|
||
position : position,
|
||
orientation: orientation,
|
||
model : {
|
||
uri : './data/Custom/白河水电站.glb',
|
||
scale:1.6
|
||
}
|
||
});
|
||
this.viewer.zoomTo(entity)
|
||
window.baihe = entity;
|
||
let cartesian3 = entity.position.getValue()
|
||
//将笛卡尔三维坐标转为地图坐标（弧度）
|
||
var cartographic = that.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 height_String = cartographic.height.toFixed(6);
|
||
|
||
that.x = Number(log_String);
|
||
that.y = Number(lat_String);
|
||
that.z = Number(height_String);
|
||
that.heading = -3
|
||
that.scale = 1.6
|
||
},
|
||
addXinglongModel(){
|
||
let that = this;
|
||
const position = Cesium.Cartesian3.fromDegrees(112.673178,30.599353,0);
|
||
const heading = Cesium.Math.toRadians(89.3);
|
||
const pitch = Cesium.Math.toRadians(0);
|
||
const roll = 0;
|
||
const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
|
||
const orientation = Cesium.Transforms.headingPitchRollQuaternion(
|
||
position,
|
||
hpr
|
||
);
|
||
var entity = this.viewer.entities.add({
|
||
position : position,
|
||
orientation: orientation,
|
||
model : {
|
||
uri : './data/Custom/兴隆水利枢纽大坝.glb',
|
||
scale:31
|
||
}
|
||
});
|
||
this.viewer.zoomTo(entity)
|
||
window.baihe = entity;
|
||
let cartesian3 = entity.position.getValue()
|
||
//将笛卡尔三维坐标转为地图坐标（弧度）
|
||
var cartographic = that.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 height_String = cartographic.height.toFixed(6);
|
||
|
||
that.x = Number(log_String);
|
||
that.y = Number(lat_String);
|
||
that.z = Number(height_String);
|
||
that.heading = 89.3
|
||
that.scale = 31
|
||
},
|
||
addTaoChaModel(){
|
||
let that = this;
|
||
// const position = Cesium.Cartesian3.fromDegrees(111.70915 , 32.67431,18);
|
||
const position = Cesium.Cartesian3.fromDegrees(111.70915 , 32.67431,150);
|
||
const heading = Cesium.Math.toRadians(-47.3);
|
||
const pitch = Cesium.Math.toRadians(0);
|
||
const roll = 0;
|
||
const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
|
||
const orientation = Cesium.Transforms.headingPitchRollQuaternion(
|
||
position,
|
||
hpr
|
||
);
|
||
var entity = this.viewer.entities.add({
|
||
position : position,
|
||
orientation: orientation,
|
||
model : {
|
||
uri : './data/Custom/陶岔渠首2.glb',
|
||
scale:47
|
||
}
|
||
});
|
||
this.viewer.zoomTo(entity)
|
||
window.baihe = entity;
|
||
let cartesian3 = entity.position.getValue()
|
||
//将笛卡尔三维坐标转为地图坐标（弧度）
|
||
var cartographic = that.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 height_String = cartographic.height.toFixed(6);
|
||
|
||
that.x = Number(log_String);
|
||
that.y = Number(lat_String);
|
||
that.z = Number(height_String);
|
||
that.heading = -47.3
|
||
that.scale = 47
|
||
},
|
||
addDanJiangKouModel(){
|
||
let that = this;
|
||
// const position = Cesium.Cartesian3.fromDegrees(111.70915 , 32.67431,18);
|
||
const position = Cesium.Cartesian3.fromDegrees(111.48912 , 32.55599,0);
|
||
const heading = Cesium.Math.toRadians(-270);
|
||
const pitch = Cesium.Math.toRadians(0);
|
||
const roll = 0;
|
||
const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
|
||
const orientation = Cesium.Transforms.headingPitchRollQuaternion(
|
||
position,
|
||
hpr
|
||
);
|
||
var entity = this.viewer.entities.add({
|
||
position : position,
|
||
orientation: orientation,
|
||
model : {
|
||
uri : './data/Custom/丹江口水库大坝.glb',
|
||
scale:0.7
|
||
}
|
||
});
|
||
this.viewer.zoomTo(entity)
|
||
let cartesian3 = entity.position.getValue()
|
||
//将笛卡尔三维坐标转为地图坐标（弧度）
|
||
var cartographic = that.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 height_String = cartographic.height.toFixed(6);
|
||
window.baihe = entity;
|
||
that.x = Number(log_String);
|
||
that.y = Number(lat_String);
|
||
that.z = Number(height_String);
|
||
that.heading = -270
|
||
that.scale = 0.7
|
||
},
|
||
changeScale(){
|
||
baihe.model.scale = new Cesium.CallbackProperty(()=>{
|
||
return this.scale
|
||
}, false)
|
||
},
|
||
changePos(){
|
||
baihe.position = new Cesium.CallbackProperty(()=>{
|
||
return Cesium.Cartesian3.fromDegrees(this.x ,this.y,this.z)
|
||
}, false)
|
||
},
|
||
changeRoate(){
|
||
const origin = baihe.position.getValue()
|
||
const heading = Cesium.Math.toRadians(this.heading)
|
||
const pitch = Cesium.Math.toRadians(this.pitch)
|
||
const roll = Cesium.Math.toRadians(this.roll)
|
||
|
||
const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll)
|
||
const orientation = Cesium.Transforms.headingPitchRollQuaternion(origin, hpr)
|
||
baihe.orientation = orientation
|
||
},
|
||
initEvent(){
|
||
let that = this;
|
||
let handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
|
||
handler.setInputAction(function (movement) {
|
||
//捕获椭球体，将笛卡尔二维平面坐标转为椭球体的笛卡尔三维坐标，返回球体表面的点
|
||
var cartesian3 = that.viewer.camera.pickEllipsoid(movement.position);
|
||
if (cartesian3) {
|
||
//将笛卡尔三维坐标转为地图坐标（弧度）
|
||
var cartographic = that.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 = (that.viewer.camera.positionCartographic.height / 1000).toFixed(2);
|
||
// vm.lng = log_String;
|
||
// vm.lat = lat_String;
|
||
// vm.alti = alti_String;
|
||
console.log(log_String,lat_String)
|
||
}
|
||
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||
}
|
||
},
|
||
mounted(){
|
||
this.initViewer();
|
||
}
|
||
})
|
||
|
||
|
||
/**
|
||
* 加载3D模型
|
||
*
|
||
* 基于glTF的三维模型，模型的位置和方向由包含的实体决定。
|
||
* Cesium 包括对glTF geometry、材质 materials、动画 animations 和皮肤 skinning 的支持。目前不支持 Cameras和灯光 ligts。
|
||
*
|
||
* 主要属性：
|
||
* uri：
|
||
*
|
||
*/
|
||
// const position = Cesium.Cartesian3.fromDegrees(111.594170, 30.733737,100);
|
||
// const heading = Cesium.Math.toRadians(90);
|
||
// const pitch = Cesium.Math.toRadians(0);
|
||
// const roll = 0;
|
||
// const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
|
||
// const orientation = Cesium.Transforms.headingPitchRollQuaternion(
|
||
// position,
|
||
// hpr
|
||
// );
|
||
// var entity = viewer.entities.add({
|
||
// position : position,
|
||
// orientation: orientation,
|
||
// model : {
|
||
// uri : './data/Custom/baihe.glb',
|
||
// scale:1800
|
||
// }
|
||
// });
|
||
// viewer.zoomTo(entity)
|
||
|
||
|
||
|
||
</script>
|
||
</body>
|
||
</html>
|