一、entity属性值修改
setVlaue()
getValue()
例:viewer.entities._entities._array[0]._polygon._outlineColor.setValue(Cesium.Color.BLUE.withAlpha(0));
二、加载3D模型(primitive)
var origin = Cesium.Cartesian3.fromDegrees(113.778584, 34.759197, 200000.0);
var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(origin);
var model = viewer.scene.primitives.add(Cesium.Model.fromGltf({
url: './imgs/pao2.gltf',
show: true, // default
modelMatrix: modelMatrix,
scale: 2.0, // 模型尺寸大小
minimumPixelSize: 128, // 模型最小像素
maximumScale: 20000, //模型最大尺寸 never larger than 20000 * model size (overrides minimumPixelSize)
}));
三、cesium-navigation-es6插件(罗盘,导航仪(放大/缩小)和距离刻度)
import CesiumNavigation from "cesium-navigation-es6";
CesiumNavigation(viewer, {
enableCompass: true, //启用罗盘
enableCompassOuterRing: true, //启用指南针
enableZoomControls: true, //缩放控件
});
四、绘制虚线 虚线圆
//虚线
var polyline1 = viewer.entities.add({
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([
110.0,
50.1,
112.0,
50.1
]),
width: 3,
material: new Cesium.PolylineDashMaterialProperty({
color: Cesium.Color.YELLOW,
dashLength: 20 //短划线长度
})
}
});
//虚线圆
var scene = viewer.scene;
var center = Cesium.Cartesian3.fromDegrees(120, 30);
var radius = 250000.0;
var solidWhite = Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.YELLOW);
var circleOutlineInstance = new Cesium.GeometryInstance({
geometry: new Cesium.CircleOutlineGeometry({
center: center,
radius: radius
}),
attributes: {
color: solidWhite
}
});
var circleOutlineInstance1 = new Cesium.GeometryInstance({
geometry: new Cesium.CircleOutlineGeometry({
center: Cesium.Cartesian3.fromDegrees(124, 30),
radius: 250000
}),
attributes: {
color: solidWhite
}
});
var circleOutlineInstance2 = new Cesium.GeometryInstance({
geometry: new Cesium.CircleOutlineGeometry({
center: Cesium.Cartesian3.fromDegrees(104, 30),
radius: 250000
}),
attributes: {
color: solidWhite
}
});
scene.primitives.add(
new Cesium.Primitive({
geometryInstances: [circleOutlineInstance, circleOutlineInstance1, circleOutlineInstance2],
appearance: new Cesium.PolylineMaterialAppearance({
material: Cesium.Material.fromType(Cesium.Material.PolylineDashType, {
color: Cesium.Color.CYAN, //线条颜色
gapColor: Cesium.Color.TRANSPARENT, //间隔颜色
dashLength: 20 //短划线长度
})
})
})
);
var entity = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(104, 30, 2.61),
point: {
color: Cesium.Color.RED, //点位颜色
pixelSize: 10 //像素点大小
},
label: {
text: 'label名',
font: '14pt Source Han Sans CN', //字体样式
fillColor: Cesium.Color.BLACK, //字体颜色
backgroundColor: Cesium.Color.AQUA, //背景颜色
showBackground: true, //是否显示背景颜色
style: Cesium.LabelStyle.FILL, //label样式
outlineWidth: 2,
verticalOrigin: Cesium.VerticalOrigin.CENTER, //垂直位置
horizontalOrigin: Cesium.HorizontalOrigin.LEFT, //水平位置
pixelOffset: new Cesium.Cartesian2(10, 0) //偏移
}
});
viewer.zoomTo(entity);//居中到该点
五、实体类相关
1、设置广告牌、文本等实体类远小近大的视觉感
scaleByDistance: new Cesium.NearFarScalar(2000, 1, 8000, 0),
含义就是在摄像头和Billboard之间的距离在2000-8000之间的时候,Billboard的Scale比例按照1->0之间的插值来缩放。当摄像头和Billboard之间距离小于2000的时候,就按照2000时候的值1处理(这里如果不是1,而是0.5,那小于2000时候的比例就是0.5了)。而当大于8000的时候,就会按照0(其实就是8000对应的比例值)缩放
2、开启地形(高程)避免遮挡
eyeOffset: new Cesium.Cartesian3(0, 0, -10000)
设置为负值,使其在更上层
六、边界5公里范围绘制(缓冲区)
var radius = 5;
$.getJSON("边界.json", function (areaData)
{
var polygon = areaData.features[0].geometry.coordinates[0];
var buffered = turf.buffer(turf.polygon(polygon), radius, { units: 'kilometers' });
wcesium.addPolygon(buffered);
})
七、虚线(设置地下材质 depthFailMaterial)
viewer.entities.add({
name: "",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights(jsonline),
width: 4,
material: new Cesium.PolylineOutlineMaterialProperty({
color: linecolor,
outlineWidth: 0.1,
outlineColor: l2,
}),
depthFailMaterial: new Cesium.PolylineOutlineMaterialProperty({
color: linecolor,
outlineWidth: 0.1,
outlineColor: l2,
}),
},
});