需求：在地球上点击一个位置，自动在地球上加一个点
方法代码：
let AddPoint = function (params) {
if(params.lon === undefined || params.lat === undefined){
alert('请提供经纬度!');
return;
}
let entity = new Cesium.Entity({
id: params.id || `${params.lon}点`,
name:params.name || '点',
show:true,
position:Cesium.Cartesian3.fromDegrees(params.lon, params.lat),
point:new Cesium.PointGraphics ( {
show : true,
pixelSize : params.pixelSize || 5,
heightReference : params.pixelSize || Cesium.HeightReference.NONE,
color : params.color || new Cesium.Color ( 255 , 255 , 0 , 1 ),
outlineColor : params.color || new Cesium.Color ( 0 , 0 , 0 , 0 ),
outlineWidth : params.outlineWidth || 0,
scaleByDistance : params.scaleByDistance || new Cesium.NearFarScalar ( 0 , 1 , 5e10 , 1 ),
translucencyByDistance : params.translucencyByDistance || new Cesium.NearFarScalar ( 0 , 1 , 5e10 , 1 ),
distanceDisplayCondition : params.translucencyByDistance || new Cesium.DistanceDisplayCondition(0, 4.8e10),
} )
});
viewer.entities.add(entity);
return entity;
}
参数说明：
id: 实体ID
name: 实体name
lon: 经度 required
lat: 纬度 required
pixelSize: 点的大小，以像素为单位
heightReference: 相对于地面的位置
color: 点的颜色
outlineColor: 外边框颜色
outlineWidth: 外边框大小
scaleByDistance: 不同距离缩放比
translucencyByDistance: 不同距离透明度
distanceDisplayCondition: 显示的范围
heightReference:表示相对于地形的位置。
1. Cesium.HeightReference.CLAMP_TO_GROUND 该位置固定在地形上。
2. static constant Cesium.HeightReference.NONE 该位置是绝对的。
3. static constant Cesium.HeightReference.RELATIVE_TO_GROUND 位置高度是指地形上方的高度。
实例
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="Cesium-1.66/Build/Cesium/Widgets/widgets.css">
<style>
#map3d{
height: 400px;
width: 600px;
background-color: red;
margin:0 auto;
}
</style>
</head>
<body>
<div id="map3d"></div>
</body>
<script src="Cesium-1.66/Build/Cesium/Cesium.js"></script>
<script>
viewer = new Cesium.Viewer('map3d', {
selectionIndicator: false,
animation: false,
baseLayerPicker: false,
timeline: false,
sceneModePicker: true,
navigationHelpButton: false,
useDefaultRenderLoop: true,
showRenderLoopErrors: true,
fullscreenButton: false,
infoBox: false,
imageryProvider: new Cesium.UrlTemplateImageryProvider({
url: "http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali"
})
});
viewer._cesiumWidget._creditContainer.style.display = "none";
viewer.camera.setView({
destination:Cesium.Cartesian3.fromDegrees(116.46,39.92,10000000.0),
});
let handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(function(event) {
var earthPosition = viewer.camera.pickEllipsoid(event.position,viewer.scene.globe.ellipsoid);
if (Cesium.defined(earthPosition)) {
let ellipsoid = viewer.scene.globe.ellipsoid;
let cartographic = ellipsoid.cartesianToCartographic(earthPosition);
let lat = Cesium.Math.toDegrees(cartographic.latitude);
let lon = Cesium.Math.toDegrees(cartographic.longitude);
let params = {
id:'测试'+lon,
name:'text',
lon:lon,
lat:lat
};
alert = AddPoint(params);
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
</script>
<script>
let AddPoint = function (params) {
if(params.lon === undefined || params.lat === undefined){
alert('请提供经纬度!');
return;
}
let entity = new Cesium.Entity({
id: params.id || `${params.lon}点`,
name:params.name || '点',
show:true,
position:Cesium.Cartesian3.fromDegrees(params.lon, params.lat),
point:new Cesium.PointGraphics ( {
show : true,
pixelSize : params.pixelSize || 5,
heightReference : params.pixelSize || Cesium.HeightReference.NONE,
color : params.color || new Cesium.Color ( 255 , 255 , 0 , 1 ),
outlineColor : params.color || new Cesium.Color ( 0 , 0 , 0 , 0 ),
outlineWidth : params.outlineWidth || 0,
scaleByDistance : params.scaleByDistance || new Cesium.NearFarScalar ( 0 , 1 , 5e10 , 1 ),
translucencyByDistance : params.translucencyByDistance || new Cesium.NearFarScalar ( 0 , 1 , 5e10 , 1 ),
distanceDisplayCondition : params.translucencyByDistance || new Cesium.DistanceDisplayCondition(0, 4.8e10),
} )
});
viewer.entities.add(entity);
return entity;
}
</script>
</html>
运行结果
