cesium绘制点、线、面-Toy模板网

这篇具有很好参考价值的文章主要介绍了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进行模型的绘制和加载文章来源地址https://www.toymoban.com/news/detail-514966.html

线

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