cesium01-初始化(代码片段)

mashuai666 mashuai666     2023-04-02     176

关键词:

一、cesium 是什么?
  Cesium是一款面向三维地球和地图的,世界级的javaScript开源产品。它提供了基于javaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精度,渲染质量以及多平台,易用性上都有高质量的保证。
  Cesium隶属于AGI公司,该公司一直致力于时空数据业务。正如很多开源项目都有一个个性化的名字,Cesium也不例外。Cesium原意是化学元素铯,铯是制造原子钟的关键元素,通过命名强调了Cesium产品专注于基于时空数据的实时可视化应用。

二、下载Cesium的依赖包
  官网:https://cesiumjs.org/

三、设置web服务器
  Cesium根目录中打开一个命令框,
  npm install
  npm start 或者 node server.js启动web服务器

四、Hello World讲解

  script标签内加入Cesium.js。这定义了Cesium对象,它包含了我们所需要的一切。
  <script src="../Build/Cesium/Cesium.js">

  为了使用Cesium Viewer小部件,我们需要包含它的CSS。
  @import url(../Build/Cesium/Widgets/widgets.css)

  在HTML主体中,我们为viewer创建了一个div。
  <div id="cesiumContainer"></div>

  最后,我们创建一个viewer实例。
  var viewer = new Cesium.Viewer(‘cesiumContainer‘)

五、完整代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>初始化</title>
        <script src="../Build/Cesium/Cesium.js"></script>
        <style>
              @import url(../Build/Cesium/Widgets/widgets.css);
              html, body, #cesiumContainer 
                  width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
              
        </style>
    </head>
    <body>
        <div id="cesiumContainer"></div>
    </body>
</html>
<script type="text/javascript">
    var viewer = new Cesium.Viewer(cesiumContainer);
</script> 

 

关于cesium拖json文件上传的插件(代码片段)

