cesium绘制点、线、面

Raccom

已于 2022-10-18 11:17:07 修改

阅读量4.8k

点赞数 4

分类专栏： WebGIS 文章标签： javascript 前端 3d

于 2022-10-13 16:10:52 首次发布

本文链接：https://blog.csdn.net/Raccon_/article/details/127300020

版权

WebGIS 专栏收录该内容

16 篇文章 7 订阅

订阅专栏

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);