目录
目录
点击二三维切换按钮时候，切换了会显示一个大图，并没有回到原来的位置上去
depthTestAgainstTerrain取值为true时，球体会有高程遮挡效果（在没有地形时候也会有高程遮挡效果）
-
引入文件
官网（cesiumjs.org）下载Cesium文件夹
引入Cesium下的Cesium.js文件和Cesium下Widgets下的widgets.css
-
Cesium的四大类说明
Viewer是cesium的查看器类，第一个参数是地图主窗口DIV的容器ID，第二个参数option是Viewer的可选设置参数，包含图层、地形时间系统等参数，种类多样，主要作用是对视口中各个组件的配置，比如隐藏仪表盘、时间轴等。
Scene是Cesium的场景类，是所有3D图形对象的容器，是在viewer内部隐式创建的，可以对整个场景环境进行修改，如修改地球的显隐‘光照强度等，也可以修改地球的图层样式和地形数据，也可以在图层上绘制几何体、点线面，也控制着整个场景的交互，如鼠标对场景的控制，相机视口的移动等。示例：将地球设置为隐藏，地球的参数是globe。
viewer.scene.globe.show = false;Entity是Cesium的实体类，entity是由primitive封装的，entity不属于scene。示例：添加一个尺寸为50的红色圆点，并自动移动到圆点位置。
//加点
let entity = viewer.entities.add({
//设置位置
position:Cesium.Cartesian3.fromDegrees(116,39,1000),
//设置大小和颜色
point:{
pixelSize:50,
color:Cesium.Color.RED
}
});
//将摄像头移到圆点位置
viewer.trackedEntity = entity;
DataSourceCollection是Cesium的数据源集合类，是cesium中加载矢量数据的主要方式之一，最大特点是支持加载矢量数据集和外部文件的调用，主要有三种调用方式，分别为CzmlDataSource、kmlDataSource、GeojsonDataSource，分别对应加载czml、kml、Geojson格式的数据。在gis开发中加载矢量数据是必不可少的功能，将矢量数据转换为以上任何一种格式的数据，便可以在cesium中实现矢量数据的加载和存取。举例：加载GeoJson格式的数据，加三条线。
//加载GeoJson格式的数据
viewer.dataSources.add(
Cesium.GeoJsonDataSource.load("./j.json")
)
-
初始化viewer
var viewer = new Cesium.Viewer( 'cesium容器的id', {
animation : false,//是否创建动画小器件，左下角仪表
baseLayerPicker : false,//是否显示图层选择器
fullscreenButton : false,//是否显示全屏按钮
geocoder : false,//是否显示geocoder小器件，右上角查询按钮
homeButton : false,//是否显示Home按钮
infoBox : false,//是否显示信息框
sceneModePicker : false,//是否显示3D/2D选择器
selectionIndicator : false,//是否显示选取指示器组件
timeline : false,//是否显示时间轴
navigationHelpButton : false,//是否显示右上角的帮助按钮
scene3DOnly : true,//如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
clock : new Cesium.Clock(),//用于控制当前时间的时钟对象
selectedImageryProviderViewModel : undefined,//当前图像图层的显示模型，仅baseLayerPicker设为true有意义
imageryProviderViewModels : Cesium.createDefaultImageryProviderViewModels(),//可供BaseLayerPicker选择的图像图层ProviderViewModel数组
selectedTerrainProviderViewModel : undefined,//当前地形图层的显示模型，仅baseLayerPicker设为true有意义
terrainProviderViewModels : Cesium.createDefaultTerrainProviderViewModels(),//可供BaseLayerPicker选择的地形图层ProviderViewModel数组
imageryProvider: new Cesium.UrlTemplateImageryProvider({
url: "http://{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&L={z}&Z={z}&Y={y}&X={x}",
credit: new Cesium.Credit("高德地图服务"),
subdomains: ["webrd01", "webrd02", "webrd03", "webrd04"],
tilingScheme: new Cesium.WebMercatorTilingScheme(),
maximumLevel: 18
}),
terrainProvider : new Cesium.EllipsoidTerrainProvider(),//地形图层提供者，仅baseLayerPicker设为false有意义
skyBox : new Cesium.SkyBox({
sources : {
positiveX : 'Cesium-1.7.1/Skybox/px.jpg',
negativeX : 'Cesium-1.7.1/Skybox/mx.jpg',
positiveY : 'Cesium-1.7.1/Skybox/py.jpg',
negativeY : 'Cesium-1.7.1/Skybox/my.jpg',
positiveZ : 'Cesium-1.7.1/Skybox/pz.jpg',
negativeZ : 'Cesium-1.7.1/Skybox/mz.jpg'
}
}),//用于渲染星空的SkyBox对象
fullscreenElement : document.body,//全屏时渲染的HTML元素,
useDefaultRenderLoop : true,//如果需要控制渲染循环，则设为true
targetFrameRate : undefined,//使用默认render loop时的帧率
showRenderLoopErrors : false,//如果设为true，将在一个HTML面板中显示错误信息
automaticallyTrackDataSourceClocks : true,//自动追踪最近添加的数据源的时钟设置
contextOptions : undefined,//传递给Scene对象的上下文参数（scene.options）
sceneMode : Cesium.SceneMode.SCENE3D,//初始场景模式
mapProjection : new Cesium.WebMercatorProjection(),//地图投影体系
dataSources : new Cesium.DataSourceCollection()
//需要进行可视化的数据源的集合
});var imageryLayers = viewer.imageryLayers;
-
网格影像
var GridImagery= new Cesium.GridImageryProvider();
var GridImageryLayer = imageryLayers.addImageryProvider(GridImagery);//添加网格图层
imageryLayers.raiseToTop(GridImageryLayer);//将网格图层置顶*/-
设置homebutton的位置
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(110.15, 34.54, 110.25, 34.56);//Rectangle(west, south, east, north)-
点击二三维切换按钮时候，切换了会显示一个大图，并没有回到原来的位置上去
解决办法一：
viewer.sceneModePicker.viewModel.duration = 0.0;//去掉二三维切换动画效果 设置这个参数，二三维切换的时候位置就会保持原来的了
原理： cesium底层的代码做了一个判断，如果延时参数大于0，就缩放到全球显示一个切换动画，设成0就没这个动画了
解决办法二：
切换二三维的自己做UI，调用底层的代码切换，都可以实现切换二三维
初始定位：
var boundingSphere = new Cesium.BoundingSphere(Cesium.Cartesian3.fromDegrees(116.4, 39.9, 100), 15000);
// 覆盖主页按钮的行为
viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function(commandInfo) {
// 飞到自定义位置
viewer.camera.flyToBoundingSphere(boundingSphere);
// 告诉home按钮不要做任何事情
commandInfo.cancel = true;
});
// 设置自定义初始位置
viewer.camera.flyToBoundingSphere(boundingSphere, {duration: 0});-
改变回到主视角的英文title为中文
viewer.homeButton.container.childNodes[0].title="回到主视角";-
改变切换全屏的英文title为中文
viewer.fullscreenButton.container.childNodes[0].title="全屏";-
depthTestAgainstTerrain取值为true时，球体会有高程遮挡效果（在没有地形时候也会有高程遮挡效果）
viewer.scene.globe.depthTestAgainstTerrain = false;-
Cesium地下可视化
Cesium三维球开发的时候，会遇到需要对地下数据可视化的情况，如果只是显示的需要，可以采用这个办法：移除球上的imageryLayers，再设置Cesium球体的透明度，将绘制元素的高度设置为负值（需要夸张一定倍数）。
viewer.scene.globe.imageryLayers.removeAll();
viewer.scene.globe.baseColor = new Cesium.Color(0/255,0/255,0/255,0.01);-
设置背景色
viewer.scene.skyBox.show = false;
viewer.scene.backgroundColor = Cesium.Color.RED;-
隐藏月亮和太阳
viewer.scene.sun.show = false;
viewer.scene.moon.show = false;-
加载指北针
loadNavigation(viewer);-
实时显示鼠标划过的经纬高
getPosition(viewer);-
去除版权信息
viewer._cesiumWidget._creditContainer.style.display = "none";-
切换二三维
viewer.scene.morphTo3D();-
改变相机位置
viewer.camera.setView({
// Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
// fromDegrees()方法，将经纬度和高程转换为世界坐标
destination: Cesium.Cartesian3.fromDegrees(117.48, 30.67, 15000.0),
orientation: {
// 指向
heading: Cesium.Math.toRadians(90, 0),
// 视角
pitch: Cesium.Math.toRadians(-90),
roll: 0.0
}
});-
地区搜索
AMapUI.loadUI(['misc/PoiPicker'], function (PoiPicker) {
var poiPicker = new PoiPicker({
//city:'北京',
input: 'search-content'
});
//初始化poiPicker
poiPickerReady(poiPicker);
});-
高程
viewer.terrainProvider = Cesium.createWorldTerrain();
tracker = new GlobeTracker(viewer);// 量算
if (extent != undefined && extent != null) {
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees((extent.xmin + extent.xmax) / 2, (extent.ymin + extent.ymax) / 2, extent.height),
});
}-
关于cesium加载kml线贴地问题
在加载kml文件时，有的文件，线可以贴地，有的不能贴地，主要原因是原始的kml文件中设置了贴地，在cesium中才贴地，否则在cesium中设置clampToGround: true也无法实现贴地；
1、原始数据格式
kml中贴地格式如下：tessellate 标签为1时贴地，没有设置贴地一般就没有tessellate这个标签；
2、cesium中加载kml(主要包含为线和点)
var len = viewer.dataSources.length;
if (len > 0) {
for (var i = 0; i < len; i++) {
var dataSource = viewer.dataSources.get(i);
if (dataSource._name && dataSource._name == "我的地点.kmz") {
viewer.dataSources.remove(dataSource);
}
}
}
var options = {
//开启贴地
camera: viewer.scene.camera,
canvas: viewer.scene.canvas,
clampToGround: true
};
viewer.dataSources.add(Cesium.KmlDataSource.load('kmz文件的位置',options))
.then(function (dataSource) {
viewer.clock.shouldAnimate = false;
//你要飞的位置
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(113.0028, 36.5436, 4010)
});
});
-
点击地图加点事件
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
$("#show-collect-btn").unbind("click").click(function () {
//改变鼠标的style
document.body.setAttribute("style", "cursor:Crosshair");
handler.setInputAction(function(movement) {
let cartesian = viewer.scene.pickPosition(movement.position);
// 将度转为经纬度
let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
var lon = Cesium.Math.toDegrees(cartographic.longitude);
var lat = Cesium.Math.toDegrees(cartographic.latitude);
var MouseHeight = cartographic.height;//模型高度
viewer.entities.remove(citizensBankPark);
citizensBankPark = viewer.entities.add( {
name : 'new_point',
position : Cesium.Cartesian3.fromDegrees(lon*1, lat*1, MouseHeight),
point : { //点
pixelSize : 5,
color : Cesium.Color.RED,
outlineColor : Cesium.Color.WHITE,
outlineWidth : 2
},
label : { //文字标签
text : '新增点',
font : '14pt monospace',
style : Cesium.LabelStyle.FILL_AND_OUTLINE,
color : Cesium.Color.fromCssColorString('#317ef3'),
outlineWidth : 2,
verticalOrigin : Cesium.VerticalOrigin.TOP, //垂直方向计算标签的位置
pixelOffset : new Cesium.Cartesian2( 0, -60 ) //偏移量
},
billboard : { //图标
image : '../image/dingwei2@2x.png',
width : 35,
height : 35,
pixelOffset : new Cesium.Cartesian2( 0, -22 ) //偏移量
}
});
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
});-
关闭在地图上加点操作
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);
//鼠标样式回复默认
document.body.setAttribute("style", "default");-
加载指北针的方法
function loadNavigation(viewer1) {
viewer = viewer1;
var options = {};
options.defaultResetView = Cesium.Rectangle.fromDegrees(80, 22, 130, 50);
options.enableCompass= true; // 罗盘
options.enableZoomControls= false; // 缩放控件
options.enableDistanceLegend= false; // 距离图例
options.enableCompassOuterRing= true; // 指南针外环
viewer.extend(Cesium.viewerCesiumNavigationMixin, {});
}-
实时显示鼠标划过的经纬高的方法
function getPosition(viewer) {
//得到当前三维场景
var scene = viewer.scene;
//得到当前三维场景的椭球体
var ellipsoid = scene.globe.ellipsoid;
var longitudeString = null;
var latitudeString = null;
var height = null;
var cartesian = null;
// 定义当前场景的画布元素的事件处理
var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
//设置鼠标移动事件的处理函数，这里负责监听x,y坐标值变化
handler.setInputAction(function (movement) {
//通过指定的椭球或者地图对应的坐标系，将鼠标的二维坐标转换为对应椭球体三维坐标
cartesian = viewer.camera.pickEllipsoid(movement.endPosition, ellipsoid);
if (cartesian) {
//将笛卡尔坐标转换为地理坐标
var cartographic = ellipsoid.cartesianToCartographic(cartesian);
//将弧度转为度的十进制度表示
longitudeString = Cesium.Math.toDegrees(cartographic.longitude);
latitudeString = Cesium.Math.toDegrees(cartographic.latitude);
//获取相机高度
height = Math.ceil(viewer.camera.positionCartographic.height);
NowHeight = height;
var dfmx = formatDegree(longitudeString * 1);
var dfmy = formatDegree(latitudeString * 1);
$("#mouse-map-info").html("当前视角高度：" + height + "米 经度：" + Math.round(longitudeString * 1 * 10000) / 10000 + " 纬度：" + Math.round(latitudeString * 1 * 10000) / 10000);
$("#mouse-map-info2").html("当前视角高度：" + height + "米 经度：" + dfmx[0] + "°" + dfmx[1] + "′" + dfmx[2] + "″" + " 纬度：" + dfmy[0] + "°" + dfmy[1] + "′" + dfmy[2] + "″");
} else {
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
//设置鼠标滚动事件的处理函数，这里负责监听高度值变化
handler.setInputAction(function (wheelment) {
height = Math.ceil(viewer.camera.positionCartographic.height);
NowHeight = height;
var dfmx = formatDegree(longitudeString * 1);
var dfmy = formatDegree(latitudeString * 1);
$("#mouse-map-info").html("当前视角高度：" + height + "米 经度：" + Math.round(longitudeString * 1 * 10000) / 10000 + " 纬度：" + Math.round(latitudeString * 1 * 10000) / 10000);
$("#mouse-map-info2").html("当前视角高度：" + height + "米 经度：" + dfmx[0] + "°" + dfmx[1] + "′" + dfmx[2] + "″" + " 纬度：" + dfmy[0] + "°" + dfmy[1] + "′" + dfmy[2] + "″");
}, Cesium.ScreenSpaceEventType.WHEEL);
}-
地区搜索
function poiPickerReady(poiPicker) {
window.poiPicker = poiPicker;
var marker = new AMap.Marker();
var infoWindow = new AMap.InfoWindow({
offset: new AMap.Pixel(0, -20)
});
//选取了某个POI
poiPicker.on('poiPicked', function (poiResult) {
// var lnglat = [poiResult.item.location.lng,poiResult.item.location.lat];
// var coord = AMap.map.lngLatToGeodeticCoord(lnglat);
var longitude = parseInt(poiResult.item.location.lng);
var latitude = parseInt(poiResult.item.location.lat);
if (locationEntity) {
viewer.entities.remove(locationEntity); //viewer 3D cesium实体
}
locationEntity = new Cesium.Entity({
id: 'locationEntity',
position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
point: {
pixelSize: 10,
color: Cesium.Color.WHITE.withAlpha(0),
outlineColor: Cesium.Color.WHITE.withAlpha(0),
outlineWidth: 1
}
});
viewer.entities.add(locationEntity);
viewer.flyTo(locationEntity, {
offset: {
heading: Cesium.Math.toRadians(0.0),
pitch: Cesium.Math.toRadians(-90),
range: 10000
}
});
// $('#body-page-box').hide();
});
}-
使marker点闪烁
function f1(lon,lat,height) {
var x=1;
var flog=true;
viewer.entities.add({
name:"圆形区域闪烁",
position:Cesium.Cartesian3.fromDegrees(lon,lat,0),
ellipse : {
semiMinorAxis : 200.0,
semiMajorAxis : 200.0,
height : 0,
material:new Cesium.ColorMaterialProperty(new Cesium.CallbackProperty(function () {
if(flog){
x=x-0.05;
if(x<=0){
flog=false;
}
}else{
x=x+0.05;
if(x>=1){
flog=true;
}
}
return Cesium.Color.RED.withAlpha(x);
},false))
}
});
}
function f2(lon,lat,height,id){
var x=1;
var flog=true;
viewer.entities.add({
id:id,
name:"圆点point闪烁",
position:Cesium.Cartesian3.fromDegrees(lon,lat,height),
point : {
show : true, // default
color :new Cesium.CallbackProperty(function () {
if(flog){
x=x-0.05;
if(x<=0){
flog=false;
}
}else{
x=x+0.05;
if(x>=1){
flog=true;
}
}
return Cesium.Color.RED.withAlpha(x);
},false),
pixelSize : 30, // default: 1
outlineWidth :0
}
});
}-
点击marker出气泡
function popMarker(viewer) {
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
var scene = viewer.scene;
var infoDiv = '<div id="trackPopUp" class="trackPopUp">' +
'<div id="trackPopUpContent" class="leaflet-popup" style="top:5px;left:0;">' +
'<a class="leaflet-popup-close-button" href="#">×</a>' +
'<div class="leaflet-popup-content-wrapper">' +
'<div id="trackPopUpLink" class="leaflet-popup-content"></div></div>' +
'</div></div>';
$("#cesium-map").append(infoDiv);
//绑定鼠标单击
handler.setInputAction(function (movement) {
var pick = scene.pick(movement.position);
if (pick && pick.id) {
$('#trackPopUp').show();
popContent = '<div>' + pick.id._name + '</div><table><tbody>';
var data = {
"id":pick.id._id
};
var requestUrl = 地址;
jPost(requestUrl,JSON.stringify(data),function(res){
if(res.code == 1){
var data = res.data;
for(var key in data){
popContent += '<tr><td>'+key+'</th><td>'+data[key]+'</td></tr>';
}
popContent += '</tbody></table>';
var obj = { position: movement.position, content: popContent };
infoWindow(obj);
}
});
function infoWindow(obj) {
var picked = scene.pick(obj.position);
if (Cesium.defined(picked)) {
var id = Cesium.defaultValue(picked.id, picked.primitive.id);
if (id instanceof Cesium.Entity) {
$(".cesium-selection-wrapper").show();
$('#trackPopUpLink').empty();
$('#trackPopUpLink').append(obj.content);
function positionPopUp(c) {
var x = c.x - ($('#trackPopUpContent').width()) / 2;
var y = c.y - ($('#trackPopUpContent').height());
$('#trackPopUpContent').css('transform', 'translate3d(' + x + 'px, ' + y + 'px, 0)');}
var c = new Cesium.Cartesian2(obj.position.x, obj.position.y);
$('#trackPopUp').show();
positionPopUp(c); // Initial position
$('.leaflet-popup-close-button').click(function () {
$('#trackPopUp').hide();
$('#trackPopUpLink').empty();
$(".cesium-selection-wrapper").hide();
return false;
});
return id;
}
}
}
}
else {
$('#trackPopUp').hide();
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
//绑定地图移动
handler.setInputAction(function (movement) {
$('#trackPopUp').hide();
}, Cesium.ScreenSpaceEventType.LEFT_UP);
//绑定地图缩放
handler.setInputAction(function (movement) {
$('#trackPopUp').hide();
}, Cesium.ScreenSpaceEventType.WHEEL);
//绑定滚轮点击事件
handler.setInputAction(function (movement) {
$('#trackPopUp').hide();
}, Cesium.ScreenSpaceEventType.MIDDLE_DOWN);
}
2503
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
