首页
学习
活动
专区
圈层
工具
发布
    • 综合排序
    • 最热优先
    • 最新优先
    时间不限
  • 来自专栏烤包子

    CesiumCesium坐标转换

    Cesium中用Cartesian3变量表示,笛卡尔空间直角坐标系,用new Cesium.Cartesian3(x, y, z)创建。 坐标的定义: 1:Cartesian2-----new Cesium.Cartesian2(x, y) 2:Cartesian3---- new Cesium.Cartesian3(x, y, z) 3 cesium.js为我们提供了很有用的变换工具类, Cesium.Cartesian3(相当于Point3D)Cesium.Matrix3(3x3矩阵,用于描述旋转变换)Cesium.Matrix4( var rotate = Cesium.Math.toRadians(angle);//转成弧度 var quat = Cesium.Quaternion.fromAxisAngle(Cesium.Cartesian3 Cesium.Cartesian3.ZERO var m = Cesium.Matrix4.fromRotationTranslation(rot_mat3, Cesium.Cartesian3.ZERO

    3.6K40发布于 2021-11-10
  • 来自专栏前端博客

    Cesium笔记(1):在项目中使用Cesium—Vue整合Cesium

    项目中引入Cesium,普通项目,按照官方文档照做就可https://cesium.com/docs/tutorials/getting-started/常规引入很多人说需要require.js,我是没有使用 ,/Cesium-1.40/Build/CesiumUnminified/Cesium.js/Cesium-1.40/Build/CesiumUnminified/Widgets/widgets.css 当然,也可以手工导入 improt 导入,这个不需要修改webpack 配置整合入webpack首先npm i cesium,如果按照不成功(再次fuck GFW),直接下载cesium包(https: / cesium--配置------------------------------------    sourcePrefix: ' '  },  // cesium--配置------------- Cesium》,请注明出处:https://www.zhoulujun.cn/html/GIS/cesium/8321.html

    2.1K20编辑于 2023-05-14
  • 来自专栏前端漫步

    Cesium入门之一:Cesium本地运行

    Cesium简介 Cesium是一个开源的、面向三维地球和地图的JavaScript库,它是基于Apache2.0许可的开源程序,可以免费的用于商业用途; Cesium下载 Cesium的官网地址是:https ://cesium.com/platform/cesiumjs/,由于Cesium的服务器在国外,我们访问会比较慢,所以,我们可以将Cesium下载到本地,在本机上运行,后面查看Cesium的帮助文档和示例程序就比较方便了 打开官网地址,在Platform菜单下找到Downloads,打开下载页面 当前Cesium的最新版本是1.105.1,在下载页面点击DOWNLOAD CESIUMJS 1.105.1,将Cesium 下载到本地 Cesium目录结构 下载后的Cesium是一个压缩文件,解压该压缩文件,通过VSCode打开该文件夹,其目录结构如下: 本地运行Cesium 我们可以将Cesium发布到本机服务器 一个是Documentation:这个是Cesium的API文档,可以在开发的过程中查看开发文档,帮助我们更好的了解API 另外一个是Sandcastle,Cesium为我们提供了一个沙盒测试环境,通过

    4.8K31编辑于 2023-10-14
  • 来自专栏前端漫步

    Cesium入门之八:Cesium加载矢量数据

    二、Cesium支持的矢量数据格式 KML (Keyhole Markup Language) CZML (Cesium Language) GeoJSON KML格式 KML(Keyhole Markup Cesium中,可以通过调用Cesium.KmlDataSource()实例来加载KML文件,并将其添加到图层中。 在Cesium中,可以使用Cesium.CzmlDataSource()实例加载和解析CZML数据源。 在Cesium中,使用Cesium.GeoJsonDataSource.load()方法可以将本地的GeoJSON文件加载到图层中。 /public/china.json') viewer.dataSources.add(geoJson) 三、Cesium加载GeoJSON数据格式的中国地图示例 Cesium加载GeoJSON数据非常简单

    6K42编辑于 2023-10-14
  • 来自专栏前端漫步

    Cesium入门之九:Cesium加载gltf文件

    Cesium中的模型坐标系 在Cesium中,为了确保各种数据都可以在三维场景中正确地显示和交互,定义了一个特定的模型坐标系,即ENU坐标系,其中ENU代表东北上。 要将模型从外部坐标系转换到ENU坐标系,我们需要使用Cesium的坐标转换功能。Cesium提供了许多函数和对象,用于将3D模型从外部坐标系转换到ENU坐标系。 相关类介绍 Cesium.Cartesian3(x, y, z)类 Cesium.Cartesian3是Cesium库中用于表示三维世界空间中笛卡尔坐标的类。 (均为0度)的Cesium.HeadingPitchRoll对象: var hpr = new Cesium.HeadingPitchRoll(); 常用转换函数 Cesium.Transforms.eastNorthUpToFixedFrame 例如: var enuPoint = new Cesium.Cartesian3(10, 10, 0); var fixedFramePoint = new Cesium.Cartesian3(); Cesium.Matrix4

    4.4K30编辑于 2023-10-14
  • 来自专栏前端博客

    Cesium笔记(0):Cesium简介及学习资料搜集

    Cesium起步Cesium官方起点:https://cesium.com/docs/tutorials/getting-started/ 把里面大致看一下,然后撸代码学习Cesium官方代码实例:https ({evenColor : Cesium.Color.WHITE, oddColor : Cesium.Color.BLACK, repeat : new Cesium.Cartesian2(4, 4) 学习路线API学习路线图,按下图顺序学习相关类Cesium进阶之路 (3大方向)Web前端方向:Cesium与webpack (裁剪以及压缩),Cesium 与vue (框架设计, 嵌入复杂业务系统), Cesium的UI (UI 设计,定制可复用的Cesium交互界面)图形学方向:WebGL深入,基于Cesium 的可视化定制(视阈、水淹、水面、热力图,流场图、飞线图、扫描图)数据预处理方向:投影变换 笔记(0):Cesium简介及学习资料搜集》,请注明出处:https://www.zhoulujun.cn/html/GIS/cesium/5668.html

    1.7K20编辑于 2023-05-14
  • 来自专栏前端漫步

    Cesium入门之十一:认识Cesium中的Entity

    Entity在Cesium中的作用 Entity是Cesium中非常重要的类,它为我们提供了一种灵活、强大的方式来描述、呈现和操控地球上的实体对象。 material:设置线的材质,可以使用Cesium.Material提供的材质类型,如Cesium.ColorMaterialProperty、Cesium.ImageMaterialProperty ({ color: Cesium.Color.GREEN, outlineWidth: 1, outlineColor: Cesium.Color.BLACK }) } }) 面(Polygon)的外观样式 material:设置面的材质,可以使用Cesium.Material提供的材质类型,如Cesium.ColorMaterialProperty、Cesium.ImageMaterialProperty extrudedHeight: 0, material: Cesium.Color.GREEN.withAlpha(0.5) } }) Cesium中的Entity类提供了在地球空间上创建

    2.5K40编辑于 2023-10-14
  • 来自专栏前端漫步

    Cesium入门之五:认识Cesium中的Viewer

    构造函数 new Cesium.Viewer(container, options):是用来创建一个新的 Cesium 视图器(Viewer)实例的构造函数。 下面代码在名为“cesiumContainer”的HTML元素中创建一个新的Cesium Viewer const viewer = new Cesium.Viewer('cesiumContainer terrainProvider: 地形提供者,可以是Cesium.CesiumTerrainProvider、Cesium.GoogleEarthEnterpriseTerrainProvider等类型 skyBox: 天空盒样式,可以是Cesium.SkyBox或者Cesium.Color类型。 skyAtmosphere: 大气层设置,可用于控制大气层渲染效果。 sceneMode: 场景模式,有Cesium.SceneMode.SCENE3D、Cesium.SceneMode.COLUMBUS_VIEW、Cesium.SceneMode.SCENE2D三种,默认为

    3.6K62编辑于 2023-10-14
  • 来自专栏前端漫步

    Cesium入门之七:Cesium加载地形数据

    Cesium加载地形数据 一、什么是地形数据 地形数据是描述地球表面和地形高度的数字模型或图像。 二、TerrainProvider类 TerrainProvider类是Cesium中用于加载地形数据的基本类。 CesiumTerrainProvider是Cesium默认的地形提供者。 CustomHeightmapTerrainProvider:Cesium中用于自定义高程数据的地形提供器,它允许开发人员使用程序生成或者从其他来源导入高程数据来创建自定义的地形。 OK,关于Cesium加载地形数据的内容,就介绍到这里了。

    9K21编辑于 2023-10-14
  • 来自专栏前端文章小tips

    Cesium 组件重写

    时,相机不是定位到Cesium自带的默认位置,而是定位到我们想要的位置。 1)修改相机的默认矩形范围 Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees( 110.15, 通过查看 Cesium 源码(Source/Widgets/Geocoder/GeocoderViewModel.js 第73行),我们发现Cesium 默认采用的是 Bing 地图服务来实现地理编码的功能 那么我们就可以通过覆写 geocoder 方法的方式来实现自定义的地理编码服务,下面我们重写geocode方法,将 Cesium 默认的 Bing 地图服务改为OSM地图服务。 ", }); var arcgisVM = new Cesium.ProviderViewModel({ name: "ArcGIS地形", iconUrl: Cesium.buildModuleUrl

    1.4K30发布于 2021-11-23
  • 来自专栏前端漫步

    Cesium入门之十:Cesium加载3DTiles数据

    Cesium中与3DTiles相关的类 1.Cesium3DTileset类 Cesium3DTileset类是3DTiles数据的主要管理类,负责加载和渲染Tileset。 2.Cesium3DTileStyle类 Cesium3DTileStyle是用于指定和应用3D瓦片集的样式的类;它可以控制3D瓦片的颜色、点大小、标签风格和文本内容等;它可以对3D瓦片进行分类和着色, 3.Cesium3DTileContent类 Cesium3DTileContent是用于表示单个3D瓦片的内容和几何信息的类。 Cesium3DTileFeature类 Cesium3DTileFeature类用于表示3D瓦片中的单个要素(feature)及其相关属性。 Cesium中加载3DTiles数据的示例 try { const tileset = await Cesium.Cesium3DTileset.fromIonAssetId(75343);

    6.9K10编辑于 2023-10-14
  • 来自专栏点滴积累

    Cesium基础使用介绍

    前言 最近折腾了一下三维地球,本文简单为大家介绍一款开源的三维地球软件——Cesium,以及如何快速上手Cesium。 一、 Cesium简介 Github地址:https://github.com/AnalyticalGraphicsInc/cesium。 安装完之后,新建html页面并引用Cesium.js,如下: <! ({ url: 'data/Cesium_Ground.gltf', //以下这些信息也均可在entity中设置 color : Cesium.Color.fromAlpha(Cesium.Color.RED 2.6.3 CZML CZML是Cesium中很重要的一个概念,也是一个亮点,CZML使得cesium很酷很炫地展示动态数据成为可能。

    7.8K71发布于 2018-04-28
  • 来自专栏前端博客

    Cesium笔记(7): camera相机与视野,cesium地图移动缩放旋转配置

    ,相机的旋转参数:Roll是围绕X轴旋转Pitch 是围绕Y轴旋转Heading是围绕Z轴旋转Cesium操作摄像头的常用方法flyHome(duration) 地图回到home, to set the (Cesium.Math.toRadians(9), Cesium.Math.toRadians(9), 100))setView(options),Sets the camera position, , 15000.0),rectangle: destination :Cesium.Rectangle.fromDegrees(0.0, 20.0, 10.0, 30.0),//west, south, east, northflyTo可以比setView,设置更多的参数view.camera.flyTo({    destination :Cesium.Cartesian3.fromDegrees( ,cesium地图移动缩放旋转配置》,请注明出处:https://www.zhoulujun.cn/html/GIS/cesium/8333.html

    6.5K10编辑于 2023-05-14
  • 来自专栏点滴积累

    Cesium几个案例介绍

    前言 本文为大家介绍几个Cesium的Demo,通过这几个Demo能够对如何使用Cesium有进一步的了解,并能充分理解Cesium的强大之处和新功能。 其他的无需多言,如果还不太了解什么是Cesium,可以参见我的另外两篇关于Cesium的博客,下面直接进入正题。 二、 根据地形瓦片直接绘制高程、坡度及等高线 这是Cesium 1.4.0版新添加的功能,所以一定要更新到此版本。只需要正确加载地形瓦片,Cesium可以自动算出高程设色瓦片、坡度设色瓦片以及等高线。 Cesium根据此uniform生成相应类型的等高线。 理解了这一点,高程设色和坡度设色也就明白了。 ; }, Cesium.ScreenSpaceEventType.PINCH_END); 四、 改造geocoder控件 Cesium自带了geocoder控件,可以检索并定位到某个地址,原理很简单,就是后台解析此地址

    13.4K50发布于 2018-04-28
  • 来自专栏烤包子

    Cesium】修改操作惯性值

    ScreenSpaceCameraController API:https://cesium.com/docs/cesiumjs-ref-doc/ScreenSpaceCameraController.html

    1.6K20发布于 2021-11-10
  • 来自专栏计算机图形学 前端可视化 WebGL

    Cesium for Unreal加载倾斜摄影

    本文介绍UE4中通过Cesium插架加载本地倾斜摄影模型。Cesium for Unreal插件运行在UE环境何总运行Cesium,这样方便做一个GIS应用。 安装Cesium for Unreal插件 在UE 虚幻商城中,搜索 “Cesium for Unreal”, 然后下载插件,下载完成后,可以点击安装到引擎: 可以安装到引擎,需要UE 4.26以上, 启用之后可能需要重启 添加Cesium SunSky Cesium SunSky扩展了UE本身的SunSky,针对Cesium场景做了优化。 有关细节此处不详细说明。 来源可以是Cesium ion,也可以From Url。 如果需要使用Cesium ion的线上数据,可以登录Cesium ion账户。 通过点击【Add】按钮,弹出【Cesium ion Assets】选项卡,内部列表数据与线上Cesium ion账户内【My Assets】选项卡中的数据一样。

    2.7K30编辑于 2023-01-08
  • 来自专栏烤包子

    Cesium】新手入门HelloWord

    1.首先下载Cesium库,地址:https://cesium.com/cesiumjs/ 2.创建Html 引入 Cesium.js库 3.通过下面代码初始化一个基础瓦片地球 //初始化一个瓦片地球 viewer = new Cesium.Viewer('cesiumContainer', { animation: false, //是否显示动画控件 baseLayerPicker: geocoder: false, //地名查找 homeButton: false, //首页 fullscreenButton: false, //全屏 // sceneMode : Cesium.SceneMode.COLUMBUS_VIEW viewer.imageryLayers.remove(viewer.imageryLayers.get(0)); // 增加谷歌影像底图 viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider lyrs=s&x={x}&y={y}&z={z}', tilingScheme: new Cesium.WebMercatorTilingScheme() }));

    1.1K20发布于 2021-11-10
  • 来自专栏时光笔记

    Cesium 画贴地线

    前言 使用Cesium加载线数据时,在关闭地形的情况下毫无问题,但在开启地形加载地形数据以后,由于地面将不再是平平整整,而是可能会坑坑洼洼,在这种情况下,因为线数据中z轴是无法匹配地形,所以部分线数据就可能会被地形覆盖遮挡 viewer.scene.primitives.add(new Cesium.GroundPolylinePrimitive({ geometryInstances : new Cesium.GeometryInstance ({ geometry : new Cesium.GroundPolylineGeometry({ positions : Cesium.Cartesian3.fromDegreesArray ( new Cesium.Color.fromCssColorString("#0096ff")), } }), appearance : new Cesium.PolylineColorAppearance({ translucent : false }) }));

    3K20发布于 2020-03-10
  • 来自专栏全栈程序员必看

    Cesium简介「建议收藏」

    一、Cesium介绍 Cesium是国外一个基于JavaScript编写的使用WebGL的地图引擎。 二、Cesium特点 1、一个API – 三种视图 Cesium支持三维地球(3D),二维地图(2D)以及2.5D哥伦布视图(2.5D)。 三、Cesium示例 以下将示例如何运行一个Cesium应用程序: 1、确保浏览器支持Cesium 验证Cesium在Web浏览器中工作的最简单方法是运行HelloWorld例子,点击这里。 3、下载Cesium 如果你还没有这样做,点击这个按钮来获取最新的Cesium:下载Cesium。 下载完成之后将zip文件解压到你选择的新目录,解压之后文件目录类似于下图。 /Build/Cesium/Cesium.js"></script> (2)为了能使用Cesium各个可视化控件,我们需要引入widgets.css。 @import url(..

    11K14编辑于 2022-09-07
  • 来自专栏LET

    Cesium与游戏引擎

    今天看了《百度终于也入了Cesium的坑》这篇文章,里面有关Cesium的评价,让我的阅读体验极度不悦,比如“但是无论从整个产品的成熟度以及可视化效果上来说,Cesium现阶段已经不能算是第一梯队的选择了 ,“整体上来说游戏引擎的效果和整个技术生态基本上可以吊打现在的Cesium,就是对于GISer来说上手门槛有点高。”,“所以现阶段,无论从哪个角度来看Cesium都不是一个值得长期投入的技术路线”。 从这段描述可见,Cesium技术上以JS为主(Web方向),产品定位是世界级的三维地球和地图,重点是性能,精度,视觉效果以及易用性。用户通过Cesium来展示(动态)空间地理数据(应用场景)。 相比可视化和游戏引擎,Cesium是对地球和世界的仿真。 其次,说一下Cesium在渲染上的短板,为什么大家觉得Cesium渲染效果差。一个场景的渲染效果,主要取决于两点:材质和光(影)。

    5K92发布于 2020-09-14
领券