Cesium 简单使用

tx_xtt

已于 2024-01-08 11:43:13 修改

阅读量1k

点赞数 18

分类专栏： web学习文章标签： javascript 前端开发语言

于 2024-01-04 16:26:16 首次发布

本文链接：https://blog.youkuaiyun.com/qq_43932985/article/details/135390129

版权

web学习专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了如何使用Cesium库在HTML页面中创建地图，添加图层，以及绑定鼠标左键事件，包括点击空白区域和实体的处理。还展示了如何清除事件和实体，以及自定义地图行为和定位功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

依赖

cesium

基础变量

    // 外部服务基础url
    var baseUrl = 'http://localhost:8093';
    // cesiumlab切片地址
    var mapUrl = baseUrl + '/Earth/{z}/{x}/{y}.jpg';
    // cesiumlab切片地址
    var mapUrl1 = baseUrl + '/cesiumKlmy/{z}/{x}/{y}.png';
    // 项目中心位置
    var mapCenter = [85.03257700820414, 45.600000206741775];
    // 4326
    var simpleScheme = new Cesium.GeographicTilingScheme();

创建地图

   // 创建地图实例
    var viewer = new Cesium.Viewer("cesiumContainer", {
        sceneMode: Cesium.SceneMode.SCENE2D, // 默认二维
        animation: false, // 动画小组件
        baseLayerPicker: false, // 底图组件，选择三维数字地球的底图（imagery and terrain）。
        fullscreenButton: false, // 全屏组件
        vrButton: false, // VR模式
        geocoder: false, // 地理编码（搜索）组件
        homeButton: true, // 首页，点击之后将视图跳转到默认视角
        infoBox: false, // 信息框
        sceneModePicker: true, // 场景模式，切换2D、3D 和 Columbus View (CV) 模式。
        selectionIndicator: false, //是否显示选取指示器组件
        timeline: false, // 时间轴
        navigationHelpButton: false, // 帮助提示，如何操作数字地球。
        // 如果最初应该看到导航说明，则为true；如果直到用户明确单击该按钮，则该提示不显示，否则为false。
        navigationInstructionsInitiallyVisible: false,
        orderIndependentTranslucency: false, //去掉大气层黑圈
        imageryProvider: new Cesium.SingleTileImageryProvider({
            url: baseUrl + '/Cesium/R-C.jpg'
        }),
        contextOptions: {
            webgl: {
                alpha: true,
            }
        },
    });

    // 获取 事件拦截
    var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

    // 移除底图
    viewer.imageryLayers.removeAll();
    viewer.scene.globe.baseColor = Cesium.Color.fromCssColorString("#7f7f7f");
    viewer.scene.skyBox.show = false;
    viewer._cesiumWidget._creditContainer.style.display = "none"
    // 抗锯齿
    viewer.scene.fxaa = true
    viewer.scene.postProcessStages.fxaa.enabled = true

添加图层

    viewer.imageryLayers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
            url: mapUrl,
            fileExtension: 'jpg',
            maximumLevel: 0,
            tilingScheme: simpleScheme //设置4326
        })
    )
    viewer.imageryLayers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
            url: mapUrl1,
            fileExtension: 'png',
            maximumLevel: 21,
            tilingScheme: simpleScheme //设置4326
        })
    )

事件

