cesium 地图效果

最新推荐文章于 2024-06-03 14:00:00 发布
最新推荐文章于 2024-06-03 14:00:00 发布
阅读量159 收藏 2
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dagedezhiyin/article/details/134074831
版权 

// cesium 地图效果整合
/**
 * 在Cesium中更换地图
 * @param {Viewer} viewer - Cesium的Viewer实例
 * @param {String} type - 地图类型，可选值为 'baidu'、'guge'、'tengxun'、'tianditu'、'gaode'
 * @param {Object} options - 针对不同地图类型的配置选项
 */
function replacementMap(viewer, type, options) {
    if (type == 'baidu') {
        viewer.imageryLayers.removeAll();
        viewer.imageryLayers.add(
            new Cesium.ImageryLayer(new AmapImageryProvider(options))
        );
    } else if (type == 'guge') {
        viewer.imageryLayers.removeAll();
        viewer.imageryLayers.add(
            new Cesium.ImageryLayer(new GoogleImageryProvider(options))
        );
    } else if (type == 'tengxun') {
        viewer.imageryLayers.removeAll();
        viewer.imageryLayers.add(
            new Cesium.ImageryLayer(new TencentImageryProvider(options))
        );
    } else if (type == 'tianditu') {
        viewer.imageryLayers.removeAll();
        viewer.imageryLayers.add(
            new Cesium.ImageryLayer(new TdtImageryProvider(options))
        );
    } else if (type == 'gaode') {
        viewer.imageryLayers.removeAll();
        viewer.imageryLayers.add(
            new Cesium.ImageryLayer(new AmapImageryProvider(options))
        );
    }
}

/**
 * 在Cesium中加载离线地图
 * @param {Viewer} viewer - Cesium的Viewer实例
 * @param {String} url - 离线地图的URL，可以是本地文件路径或远程URL
 */
function offlineMap(viewer, url) {
    viewer.imageryLayers.removeAll();
    viewer.imageryLayers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
            url: url,
        })
    );
}

/**
 * 创建简单的 Cesium 地图
 * @param {Object} that - 上下文对象，通常是指调用该函数的对象
 * @param {String} mapName - 地图容器的名称或ID
 */
function simpleMap(that, mapName) {
    Cesium.Ion.defaultAccessToken =
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlYTQ2ZjdjNS1jM2E0LTQ1M2EtOWM0My1mODMzNzY3YjYzY2YiLCJpZCI6MjkzMjcsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1OTE5NDIzNjB9.RzKlVTVDTQ9r7cqCo-PDydgUh8Frgw0Erul_BVxiS9c";
    that.viewer = new Cesium.Viewer(mapName, {
        shouldAnimate: true,
        animation: false, // 是否显示动画控件
        baseLayerPicker: false, // 是否显示图层选择控件
        vrButton: false, // 是否显示VR控件
        geocoder: false, // 是否显示地名查找控件
        timeline: false, // 是否显示时间线控件
        sceneModePicker: false, // 是否显示投影方式控件
        navigationHelpButton: false, // 是否显示帮助信息控件
        navigationInstructionsInitiallyVisible: false, // 帮助按钮，初始化的时候是否展开
        infoBox: false, // 是否显示点击要素之后显示的信息
        fullscreenButton: false, // 是否显示全屏按钮
        selectionIndicator: true, // 是否显示选中指示框
        homeButton: false, // 是否显示返回主视角控件
        scene3DOnly: false, // 如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源})
    });
    that.viewer._cesiumWidget._creditContainer.style.display = "none";
}

// cesium 3D/2D切换
/**
 * @description: cesium 3D/2D切换
 * @param {Viewer} viewer - Cesium的Viewer实例
 */
function TwoD(viewer) {
    viewer.scene.morphTo2D(0);
}
function ThereD(viewer) {
    var scene = viewer.scene;
    scene.morphTo3D(0);
}

// cesium 地球自转方法
/**
 * @description: cesium 地球自转方法
 * @param {any} viewer - Cesium的Viewer实例
 */
