Cesium-1.72学习（地球模型创建在线离线瓦片）

最新推荐文章于 2024-06-21 15:31:38 发布

永恒的狼牙

最新推荐文章于 2024-06-21 15:31:38 发布

阅读量1.2k

点赞数 1

分类专栏： Cesium 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43117449/article/details/108316354

版权

Cesium 专栏收录该内容

8 篇文章 6 订阅

订阅专栏

在这里插入图片描述

1、在线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>快速开始 cesium</title>
    <link rel="stylesheet" href="/Cesium-1.72/Build/Cesium/Widgets/widgets.css">
    <script src="/Cesium-1.72/Build/Cesium/Cesium.js"></script>
</head>
<body>
    <div style="width:1500px;height:700px;">
        <div id="cesiumContainer" style="width:100%;height:100%;"></div>
    </div>
</body>
</html>
<script>

    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIxMTdmMTdmNS00NzZhLTQwOGMtODQwYy1kZjAyMzNiOTg0ZTYiLCJpZCI6MzMwMjQsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1OTc4OTE3ODl9.yqF540oYBpSme38SIPKUP4t14FA6hXCLFHnvOqPf_Fw';
    var viewer = new Cesium.Viewer('cesiumContainer', {
        geocoder:false, //一种地理位置搜索工具，用于显示相机访问的地理位置。默认使用微软的Bing地图。
        homeButton:true, //首页位置，点击之后将视图跳转到默认视角。
        sceneModePicker:true, //切换2D、3D 和 Columbus View (CV) 模式。
        baseLayerPicker:false, //选择三维数字地球的底图（imagery and terrain）。
        navigationHelpButton:true, //帮助提示，如何操作数字地球。
        animation:false,//控制视窗动画的播放速度。
        creditsDisplay:false, //展示商标版权和数据源。
        timeline:false, //展示当前时间和允许用户在进度条上拖动到任何一个指定的时间。
        fullscreenButton:true, //视察全屏按钮,
        //terrainProvider: Cesium.createWorldTerrain()//地形
    });
    viewer.scene.globe.enableLighting = true;//启用以太阳为光源的地球
</script>

在线加载时使用的是网络加载的bing地图，需要申请Cesium.Ion.defaultAccessToken
地址：cesium官网，注册登录
在这里插入图片描述

2、离线安装包资源

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>快速开始 cesium</title>
    <link rel="stylesheet" href="/Cesium-1.72/Build/Cesium/Widgets/widgets.css">
    <script src="/Cesium-1.72/Build/Cesium/Cesium.js"></script>
</head>
<body>
    <div style="width:1500px;height:700px;">
        <div id="cesiumContainer" style="width:100%;height:100%;"></div>
    </div>
</body>
</html>
<script>
    var viewer = new Cesium.Viewer('cesiumContainer', {
        imageryProvider:new Cesium.UrlTemplateImageryProvider({
            url : Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII') + '/{z}/{x}/{reverseY}.jpg',
            credit : '© Analytical Graphics, Inc.',
            tilingScheme : new Cesium.GeographicTilingScheme(),
            maximumLevel : 5
        }),
        geocoder:false, //一种地理位置搜索工具，用于显示相机访问的地理位置。默认使用微软的Bing地图。
        homeButton:true, //首页位置，点击之后将视图跳转到默认视角。
        sceneModePicker:true, //切换2D、3D 和 Columbus View (CV) 模式。
        baseLayerPicker:false, //选择三维数字地球的底图（imagery and terrain）。
        navigationHelpButton:true, //帮助提示，如何操作数字地球。
        animation:false,//控制视窗动画的播放速度。
        creditsDisplay:false, //展示商标版权和数据源。
        timeline:false, //展示当前时间和允许用户在进度条上拖动到任何一个指定的时间。
        fullscreenButton:true, //视察全屏按钮
    });
    viewer.scene.globe.enableLighting = true;//启用以太阳为光源的地球

</script>

加载的是安装包中的离线3级地图

3、离线瓦片地图，自建地图服务。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>快速开始 cesium</title>
    <link rel="stylesheet" href="/Cesium-1.72/Build/Cesium/Widgets/widgets.css">
    <script src="/Cesium-1.72/Build/Cesium/Cesium.js"></script>
</head>
<body>
    <div style="width:1500px;height:700px;">
        <div id="cesiumContainer" style="width:100%;height:100%;"></div>
    </div>
</body>
</html>
<script>

    var viewer = new Cesium.Viewer('cesiumContainer', {
        imageryProvider:new Cesium.UrlTemplateImageryProvider({
            url:'http://localhost:8099/basemap_0-10/{z}/{y}/{x}.png', //本机地图服务
            //url:'http://localhost:6379/basemap_0-10/{z}/{y}/{x}.png', //服务器地图服务
            /**
             * springboot
             * 服务器 跨域配置
             * @Configuration
             public class MyCorsConfig implements WebMvcConfigurer {
                    @Bean
                    public WebMvcConfigurer corsConfigurer() {
                        return new WebMvcConfigurer() {
                            @Override
                            public void addCorsMappings(CorsRegistry registry) {
                                registry.addMapping("/**").allowedOrigins("*"). // 允许跨域的域名，可以用*表示允许任何域名使用
                                allowedMethods("*"). // 允许任何方法（post、get等）
                                allowedHeaders("*"). // 允许任何请求头
                                allowCredentials(true). // 带上cookie信息
                                exposedHeaders(HttpHeaders.SET_COOKIE).maxAge(3600L); // maxAge(3600)表明在3600秒内，不需要再发送预检验请求，可以缓存该结果
                            }
                        };
                    }
                }
             */
            fileExtension : "png",
        }),
        geocoder:false, //一种地理位置搜索工具，用于显示相机访问的地理位置。默认使用微软的Bing地图。
        homeButton:true, //首页位置，点击之后将视图跳转到默认视角。
        sceneModePicker:true, //切换2D、3D 和 Columbus View (CV) 模式。
        baseLayerPicker:false, //选择三维数字地球的底图（imagery and terrain）。
        navigationHelpButton:true, //帮助提示，如何操作数字地球。
        animation:false,//控制视窗动画的播放速度。
        creditsDisplay:false, //展示商标版权和数据源。
        timeline:false, //展示当前时间和允许用户在进度条上拖动到任何一个指定的时间。
        fullscreenButton:true, //视察全屏按钮
    });
    viewer.scene.globe.enableLighting = true;//启用以太阳为光源的地球
</script>

运行springboot搭建地图服务，瓦片地图访问时跨域，在地图服务端需要进行跨域配置。
案例代码：https://github.com/zhangxuhui1992/cesium

永恒的狼牙

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
3
评论
Cesium-1.72学习（地球模型创建在线离线瓦片）

1、在线<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>快速开始 cesium</title> <link rel="stylesheet" href="/Cesium-1.72/Build/Cesium/Widgets/widgets.css"> <script src="/Cesium-1.
复制链接

扫一扫