绑定鼠标事件

    /**
    * 鼠标左键事件监听
    * @param myFunc普通回调，myFunc2点击实体回调 回调 
    */
    function mouseLeftClick(myFunc = null, myFunc2 = null) {
        var that = this
        let viewer = that.viewer
        handler.setInputAction(function (evt) {
            // 点击处的坐标
            let x_y = [evt.position.x, evt.position.y]
            console.log("x_y:", x_y)

            //将像素位置转为经纬度
            let earthPosition = viewer.camera.pickEllipsoid(evt.position, viewer.scene.globe.ellipsoid);
            let cartographic = Cesium.Cartographic.fromCartesian(earthPosition, viewer.scene.globe.ellipsoid, new Cesium.Cartographic());
            let lng = Cesium.Math.toDegrees(cartographic.longitude);
            let lat = Cesium.Math.toDegrees(cartographic.latitude);
            let height = cartographic.height;
            let lng_lat = [lng, lat];
            console.log("lng_lat:", lng_lat)

            //设置监听方法
            let scene = viewer.scene;
            // 实体选择获取
            let pick = scene.pick(evt.position);
            // 没点击到实体
            if (pick == undefined) {
                console.log("左键点击空白处");
            } else {
                console.log("左键点击实体处:", pick);
                myFunc2({ lng_lat, x_y, pick });
            }
            // 执行回调
            if (myFunc) {
                myFunc({ lng_lat, x_y, pick });
            }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
        return that;
    }

标点

    /* 事件绑定方法区---------*/
    function onAddPoint() {
        removeAllEvent()
        // 鼠标左键点击事件绑定
        mouseLeftClick(addPoint);
    }

    //点的描绘信息
    point_options = {
        show: true, //是否展示
        pixelSize: 15, //点的大小
        // heightReference:HeightReference.NONE,//相对高度
        color: Cesium.Color.RED, //颜色
        outlineColor: Cesium.Color.SKYBLUE, //边框颜色
        outlineWidth: 2, //边框宽度
        // scaleByDistance:new Cesium.NearFarScalar(100, 5, 10000, 15), //缩放距离设置
        // translucencyByDistance:new Cesium.NearFarScalar(100, 0.2, 10000, 0.8),//点的半透明设置
        // distanceDisplayCondition:new Cesium.DistanceDisplayCondition(1000, 10000),//点的显隐距离
        // disableDepthTestDistance:5000000,//禁用深度测试距离
    }
    
    // 添加点回调方法
    function addPoint(evt) {
        console.log("回调方法被调用了")
        let { lng_lat } = evt;
        viewer.entities.add({
            position: Cesium.Cartesian3.fromDegrees(...lng_lat),
            point: point_options
        });
    }

点击实体

	/* 事件绑定方法区---------*/
    function onClickEntity() {
        removeAllEvent() 
        // 鼠标左键点击事件绑定
        mouseLeftClick(null,clickEntity);
    }

    // 点击实体的回调方法
    function clickEntity(evt) {
        console.log("回调方法被调用了")
        let { lng_lat, x_y, pick } = evt;
        console.log("实体信息：", pick)

    }

demo

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        @import url(http://localhost:8093/Cesium/Widgets/widgets.css);
    </style>
    <style>
        html,
        body,
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        .option {
            position: fixed;
            left: 10px;
            top: 10px;
        }

        .btn {
            /* width: 48px; */
            /* height: 48px; */
            background-color: rgba(115, 115, 115, 0.5);
            font-size: 16px;
            z-index: 10000;
            cursor: pointer;
        }

        .btn:hover {
            background-color: rgb(200, 200, 200);
            /* border: white 1px solid; */
            box-shadow: 0 0 1px 1px rgb(255, 255, 255);
        }
    </style>
    <title>地图演示</title>
    <script src="http://localhost:8093/Cesium/Cesium.js"></script>
</head>

<body>
    <div id="cesiumContainer">
    </div>
    <div class="option">
        <div class="btn" onclick="removeAllEvent()">清除鼠标左键事件</div> 
        <div class="btn" onclick="removeAllEntity()">清除所有实体</div> 
        <div class="btn" onclick="cancelLook()">取消视角锁定</div> 
        <div class="btn" onclick="onAddPoint()">左键事件:标点</div>
        <div class="btn" onclick="onClickEntity()">左键事件:点击实体</div>
    </div>
</body>
<script>
    // 外部服务基础url
    var baseUrl = 'http://localhost:8093';
    var mapUrl = baseUrl + '/Earth/{z}/{x}/{y}.jpg';
    // cesiumlab切片地址
    var mapUrl1 = baseUrl + '/cesiumKlmy/{z}/{x}/{y}.png';
    // 项目中心位置
    var mapCenter = [85.03257700820414, 45.600000206741775];
    // 4326
    var simpleScheme = new Cesium.GeographicTilingScheme();

    // 创建地图实例
    var viewer = new Cesium.Viewer("cesiumContainer", {
        sceneMode: Cesium.SceneMode.SCENE2D, // 默认二维
        animation: false, // 动画小组件
        baseLayerPicker: false, // 底图组件，选择三维数字地球的底图（imagery and terrain）。
        fullscreenButton: false, // 全屏组件
        vrButton: false, // VR模式
        geocoder: false, // 地理编码（搜索）组件
        homeButton: true, // 首页，点击之后将视图跳转到默认视角
        infoBox: false, // 信息框
        sceneModePicker: true, // 场景模式，切换2D、3D 和 Columbus View (CV) 模式。
        selectionIndicator: false, //是否显示选取指示器组件
        timeline: false, // 时间轴
        navigationHelpButton: false, // 帮助提示，如何操作数字地球。
        // 如果最初应该看到导航说明，则为true；如果直到用户明确单击该按钮，则该提示不显示，否则为false。
        navigationInstructionsInitiallyVisible: false,
        orderIndependentTranslucency: false, //去掉大气层黑圈
        imageryProvider: new Cesium.SingleTileImageryProvider({
            url: baseUrl + '/Cesium/R-C.jpg'
        }),
        contextOptions: {
            webgl: {
                alpha: true,
            }
        },
    });
    // 获取 事件拦截
    var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

    // 移除底图
    viewer.imageryLayers.removeAll();
    viewer.scene.globe.baseColor = Cesium.Color.fromCssColorString("#7f7f7f");
    viewer.scene.skyBox.show = false;
    viewer._cesiumWidget._creditContainer.style.display = "none"
    // 抗锯齿
    viewer.scene.fxaa = true
    viewer.scene.postProcessStages.fxaa.enabled = true

    viewer.imageryLayers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
            url: mapUrl,
            fileExtension: 'jpg',
            maximumLevel: 0,
            tilingScheme: simpleScheme //设置4326
        })
    )

    viewer.imageryLayers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
            url: mapUrl1,
            fileExtension: 'png',
            maximumLevel: 21,
            tilingScheme: simpleScheme //设置4326
        })
    )
    /* 事件绑定方法区-------------------------------------------------------*/
    function onAddPoint() {
        removeAllEvent()
        // 鼠标左键点击事件绑定
        mouseLeftClick(addPoint);
    }
    function onClickEntity() {
        removeAllEvent()
        // 鼠标左键点击事件绑定
        mouseLeftClick(null,clickEntity);
    }



    /**
    * 鼠标左键事件监听
    * @param myFunc普通回调，myFunc2点击实体回调 回调 
    */
    function mouseLeftClick(myFunc = null, myFunc2 = null) {
        var that = this
        let viewer = that.viewer
        handler.setInputAction(function (evt) {
            // 点击处的坐标
            let x_y = [evt.position.x, evt.position.y]
            console.log("x_y:", x_y)

            //将像素位置转为经纬度
            let earthPosition = viewer.camera.pickEllipsoid(evt.position, viewer.scene.globe.ellipsoid);
            let cartographic = Cesium.Cartographic.fromCartesian(earthPosition, viewer.scene.globe.ellipsoid, new Cesium.Cartographic());
            let lng = Cesium.Math.toDegrees(cartographic.longitude);
            let lat = Cesium.Math.toDegrees(cartographic.latitude);
            let height = cartographic.height;
            let lng_lat = [lng, lat];
            console.log("lng_lat:", lng_lat)

            //设置监听方法
            let scene = viewer.scene;
            // 实体选择获取
            let pick = scene.pick(evt.position);
            // 没点击到实体
            if (pick == undefined) {
                console.log("左键点击空白处");
            } else {
                console.log("左键点击实体处:", pick);
                if(myFunc2){
                    myFunc2({ lng_lat, x_y, pick });
                }
            }
            // 执行回调
            if (myFunc) {
                myFunc({ lng_lat, x_y, pick });
            }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
        return that;
    }

    //点的描绘信息
    point_options = {
        show: true, //是否展示
        pixelSize: 15, //点的大小
        // heightReference:HeightReference.NONE,//相对高度
        color: Cesium.Color.RED, //颜色
        outlineColor: Cesium.Color.SKYBLUE, //边框颜色
        outlineWidth: 2, //边框宽度
        // scaleByDistance:new Cesium.NearFarScalar(100, 5, 10000, 15), //缩放距离设置
        // translucencyByDistance:new Cesium.NearFarScalar(100, 0.2, 10000, 0.8),//点的半透明设置
        // distanceDisplayCondition:new Cesium.DistanceDisplayCondition(1000, 10000),//点的显隐距离
        // disableDepthTestDistance:5000000,//禁用深度测试距离
    }
    // 添加点回调方法
    function addPoint(evt) {
        console.log("回调方法被调用了")
        let { lng_lat } = evt;
        viewer.entities.add({
            position: Cesium.Cartesian3.fromDegrees(...lng_lat),
            point: point_options
        });
    }

    // 点击实体的回调方法
    function clickEntity(evt) {
        console.log("回调方法被调用了")
        let { lng_lat, x_y, pick } = evt;
        console.log("实体信息：", pick)

    }

    // 清除鼠标左键事件
    function removeAllEvent() {
        console.log("清除鼠标左键事件")
        handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
    }
    // 清除所有实体
    function removeAllEntity(){
        console.log("清除所有实体")
        viewer.entities.removeAll();
    }

    //取消视角锁定
   function cancelLook() {
        viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY)
        viewer.trackedEntity = undefined
    }

    // 定位
    viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(mapCenter[0], mapCenter[1], 1000), // 设置位置
        orientation: {
            heading: Cesium.Math.toRadians(0), // 方向
            pitch: Cesium.Math.toRadians(-90.0),// 倾斜角度
            roll: 0
        },
        duration: 0, // 设置飞行持续时间，默认会根据距离来计算
        pitchAdjustHeight: -90, // 如果摄像机飞越高于该值，则调整俯仰俯仰的俯仰角度，并将地球保持在视口中。
        maximumHeight: 10000, // 相机最大飞行高度
    });
    // 修改默认home的位置
    viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function (e) {
        e.cancel = true;
        //你要飞的位置	
        viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(mapCenter[0], mapCenter[1], 1000.0)
        });
    });
</script>

</html>