function earthRotation(viewer) {
    viewer.clock.multiplier = 100;//背景转速值越大越快
    viewer.clock.shouldAnimate = true;
    let previousTime = viewer.clock.currentTime.secondsOfDay;

    function onTickCallback() {
        var spinRate = 1;
        var currentTime = viewer.clock.currentTime.secondsOfDay;
        var delta = (currentTime - previousTime) / 5000;// 5000是地球转速，值越小转越快
        previousTime = currentTime;
        viewer.scene.camera.rotate(Cesium.Cartesian3.UNIT_Z, -spinRate * delta);
    }

    //监听点击事件(不然点击到Titus上他不停止旋转)
    var handlerEarthRotation = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
    handlerEarthRotation.setInputAction(function (click) {
        viewer.clock.shouldAnimate = false;
        viewer.clock.onTick.removeEventListener(onTickCallback);
        handlerEarthRotation.destroy();
    }, Cesium.ScreenSpaceEventType.LEFT_DOWN);

    if (obj.rotation == true) {
        viewer.clock.onTick.addEventListener(onTickCallback);
    } else {
        viewer.clock.shouldAnimate = false;
        viewer.clock.onTick.removeEventListener(onTickCallback);
    }
}

/**
 * @description: cesium 背景修改成其它颜色
 * @param {any} viewer - Cesium的Viewer实例
 */
function Skybox(viewer) {
    viewer.scene.skyBox.show = false;
    // cesium 背景颜色修改完成
    viewer.scene.backgroundColor = Cesium.Color.GREEN;
}

/**
 * @description: 背景修改成天空盒(根据时间不同天空盒背景不同)
 * @param {any} viewer - Cesium的Viewer实例
 */
function sky(viewer) {
    //大气
    viewer.scene.skyAtmosphere.show = false;
    viewer.scene.globe.enableLighting = false; // 关闭灯光

    // 获取当前时间并判断是属于哪个时间段
    const now = new Date();
    const hour = now.getHours();
    if (hour >= 4 && hour < 8) {
        // 亮度设置
        var stages = viewer.scene.postProcessStages;
        viewer.scene.brightness = viewer.scene.brightness || stages.add(Cesium.PostProcessStageLibrary.createBrightnessStage());
        viewer.scene.brightness.enabled = true;
        viewer.scene.brightness.uniforms.brightness = Number(0.8);

        viewer.scene.skyBox = new Cesium.SkyBox({
            sources: {
                positiveX: '/images/qingchen/px.png',
                negativeX: '/images/qingchen/nx.png',
                positiveY: '/images/qingchen/ny.png',
                negativeY: '/images/qingchen/py.png',
                positiveZ: '/images/qingchen/pz.png',
                negativeZ: '/images/qingchen/nz.png',
            }
        })
    } else if (hour >= 8 && hour < 17) {
        // 亮度设置
        var stages = viewer.scene.postProcessStages;
        viewer.scene.brightness = viewer.scene.brightness || stages.add(Cesium.PostProcessStageLibrary.createBrightnessStage());
        viewer.scene.brightness.enabled = true;
        viewer.scene.brightness.uniforms.brightness = Number(1.2);

        viewer.scene.skyBox = new Cesium.SkyBox({
            sources: {
                positiveX: '/images/zhengwu/px.png',
                negativeX: '/images/zhengwu/nx.png',
                positiveY: '/images/zhengwu/ny.png',
                negativeY: '/images/zhengwu/py.png',
                negativeZ: '/images/zhengwu/nz.png',
                positiveZ: '/images/zhengwu/pz.png',
            }
        })
    } else if (hour >= 17 && hour < 19) {
        // 亮度设置
        var stages = viewer.scene.postProcessStages;
        viewer.scene.brightness = viewer.scene.brightness || stages.add(Cesium.PostProcessStageLibrary.createBrightnessStage());
        viewer.scene.brightness.enabled = true;
        viewer.scene.brightness.uniforms.brightness = Number(1);

        viewer.scene.skyBox = new Cesium.SkyBox({
            sources: {
                positiveX: '/images/huanghun/px.png',
                negativeX: '/images/huanghun/nx.png',
                positiveY: '/images/huanghun/ny.png',
                negativeY: '/images/huanghun/py.png',
                negativeZ: '/images/huanghun/nz.png',
                positiveZ: '/images/huanghun/pz.png',
            }
        })
    } else if (hour >= 19 && hour < 25) {
        // cesium 隐藏太阳
        viewer.scene.globe.enableLighting = false;
        viewer.shadows = false;
        viewer.scene.sun.show = false;
        // 亮度设置
        var stages = viewer.scene.postProcessStages;
        viewer.scene.brightness = viewer.scene.brightness || stages.add(Cesium.PostProcessStageLibrary.createBrightnessStage());
        viewer.scene.brightness.enabled = true;
        viewer.scene.brightness.uniforms.brightness = Number(0.4);

        viewer.scene.skyBox = new Cesium.SkyBox({
            sources: {
                positiveX: '/images/heiye/px.png',
                negativeX: '/images/heiye/nx.png',
                positiveY: '/images/heiye/ny.png',
                negativeY: '/images/heiye/py.png',
                negativeZ: '/images/heiye/nz.png',
                positiveZ: '/images/heiye/pz.png',
            }
        })
    } else if (hour >= 1 && hour < 4) {
        // cesium 隐藏太阳
        viewer.scene.globe.enableLighting = false;
        viewer.shadows = false;
        viewer.scene.sun.show = false;
        // 亮度设置
        var stages = viewer.scene.postProcessStages;
        viewer.scene.brightness = viewer.scene.brightness || stages.add(Cesium.PostProcessStageLibrary.createBrightnessStage());
        viewer.scene.brightness.enabled = true;
        viewer.scene.brightness.uniforms.brightness = Number(0.4);

        viewer.scene.skyBox = new Cesium.SkyBox({
            sources: {
                positiveX: '/images/heiye/px.png',
                negativeX: '/images/heiye/nx.png',
                positiveY: '/images/heiye/ny.png',
                negativeY: '/images/heiye/py.png',
                negativeZ: '/images/heiye/nz.png',
                positiveZ: '/images/heiye/pz.png',
            }
        })
    }
}

