// 初始化cesium地图 JS文件
// 首先获取Cesium API
const Cesium = window.Cesium;
let viewer = null;
/**
* 初始化地球视图函数
*/
function initCesiumMap(dom) {
// 配置cesium专属Access Tokens,就是cesium的访问令牌，每一个使用cesium的用户都需要自己注册，然后获取自己的Access Tokens；
// Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIxZWFlYjAyYS0xN2JlLTQ0OTItOGNkOC05YWJlNGY0MjI2NmQiLCJpZCI6NDkyMjYsImlhdCI6MTYxNzM0NjA3N30.crkTg0Logk_JUA7BROy0r9RqTJWCi8NZpTyu4qI11Fo'
viewer = new Cesium.Viewer(dom, {
mapProjection: new Cesium.WebMercatorProjection(),// 配置 MapProjection 为 WebMercatorProjection，这是 EPSG:3857 所对应的投影
animation: false, // 是否显示动画控件
baseLayerPicker: false, // 是否显示图层选择控件
imageryProvider:false,// 取消默认图像图层
vrButton: false, // 是否显示VR控件
geocoder: false, // 是否显示地名查找控件
timeline: false, // 是否显示时间线控件
sceneModePicker: true, // 是否显示投影方式控件 2d 3d
navigationHelpButton: false, // 是否显示帮助信息控件
navigationInstructionsInitiallyVisible: true, // 帮助按钮，初始化的时候是否展开
infoBox: false, // 是否显示点击要素之后显示的信息
fullscreenButton: true, // 是否显示全屏按钮
selectionIndicator: true, // 是否显示选中指示框
homeButton: true, // 是否显示返回主视角控件
scene3DOnly: false, // 如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
// terrainProvider: new Cesium.EllipsoidTerrainProvider({}) // 不显示地形
})
// 定义home按钮的 相机位置
viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function(commandInfo) {
let cameraData ={
latitude:15.350368311878848,
longitude:110.15845095152412,
height :343708.47910411394,
heading:359.1554378117112,
pitch:-35.66054267553938,
roll:359.98793851701635,
}
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(cameraData.longitude, cameraData.latitude, cameraData.height),
orientation: {
heading: Cesium.Math.toRadians(cameraData.heading),
pitch: Cesium.Math.toRadians(cameraData.pitch),
roll: Cesium.Math.toRadians(cameraData.roll)
},
duration: 2 // 飞行持续时间（秒）
});
// 阻止默认的行为
commandInfo.cancel = true;
});
// 去掉logo
viewer.cesiumWidget.creditContainer['style']['display'] = "none";
}
// 导出
export { Cesium, viewer, initCesiumMap };
<template>
<div>
<div class="map-container" id="map-container">
</div>
<div style="position: absolute;left: 20px;top:20px">
<el-button @click="initMap">initMap</el-button>
<el-button @click="addXyzLayerA">addXyzLayerA</el-button>
<el-button @click="addXyzLayerB">addXyzLayerB</el-button>
<el-button @click="removeLayerByCodeStart">removeLayerByCode</el-button>
<el-button @click="getCameraData">getCameraData</el-button>
<el-button @click="cameraFlyToA">cameraFlyToA</el-button>
<el-button @click="cameraSetViewA">cameraSetViewA</el-button>
</div>
</div>
</template>
<script>
import {initCesiumMap, viewer, Cesium} from './getCesium.js'
export default {
name: 'cesium-page',
data() {
return {}
},
mounted() {
},
methods: {
initMap() {
initCesiumMap('map-container')
},
addXyzLayerA() {
let imageryProvider = new Cesium.UrlTemplateImageryProvider({
"url": 'https://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}',
})
let layer = viewer.imageryLayers.addImageryProvider(imageryProvider);
layer.code = 'layer001'
},
addXyzLayerB() {
let imageryProvider = new Cesium.UrlTemplateImageryProvider({
"url": 'https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
})
let layer = viewer.imageryLayers.addImageryProvider(imageryProvider);
layer.code = 'layer002'
},
removeLayerByCodeStart() {
this.$prompt('请输入layerCode', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputValue: 'layer001'
}).then(({value}) => {
this.removeLayerByCode(value)
}).catch(() => {
});
},
removeLayerByCode(code) {
let layers = viewer.imageryLayers;
for (let i = 0; i < layers.length; i++) {
let layer = layers.get(i);
if (layer['code'] === code) { // 根据自定义属性删除图层
layers.remove(layer);
}
}
},
getCameraData() {
let camera = viewer.camera;
let position = camera.position.clone();
let cartographic = Cesium.Cartographic.fromCartesian(position);
let latitude = Cesium.Math.toDegrees(cartographic.latitude);
let longitude = Cesium.Math.toDegrees(cartographic.longitude);
let height = cartographic.height;
let heading = Cesium.Math.toDegrees(camera.heading);
let pitch = Cesium.Math.toDegrees(camera.pitch);
let roll = Cesium.Math.toDegrees(camera.roll);
let cameraData = {
latitude: latitude,
longitude: longitude,
height: height,
heading: heading,
pitch: pitch,
roll: roll
}
console.log(JSON.stringify(cameraData, null, 2))
},
cameraFlyToA() {
let cameraData = {
"latitude": 16.94902871397598,
"longitude": 110.47916147992255,
"height": 214282.7089169392,
"heading": 0,
"pitch": -35.29190043161959,
"roll": 0
}
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(cameraData.longitude, cameraData.latitude, cameraData.height),
orientation: {
heading: Cesium.Math.toRadians(cameraData.heading),
pitch: Cesium.Math.toRadians(cameraData.pitch),
roll: Cesium.Math.toRadians(cameraData.roll)
}
});
},
cameraSetViewA() {
let cameraData = {
"latitude": 16.94902871397598,
"longitude": 110.47916147992255,
"height": 214282.7089169392,
"heading": 0,
"pitch": -35.29190043161959,
"roll": 0
}
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(cameraData.longitude, cameraData.latitude, cameraData.height),
orientation: {
heading: Cesium.Math.toRadians(cameraData.heading),
pitch: Cesium.Math.toRadians(cameraData.pitch),
roll: Cesium.Math.toRadians(cameraData.roll)
}
});
}
// todo wms图层
// todo 矢量图层
// todo 图层点击 获取要素信息
}
}
</script>
<style lang="scss" scoped>
.map-container {
width: 100vw;
height: 100vh;
}
</style>
网友评论