Ceisum初始化、界面小控件、加载实体

已于 2022-01-20 10:54:39 修改
阅读量806 收藏 1
点赞数
分类专栏： cesium 3D 文章标签： cesium 三维 天地图
于 2022-01-19 16:39:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Enbir/article/details/122583880
版权
cesium 同时被 2 个专栏收录
6 篇文章 1 订阅
订阅专栏
3D
3 篇文章 0 订阅
订阅专栏

上图

直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!-- Include the CesiumJS JavaScript and CSS files -->
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.89/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.89/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
  <div id="cesiumContainer"></div>
  <script>
    Cesium.Ion.defaultAccessToken = 'Cesium官网免费申请的密钥'

    const viewer = new Cesium.Viewer('cesiumContainer', {
      terrainProvider: Cesium.createWorldTerrain(),
      homeButton:false,
      sceneModePicker:false,
      baseLayerPicker:false,
      navigationHelpButton:false,
      animation:false,
      timeline:false,
      fullscreenButton:false,
      vrButton:false,
      infoBox:true,

    });   
    var redBox = viewer.entities.add({
    name : 'Red box with black outline',
    position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
    box : {
        dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
        material : Cesium.Color.RED.withAlpha(0.5),
        outline : true,
        outlineColor : Cesium.Color.BLACK
        }
    });
    viewer.zoomTo(viewer.entities);
  </script>
 </div>
</body>
<style>
   .cesium-viewer-toolbar{
     visibility: hidden;
   }
</style>
</html>

初始化以及界面小控件：

 Cesium.Ion.defaultAccessToken = 'Cesium官网免费申请的密钥'

 const viewer = new Cesium.Viewer('cesiumContainer', {
      terrainProvider: Cesium.createWorldTerrain(),		//为椭球表面提供地形或其他几何形状
      homeButton:false,			//主页按钮是否显示
      sceneModePicker:false,	//选择视角的模式，3D/2D/CV
      baseLayerPicker:false,	//底图选择器
      navigationHelpButton:false,	//导航帮助按钮
      animation:false,			//动画控件
      timeline:false,			//时间线
      fullscreenButton:false,	//全屏按钮
      vrButton:false,		//VR按钮
      infoBox:true,			//弹出信息框

    });

entity方式添加矩形

var redBox = viewer.entities.add({
    name : '一个矩形',
    position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
    box : {
        dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
        material : Cesium.Color.RED.withAlpha(0.5),
        outline : true,
        outlineColor : Cesium.Color.BLACK
        }
    });
viewer.zoomTo(viewer.entities);

CZML方式添加矩形

var czml = [{
    "id" : "czml",
    "name" : "矩形",
    "version" : "1.0"
},{
    "id" : "shape",
    "name" : "Red box with black outline",
    "position" : {
        "cartographicDegrees" : [-107.0, 40.0, 300000.0]
    },
    "box" : {
        "dimensions" : {
            "cartesian": [400000.0, 300000.0, 500000.0]
        },
        "material" : {
            "solidColor" : {
                "color" : {
                    "rgba" : [255, 0, 0, 128]
                }
            }
        },
        "outline" : true,
        "outlineColor" : {
            "rgba" : [0, 0, 0, 255]
        }
    }
}];
var dataSourcePromise = Cesium.CzmlDataSource.load(czml);
viewer.dataSources.add(dataSourcePromise);
viewer.zoomTo(dataSourcePromise);

赠人玫瑰，手有余香，记得随手点赞哦 ~

