cesium绘制点、线、面
cesium绘制点、线、面
地图地形上
点
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function (movement) {
// 点击时获取经纬度
let ray = viewer.camera.getPickRay(movement.position);
let cartesian = viewer.scene.globe.pick(ray, viewer.scene);
let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
let lng = Cesium.Math.toDegrees(cartographic.longitude); // 经度
let lat = Cesium.Math.toDegrees(cartographic.latitude); // 纬度
let alt = cartographic.height; // 高度
viewer.entities.add({
name: "点",
position: Cesium.Cartesian3.fromDegrees(lng, lat, alt), // 点生成的位置
point: {
color: Cesium.Color.DEEPSKYBLUE, // 点颜色
outlineColor: Cesium.Color.SKYBLUE, // 点边框颜色
pixelSize: 10, // 点大小
outlineWidth: 2, // 点边框大小
disableDepthTestDistance: Number.POSITIVE_INFINITY, // 受地形遮挡
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, // 生成在地形表面
}
});
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
线
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
const positions = [] // 用于存储点的位置数据数组
handler.setInputAction(function (movement) {
let ray = viewer.camera.getPickRay(movement.position);
let cartesian = viewer.scene.globe.pick(ray, viewer.scene);
let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
let lng = Cesium.Math.toDegrees(cartographic.longitude); // 经度
let lat = Cesium.Math.toDegrees(cartographic.latitude); // 纬度
let alt = cartographic.height; // 高度
positions.push(Cesium.Cartesian3.fromDegrees(lng, lat, alt))
if (positions.length < 1) return;
viewer.entities.add({
name: "线",
polyline: {
positions: positions, // 点位置数组
width: 5.0, // 线宽度
material: new Cesium.PolylineGlowMaterialProperty({
color: new Cesium.Color.fromCssColorString('#000'),
}), // 颜色
depthFailMaterial: new Cesium.PolylineGlowMaterialProperty({
color: new Cesium.Color.fromCssColorString('#ccc'),
}), // 被地形覆盖的虚线颜色
clampToGround: true, // 是否贴和地型
}
});
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
面
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
const positions = [] // 用于存储点的位置数据数组
handler.setInputAction(function (movement) {
let ray = viewer.camera.getPickRay(movement.position);
let cartesian = viewer.scene.globe.pick(ray, viewer.scene);
let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
let lng = Cesium.Math.toDegrees(cartographic.longitude); // 经度
let lat = Cesium.Math.toDegrees(cartographic.latitude); // 纬度
let alt = cartographic.height; // 高度
positions.push(Cesium.Cartesian3.fromDegrees(lng, lat, alt))
if (positions.length < 1) return;
viewer.entities.add({
name: "面",
polygon: {
hierarchy: positions, // 点位置数组
material: new Cesium.Color.fromCssColorString("#FFD700").withAlpha(.2),
// 面颜色
},
});
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
点云模型
在点云模型上绘制点线面与地形上类似 区别在于 取点坐标时需取模型上点的坐标
点
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function (evt) {
if (viewer.scene.mode !== Cesium.SceneMode.MORPHING) {
const pickedObject = viewer.scene.pick(evt.position);
if (viewer.scene.pickPositionSupported && Cesium.defined(pickedObject)) {
const cartesian = viewer.scene.pickPosition(evt.position);
if (Cesium.defined(cartesian)) {
const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
const lng = Cesium.Math.toDegrees(cartographic.longitude);
const lat = Cesium.Math.toDegrees(cartographic.latitude);
const height = cartographic.height; //模型高度
const mapPosition = { x: lng, y: lat, z: height };
// 获取到点云模型上的经度纬度高度
console.log(mapPosition);
viewer.entities.add({
name: "点云点",
position: Cesium.Cartesian3.fromDegrees(lng, lat, height),
point: {
color: Cesium.Color.DEEPSKYBLUE,
outlineColor: Cesium.Color.SKYBLUE,
pixelSize: 10,
outlineWidth: 2,
disableDepthTestDistance: Number.POSITIVE_INFINITY,
// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
// 由于点需要定位在点云模型上 因此不能设置为显示在地面
}
});
}
}
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
线
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
const positions = [] // 用于存储点的位置数据数组
handler.setInputAction(function (evt) {
if (viewer.scene.mode !== Cesium.SceneMode.MORPHING) {
const pickedObject = viewer.scene.pick(evt.position);
if (viewer.scene.pickPositionSupported && Cesium.defined(pickedObject)) {
const cartesian = viewer.scene.pickPosition(evt.position);
if (Cesium.defined(cartesian)) {
const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
const lng = Cesium.Math.toDegrees(cartographic.longitude);
const lat = Cesium.Math.toDegrees(cartographic.latitude);
const height = cartographic.height;//模型高度
const mapPosition = { x: lng, y: lat, z: height };
console.log(mapPosition);
positions.push(Cesium.Cartesian3.fromDegrees(lng, lat, height))
if (positions.length < 1) return;
viewer.entities.add({
name: "点云线",
polyline: {
positions: positions,
width: 5.0,
material: new Cesium.PolylineGlowMaterialProperty({
color: Cesium.Color.GOLD,
}),
depthFailMaterial: new Cesium.PolylineGlowMaterialProperty({
color: Cesium.Color.GOLD,
}),
// clampToGround: true,
// 由于线需要定位在点云模型上 因此不能设置为显示在地面
}
});
}
}
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
面
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
const positions = [] // 用于存储点的位置数据数组
handler.setInputAction(function (evt) {
if (viewer.scene.mode !== Cesium.SceneMode.MORPHING) {
const pickedObject = viewer.scene.pick(evt.position);
if (viewer.scene.pickPositionSupported && Cesium.defined(pickedObject)) {
const cartesian = viewer.scene.pickPosition(evt.position);
if (Cesium.defined(cartesian)) {
const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
const lng = Cesium.Math.toDegrees(cartographic.longitude);
const lat = Cesium.Math.toDegrees(cartographic.latitude);
const height = cartographic.height;//模型高度
const mapPosition = { x: lng, y: lat, z: height };
console.log(mapPosition);
positions.push(Cesium.Cartesian3.fromDegrees(lng, lat, height))
if (positions.length < 1) return;
viewer.entities.add({
name: "点云面",
polygon: {
hierarchy: positions,
material: new Cesium.Color.fromCssColorString("#000").withAlpha(.8),
},
});
}
}
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
CZML
使用CZML进行模型的绘制和加载
线
const getCzmlLine = (cartographicDegrees) => {
return [{
"id": "document",
"name": "CZML Geometries: Polyline",
"version": "1.0"
}, {
"id": "fullLine",
"name": "Yellow full line",
"polyline": {
"positions": {
"cartographicDegrees": cartographicDegrees
},
"material": {
"solidColor": {
"color": {
"rgba": [255, 255, 0, 255]
}
}
}
}
}];
}
const creatLine = (polyLinePositions) => {
// 创建czml文件；得到czml数据源
const polyLineSet = polyLinePositions.reduce((positionCollection, item) => ([...positionCollection, ...Object.values(item)]), [])
const czmlLine = getCzmlLine(polyLineSet);
// 加载提供的URL或CZML对象，替换任何现有数据。
const dataSourcePromise = Cesium.CzmlDataSource.load(czmlLine);
viewer.dataSources.add(dataSourcePromise);
// 添加czml数据到三维球上
// viewer.zoomTo(dataSourcePromise);
}
const positions = [] // 用于存储点的位置数据数组
handler.setInputAction(function (evt) {
let ray = viewer.camera.getPickRay(evt.position);
let cartesian = viewer.scene.globe.pick(ray, viewer.scene);
let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
let lng = Cesium.Math.toDegrees(cartographic.longitude); // 经度
let lat = Cesium.Math.toDegrees(cartographic.latitude); // 纬度
// let alt = cartographic.height; // 高度
let alt = 0; // 高度
positions.push({lng, lat, alt})
if (positions.length < 1) return; // 至少具有两组点的坐标 才划线
creatLine(positions)
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);