正文 

当前位置： 首页 > 程序 > java教程

cesium-知识点（viewer）(代码片段)

yaohuimo yaohuimo     2022-12-26     221

关键词：

Cesium之Viewer的构造（转自：https://blog.csdn.net/zhy905692718/article/details/78865107）

Viewer属于Cesium的控件部分，是显示地图的容器，源码在SourceWidgetsViewerViewer.js，支持2D3D及VR视图

构造方式：

指定对应的DOM的Id，及相关参数：

技术分享图片 
  var viewer = new Cesium.Viewer(‘cesiumContainer‘, 
            timeline: false, //是否显示时间轴
            sceneModePicker: true, //是否显示3D/2D选择器
            baseLayerPicker: true, //是否显示图层选择器
            geocoder: true, // 搜索
            scene3DOnly: true, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
            animation: false, //左下角仪表盘
            navigationHelpButton: true, //右上角的帮助按钮
            homeButton: false, //是否显示Home按钮
            infoBox: true, //?
            fullscreenButton: true, //是否显示全屏按钮
            showRenderLoopErrors: true, //是否显示渲染错误
            fullscreenElement: document.documentElement, //全屏元素
            imageryProviderViewModels: [imgprovider_google], //影像来源
            terrainProviderViewModels: [terrainprovider_default], //地形来源
            selectedImageryProviderViewModel: Util.imgprovider_google //当前选中的影像来源
        );
View Code
 

其他属性：

  • vrButton：是否显示VR视图按钮
  • selectionIndicator：是否显示选中实体的标识
  • navigationInstructionsInitiallyVisible：true则默认显示帮助菜单，否则只有当用户点击帮助按钮时显示
  • clockViewModel：时钟视图模型，用来控制时间？？？
  • selectedTerrainProviderViewModel：当前选中的地形
  • 当baseLayerPicker设置为false时，使用imageryProvider、terrainProvider指定影像和地形
  • skyBox：用于定义天空
  • skyAtmosphere：设置地球周围是否有发亮的光圈
  • useDefaultRenderLoop:false时viwer不处理地球的渲染，只有黑窗口
  • targetFrameRate:指定默认渲染器的帧率
  • automaticallyTrackDataSourceClocks:是否随着时钟的改变追踪更新数据，如果需要单独处理时钟时设置为false
  • contextOptions:上下文操作？？？
  • sceneMode:初始视图类型（SceneMode.SCENE2D、SceneMode.SCENE3D）
  • mapProjection:地图投影（2D视图或哥伦布视图时使用）
  • globe:传给scene的地球对象，如果设置为false则没有地球
  • orderIndependentTranslucency:半透明？？？
  • creditContainer:显示credit的DOM元素id
  • dataSources:默认数据源，如果指定了该值则需要负责销毁
  • terrainExaggeration:地形放大比例，不影响在地球上的相对位置
  • shadows:是否显示太阳的阴影
  • terrainShadows:地形是否显示太阳的阴影及阴影形式
  • mapMode2D:指定2D地图在水平方向的滚动和旋转形式
  • projectionPicker:是否显示投影选择器

cesium(相机)(代码片段)

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

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

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

cesium：四种拾取pick(代码片段)

...r.scene.globe.ellipsoid);console.log("点击拾取的坐标：",position);,Cesium.ScreenSpaceEventType.LEFT_CLICK);viewer.scene.globe.pick(ray,viewer.scene)拾取地表坐标返回一个射线（ray）和地球表面的一个交点的Cartesian3坐标。一般用于获取加载地形后的经纬度... 查看详情

cesium学习小结(代码片段)

...ilesfunctionadd3DTiles(url,proxy)vartileset=viewer.scene.primitives.add(newCesium.Cesium3DTileset(url:newCesium.Resource(url:url,proxy:newCesium.DefaultProxy(proxy))));returntileset;2.3dtile单体化viewer是var viewer = new Cesium.Map("cesiumContainer")的初始化球体dytTiles... 查看详情

cesium(实体)(代码片段)

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

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

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

cesium高度解析(代码片段)

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

cesium案例解析——cesiumwidget简化窗体(代码片段)

目录1.正文2.参考1.正文CesiumWidget这个案例展示了一个Cesium的简化窗体。在之前的案例中使用的都是Cesium.Viewer这个窗体组件，包含了非常丰富的组件内容。Cesium.CesiumWidget可以说是其简化版本，不包含动画、图层选择等等其他组件... 查看详情

cesium中级2-图层(代码片段)

Cesium中文网：http://cesiumcn.org/|国内快速访问：http://cesium.coinidea.com/Cesium支持从几个标准服务绘制和添加高分辨率图像（地图）图层。图层可以按顺序排列，并混合在一起。每一层的亮度、对比度、伽玛、色调和饱和度可以动态地... 查看详情

cesium02-小部件(代码片段)

...newViewer后构造的就是我们看得见的地球对象。letviewer=newCesium.Viewer(container,options)container：渲染地球div容器options:可选参，包含了一系列功能  代码：<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><metahttp-equi... 查看详情

cesium+blender实现简单gis(代码片段)

...导入CAD/DAE素材，手工搭建。导出gltf2.0格式文件。2.在Cesium的基础工程中加入gltf模型letx=117.818372;lety=39.000082;constviewer=newCesium.Viewer("cesiumContainer");varscene=viewer.scene;varmodelMatrix=Cesium.Transforms.eastNorthUpToFixedFrame... 查看详情

cesium鼠标事件(代码片段)

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

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

Cesium三维地图入门教程一、前言二、环境搭建三、坐标系及转化3.1wgs84坐标系3.2wgs84弧度计算3.3笛卡尔空间直角坐标系3.4平面坐标系四、视图与场景4.1Viewer4.2Scene4.3Camera五、界面操作5.1视图控件隐藏5.2场景操作六、影像和标注6.1影... 查看详情

cesium鹰眼功能(代码片段)

Cesium鹰眼实现的功能，有两种方式：一种声明两个viewer，另一种就是通过Leaflet。这里我们采用第二种方式，用到一位道友自定义鹰眼插件，这里我们稍微改进一下（ES6方式），下面我们来介绍一下... 查看详情

cesium分屏对比实现(代码片段)

不向现实低头，不服输，永不放弃学习送给每一位战斗的工程师，这几天写了一个简单的分屏效果，在这记录一下，希望能帮到有缘人，原理很简单就是两个Viewer，话不多说直接上代码/**@Author:yournam... 查看详情

cesium01-初始化(代码片段)

一、cesium是什么？　　Cesium是一款面向三维地球和地图的，世界级的javaScript开源产品。它提供了基于javaScript语言的开发包，方便用户快速搭建一款零插件的虚拟地球Web应用，并在性能，精度，渲染质量以及多平台，易用性上都... 查看详情

认识cesium旋转大小变量(代码片段)

...码中有如下；矩阵乘以旋转大小，还放入mat；Cesium.Matrix4.multiply(mat,rotationX,mat);初看以为rotationX是一个数值，因为矩阵可以和数相乘；但是看它的代码，rotationX是由一长串代码获得的；下面来看一下࿱... 查看详情

cesium添加多个geojson文件并分别控制显示和隐藏(代码片段)

/*获取geojson数据*/functionget_geojson(name,h,n)letx=document.getElementById(n);if(x.className==="la")loadgeojson(name,h,n);x.className="la2";elsex.className="la";letlen=viewer.dataSources.length;if(l 查看详情