ShineMan-
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Cesium入门简介
youlinhuanyan的博客
04-24 1625
Cesium介绍 Ceisum是一款开源的基于JavaScript编写的使用WebGL的3D地图引擎。可用于动态地理空间数据的可视化应用开发，它是一款高性能的3维渲染引擎。 Ceisum的诞生背景 首先介绍一下AGI AGI的英文全称为Analytical Graphics Incorporation，三位创始人曾在通用公司宇航部的供职工程师，提供STK（System/Satellite Tool...
【Cesium 编程第一篇】概述、环境搭建、界面介绍
前端知识分享喵
04-09 9951
Cesium 是一个跨平台、跨浏览器的展示三维地球和地图的 javascript 库。Cesium 使用 WebGL 来进行硬件加速图形，使用时不需要任何插件支持，但是浏览器必须支持WebG
Ceisum官方教程3 -- 空间数据可视化
weixin_33693070的博客
12-06 270
原文地址：https://cesiumjs.org/tutorials/Visualizing-Spatial-Data/这篇教程教你如何使用Cesium的Entity API去绘制空间数据，如点，图标，文字标注，折线，模型，图形和立体图形。虽然这章不需要什么前提，但是如果你对Cesium一无所知，最好从第一个教程开始。Entity API是什么?Cesium丰富的空间数据可视化API分为两部分：...
cesium入门简介
qq_40098572的博客
02-17 4699
简介：Cesium是国外一个基于JavaScript编写的使用WebGL的地图引擎。Cesium支持3D,2D,2.5D形式的地图展示，可以自行绘制图形，高亮区域，并提供良好的触摸支持，且支持绝大多数的浏览器和mobile。 主要功能： 1.使用3d tiles格式流式加载各种不同的3d数据，包含倾斜摄影模型、三维建筑物、CAD和BIM的外部和内部，点云数据。并支持样式配置和用户交互操作。 2.全球高精度地形数据可视化，支持地形夸张效果、以及可编程实现的等高线和坡度分析效果。 3.支持多种资源的图像
Cesium 入门
FOR.GET
08-11 1055
~ 于迷途中归寻，开始继续学习GIS相关了~ 一、初识 Cesium Cesium中文网下载包，推荐使用最新 Ceisum目录结构等相关介绍 二、Django 中使用 Cesium ① 引入相关的静态文件，这里用了未压缩的1.8.3版本 ② 编写相关的前端代码 <!--静态文件模板标签--> {% load static %} <!DOCTYPE html> <html lang="en"> <head> <meta chars
电子测量中的重新初始化游标控件
11-17
3. **调用初始化子VI**：在主测量控件的代码中，插入对初始化游标子VI的调用，确保在相关事件发生后执行。 4. **更新游标位置**：在子VI中，更新游标的位置，并确保它们与新的测量结果相对应。 5. **界面反馈**：...
winfrom开发一个软件启动初始化界面
10-25
在Windows Forms（WinForms）开发中，创建一个软件启动初始化界面是提高用户体验的重要步骤。这个过程涉及使用C#编程语言来构建一个用户界面，该界面在应用程序启动时展示，直到主界面完全加载并准备好交互为止。...
asp.net 初始化文本框的小例子
01-20
在某些场景下，我们可能需要初始化或清空所有文本框的值，比如在页面加载或用户执行特定操作后。 这个小例子展示了如何在ASP.NET中实现初始化文本框的功能。代码定义了一个名为`ClearAllText`的方法，该方法接受一...
WinForm的延时加载控件概述
09-04
这种技术主要应用于C#的Windows Forms开发中，通过推迟数据加载直到用户实际需要时才执行，从而避免了初始化界面时不必要的资源消耗。 首先，我们来看一下如何在界面第一次显示时实现延时加载。当用户首次切换到...
小程序踩坑记《一》初始化显示指定界面，scroll-view上拉加载与page的下拉刷新冲
03-29
一：初始化显示指定界面一般对于后台功能比如商家、管理员等，需要先登录才能进入到app，所以需要在打开的时候来判断用户是否登录，从而决定是进入app还是登录界面。那么在小程序中，我 ...       一：初始化显示...
ceisum实现绘制线段实现动画效果
baidu_35105539的博客
10-12 1439
cesium实现线段的动效
Ceisum 本地搭建及发布(新手必看)
资深三维GIS开发
09-17 1431
众所周知，cesium的服务器是搭建在国外的，所以我们国内的用户访问的时候贼慢。 有时想查个api或者看个案例半天都进不去，今天我来说一下傻瓜式搭建本地的cesium环境，用于大家没事查资料用！ 步骤： 1、进入cesium官网找到需要的版本，进行下载； 2、这个是下载之后的目录结构，我来大致说一下。 Cesium的api文档位于Build/Documentation目录中。 Cesi...
Ceisum开发资料整理
GIS，加油呀~
11-30 2144
官方对外资料 Cesium官网(包含三维引擎+云服务) Cesium三维引擎官网 Cesium官方博客 Cesium官方行业案例 Cesium团队成员介绍 官方开发资料 Cesium官方下载 Cesium GitHub源码 Cesium官方 API文档(更新很及时) Cesium官方 教程(英文) Cesium官方 示例程序(Cesium Sandcastle) Cesiu...
Ceisum画图工具封装-简版demo
席木木的博客
05-14 616
1 基本说明 主要是涉及Cesium中鼠标点击事件的处理，通过鼠标左/右键点击绘制点、矩形、多边形，通过指定范围（左下角和右上角坐标值）绘制矩形，注销鼠标点击事件等。可将多边形/矩形等的顶点坐标数组、经纬度数组等返回，以及绘制结果清除（destory）。 PS：写的比较简单，后续还会再进行修改。 2 ES6 类封装代码 import * as Cesium from 'cesium/Cesium' /**绘制几何图形的工具类 */ export default class DrawGraphicUtils
cesium应用场景
最新发布
qq_42802941的博客
09-23 382
cesium能够实现的功能和应用场景
Ceisum官方教程1 -- 开始
weixin_34309543的博客
12-04 231
原文地址：https://cesium.com/docs/tutorials/getting-started/ 学会使用全球地形、影像、3d tile（模型切片）、地理编码创建一个Cesium程序。 CesiumJS是一个基于javascript的浏览器器3d地图引擎。Cesium ion是一个3d内容的发布中心并且可以把你自己的数据进行切片、发布服务。CesiumJS和 ion 配合起来...
Ceisum实时获取后台数据 实时更新实体位置信息且实现实体转向功能
yangwq的博客
06-12 4152
用定时器模拟实时获取后台数据 当取到数据后实体同时移动到目标位置 这种方式不再与Cesium时间关联 实现效果：每秒新增一个坐标；每秒实体运动到相应正确位置且实现实体转向功能 PS：该方法实体经纬度超过正负180，90时需进行坐标计算转为正负180,90范围内的坐标后实体转向才正常；本文未进行处理 var viewer = new Cesium.Viewer('cesiumContainer', { infoBox : false, selectionIndicator : fal.
ceisum加载shp格式的城市白模建筑数据
跃然实验室
01-17 8292
1、利用cesiumLab将shp转换为3dtiles   2、选择一个输入文件。系统自动会读取输入数据里的信息，例 如字段列表，投影信息等。否则会列出数据的所有字段。如果文件里不包含投影，那么需要选择投影信息。 输入文件：支持 shp，mif，kml 等各种 gdal 支持的格式 中文编码： 默认支持的字段中文编码为 utf8，对于一些国产的 shp 数据，中文可能是 GBK...
Ceisum官方教程2 -- 项目实例（workshop）
weixin_34075268的博客
12-06 427
原文地址：https://cesiumjs.org/tutorials/Cesium-Workshop/概述我们很高兴欢迎你加入Cesium社区！为了让你能基于Cesium开发自己的3d 地图项目，这个教程将从头到尾讲解一个基础的Cesium程序的开发过程。这个教程将用到很多重要的CesiumAPI，但是并不是所有的(CesiumJS有很多很多功能）。我们目标是教会你基于Cesium做开发的基本原...
pyqt6控件大小和位置的初始化
05-18
在 PyQt6 中，控件的大小和位置可以通过以下方法进行初始化： 1. 使用构造函数进行初始化。大多数 PyQt6 控件的构造函数都接受两个参数：父对象和窗口标题。有些控件还接受其他参数，例如大小和位置。例如： ```python import sys from PyQt6.QtWidgets import QApplication, QWidget app = QApplication(sys.argv) win = QWidget(None, flags=Qt.WindowType.Window) win.setGeometry(100, 100, 500, 500) # 设置窗口大小和位置 win.setWindowTitle("My Window") win.show() sys.exit(app.exec()) ``` 2. 使用 setGeometry() 方法进行初始化。setGeometry() 方法接受四个参数，分别是控件的 x、y 坐标，以及控件的宽度和高度。例如： ```python import sys from PyQt6.QtWidgets import QApplication, QWidget app = QApplication(sys.argv) win = QWidget(None, flags=Qt.WindowType.Window) win.setGeometry(100, 100, 500, 500) # 设置窗口大小和位置 win.setWindowTitle("My Window") button = QPushButton("Click me!", win) button.setGeometry(10, 10, 100, 30) # 设置按钮大小和位置 win.show() sys.exit(app.exec()) ``` 在这个例子中，我们创建了一个 QPushButton 控件，并将其添加到 QWidget 控件中。然后，我们使用 setGeometry() 方法设置按钮的大小和位置。 3. 使用布局管理器进行初始化。布局管理器可以自动管理控件的大小和位置，从而简化代码。例如： ```python import sys from PyQt6.QtWidgets import QApplication, QWidget, QVBoxLayout, QPushButton app = QApplication(sys.argv) win = QWidget(None, flags=Qt.WindowType.Window) win.setWindowTitle("My Window") layout = QVBoxLayout() win.setLayout(layout) button = QPushButton("Click me!") layout.addWidget(button) win.show() sys.exit(app.exec()) ``` 在这个例子中，我们创建了一个 QVBoxLayout 布局管理器，并将其设置为 QWidget 控件的布局管理器。然后，我们创建了一个 QPushButton 控件，并将其添加到布局管理器中。布局管理器会自动调整控件的大小和位置，以适应父控件的大小。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ShineMan-

走过路过不要错过，一分钱也是爱

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值