Cesium:入门教程(二)之数据源加载

2023-10-26

前言

    成功运行 helloworld 的例子后,下面对控件、数据源等进一步说明。

鼠标

    左键单击和拖拽:沿着地球表面平移(调整相机位置)

    右键单击和拖拽:相机放大缩小(调整相机距离)

    滚轮:相机放大缩小(调整相机距离)

    中间按下和拖拽:围绕地球表面旋转相机(调整相机方向)

控件

图源: 滑动验证页面

    ① Geocoder : 地理位置查询定位控件,默认使用bing地图服务
    ② HomeButton : 默认相机位置
    ③ SceneModePicker : 3D、2D和哥伦布模式(2.5D)的切换按钮 [链接]

哥伦布模式:一个2.5D的透视视图,其中地图是平坦的,并且具有非零高度的对象被绘制在它上面

    ④ BaseLayerPicker : 选择地形、影像等图层
    ⑤ NavigationHelpButton : 显示默认的相机控制提示
    ⑥ Animation : 控制场景动画的播放速度.
    ⑦ CreditsDisplay : 展示数据版权属性。
    ⑧ Timeline : 时间滚动条。
    ⑨ FullscreenButton : 全屏切换。

① Geocoder

    在 ①Geocoder 默认使用bing地图服务,这就意味着如果我们不提供 Cesium.Ion.defaultAccessToken,那么就无法使用搜索服务。

    正常使用的时候: 