/**
 * @description: 使用3D地形
 * @param {any} viewer - Cesium的Viewer实例
 */
function thereDmap(viewer) {
    // 调用在线地形图使用恒歌科技在线地形图
    const terrainProvider = new Cesium.CesiumTerrainProvider({
        url: "http://www.freexgis.com/web-data/terrain",
    });
    viewer.terrainProvider = terrainProvider;
    let inter = setInterval(() => {
        // 改变时间设置光照效果
        let date = new Date().getTime()
        let utc = Cesium.JulianDate.fromDate(new Date(date))
        //北京时间
        viewer.clockViewModel.currentTime = Cesium.JulianDate.addHours(utc, 0, new Cesium.JulianDate())
    }, 100)
}

/**
 * @description: 3D地形使用方法
 * @param {any} viewer - Cesium的Viewer实例
 */
function thereMap(viewer) {
    var terrainProvider = new Cesium.ArcGISTiledElevationTerrainProvider({
        url:
            "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer",
        token:
            "KED1aF_I4UzXOHy3BnhwyBHU4l5oY6rO6walkmHoYqGp4XyIWUd5YZUC1ZrLAzvV40pR6gBXQayh0eFA8m6vPg..",
    });
    viewer.terrainProvider = terrainProvider;
    viewer.scene.terrainExaggeration = 3;
}

/**
 * @description: 添加大气层(静止的大气层)
 * @param {any} viewer - Cesium的Viewer实例
 */
function atmosphere(viewer) {
    const entities = viewer.entities;
    const image = 'https://openlayers.vip/examples/resources/earth_cloud.png';
    const imageMaterial = new Cesium.ImageMaterialProperty({
        image: image
    });
    const entity = entities.add({
        rectangle: {
            coordinates: Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0),
            material: imageMaterial,
        },
    });

    kaiqi()
    function kaiqi() {
        entity.rectangle.height = undefined;
        entity.rectangle.extrudedHeight = undefined;
        entity.rectangle.material = imageMaterial;
    }

}

