Cesium 简单使用
依赖
cesium
基础变量
// 外部服务基础url
var baseUrl = 'http://localhost:8093';
// cesiumlab切片地址
var mapUrl = baseUrl + '/Earth/{z}/{x}/{y}.jpg';
// cesiumlab切片地址
var mapUrl1 = baseUrl + '/cesiumKlmy/{z}/{x}/{y}.png';
// 项目中心位置
var mapCenter = [85.03257700820414, 45.600000206741775];
// 4326
var simpleScheme = new Cesium.GeographicTilingScheme();
创建地图
// 创建地图实例
var viewer = new Cesium.Viewer("cesiumContainer", {
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,
orderIndependentTranslucency: false, //去掉大气层黑圈
imageryProvider: new Cesium.SingleTileImageryProvider({
url: baseUrl + '/Cesium/R-C.jpg'
}),
contextOptions: {
webgl: {
alpha: true,
}
},
});
// 获取 事件拦截
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
// 移除底图
viewer.imageryLayers.removeAll();
viewer.scene.globe.baseColor = Cesium.Color.fromCssColorString("#7f7f7f");
viewer.scene.skyBox.show = false;
viewer._cesiumWidget._creditContainer.style.display = "none"
// 抗锯齿
viewer.scene.fxaa = true
viewer.scene.postProcessStages.fxaa.enabled = true
添加图层
viewer.imageryLayers.addImageryProvider(
new Cesium.UrlTemplateImageryProvider({
url: mapUrl,
fileExtension: 'jpg',
maximumLevel: 0,
tilingScheme: simpleScheme //设置4326
})
)
viewer.imageryLayers.addImageryProvider(
new Cesium.UrlTemplateImageryProvider({
url: mapUrl1,
fileExtension: 'png',
maximumLevel: 21,
tilingScheme: simpleScheme //设置4326
})
)
事件
绑定鼠标事件
/**
* 鼠标左键事件监听
* @param myFunc普通回调，myFunc2点击实体回调 回调
*/
function mouseLeftClick(myFunc = null, myFunc2 = null) {
var that = this
let viewer = that.viewer
handler.setInputAction(function (evt) {
// 点击处的坐标
let x_y = [evt.position.x, evt.position.y]
console.log("x_y:", x_y)
//将像素位置转为经纬度
let earthPosition = viewer.camera.pickEllipsoid(evt.position, viewer.scene.globe.ellipsoid);
let cartographic = Cesium.Cartographic.fromCartesian(earthPosition, viewer.scene.globe.ellipsoid, new Cesium.Cartographic());
let lng = Cesium.Math.toDegrees(cartographic.longitude);
let lat = Cesium.Math.toDegrees(cartographic.latitude);
let height = cartographic.height;
let lng_lat = [lng, lat];
console.log("lng_lat:", lng_lat)
//设置监听方法
let scene = viewer.scene;
// 实体选择获取
let pick = scene.pick(evt.position);
// 没点击到实体
if (pick == undefined) {
console.log("左键点击空白处");
} else {
console.log("左键点击实体处:", pick);
myFunc2({ lng_lat, x_y, pick });
}
// 执行回调
if (myFunc) {
myFunc({ lng_lat, x_y, pick });
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
return that;
}
标点
/* 事件绑定方法区---------*/
function onAddPoint() {
removeAllEvent()
// 鼠标左键点击事件绑定
mouseLeftClick(addPoint);
}
//点的描绘信息
point_options = {
show: true, //是否展示
pixelSize: 15, //点的大小
// heightReference:HeightReference.NONE,//相对高度
color: Cesium.Color.RED, //颜色
outlineColor: Cesium.Color.SKYBLUE, //边框颜色
outlineWidth: 2, //边框宽度
// scaleByDistance:new Cesium.NearFarScalar(100, 5, 10000, 15), //缩放距离设置
// translucencyByDistance:new Cesium.NearFarScalar(100, 0.2, 10000, 0.8),//点的半透明设置
// distanceDisplayCondition:new Cesium.DistanceDisplayCondition(1000, 10000),//点的显隐距离
// disableDepthTestDistance:5000000,//禁用深度测试距离
}
// 添加点回调方法
function addPoint(evt) {
console.log("回调方法被调用了")
let { lng_lat } = evt;
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(...lng_lat),
point: point_options
});
}
点击实体
/* 事件绑定方法区---------*/
function onClickEntity() {
removeAllEvent()
// 鼠标左键点击事件绑定
mouseLeftClick(null,clickEntity);
}
// 点击实体的回调方法
function clickEntity(evt) {
console.log("回调方法被调用了")
let { lng_lat, x_y, pick } = evt;
console.log("实体信息：", pick)
}
demo
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@import url(http://localhost:8093/Cesium/Widgets/widgets.css);
style>
<style>
html,
body,
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.option {
position: fixed;
left: 10px;
top: 10px;
}
.btn {
/* width: 48px; */
/* height: 48px; */
background-color: rgba(115, 115, 115, 0.5);
font-size: 16px;
z-index: 10000;
cursor: pointer;
}
.btn:hover {
background-color: rgb(200, 200, 200);
/* border: white 1px solid; */
box-shadow: 0 0 1px 1px rgb(255, 255, 255);
}
style>
<title>地图演示title>
<script src="http://localhost:8093/Cesium/Cesium.js">script>
head>
<body>
<div id="cesiumContainer">
div>
<div class="option">
<div class="btn" onclick="removeAllEvent()">清除鼠标左键事件div>
<div class="btn" onclick="removeAllEntity()">清除所有实体div>
<div class="btn" onclick="cancelLook()">取消视角锁定div>
<div class="btn" onclick="onAddPoint()">左键事件:标点div>
<div class="btn" onclick="onClickEntity()">左键事件:点击实体div>
div>
body>
<script>
// 外部服务基础url
var baseUrl = 'http://localhost:8093';
var mapUrl = baseUrl + '/Earth/{z}/{x}/{y}.jpg';
// cesiumlab切片地址
var mapUrl1 = baseUrl + '/cesiumKlmy/{z}/{x}/{y}.png';
// 项目中心位置
var mapCenter = [85.03257700820414, 45.600000206741775];
// 4326
var simpleScheme = new Cesium.GeographicTilingScheme();
// 创建地图实例
var viewer = new Cesium.Viewer("cesiumContainer", {
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,
orderIndependentTranslucency: false, //去掉大气层黑圈
imageryProvider: new Cesium.SingleTileImageryProvider({
url: baseUrl + '/Cesium/R-C.jpg'
}),
contextOptions: {
webgl: {
alpha: true,
}
},
});
// 获取 事件拦截
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
// 移除底图
viewer.imageryLayers.removeAll();
viewer.scene.globe.baseColor = Cesium.Color.fromCssColorString("#7f7f7f");
viewer.scene.skyBox.show = false;
viewer._cesiumWidget._creditContainer.style.display = "none"
// 抗锯齿
viewer.scene.fxaa = true
viewer.scene.postProcessStages.fxaa.enabled = true
viewer.imageryLayers.addImageryProvider(
new Cesium.UrlTemplateImageryProvider({
url: mapUrl,
fileExtension: 'jpg',
maximumLevel: 0,
tilingScheme: simpleScheme //设置4326
})
)
viewer.imageryLayers.addImageryProvider(
new Cesium.UrlTemplateImageryProvider({
url: mapUrl1,
fileExtension: 'png',
maximumLevel: 21,
tilingScheme: simpleScheme //设置4326
})
)
/* 事件绑定方法区-------------------------------------------------------*/
function onAddPoint() {
removeAllEvent()
// 鼠标左键点击事件绑定
mouseLeftClick(addPoint);
}
function onClickEntity() {
removeAllEvent()
// 鼠标左键点击事件绑定
mouseLeftClick(null,clickEntity);
}
/**
* 鼠标左键事件监听
* @param myFunc普通回调，myFunc2点击实体回调 回调
*/
function mouseLeftClick(myFunc = null, myFunc2 = null) {
var that = this
let viewer = that.viewer
handler.setInputAction(function (evt) {
// 点击处的坐标
let x_y = [evt.position.x, evt.position.y]
console.log("x_y:", x_y)
//将像素位置转为经纬度
let earthPosition = viewer.camera.pickEllipsoid(evt.position, viewer.scene.globe.ellipsoid);
let cartographic = Cesium.Cartographic.fromCartesian(earthPosition, viewer.scene.globe.ellipsoid, new Cesium.Cartographic());
let lng = Cesium.Math.toDegrees(cartographic.longitude);
let lat = Cesium.Math.toDegrees(cartographic.latitude);
let height = cartographic.height;
let lng_lat = [lng, lat];
console.log("lng_lat:", lng_lat)
//设置监听方法
let scene = viewer.scene;
// 实体选择获取
let pick = scene.pick(evt.position);
// 没点击到实体
if (pick == undefined) {
console.log("左键点击空白处");
} else {
console.log("左键点击实体处:", pick);
if(myFunc2){
myFunc2({ lng_lat, x_y, pick });
}
}
// 执行回调
if (myFunc) {
myFunc({ lng_lat, x_y, pick });
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
return that;
}
//点的描绘信息
point_options = {
show: true, //是否展示
pixelSize: 15, //点的大小
// heightReference:HeightReference.NONE,//相对高度
color: Cesium.Color.RED, //颜色
outlineColor: Cesium.Color.SKYBLUE, //边框颜色
outlineWidth: 2, //边框宽度
// scaleByDistance:new Cesium.NearFarScalar(100, 5, 10000, 15), //缩放距离设置
// translucencyByDistance:new Cesium.NearFarScalar(100, 0.2, 10000, 0.8),//点的半透明设置
// distanceDisplayCondition:new Cesium.DistanceDisplayCondition(1000, 10000),//点的显隐距离
// disableDepthTestDistance:5000000,//禁用深度测试距离
}
// 添加点回调方法
function addPoint(evt) {
console.log("回调方法被调用了")
let { lng_lat } = evt;
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(...lng_lat),
point: point_options
});
}
// 点击实体的回调方法
function clickEntity(evt) {
console.log("回调方法被调用了")
let { lng_lat, x_y, pick } = evt;
console.log("实体信息：", pick)
}
// 清除鼠标左键事件
function removeAllEvent() {
console.log("清除鼠标左键事件")
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
}
// 清除所有实体
function removeAllEntity(){
console.log("清除所有实体")
viewer.entities.removeAll();
}
//取消视角锁定
function cancelLook() {
viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY)
viewer.trackedEntity = undefined
}
// 定位
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(mapCenter[0], mapCenter[1], 1000), // 设置位置
orientation: {
heading: Cesium.Math.toRadians(0), // 方向
pitch: Cesium.Math.toRadians(-90.0),// 倾斜角度
roll: 0
},
duration: 0, // 设置飞行持续时间，默认会根据距离来计算
pitchAdjustHeight: -90, // 如果摄像机飞越高于该值，则调整俯仰俯仰的俯仰角度，并将地球保持在视口中。
maximumHeight: 10000, // 相机最大飞行高度
});
// 修改默认home的位置
viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function (e) {
e.cancel = true;
//你要飞的位置
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(mapCenter[0], mapCenter[1], 1000.0)
});
});
script>
html>