平时工作会用到,自己总结成一个简单的工具类。方便各位使用,可能不是很成熟 互相交流学习吧!!!
export default {
infoDetail: [],
handler: null,
detailBox: {},
/**
*
* 地图初始化和加载
*
*/
//地图初始化方法
createMap(divId = '', token = '', type = '', url = '', lon, lat, height) {
if (token) {
Cesium.Ion.defaultAccessToken = token
}
let viewer = new Cesium.Viewer(divId, {
//sceneMode: Cesium.SceneMode.SCENE2D, // 默认二维
animation: false, // 动画小组件
baseLayerPicker: false, // 底图组件,选择三维数字地球的底图(imagery and terrain)。
fullscreenButton: false, // 全屏组件
vrButton: false, // VR模式
geocoder: false, // 地理编码(搜索)组件
homeButton: true, // 首页,点击之后将视图跳转到默认视角
infoBox: false, // 信息框
sceneModePicker: true, // 场景模式,切换2D、3D 和 Columbus View (CV) 模式。
selectionIndicator: false, //是否显示选取指示器组件
timeline: false, // 时间轴
navigationHelpButton: false, // 帮助提示,如何操作数字地球。
// 如果最初应该看到导航说明,则为true;如果直到用户明确单击该按钮,则该提示不显示,否则为false。
navigationInstructionsInitiallyVisible: false,
sceneMode: 3, //1 2D场景、2 2D循环、3 3D场景(默认)
})
return viewer
},
//加载地图影像(不可用)
addImageProvider(viewer = null, type = '', url = '', lon, lat, height) {
if (viewer === null) {
}
if (type == 'xyz') {
viewer.imageryLayers.addImageryProvider(
new Cesium.UrlTemplateImageryProvider({
url: url, //在各地区数据库中获取加载的地址
})
)
} else if (type == 'superMap') {
viewer.imageryLayers.addImageryProvider(
new Cesium.SuperMapImageryProvider({
url: url,
minimumLevel: 1,
maximumLevel: 18,
transparent: false,
tilingScheme: new Cesium.GeographicTilingScheme(), //设置4326 EPSG:4610
})
)
} else if (type == 'WMS') {
viewer.imageryLayers.addImageryProvider(
new Cesium.WebMapServiceImageryProvider({
url: url,
layers: 'cite:new-wgs84',
parameters: {
FORMAT: 'image/png',
transparent: true,
exceptions: 'application/vnd.ogc.se_inimage',
},
})
)
}
// viewer.scene.camera.setView({
// destination: Cesium.Cartesian3.fromDegrees(lon, lat, height),
// })
// viewer.scene.globe.depthTestAgainstTerrain = false
// viewer.trackedEntity = undefined
// viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
},
//实时经纬度
realTimeLocation(viewer, longitudeId, latitudeId, altitudeId) {
// let viewer = window.Viewer;
var longitude_show = document.getElementById(longitudeId)
var latitude_show = document.getElementById(latitudeId)
var altitude_show = document.getElementById(altitudeId)
var canvas = viewer.scene.canvas
//具体事件的实现
var ellipsoid = viewer.scene.globe.ellipsoid
var handler = new Cesium.ScreenSpaceEventHandler(canvas)
handler.setInputAction(function (movement) {
//捕获椭球体,将笛卡尔二维平面坐标转为椭球体的笛卡尔三维坐标,返回球体表面的点
var cartesian = viewer.camera.pickEllipsoid(movement.endPosition, ellipsoid)
if (cartesian) {
//将笛卡尔三维坐标转为地图坐标(弧度)
var cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian)
//将地图坐标(弧度)转为十进制的度数
var lat_String = Cesium.Math.toDegrees(cartographic.latitude).toFixed(6)
var log_String = Cesium.Math.toDegrees(cartographic.longitude).toFixed(6)
var alti_String = (viewer.camera.positionCartographic.height / 1000).toFixed(2)
longitude_show.innerHTML = log_String
latitude_show.innerHTML = lat_String
altitude_show.innerHTML = alti_String
let data = {
lat: lat_String,
lon: log_String,
alti: alti_String + 'km',
}
return data
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
},
/**
* 地图交互
*/
//点击获取wgs84点位坐标
clickWgs84Point(viewer) {
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
handler.setInputAction((event) => {
let point = windowToWgs84(viewer, event.position)
return point
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)
handler.setInputAction((event) => {
handler.destroy()
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
},
//创建点位
createPoint(viewer, position, imgUrl, id = '', name = '', labelTest = '', data) {
if (id == '' && name == '' && labelTest == '') {
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(parseFloat(position.lon), parseFloat(position.lat)),
billboard: {
image: require(imgUrl),
scale: 0.5,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
},
})
} else {
viewer.entities.add({
id: id,
name: labelTest,
position: Cesium.Cartesian3.fromDegrees(position.lon, position.lat),
billboard: {
image: imgUrl,
scale: 0.5,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
},
label: {
text: labelTest,
show: true,
showBackground: true,
font: '14px monospace',
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new Cesium.Cartesian2(-35, -20), //left top
},
})
}
},
//地图缩放
tipToPoint(viewer,position) {
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(position.lon, position.lat, position.height),
})
},
/**
* 坐标系转换
*/
// 3维笛卡尔转WGS84坐标
cartesain3ToWGS84(viewer, cartesian3) {
// 笛卡尔坐标转wgs84坐标x、y、z
var ellipsoid = viewer.scene.globe.ellipsoid
var xyz = new Cesium.Cartesian3(cartesian3.x, cartesian3.y, cartesian3.z)
var wgs84 = ellipsoid.cartesianToCartographic(xyz)
let position = {
lon: Cesium.Math.toDegrees(wgs84.longitude),
lat: Cesium.Math.toDegrees(wgs84.latitude),
}
console.log(
'84坐标:',
Cesium.Math.toDegrees(wgs84.longitude) + ', ' + Cesium.Math.toDegrees(wgs84.latitude) + ', ' + wgs84.height
)
return position
},
}