// cesium 创建太阳
/**
 * @description: 创建太阳
 * @param {any} viewer - Cesium的Viewer实例
 */
function makeSun(viewer) {
    viewer.scene.sun.show = true;
    viewer.scene.sun.glowFactor = 10; //太阳变大
}

/**
 * @description: 暗影系高德地图(适合运用于黑夜形的智慧城市地图)
 * @param {any} viewer - Cesium的Viewer实例
 */
function anyingMap(viewer) {
    viewer.imageryLayers.removeAll(); // 移除所有现有的图像图层
    // cesium 底图更换成暗系高德底图
    var imageryProvider = new Cesium.ArcGisMapServerImageryProvider({
        url: 'http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer'
    });
    var imageryLayer = viewer.imageryLayers.addImageryProvider(imageryProvider);
}

export {
    replacementMap,
    offlineMap,
    simpleMap,
    TwoD,
    ThereD,
    earthRotation,
    Skybox,
    sky,
    thereDmap,
    thereMap,
    atmosphere,
    makeSun,
    anyingMap
};

dagedezhiyin
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
cesium设置近地天空盒 多种效果（附天空盒原图）
m0_63701303的博客
01-16 1421
cesium设置近地天空盒 多种效果（附天空盒原图）
cesium加载百度地图
05-20
本教程将详细讲解如何在Cesium中加载百度地图，帮助开发者实现更丰富的地图展示效果。 首先，我们需要理解Cesium的基本工作原理。Cesium基于WebGL技术，能够在浏览器中生成高精度、高性能的3D地形和建筑物模型。它...
cesium+HTML5+3D地图展示
08-27
cesium+HTML5+3D地图展示
【开源】Cesium场景效果大全（cesium+vue3+vite+vuex）
最新发布
前端、nodejs、3D、GIS、人工智能
06-03 1159
今天再一次带来我的开源项目，这个项目主要收集了cesium在日常业务开发中常用到的一些场景效果的开发。这个项目我已开源，也欢迎感兴趣的小伙伴能够加入进来，一起参与共建（目前还是有一定的star基础的🤭）开源地址：https://github.com/tingyuxuan2302/cesium-vue3-vite如果觉得项目对你有帮助，希望可以随手点一个star，激励我去开源更多优秀的代码。如果有在做数字孪生或者GIS方面的同学也可以加我交流：brown_7778，我拉你进交流群。
cesium本地文档-天空盒-arcgis切片404-服务查询
ANNENBERG的博客
05-29 570
/ 总的来说，vite-plugin-cesium 简化了在 Vite 项目中使用 Cesium 的流程，使得开发者更容易地集成 Cesium 地图引擎到他们的项目中，并且提供了一些优化功能来改善用户体验。它简化了在 Vite 项目中使用 Cesium 的配置和引入过程。// 处理 Cesium 的依赖关系：Cesium 本身有一些依赖关系需要处理，vite-plugin-cesium 可以帮助自动处理这些依赖，确保 Cesium 在 Vite 项目中正常运行。4.arcgis切片404问题。
Cesium三维地球-点击图标放大显示特效
weixin_42520034的博客
04-10 376
Cesium三维地球动画实现
Cesium特效案例展示 持续更新...
qq_38621116的博客
07-01 2541
cesium案例集合持续更新，大概每周更新一次，欢迎同道中人一起学习gitee-shanbai
5、cesium加载自定义地图
qq_58771242的博客
02-03 668
cesium加载自定义地图之cesium加载天地图
【超图+CESIUM】【基础API使用示例】04、超图｜CESIUM - 设置地图风格样式
汪同学丶的博客
02-24 7083
超图+CESIUMJS设置地图风格：本地图片设置3d球、加载天地图bingmap、加载地形、s3m、mvt等服务图层
cesium实现自定义的天空盒效果
专注GIS开发
05-11 7033
cesium实现自定义的近地天空盒效果
slider.rar cesium加载天地图实现地图卷帘
07-21
在这个主题中，我们将深入探讨如何利用Cesium加载天地图，并实现地图卷帘功能。 首先，我们要明白“天地图”是中国的一个国家级地理信息公共服务平台，它提供了丰富的地图服务，包括基础地图、地形数据、卫星影像等...
cesium 天空盒子（图片）
06-05
相关文章：cesium 近地天空（天空盒子）https://blog.csdn.net/weixin_46730573/article/details/124695046
cesium 实现风场图效果
08-01
本篇将详细介绍如何利用Cesium实现风场图效果，以及相关的前端技术。 首先，了解Cesium的核心功能。Cesium提供了一个完整的3D地球模型，支持动态数据可视化，包括地形、建筑物、图像覆盖层等。它基于WebGL，能够在...
cesium接入百度地图.rar
09-17
将Cesium与百度地图结合，可以实现更丰富的地图展示效果和更强大的地理信息应用。 1. **Cesium简介** Cesium是基于WebGL技术的，能够实现在网页上展示高精度、高性能的3D地球模型。它提供了一整套完整的工具和API...
72.（cesium篇）cesium地图右击菜单.zip
04-22
该资源包的执行效果查看地址：https://blog.csdn.net/m0_60387551/article/details/123184049 “地图之家”专栏中的“72.（cesium篇）cesium地图右击菜单”。如下载有问题，可联系博主。
Cesium实现动态扩散预警
06-21
在Cesium中，我们可以使用几何体和动画来实现这一效果。通过创建一系列的几何圆圈（代表扩散的边界），并随着时间改变它们的大小和位置，可以模拟出扩散的过程。 1. **扩散范围调整**：用户可以根据需要动态调整...
SuperMap iClient3D for Cesium中球面场景天空盒新方式制作
SuperMap技术控
12-04 549
天空盒是在三维场景中模拟天空和背景的技术，为用户提供了更加逼真和沉浸式的体验。天空盒包裹了整个场景，用于模拟自然环境，快速营造场景氛围。在实际项目应用中，我们发现原来版本提供的天空盒范例会出现一个问题：不管放大缩小场景，即使将视角拉高到太空中，也会看到天空盒贴图，这与实际中的太空不匹配。现在就有一个非常迫切的诉求：希望进入地球可以看到表达天气的天空，飞出地球可以看到充满星空的宇宙。
基于Cesium的降雨特效
行走的过客
12-22 569
rainripplewithwater
cesium 构建天空盒
haibalai2009的博客
01-25 1083
我们用typescript 实现 cesium 天空盒子 let skyBox = { //会直接关闭大气层（存在大气层，近景效果不佳） nearSkyBox: { positiveX: “./images/skybox/03/px.jpg”, positiveY: “./images/skybox/03/py.jpg”, positiveZ: “./images/skybox/03/pz.jpg”, negativeX: “./images/skybox/03/nx.jpg”, negativeY: “.
cesium 倾斜地图
03-09
Cesium是一个开源的JavaScript库，用于创建基于Web的3D地球和地图应用程序。它提供了丰富的功能和工具，可以用于可视化地理空间数据、创建交互式地图应用、展示倾斜地图等。 倾斜地图是一种以倾斜的角度展示地图的方式，相比于传统的平面地图，倾斜地图可以提供更加真实的视觉效果和更丰富的地理信息。Cesium可以通过使用倾斜摄影技术获取的倾斜影像数据来实现倾斜地图的展示。 Cesium倾斜地图的特点包括： 1. 逼真的三维视角：倾斜地图以倾斜的角度展示地图，使用户可以以更真实的视角观察地理环境。 2. 丰富的地理信息：倾斜地图可以提供更多的地理信息，例如建筑物、道路、植被等，使用户可以更好地了解目标区域。 3. 交互性和可定制性：Cesium提供了丰富的交互功能和可定制的样式，用户可以根据自己的需求进行交互操作和地图样式的调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值