前言
Cesium
提供了两种绘制方式,entity
和primitive
,其中entity
是其封装过的绘制类,适合不了解图形学的用户,primitive
则提供了一些比较基础方法,适合底层开发的人员。既然刚开始学,就先从entity
开始吧。
entity
包含了很多的绘制类,本篇介绍point
的绘制。
一、绘制点代码
在上一篇开发环境的代码基础上,增加绘制点代码,具体如下(别忘了使用你自己的Token
,基础环境不知道怎么布置的请参考开发环境搭建),绘制的结果如下图所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Include the CesiumJS JavaScript and CSS files -->
<script src="https://cesium.com/downloads/cesiumjs/releases/1.96/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.96/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
<div id="cesiumContainer" style="position:fixed;left:0px;top:0px;width:100%;height:100%;"></div>
<script>
// Your access token can be found at: https://cesium.com/ion/tokens.
// Replace `your_access_token` with your Cesium ion access token.
Cesium.Ion.defaultAccessToken = '你的Token'; //替换成你的Token
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90);
// Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
const viewer = new Cesium.Viewer('cesiumContainer', {
geocoder:true,//控制右上角第一个位置的查找工具
homeButton:true,//控制右上角第二个位置的home图标
sceneModePicker:true,//控制右上角第三个位置的选择视角模式,2d,3d
baseLayerPicker:true,//控制右上角第四个位置的图层选择器
navigationHelpButton:true,//控制右上角第五个位置的导航帮助按钮
animation:false,//控制左下角的动画器件
timeline:false,//控制下方时间线
fullscreenButton:false,//右下角全屏按钮
vrButton:false,//右下角vr按钮
shouldAnimate: true,//允许动画同步
infoBox : true, //不显示点击要素之后显示的信息
terrainProvider: Cesium.createWorldTerrain()
});
viewer._cesiumWidget._creditContainer.style.display="none";//取消版权信息
let point = viewer.entities.add({
name: "point",
position: new Cesium.Cartesian3.fromDegrees(120, 30, 100), // 点的经纬度坐标
point: {
show: true, //是否显示,默认显示
pixelSize: 15, //点的大小(像素),默认为1
heightReference: Cesium.HeightReference.NONE, //高程参考面:无
// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //高程参考面:地表(设置后点会贴地)
color: Cesium.Color.RED, //颜色,默认为白色
outlineColor: Cesium.Color.BLUE, //轮廓线颜色,默认为黑色
outlineWidth: 1, // 轮廓线宽度(像素),默认为0
scaleByDistance: new Cesium.NearFarScalar(1.5e2, 2.0, 1.5e7, 0.5), //点的大小随视角的距离缩放,默认为空
translucencyByDistance: new Cesium.NearFarScalar(1.5e2, 1.0, 1.5e7, 0.2), //点的透明度随视角的距离变化,默认为空
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(100.0, 2000000.0), //点在该视角距离内可见,其他距离不可见,默认为空
disableDepthTestDistance: 1.5e2, //小于该数值后关闭深度检测,默认为空
}
})
viewer.flyTo(point);
</script>
</body>
</html>
二、参数图解
2.1 name
point
的名称,在鼠标点击点弹出的infoBox
中会显示该名称。
2.2 position
点的坐标,默认是地心坐标系,可使用我们更熟悉的经纬度来表示,转换方法是 new Cesium.Cartesian3.fromDegrees(经度,纬度,高程)
2.3 point
点的绘制参数
2.3.1 show
是否显示,true
为显示,false
为不显示,默认为显示
2.3.2 pixelSize
点的大小,单位为像素,即不论场景如何缩放,点始终占据视图的大小,默认为1
。如下图所示,我们将视角拉上天空,当中国的范围进入全部的视野,点在窗口中依旧占据15
个像素的范围。
2.3.3 heightReference
高程参考面,Cesium
内置的类型,默认为NONE
,即点的高程值是绝对值,没有参考面,这是大多数使用的情况,当你知道点的海拔高程时选择此项。
如果你想让点贴在地表,比如人在地表行走等情况,则可设置参数为CLAMP_TO_GROUND
,此时点的position
参数中的高程参数失去作用,点会被绘制在经纬度所在的地表,简称贴地
。
2.3.4 color
点的颜色,默认为白色,如图中的点的颜色为红色,对应的值为Cesium.Color.RED
,也可以使用RGBA
的格式(A表示透明度),如上图的红色可用new Cesium.Color(1, 0, 0, 1)
表示(rgb的取值为0-1,如果是0-255的可以除以255进行归一化)
。
下图展示了半透明(A=0.5)
颜色的显示效果,对应的值为new Cesium.Color(1, 1, 0, 0.5)
2.3.5 outlineColor
轮廓线的颜色,默认为黑色,如上图中设置为了蓝色。
2.3.6 outlineWidth
轮廓线的大小,单位为像素,默认为0
,即不显示轮廓,如下图所示。轮廓线是否显示在实际应用中可用来表示对象是否被选中等。
2.3.7 scaleByDistance
点的大小随视角的距离缩放,默认为空,即不具有这种效果。如果想要这种效果,可设置new Cesium.NearFarScalar(near, scale, far, scale)
,near
和far
是距离,单位米
,scale
为缩放倍数,如new Cesium.NearFarScalar(1.5e2, 2.0, 1.5e7, 0.5)
表示在视角离点的距离在150
米以内时,点放大2
倍,在距离15000000
米以外时,点缩小为0.5
倍,在150-15000000
之间时,缩放倍数会按距离进行插值,即为渐变缩放
。
2.3.8 translucencyByDistance
点的透明度随视角的距离变化,默认为空,即没有随视角的渐变。参数格式同上,效果图同上。
2.3.9 distanceDisplayCondition
点在该视角距离内可见,其他距离不可见,默认为空,即一直可见。如new Cesium.DistanceDisplayCondition(100.0, 2000000.0)
表示在视角离点的距离为100到2000000之间时可看到该点,其他距离不显示该点,这个参数可用来实现类似百度地图那种不同缩放显示不同内容的功能。
2.3.10 disableDepthTestDistance
小于该数值后关闭深度检测,默认为空,即一直开启深度检测。如disableDepthTestDistance: 1.5e2
表示在视角离点的距离小于150
米时关闭深度检测,2.3.3-2.3.6
的图都是小于150
米未开启深度检测的。