问题清单
本章内容,我们需要解决以下几个问题:
1 cesium如何绘制点
2 cesium如何绘制高清点
1 点对象PointGraphics
cesium期望我们使用简单的entity去管理点对象
var point_options = {
show: true, //是否展示
pixelSize: 20, //点的大小
// heightReference:HeightReference.NONE,//相对高度
color: Cesium.Color.RED, //颜色
outlineColor: Cesium.Color.SKYBLUE, //边框颜色
outlineWidth: 5, //边框宽度
// 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,//禁用深度测试距离
}
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(113.27, 23.13),
point: point_options
});
我们可以看到,绘制出来的点,效果并不是很好
2 原型点 PointPrimitive
这是cesium最本质的绘制点的方法
var pointPrimitives = viewer.scene.primitives.add(new Cesium.PointPrimitiveCollection({
blendOption:Cesium.BlendOption.TRANSLUCENT,//透明混合度,用于大数据量渲染时提高效率
// debugShowBoundingVolume:true
}));
pointPrimitives.add({
outlineColor : Cesium.Color.WHITE,
outlineWidth : 2.0,
pixelSize : 20,
color : Cesium.Color.YELLOW,
position : Cesium.Cartesian3.fromDegrees(113.27, 23.13, 1000),
disableDepthTestDistance:Number.POSITIVE_INFINITY //永远禁用深度测试
});
这种原始方法适合绘制大数据量的点,但是,我们发现,效果也很一般
### 3 高清点设置
经过上面的测试,我们发现,绘制出来的点都特么又丑又模糊;那么怎么办呢
经过查询资料,我发现,需要做以下两个动作:
1 关闭抗锯齿
viewer.scene.postProcessStages.fxaa.enabled = false;
2 调整分辨率
var supportsImageRenderingPixelated = viewer.cesiumWidget._supportsImageRenderingPixelated;
if (supportsImageRenderingPixelated) {
var vtxf_dpr = window.devicePixelRatio;
while (vtxf_dpr >= 2.0) {
vtxf_dpr /= 2.0;
}
viewer.resolutionScale = vtxf_dpr;
}
然后效果刚刚的