代码:/**@Author:yourname*@Date:2020-01-0910:13:45*@LastEditTime:2020-01-1410:31:46*@LastEditors:PleasesetLastEditors*@Description:InUserSettingsEdit*@FilePath:\\cesium\\Te 查看详情

cesium结合geoserver实现地图空间查询(附源码下载)(代码片段)

...,获取矢量数据的属性,显示在右上角的信息窗口。地图初始化创建:varviewer=newCesium.Viewer(‘map‘,geocoder:false,homeButton:false,sceneModePicker:false,fullscreenButton:false,vrButton:false,baseLayerPicker:false,infoBox:false,selectionIndicator:false,animation:false,t... 查看详情

cesium三维地图入门教程(代码片段)

...源码开源地址:Cesium三维地图入门教程二、环境搭建初始化后的界面及各个控件的名称如图://引入token,装入容器Cesium.Ion.defaultAccessToken='xxx'constviewer=newCesium.Viewer('cesium-container')cesium主要分为下面四... 查看详情

cesium01_加载影像-baselayerpicker使用

参考技术A1、修改内置BaseLayerPicker在初始化Viewer时,将baseLayerPicker设置为true即可显示BaseLayerPicker控件。我们可以通过将viewer.baseLayerPicker.viewModel.selectedImagery设置为viewer.baseLayerPicker.viewModel.imageryProviderViewModels[6]来设置BaseLayerPicker... 查看详情

cesium(模型)(代码片段)

本文示列模型的添加、删除。//添加模型(方法一)varposition=Cesium.Cartesian3.fromDegrees(108,34,500);varheading=Cesium.Math.toRadians(90);varpitch=Cesium.Math.toRadians(-30);varroll=Cesium.Math.toRadians(0);varhpRoll=newCes 查看详情

cesium-多viewer分屏同步实现(代码片段)

记cesium分屏同步思路:1.新建两个viewer对象;2.监控viewer视图变化(调整监控精度);3.获取中心点并转坐标系;4.获取地图中心点到相机的距离;5.根据中心点和相机距离调整被同步对象的视图;代码演示:1.viewer1=newCesium.Viewer(\'... 查看详情

cesium(相机)(代码片段)

本文示列相机的几种方式,及区别。 //创建viewervarviewer=newCesium.Viewer(‘cesiumContainer‘); //第一种:viewer.zoomTo viewer.zoomTo(greenCorridor,heading:Cesium.Math.toRadians(0),pitch:Cesium.Math.toRadians(- 查看详情

cesium物体显示(代码片段)

viewer.zoomTo(entity1);viewer.zoomTo(viewer.entities);viewer.camera.flyTo(destination:Cesium.Cartesian3.fromDegrees(-122.19,46.25,5000.0),orientation:heading:Cesium.Math.toRadians(175.0),pitch:Cesiu 查看详情

解决cesium1.50对gltf2.0/3dtiles数据读取的问题(代码片段)

问题说明Cesium1.50(2018/10/01)版本打开3dtiles可能会出现加载不上导致渲染停止的错误。错误说明为:RuntimeError:UnsupportedglTFExtension:KHR_technique_webgl错误截图如下:解决方案我发现原因是KHR_technique_webgl扩展新版Cesium已经不支持的缘故... 查看详情

cesium(实体)(代码片段)

本文示列实体的添加、删除、获取//创建viewervarviewer=newCesium.Viewer(‘cesiumContainer‘);//添加实体varredBox=viewer.entities.add(id:‘Box‘,position:Cesium.Cartesian3.fromDegrees(108,34,0),box:dimensions:newCesium.Cartesia 查看详情

cesium部署(代码片段)

使用Cesium开源库搭建三维WebGIS,首先对Cesium做本地部署,我使用的是vs1、进入其官网http://cesiumjs.org,下载Cesium,并在本地解压,文件路径如下所示:2、到node.js官网,下载最新版本的node.js并进行安装,安装完后在cmd可以用node--ve... 查看详情

cesium(鼠标事件)(代码片段)

本文示列cesium鼠标添加事件、及删除事件。创建viewervarviewer=newCesium.Viewer(‘cesiumContainer‘);鼠标事件varhandler=newCesium.ScreenSpaceEventHandler(viewer.scene.canvas); //1、左键单击事件handler.setInputAction(function(click 查看详情

cesium三维漫游飞行效果实现(代码片段)

详细的实现过程见:这里本篇实现cesium三维漫游飞行效果,效果图如下:  查看详情

cesiumforunity最新实践流程2-20221208(代码片段)

目录CesiumForUnity最新实践流程2-202212081、项目初始化2、添加数据3、添加自己的本地或在线三维数据4、打包5、运行上一篇 CesiumForUnity3d最新实践流程-2022-12-01 讲了如何使用CesiumForUntiy发布的项目进行,本篇将讲述如何通过新... 查看详情

cesium高度解析(代码片段)

varviewer=newCesium.Viewer(‘cesiumContainer‘,shadows:true);//为true时,球体会有高程遮挡效果(在没有地形时候也会有高程遮挡效果)viewer.scene.globe.depthTestAgainstTerrain=true;varviewModel=height:0;Cesium.knockout.track(viewMode 查看详情

cesium获取entity的坐标及高程(代码片段)

1varcartographic=Cesium.Cartographic.fromCartesian(entity.position.getValue());2varlon=Cesium.Math.toDegrees(cartographic.longitude);3varlat=Cesium.Math.toDegrees(cartographic.latitude);4varelev=viewe 查看详情

cesium中级1-空间数据可视化(代码片段)

[CesiumJS]Cesium中级1-空间数据可视化(一)Cesium中文网:http://cesiumcn.org/|国内快速访问:http://cesium.coinidea.com/本教程将教读者如何使用Cesium的实体(Entity)API绘制空间数据,如点、标记、标签、线、模型、形状和物体。不需要Cesium... 查看详情

cesium鼠标事件(代码片段)

computed:handler()returnnewthis.Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)在事件的外面先定义一下const_this=this(因为在setInputAction方法中,this的指向会发生变化,不再指向vue实例)用this.Cesium是因为在mainjs里配置了Cesium的全局变量//1.移动... 查看详情