cesium加载线面

最新推荐文章于 2024-04-23 14:11:13 发布
小仙有礼了
最新推荐文章于 2024-04-23 14:11:13 发布
阅读量658
点赞数
分类专栏： cesium 文章标签： javascript vue.js
本文链接：https://blog.csdn.net/CFXXXL/article/details/123678762
版权
cesium 专栏收录该内容
22 篇文章 5 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Use correct character set. -->
    <meta charset="utf-8">
    <!-- Tell IE to use the latest, best version. -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
     <title>Hello World!</title>
    <script src="./node_modules/cesium/Build/Cesium/Cesium.js"></script>
    <script src="./js/Sandcastle-header.js"></script>
    <link href="./node_modules/cesium/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>

<body>
      <div id="cesiumContainer"></div>
      <div id="toolbar" style="margin: 5px;padding: 2px 5px;position: absolute;top:50px"></div>
      <script>
        var activeShapePoints = [];//每个点的X,Y,Z轴的坐标
        var activeShape;//绘制图层的容器
        var floatingPoint;
        //Cesium.Ion.defaultAccessToken = 'your_access_token';
        //查看器
        var viewer = new Cesium.Viewer('cesiumContainer', {
            selectionIndicator: false,//是否显示选取指示器组件 点击时出现的
            infoBox: false,//是否显示信息框 点击时右上角出现的
            // 注释时相当于使用默认地形，解开注释相当于使用全球地形
            terrainProvider: Cesium.createWorldTerrain()//地形图层提供者，仅baseLayerPicker设为false有意义
        });
        console.log(viewer)

        //new Cesium.ScreenSpaceEventHandler(element);处理用户输入的事件，可以添加自定义功能以在用户输入输入时执行
        var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);

        //双击鼠标左键清除默认事件
        viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
        //绘制点
        function createPoint(worldPosition) {
            var point = viewer.entities.add({
                position: worldPosition,
                point: {
                    color: Cesium.Color.FIREBRICK,//设置颜色
                    pixelSize: 7,
                    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,//该位置固定在地形上
                }
            });
            return point;
        }
        //初始化为线
        var drawingMode = 'line';
        //绘制图形
        function drawShape(positionData) {
            var shape;
            if (drawingMode === 'line') {
                shape = viewer.entities.add({
                    polyline: {
                        positions: positionData,
                        clampToGround: true,
                        width: 3,
                        material: new Cesium.ColorMaterialProperty(Cesium.Color.FIREBRICK.withAlpha(0.7))
                    },
                });
            } else if (drawingMode === 'polygon') {
                shape = viewer.entities.add({
                    polygon: {
                        hierarchy: positionData,
                        material: new Cesium.ColorMaterialProperty(Cesium.Color.FIREBRICK.withAlpha(0.7))
                    }
                });
            } else if (drawingMode === 'circle') {
                //当positionData为数组时绘制最终图，如果为function则绘制动态图
                var value = typeof positionData.getValue === 'function' ? positionData.getValue(0) : positionData;
                shape = viewer.entities.add({
                    position: activeShapePoints[0],
                    name: 'Blue translucent, rotated, and extruded ellipse with outline',
                    type: 'Selection tool',
                    ellipse: {
                        semiMinorAxis: new Cesium.CallbackProperty(function () {
                            //半径 两点间距离
                            var r = Math.sqrt(Math.pow(value[0].x - value[value.length - 1].x, 2) + Math
                                .pow(value[0].y - value[value.length - 1].y, 2));
                            return r ? r : r + 1;
                        }, false),
                        semiMajorAxis: new Cesium.CallbackProperty(function () {
                            var r = Math.sqrt(Math.pow(value[0].x - value[value.length - 1].x, 2) + Math
                                .pow(value[0].y - value[value.length - 1].y, 2));
                            return r ? r : r + 1;
                        }, false),
                        material: Cesium.Color.BLUE.withAlpha(0.5),
                        outline: true
                    }
                });
            } else if (drawingMode === 'rectangle') {
                //当positionData为数组时绘制最终图，如果为function则绘制动态图
                var arr = typeof positionData.getValue === 'function' ? positionData.getValue(0) : positionData;
                shape = viewer.entities.add({
                    name: 'Blue translucent, rotated, and extruded ellipse with outline',
                    rectangle: {
                        coordinates: new Cesium.CallbackProperty(function () {
                            var obj = Cesium.Rectangle.fromCartesianArray(arr);
                            //if(obj.west==obj.east){ obj.east+=0.000001};
                            //if(obj.south==obj.north){obj.north+=0.000001};
                            return obj;
                        }, false),
                        material: Cesium.Color.RED.withAlpha(0.5)
                    }
                });
            }
            return shape;
        }



        //鼠标左键
        //设置要在输入事件上执行的功能。
        handler.setInputAction(function (event) {
            // scene.pickPosition只有在开启地形深度检测，且不使用默认地形时是准确的。
            var earthPosition = viewer.scene.pickPosition(event.position);
            // `earthPosition` will be undefined if our mouse is not over the globe.
            if (Cesium.defined(earthPosition)) {
                if (activeShapePoints.length === 0) {
                    floatingPoint = createPoint(earthPosition);
                    activeShapePoints.push(earthPosition);
                    var dynamicPositions = new Cesium.CallbackProperty(function () {
	                    if (drawingMode === 'polygon') {
			              return new Cesium.PolygonHierarchy(activeShapePoints);//new Cesium.PolygonHierarchy；定义多边形
			             }
                        return activeShapePoints;//抛出点位信息
                    }, false);
                    console.log(activeShapePoints)
                    activeShape = drawShape(dynamicPositions); //绘制动态图
                    console.log(activeShape)
                }
                activeShapePoints.push(earthPosition);
                createPoint(earthPosition);
            }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);//Cesium.ScreenSpaceEventType.LEFT_CLICK，表示鼠标左键单击事件。
        //鼠标移动
        handler.setInputAction(function (event) {
            if (Cesium.defined(floatingPoint)) {
                var newPosition = viewer.scene.pickPosition(event.endPosition);
                if (Cesium.defined(newPosition)) {
                    floatingPoint.position.setValue(newPosition);
                    activeShapePoints.pop();
                    activeShapePoints.push(newPosition);
                }
            }
        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);//表示鼠标移动事件。

        // Redraw the shape so it's not dynamic and remove the dynamic shape.
        function terminateShape() {
            activeShapePoints.pop(); //去除最后一个动态点
            if (activeShapePoints.length) {
                drawShape(activeShapePoints); //如果activeShapePoints中的坐标不为0，绘制最终图
            }
            //像重置表单一样
            viewer.entities.remove(floatingPoint); //去除动态点图形（当前鼠标点）
            viewer.entities.remove(activeShape); //去除动态图形
            floatingPoint = undefined;
            activeShape = undefined;
            activeShapePoints = [];
        }

        //鼠标右键单击事件
        handler.setInputAction(function (event) {
            viewer.entities.removeAll();//删除所有
        }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);//表示鼠标右键单击事件。

        //鼠标左键双击事件
        handler.setInputAction(function(event){
            terminateShape();
        },Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)//表示鼠标左键双击事件。


        var options = [{
            text: '绘制线',
            onselect: function () {
                terminateShape();
                drawingMode = 'line';
            }
        }, {
            text: '绘制多边形',
            onselect: function () {
                terminateShape();
                drawingMode = 'polygon';
            }
        }, {
            text: '绘制圆形',
            onselect: function () {
                terminateShape();
                drawingMode = 'circle';
            }
        }, {
            text: '绘制矩形',
            onselect: function () {
                terminateShape();
                drawingMode = 'rectangle';
            }
        }];

        Sandcastle.addToolbarMenu(options);
        // Cesium.Cartesian3.fromDegrees（经度，纬度，高度(可选)，椭圆体(可选)，笛卡尔3(可选)）.
        // new Cesium.Cartesian3（X,Y,Z）
        viewer.camera.lookAt(Cesium.Cartesian3.fromDegrees(-122.2058, 46.1955, 1000.0), new Cesium.Cartesian3(5000.0,
            5000.0, 5000.0));//设置相机（目标，偏移量）
        viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
        viewer.scene.globe.depthTestAgainstTerrain = true;//开启地形深度检测，如果鼠标指针和点不重合，这个选项设置为true试试。
    </script>
</body>

</html>
小仙有礼了
关注
0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
cesium加载线面

<!DOCTYPE html><html lang="en"><head>  <meta charset="utf-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge
复制链接

扫一扫