④ BaseLayerPicker

   1. Imagery

        默认的初始化底图修改源码:./Source/Widgets/BaseLayerPicker/createDefaultImageryProviderViewModels.js

    在 ④BaseLayerPicker 模块主要是Bing、Mapbox以及OpenStreetMap,以及ESRI四家地图服务。

    图中框选的是可以直接使用,不需要申请token的图层。

    BING Map 需要到 Cesium ion 申请 token [教程](操作不复杂,很快就能得到

Cesium.Ion.defaultAccessToken = '你的token';

    MapBox 需要到 Account | Mapbox 申请token

Cesium.MapboxApi.defaultAccessToken = '你的token';

    但迟迟加载不出 Sentinel-2 和 NASA 的 Blue Marble、Earth at night 

    网上其他人写的加载方式几乎都是这样:

// assetId:3812 Earth at Night
// assetId:3845 Blue Marble
// assetId:3954 Sentinel-2
var viewer = new Cesium.Viewer('cesiumContainer', {
   imageryProvider: new Cesium.IonImageryProvider({ assetId: 3812 }),
   baseLayerPicker: false
});

    运行后依旧没加载出来,按下F12查看:XHR failed loading。难道是token的问题? 

    再次登录 Cesium ion ,忽然灵光一现...

     进入Asset Depot,找到这三个图层点击 Add

    在 My Assets 里确认添加成功

     这下Cesium提供的所有数据源都能加载了

<script>
    Cesium.Ion.defaultAccessToken = '你的 cesium ion Token';
    Cesium.MapboxApi.defaultAccessToken = '你的 Mapbox Token';
    var viewer = new Cesium.Viewer('cesiumContainer');
</script>

    除了加载官方提供的数据源,还可以用Cesium提供的 ProviderViewModel接口自己扩展数据源。Cesium提供了各种接口支持各样的图层数据源。

    例如添加一个esri自定义数据源过程  [链接]

var esriMap = new Cesium.ArcGisMapServerImageryProvider({
    url:'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
    enablePickFeatures:false
});

//设置ProviderViewModel
var esriMapModel = new Cesium.ProviderViewModel({
   name:'esri Maps',
   iconUrl:Cesium.buildModuleUrl('./Widgets/Images/ImageryProviders/esriWorldImagery.png'),
   tooltip:'ArcGIS 地图服务',
   creationFunction:function () {
      return esriMap;
   }
});

var providerViewModels = [];
providerViewModels.push(esriMapModel);

var viewer = new Cesium.Viewer('cesiumContainer');
viewer.baseLayerPicker.viewModel.imageryProviderViewModels = providerViewModels;

    并且可以同时加载多个图层 ,后加载的图层将位于地球最上方,可以通过 layers.lower()或raise() 等调整图层顺序,也可以调整图层透明度等突出效果 [详情]。

   2. Terrain

    Cesium支持流式的、可视化的全球高程投影地形地势、水形数据,包括海洋、湖泊、河流、山峰、峡谷和其他能够被三维展示出来的且效果比二维好的地形数据。我们使用Cesium World Terrain图层(默认情况下,地球球体是WGS84 ellipsoid),该图层由Cesium ion提供,在“My Assets”中是默认提供的。

    进入 helloworld.html 后,我们漫游到 San Francisco 看看。(按住CTRL拖动

打开 Cesium World Terrain 前
打开 Cesium World Terrain 后

    默认水、光数据是不显示的,我们可以进行设置

var worldTerrain = Cesium.createWorldTerrain({
    requestWaterMask : true, // required for water effects
    requestVertexNormals : true // required for terrain lighting
});

var viewer = new Cesium.Viewer('cesiumContainer',{terrainProvider: worldTerrain});

    Cesium基于TerrainProvider请求地形的若干种方法。大多数地形提供器使用HTTP上的REST接口来请求地形切片。地形提供器根据请求的格式和地形数据的组织方式而有所不同。CesiumJS支持以下TerrainProvider:

  • CesiumTerrainProvider: 支持量化网格地形切片,针对地形流进行了优化。兼容Cesium ion所服务的地形和来自[3D tiling pipeline])(/3d-tiling-pipeline/terrain/)的输出数据。
  • GoogleEarthEnterpriseTerrainProvider: 支持由您的Google Earth Enterprise服务器生成的高程地图地形。
  • VRTheWorldTerrainProvider: 支持从VT MAK VR-TheWorld Server服务器请求的高度地图地形图。
  • EllipsoidTerrainProvider:按照程序创建椭球的表面。缺乏地形的真实外观,但不从服务器请求数据。

⑦ CreditsDisplay

    关闭 ⑦CreditsDisplay

viewer._cesiumWidget._creditContainer.style.display = "none"; 

参考

    Ceisum官方教程2 -- 项目实例(workshop)

    Cesium 中级教程2 - 图层 

    Cesium应用篇:影像服务(上)

系列

    Cesium:入门教程(一)之 Hello World

    Cesium:入门教程(二)之数据源加载

    Cesium:入门教程(三)之视窗配置

    Cesium:入门教程(四)之 Entities

    Cesium:入门教程(五)之 3D Tiles

    Cesium:入门教程(六)之 交互性(Interactivity)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Cesium:入门教程(二)之数据源加载 的相关文章

  • IDEA导入lib目录下的jar包

    https blog csdn net u010286027 article details 85248719 ops request misc request id biz id 102 utm term idea E6 96 B0 E5
  • LeetCode【114】二叉树展开为链表

    题目 给定一个二叉树 原地将它展开为链表 例如 给定二叉树 将其展开为 最终转化完 pre节点只有right 没有left TreeNode pre null public void flatten TreeNode root if roo
  • 【Mariadb高可用MHA】

    目录 一 概述 1 概念 2 组成 3 特点 4 工作原理 二 案例介绍 1 192 168 42 3 2 192 168 42 4 3 192 168 42 5 4 192 168 42 6 三 实际构建MHA 1 ssh免密登录 1 1

随机推荐

  • openshift搭建Istio

    本文档覆盖了官方文档的Setup的所有章节 一 安装Istio 本次安装的Istio版本为1 7 0 环境为openshift 4 3 注 不建议使用openshift 1 11 即kubernetes 3 11 安装istio 可能会出现
  • HBase简介(很好的梳理资料)

    http jiajun iteye com blog 899632 一 简介 history started by chad walters and jim 2006 11 G release paper on BigTable 2007
  • 腾讯云如何修改域名DNS服务器

    当你在腾讯云购买域名后 如果 DNS 服务器不正确 要把域名 DNS 修改为提示的 DNS 地址 解析后才生效 下面老魏说下操作步骤 一 通过以下步骤查看 DNS 服务器是否正确 登录腾讯云控制台 选择 云产品 gt 域名与网站 gt 云解
  • 短视频seo矩阵系统源码开发与部署全解析

    在这个数字化快速发展的时代 短视频已经成为人们获取娱乐 学习 商业信息的主要途径之一 对于企业来说 利用短视频矩阵进行高效且精准的营销推广 无疑是一个重要的战略方向 本文将详细介绍如何进行短视频矩阵源码的开发与部署 一 开发篇 短视频矩阵源
  • linux 常用语句 grep、awk、sed

    复习资料 一 find grep 管道符 1 find 路径 name 文件名 查找文件 2 grep sex true 文本包含sex true 的行显示出来 3 grep sex true grep o age 18 对grep sex
  • 【Kettle】将【MySQL表按字段同步、更新】【脚本运行】

    前提数据 转换 1 表输入设置 2 插入 更新设置 作业 模块设置 SQL设置 手动输入脚本内容 每次运行都会运行此脚本
  • 十、工业相机与SCARA机械臂的坐标系标定

    注 感谢固高长江研究院徐工程师的技术讲解 以及matlab程序 机器人系统程序的提供 在工业现场当中 相机拍摄到的图像有一个相机坐标系 而机器人自身也有一个机器人自身的坐标系 两者互相独立 当我们通过相机进行对物体进行拍摄 通过模式识别得到
  • pygame 学习记录

    话不多说上代码 import pygame import sys pygame init size width height 900 700 speed 2 1 bg 255 255 255 RGB screen pygame displa
  • 文件上传的各种绕过方式

    1 前端绕过 更改前端的过滤方法进行绕过 1 通过浏览器插件来删除检查后援js代码 然后上传webshell 2 上传文件时把后缀名改成png格式 上传时在通过抓包工具把后缀名改回来 3 更改Content Tybe为image jpeg
  • C#连接sqlServer数据库详解

    C 是如何跟SQL Server进行连接的 在C NET程序设计中 离不开ADO NET ADO NET是 NET连接数据库的重要组件 使用其可以很方便地访问数据库 ADO NET还可以访问Oracle数据库 Access数据库 SQL S
  • Echarts dataZoom x轴横坐标缩放

    https echarts apache org zh option html dataZoom Echarts dataZoom x轴横坐标缩放 把 dataZoom 房子 option下的第一级 和 xAxis yAxis series
  • SpringBoot 启动成功监听

    CommandLineRunner 接口 启动成功后的回调 接口代码 package org springframework boot FunctionalInterface public interface CommandLineRunn
  • MySQL优化(二):MySQL 索引深入解读

    目录 一 索引是什么 1 索引定义 2 索引类型 3 索引的创建 4 索引的删除 二 索引存储模型 2 1 二分查找 2 2 二叉查找树 2 3 平衡二叉树 2 4 多路平衡查找树 B Tree 2 5 加强版多路平衡查找树 B Tree
  • 【统计模拟及其R实现】分层抽样法 / 条件期望法 习题答案(超详细)

    课本 统计模拟及其R实现 肖枝红 朱强 武汉大学出版社 参考资料 方差缩减技术 条件期望法 目录 1 分层抽样法 2 条件期望法 1 分层抽样法 题目1 如何通过分层抽样法得到
  • [人工智能-深度学习-51]:循环神经网络 - RNN基本原理详解

    作者主页 文火冰糖的硅基工坊 文火冰糖 王文兵 的博客 文火冰糖的硅基工坊 CSDN博客 本文网址 https blog csdn net HiWangWenBing article details 121387285 目录 第1章 详解前
  • gmapping 分析

    转载 这一篇先讲我对gmapping源码的理解 难免有错 欢迎指正 相互学习 原博客 https blog csdn net roadseek zw article details 53316177 博客主页 https blog csdn
  • [k8s部署踩过的坑]

    系统环境 系统版本 docker版本 role ip地址 CentOS8 4 2105 Linux version 4 18 0 348 xx Red Hat 8 5 0 4 20 10 12 k8s master 192 168 100
  • 冒泡排序详解

    一 冒泡排序简介 常用排序算法 冒泡排序 Bubble Sort 是一种常见的排序算法 相对来说比较简单 冒泡排序重复地走访需要排序的元素列表 依次比较两个相邻的元素 如果顺序 如从大到小或从小到大 错误就交换它们的位置 重复地进行直到没有
  • python海龟漂亮图案代码大全_带有海龟图案的Python花

    我在高中的编程课上和海龟图形一起工作 这个项目是按照老师演示的一些指导原则和功能制作一朵花 我在一个小时内就完成了 现在我正试图用更多的海龟一次画出多朵花 但我不能让海龟们使用新定义的函数 老师也没有时间和我一对一地讨论我该怎么做 所以 经
  • Cesium:入门教程(二)之数据源加载

    前言 成功运行 helloworld 的例子后 下面对控件 数据源等进一步说明 鼠标 左键单击和拖拽 沿着地球表面平移 调整相机位置 右键单击和拖拽 相机放大缩小 调整相机距离 滚轮 相机放大缩小 调整相机距离 中间按下和拖拽 围绕地球表面