vue cesium 加载倾斜摄影数据并在上面添加自定义标注
在main.js引入
import Cesium from 'cesium/Cesium'
import '../node_modules/cesium/Build/Cesium/Widgets/widgets.css'
Vue.prototype.Cesium = Cesium;
// 以下是组件内容
<template><div class="cesium-wrap">
<div ></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;
background-color: #ccc;
padding: 10px;
transform: translate(-50%, -50%);
}
</style>
以上是 vue cesium 加载倾斜摄影数据并在上面添加自定义标注 的全部内容， 来源链接： utcz.com/z/379347.html
