在main.js引入
import Cesium from 'cesium/Cesium'
import '../node_modules/cesium/Build/Cesium/Widgets/widgets.css'
Vue.prototype.Cesium = Cesium;
<br>// 以下是組件內容<br><br><br><br><template>
<div class="cesium-wrap">
<div id="cesiumContainer"></div>
<el-form ref="form" :model="form" label-width="80px" class="cesiumForm" v-if="showForm" size="mini">
<el-form-item label="id">
<el-select v-model="form.id" placeholder="請選擇" @change="changeLing">
<el-option v-for="item in lingList" :key="'ling' + item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="名稱"><el-input v-model="form.name"></el-input></el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit()">提交</el-button>
<el-button @click="handleClose">取消</el-button>
<el-button @click="deleHandle">刪除</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
terrainUrl: 'http://172.0.0.1:8888/terrain2/',
imageryUrl: 'http://172.0.0.1:8888/image/{z}/{x}/{y}.jpg',
orgPos: { lon: 99.79602474, lat: 26.45798084, height: 300000 }, //7286.13}
viewer: null, //
terrainProvider: '', // 添加地形圖數據
imageryProvider: '', // 圖形數據
form: {
id: '',
name: '',
jd: '',
wd: '',
height: ''
},
showForm: false,
img: '/static/images/mark.png',
lingList: []
};
},
created() {
this.queryMingTombsHandler();
},
mounted() {
this.initViewer();
},
watch: {},
methods: {
// 獲取數據
queryMingTombsHandler() {
this.lingList = [];
this.$commonHttp(請求地址).then(res => {
if (res.code == this.$codeState.OKCODE) {
let data = res.data;
this.lingList = data;
this.lingList.forEach(item => {
if (item.height) {
this.addEntities(item);
}
});
console.log('lingList', this.lingList);
}
});
},
// 選擇
changeLing(val) {
this.lingList.forEach(item => {
if (item.id == val) {
this.form.name = item.name;
console.log('this.form', this.form);
}
});
},
onSubmit() {
this.$commonHttp(請求地址, {
id: this.form.id,
jd: this.form.jd,
wd: this.form.wd,
height: this.form.height
}).then(res => {
if (res.code == this.$codeState.OKCODE) {
this.addEntities(this.form);
this.showForm = false;
this.clearFromHandler();
}
});
},
handleClose() {
this.showForm = false;
},
deleHandle() {
this.$commonHttp(請求地址, {
id: this.form.id
}).then(res => {
if (res.code == this.$codeState.OKCODE) {
this.showForm = false;
this.clearFromHandler();
}
});
},
// 將屏幕坐標轉為經緯度
lonLan(position) {
let viewer = this.viewer;
let Cesium = this.Cesium;
var position1, cartographic1, lon, lat, height;
let lonLanHei = {
lon: '',
lat: '',
height: ''
};
let ray = viewer.scene.camera.getPickRay(position);
position1 = viewer.scene.globe.pick(ray, viewer.scene);
cartographic1 = Cesium.Ellipsoid.WGS84.cartesianToCartographic(position1);
let feature = viewer.scene.pick(position);
if (feature == undefined) {
lon = Cesium.Math.toDegrees(cartographic1.longitude);
lat = Cesium.Math.toDegrees(cartographic1.latitude);
height = cartographic1.height;
} else {
let cartesian = viewer.scene.pickPosition(position);
if (Cesium.defined(cartesian)) {
let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
lon = Cesium.Math.toDegrees(cartographic.longitude);
lat = Cesium.Math.toDegrees(cartographic.latitude);
height = cartographic.height; //模型高度 } };//
}
}
lonLanHei.lat = lat;
lonLanHei.lon = lon;
lonLanHei.height = height;
return lonLanHei;
},
clearFromHandler() {
this.form.id = '';
this.form.jd = '';
this.form.wd = '';
this.form.name = '';
this.form.height = '';
},
initViewer() {
//添加地形圖數據
// this.terrainProvider = new this.Cesium.CesiumTerrainProvider({
// url: this.terrainUrl
// });
// 添加圖片數據
// this.imageryProvider = new this.Cesium.UrlTemplateImageryProvider({
// url: this.imageryUrl,
// tilingScheme: new this.Cesium.WebMercatorTilingScheme(),
// maximumLevel: 19
// });
let terrainModels = this.Cesium.createDefaultTerrainProviderViewModels();
// 初始化
this.viewer = new this.Cesium.Viewer('cesiumContainer', {
// terrainProvider: this.terrainProvider,
// imageryProvider: this.imageryProvider,
infoBox: false, //是否顯示信息框--點擊mark時，true有會
geocoder: false, // 查找位置，查到后會將鏡頭對准找到的地址
homeButton: false, // 視角返回初始位置
sceneModePicker: false, // 旋轉視角的模式，有三種3D,2D,哥倫布視圖
//baseLayerPicker: false, // 圖層選擇器，選擇要顯示的地圖服務和地形服務。
navigationHelpButton: false, // 導航幫助按鈕，顯示默認的地圖控制幫助。
fullscreenButton: true, // 全屏按鈕
animation: false, // 動畫，控制試圖動畫的播放速度
timeline: false, // 時間線，指示當前時間，並允許用戶跳到特定的時間。
selectionIndicator: false, // 禁止entity選中
vrButton: true,
scene3DOnly: false,
sceneMode: 3
//terrainProviderViewModels: terrainModels,
//selectedTerrainProviderViewModel: terrainModels[1] // Select STK high-res terrain
});
this.viewer.scene.globe.depthTestAgainstTerrain = false;
// cesium的label的清晰度
this.viewer.scene.postProcessStages.fxaa.enabled = false;
// 加載傾斜攝影數據
this.loadTilesetHandler();
// this.initCamera();
//去掉地圖標志
this.viewer._cesiumWidget._creditContainer.style.display = 'none';
this.initMark();
},
// 加載傾斜攝影數據
loadTilesetHandler() {
let tileset = this.viewer.scene.primitives.add(
new this.Cesium.Cesium3DTileset({
url: 'http://172.18.49.225:65432/qxsy/tileset.json' //
})
);
tileset.readyPromise
.then(() => {
this.viewer.scene.primitives.lowerToBottom(tileset);
let boundingSphere = tileset.boundingSphere;
this.viewer.camera.viewBoundingSphere(boundingSphere, new this.Cesium.HeadingPitchRange(0.0, -0.5, boundingSphere.radius));
this.viewer.camera.lookAtTransform(this.Cesium.Matrix4.IDENTITY);
})
.otherwise(function(Aerror) {
throw error;
});
},
initCamera() {
let self = this;
this.viewer.scene.camera.flyTo({
destination: this.Cesium.Cartesian3.fromDegrees(this.orgPos.lon, this.orgPos.lat, this.orgPos.height), // 設置位置
orientation: {
heading: this.Cesium.Math.toRadians(0.0), // 方向
pitch: this.Cesium.Math.toRadians(-90), // 傾斜角度
roll: this.Cesium.Math.toRadians(0)
},
complete: () => {
// 到達位置后執行的回調函數
this.viewer.scene.camera.flyTo({
destination: self.Cesium.Cartesian3.fromDegrees(self.orgPos.lon, self.orgPos.lat, self.orgPos.height),
orientation: {
heading: self.Cesium.Math.toRadians(0.0),
pitch: self.Cesium.Math.toRadians(-30),
roll: self.Cesium.Math.toRadians(0)
},
complete: () => {},
duration: 3
});
},
duration: 5 // 設置飛行持續時間，默認會根據距離來計算
});
},
initMark() {
const viewer = this.viewer;
const Cesium = this.Cesium;
// 左擊進入360全景
viewer.screenSpaceEventHandler.setInputAction(e => {
viewer.selectedEntity = this.pickEntity(viewer, e.position);
if (!viewer.selectedEntity) {
let obj = this.lonLan(e.position);
this.form.jd = obj.lon;
this.form.wd = obj.lat;
this.form.height = obj.height;
this.showForm = true;
} else {
this.$parent.detailInfo(viewer.selectedEntity._id);
console.log('進入360全景', viewer.selectedEntity._id);
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
// 雙擊entity，會放大視圖，entity居中顯示，且鼠標左鍵失去移動功能，鼠標滾輪失去作用
this.viewer.screenSpaceEventHandler.setInputAction(() => {}, this.Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
},
//雙擊操作
pickAndTrackObject(e) {},
// 設置廣告牌label
addEntities(item) {
const viewer = this.viewer;
const Cesium = this.Cesium;
// label顯示清晰度
viewer.scene.postProcessStages.fxaa.enabled = false;
let wyoming = viewer.entities.add({
id: item.id,
name: item.name,
position: Cesium.Cartesian3.fromDegrees(Number(item.jd), Number(item.wd), Number(item.height) + 10),
//立廣告牌
billboard: {
image: this.img,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
show: true, // default
width: 50, // default: undefined
height: 55
},
//字體標簽樣式
label: {
text: item.name,
font:'normal 32px MicroSoft YaHei',
scale:0.5,
color: Cesium.Color.WHITE,
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
showBackground: true,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(10.0, 8000.0),
// disableDepthTestDistance: 100.0,
pixelOffset: new Cesium.Cartesian2(40, -20) // 調整偏移位置
}
});
},
// 拾取實體
pickEntity(viewer, position) {
const Cesium = this.Cesium;
let picked = viewer.scene.pick(position);
if (picked) {
let id = Cesium.defaultValue(picked.id, picked.primitive.id);
if (id instanceof Cesium.Entity) {
return id;
}
}
return undefined;
}
}
};
</script>
<style scoped lang="less">
.cesium-wrap {
width: 100%;
height: 100%;
display: inline-block;
}
#cesiumContainer {
width: 100%;
height: 100%;
position: absolute;
margin: 0;
padding: 0;
overflow: hidden;
}
.cesiumForm {
width: 300px;
position: absolute;
left: 50%;
top: 50%;
z-index: 10;
|