关键词:
一、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.移动... 查看详情