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