精华内容
下载资源
问答
  • 基于Cesium三维GIS实现,详细解析了Cesium实现三维GIS的数据格式、标准、框架等,对希望从事Cesium研发的人员,极具参考价值,具备实操性,深入浅出。
  • [cesium ] 三维可视化

    千次阅读 2019-09-05 16:36:19
    三维可视化 基于cesium的可视化系统,对部分三维功能封装。 可视化界面 主要功能:量测,雷达监控,卫星监控,标绘,显示控制,图层控制,三维效果等 三维功能界面 部分功能暂时没加上 ,应用启动...

    三维可视化

    基于cesium的可视化系统,对部分三维功能封装。

    可视化界面

    主要功能:量测,雷达监控,卫星监控,标绘,显示控制,图层控制,三维效果等

    三维功能界面

     

     

     

    ~项目已迁移暂未发布 

    展开全文
  • Cesium可视化开源开发框架能够在虚拟的三维地球场景中叠加不同类型的矢量和模型信息以实现空间分析和可视化三维场景的构建,同时,还支持在浏览器端无需插件地显示与交互。基于Cesium开发框架和智慧矿山的应用需求,...
  • Cesium实现三维可视化一般步骤

    万次阅读 2018-03-27 14:46:28
    在项目的开发过程中用到在底图显示三维可视化图形,涉及到加载大批量的数据,经过查阅资料,决定采用Cesium设计一个实现方案,在底图显示3d模型以及与3d模型之间的一系列交互行为,下面分步骤详细进行介绍: ...

    在项目的开发过程中用到在底图显示三维可视化图形,涉及到加载大批量的数据,经过查阅资料,决定采用Cesium设计一个实现方案,在底图显示3d模型以及与3d模型之间的一系列交互行为,下面分步骤详细进行介绍:

    1. 创建查看器—将查看器添加到指定的铯容器cesiumContainer,可以实现底图的切换,加载天地图。代码如下所示:
    var viewer = new Cesium.Viewer('cesiumContainer', {
            imageryProvider : new Cesium.createOpenStreetMapImageryProvider({
                url : 'https://a.tile.openstreetmap.org/'
            }),
            baseLayerPicker : false,
            animation : false,
            timeline : false,
            fullscreenButton : false,
            infoBox : false,
            homeButton : false
        });

    2.相机控制—由属性viewer.scene控制当前可见的内容,可以通过设置相机的位置和方向来控制相机切换视角,也可以使用cesium相机API来设置相机的位置和方向。

    //Create an initial camera view
        var initialPosition = new Cesium.Cartesian3.fromDegrees(-73.848114468289017509, 40.824512895646692812, 2631.082799425431);
        var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(7.1077496389876024807, -31.987223091598949054, 0.025883251314954971306);
        var homeCameraView = {
            destination : initialPosition,
            orientation : {
                heading : initialOrientation.heading,//围绕负z轴的旋转
                pitch : initialOrientation.pitch,//围绕负y轴的旋转
                roll : initialOrientation.roll//围绕正x轴的旋转
            }
        };
        viewer.scene.camera.setView(homeCameraView);  //将相机设定在特定的位置和方向

    3.加载样式实体—为了便于观看,cesium支持流行的矢量格式GeoJson和KML,以及我们专门为描述cesium中称为CZML的场景而开发的开放格式。其中DataSource只是定义了一个接口,需要的确切类型的数据源将取决于数据格式。

    (1) KML使用KmlDataSource,通过调用KmlDataSource.load(optinos)几个选项从KML文件中读取我们的示例geocache点。对于KmlDataSource,需要相机和画布选项。该clampToGround选项支持地面夹紧,这是一种流行的显示选项,可使地形几何实体(如多边形和椭圆)符合地形而不是曲线到WGS84椭球表面。

    var kmlOptions = {
            camera : viewer.scene.camera,//相机选项
            canvas : viewer.scene.canvas,//画布选项
            clampToGround : true
        };
        // Load geocache points of interest from a KML file
        var geocachePromise = Cesium.KmlDataSource.load('./SampleData/kml/bikeRide.kml', kmlOptions);
        // Add geocache billboard entities to scene and style them
        geocachePromise.then(function(dataSource) {
            // Add the new data as entities to the viewer
            viewer.dataSources.add(dataSource);
            // Get the array of entities
            var geocacheEntities = dataSource.entities.values;
            for (var i = 0; i < geocacheEntities.length; i++) {
                var entity = geocacheEntities[i];
                if (Cesium.defined(entity.billboard)) {
                    // Adjust the vertical origin so pins sit on terrain
                    entity.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;
                    // Disable the labels to reduce clutter
                    entity.label = undefined;
                    // Add distance display condition
                    entity.billboard.distanceDisplayCondition = new Cesium.DistanceDisplayCondition(10.0, 20000.0);
                    // Compute latitude and longitude in degrees
                    var cartographicPosition = Cesium.Cartographic.fromCartesian(entity.position.getValue(Cesium.JulianDate.now()));
                    var latitude = Cesium.Math.toDegrees(cartographicPosition.latitude);
                    var longitude = Cesium.Math.toDegrees(cartographicPosition.longitude);
                    // Modify description
                    var description = '<table class="cesium-infoBox-defaultTable cesium-infoBox-defaultTable-lighter"><tbody>';
                    description += '<tr><th>' + "Latitude" + '</th><td>' + latitude + '</td></tr>';
                    description += '<tr><th>' + "Longitude" + '</th><td>' + longitude + '</td></tr>';
                    description += '</tbody></table>';
                    entity.description = description;
                }
            }
        });
    (2) GeoJson与加载KML的过程非常相似,在这种情况下,可以使用GeoJsonDataSource代替,和前面的数据源一样,需要将viewer.dataSources添加数据到场景中。这种加载方式只是实现的平面的,可以通过自行设置高度entity.polygon.extrudedHeight读取每个实体属性中的高度
    使建筑物看起来有一定的高度,切换视角,达到三维效果;加载geojson文件添加鼠标交互行为不生效;使用这种方式加载大批量的建筑物会造成浏览器卡顿甚至崩溃。
    
    var geojsonOptions = {
            clampToGround : true
        };
        // Load neighborhood boundaries from KML file
        var neighborhoodsPromise = Cesium.GeoJsonDataSource.load('./SampleData/test.geojson', geojsonOptions);
    
        // Save an new entity collection of neighborhood data
        var neighborhoods;
        neighborhoodsPromise.then(function(dataSource) {
            // Add the new data as entities to the viewer
            var city = viewer.dataSources.add(dataSource);
            neighborhoods = dataSource.entities;
            // Get the array of entities
            var neighborhoodEntities = dataSource.entities.values;
            for (var i = 0; i < neighborhoodEntities.length; i++) {
                var entity = neighborhoodEntities[i];
                if (Cesium.defined(entity.polygon)) {
                    // entity styling code here
                    entity.name = entity.properties.neighborhood;
           //          entity.polygon.material = Cesium.Color.fromRandom({
                    //     red : 0.4,
                    //     maximumGreen :0.8,
                    //     minimumBlue : 0.6,
                    //     alpha :1
                    // });
                    entity.polygon.material = Cesium.Color.YELLOW;
                    entity.polygon.outline = false;
                    // Tells the polygon to color the terrain. ClassificationType.CESIUM_3D_TILE will color the 3D tileset, and ClassificationType.BOTH will color both the 3d tiles and terrain (BOTH is the default)
                    entity.polygon.classificationType = Cesium.ClassificationType.TERRAIN;
                    // Generate Polygon position
                    var polyPositions = entity.polygon.hierarchy.getValue(Cesium.JulianDate.now()).positions;
                    var polyCenter = Cesium.BoundingSphere.fromPoints(polyPositions).center;
                    polyCenter = Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);
                    entity.position = polyCenter;
                    entity.polygon.extrudedHeight = entity.properties.height;
                    // entity.polygon.height = entity.properties.height;
                    // Generate labels
                    entity.label = {
                        text : entity.name,
                        showBackground : true,
                        scale : 0.6,
                        horizontalOrigin : Cesium.HorizontalOrigin.CENTER,
                        verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
                        distanceDisplayCondition : new Cesium.DistanceDisplayCondition(10.0, 8000.0),
                        disableDepthTestDistance : 100.0
                    };
                }
            }
            //加载的建筑物的总数
            console.log(neighborhoodEntities.length);
        });
    (3) Cesium支持基于glTF(GL传输格式)加载3D模型,加载模型与迄今为止我们使用过的任何其他类型的可视化没有什么不同,所需要的只是实体的位置和glTF模型的一个URL;每个模型都有自己的原始COLLADA文件(.dae)和glTF文件(.gltf),在Cesium中我们不需要原始的COLLADA文件,需要的只是经过3d
    max转化后的gltf文件以及相应的贴图文件。(例子中定位到宾夕法尼亚州埃克斯顿就是通过加载.gltf格式的数据渲染到地图上)。
    
    var scene = viewer.scene;
        var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
        Cesium.Cartesian3.fromDegrees(-75.62898254394531, 40.02804946899414, 0.0));
        var model = scene.primitives.add(Cesium.Model.fromGltf({
            url : './SampleData/models/CesiumGround/Cesium_Ground.gltf',
            modelMatrix : modelMatrix,
            scale : 200.0
        }));

    4、 鼠标交互—只有在加载3d Tiles的时候,才可以用鼠标实现交互选择和样式改变,否则这些模型将无法以交互方式查看。在这种情况下可以加载大批量的模型建筑物信息。例如viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(3839) }));显示纽约所有的建筑物完整的3d模型,从而为三维可视化添加真实感。

    说明:如果要加载大批量的模型,以dataSource加载geojson文件的方法可能会造成浏览器卡顿甚至崩溃的现象;3d Tiles才是实现加载大规模场景应用的最佳选择,而且依赖于3d Tiles还可以实现鼠标交互改变样式等。

    展开全文
  • 基于Cesium的古村镇三维展示 由于Cesium框架本质上是JavaScript库,所以要在本地运行Cesium首先需要部署运行环境。 Cesium官方推荐的服务环境是Node.js部署的,所以首先需下载Node.js 下载地址: : 下载完后直接...
  • 让GIS三维可视化变得简单-初识Cesium

    千次阅读 2020-07-28 07:00:00
    前言从去年开始无脑接触 Cesium 三维 GIS 可视化,入坑之后一直到到现在,其实已经写了多个项目了,中间也遇到了很多坑点,很早就想分享其中所获了,只是觉得不太专业而且没有太多时间,...

    前言

    从去年开始无脑接触 Cesium 三维 GIS 可视化,入坑之后一直到到现在,其实已经写了多个项目了,中间也遇到了很多坑点,很早就想分享其中所获了,只是觉得不太专业而且没有太多时间,拖到现在,从开始接触 Cesium ,加了一个QQ交流群,从刚开始的 200 人,到现在的 3000 人,好像使用 Cesium 做可视化方向的人越来越多了,并且其中很多人都是如我一样,从前端半路入坑

    记得好像是公众号「Cesium中文网」曾发过一篇文章名叫「Cesium只剩可视化了吗」个人觉得写的很棒,虽然 Cesium 不止是可以做可视化这么简单,但是目前大部分选择投入其中的人是奔着可视化这个方向的,这点从 300 到 3000 足以证明

    个人写作习惯篇幅很长,文章产出总是很慢,之所以还想要写这个系列的文章,大概有三点

    • Cesium 毕竟是一个世界级 JavaScript 开源产品,做 CS 还好,但是做 BS,特别是可视化产品是需要扎实的前端基础的,相比较下专业的 GIS 对前端一些框架了解好像不太多,并不能很好的把自己丰富的 GIS 知识或者说一些很强大的功能在前端炫酷的展现出来,毕竟功能再强大,不经过雕琢和装饰总归还是不能被人推崇的

    • 近两年前端同学半路入坑 Cesium 的人太多了,但是由于没有扎实的 GIS 基础,涉及深入一点的 GIS 核心的效果实现并不容易,一路上的磕磕绊绊实在是太多了,这个是亲身经历,且十分惨痛

    • 关于 Cesium,一直是自己在摸索,项目也写不少了,但是肯定有很多地方在更为专业的人看来是闹着玩一样,所以水水文章看看进自己脑子的知识有哪些是炸弹,回顾一遍排排雷,查漏补缺

    其实我个人对 CS 方面完全没有经验,BS 做可视化有些项目经验,但是说实话,只懂皮毛,不过在前进的道路上爬了太多的坑,所以可以与大家分享些爬坑经验,也充实下自己,涉入 GIS 不会很深,不过一般的还是可以的,算带大家入入门吧,也希望可以和大家一起查漏补缺,正所谓山中无老虎,猴子称大王,没错,我就是那只猴子,谁让现在Cesium相关的技术帖辣么少呢

    写的帖子目前想法是除了入门之外会更倾向于各种好玩炫酷的效果制作,所以它也会更倾向于实战系列,你也可以把它当作入门级教程,这个系列我尽量每文简短些,控制在5000字内,让大家看着舒服 ????

    「PS:」

    • 「CS」Client/Server,客户端/服务器模式,桌面级应用,响应速度快,安全性强,个性化能力强,响应数据较快,兼容性差,不跨平台,开发成本高

    • 「BS」Browser/Server,浏览器/服务器模式,Web应用,可以实现跨平台,客户端零维护,共享性强,但是个性化能力稍低,响应速度稍慢

    得瑟一下

    看到这篇文章时,可能大家对 Cesium 有所了解,也可能一无所知,甚至不知道它能干什么,先给大家看一个我这边刚入坑时做的第一个基于 Cesium 的可视化产品,现在看其实挺一般的,不过当时刚做出来时确实是挺开心挺有成就感的,也让大家对 Cesium 加深下了解,当然这个项目中只是简单的运用了 Cesium,它远不止于此

    那么接下来话不多说,赶紧来认识下 Cesium 吧

    Cesium简介

    什么是Cesium

    Cesium 是一款面向三维地球和地图的,世界级的 JavaScript 开源产品,它提供了基于 JavaScript 语言的开发包,方便用户快速搭建一款零插件的虚拟地球 Web 应用,并在性能,精度,渲染质量以及多平台,易用性上都有高质量的保证

    Cesium是基于 Apache2.0 许可的开源程序,它可以免费的用于商业和非商业用途,它隶属于 AGI(Analytical Graphics Incorporation)公司,三位创始人曾在通用公司宇航部的供职工程师,提供 STK(System/Satellite Toolkit Kit)和 Cesium两款产品,该公司是航天分析软件的领导者,而 STK 则是该公司的旗舰产品,比如 马航MH370 搜救过程就采用了 STK 软件,经过多年来在时空数据的积累,AGI 公司逐渐掌握了大量 3D 可视化技术,也感受到各行各业对海量 3D 数据的强烈需求,因此于2011年创建了 CesiumJS 开源项目,围绕 Cesium 生态圈打造了一套安全可靠易扩展且平台独立的企业级解决方案

    而 Chrome 也是在2011年2月份推出了支持 WebGL 的第一个版本,在这点上,Cesium算是第一个敢吃螃蟹的人,Cesium 原意是化学元素铯,铯是制造原子钟的关键元素,通过命名强调了 Cesium 产品专注于基于时空数据的实时可视化应用

    至今,CesiumJS 的下载量超过 1,000,000,是一个为数百万用户提供了强大的应用程序

    作为前端程序员,只是单纯做可视化,其实在我看来, Cesium 与 Leaflet 以及 OpenLayer 等没有本质的区别,只是Cesium支持三维场景等等,做的更漂亮

    Cesium可以做什么

    支持全球级别的高精度的地形和影像服务

    支持 2D、2.5D、3D 形式的地图展示,真正的二三维一体化

    支持矢量、海量模型数据(倾斜,BIM,点云等)

    支持基于时间轴的动态数据可视化展示

    Cesium的浏览器兼容性

    学习和使用 Cesium 前,首先要检查一下你的浏览器是否支持 WebGL,目前,大多数平台和浏览器都支持WebGL,在这些环境下运行 Cesium 并没有太大的问题,但效果和性能是否能够满足不同的需求,就需要考虑很多细节和额外因素

    大多数平台和浏览器都支持 WebGL1.0 标准,也就是 OpenGL ES2.0 规范,2017年年初,Chrome 新版本低调的支持 WebGL2.0,随着各硬件厂商 GPU 性能的提升和 WebGL2.0 规范的成熟,WebGL 技术会有更大的提升潜力,不过无论是 PC 还是移动端,Chrome 都是 WebGL 开发和应用的最佳平台,所以,如果没有特殊的硬性要求,建议大家使用 Chrome 学习和开发 Cesium

    你可以在浏览器中访问 WebGL Report 来查看你的浏览器支持情况

    如上图红框中显示,这个浏览器支持 WebGL 1,你也可以点击 WebGL 2 查看自己的浏览器支持情况

    清单中除了显示了你的浏览器是否支持 WebGL 标准,还有很多,比如

    • 是否支持深度纹理

    • 顶点着色器的最大属性数

    • 是否支持ANGLE 扩展

    • 等等

    一个HelloWorld程序

    其实上面的都是废话,但是你又必须要知道,其实对我们写程序是没有一点帮助的,只是提供数据为了给大家了解下 Cesium 的强大

    有的人可能认为学习 Cesium 之前应该学习学习 GIS 基础架构、坐标系、投影、存储类型等等等等,其实我觉得如果你有这些常识,那自然是极好的,但是如果没这些知识储备,在刚开始学习 Cesium 的时候,学习这些乱七八糟的,完全没必要

    因为这些基础知识学起来很容易打磨积极性,还不如先写几个 demo 程序来的实在,毕竟总得先体会下它的魅力,就像你走在路上,你看到前面有个坑,那肯定会绕过去,但是如果坑上有些草,还有些漂亮的花,那就不一样了

    SO,我们先搞个地球出来,后面哪里有需要再穿插说一些常识

    编译器选择

    实力推荐 VS Code 一把梭,当然实在用不习惯其他编译器也都行,看个人习惯,实力强用记事本都没得关系

    下载Cesium包

    首先,我们要下载 Cesium 包,官网下载即可,Cesium 每个月都会更新一个版本,一直在迭代,这点就足以证明它的活跃性以及未来,地址如下 ????

    下载下来解压后你会发现有很多文件,如下图

    我们下载这个包里包括 Cesium API 源代码 Source 文件夹,以及编译后的 Build 文件夹,还有Demo、API文档、沙盒等等,这些都不用管

    我们只需要 Build 文件夹下面的 Cesium 这个文件夹,它是编译后 Cesium 包的正式版本,开发的话只需要这个就完了

    初始化地球

    首先,我们找地方新建一个目录,这里目录名为 demo ,我们把上面说的 Cesium 这个文件夹拖进来

    接着,我们在 demo 目录下新建一个 index.html 文件,初始化一个地球,只需四步

    「No.1」 引入 cesium.js,该文件定义了 Cesium 对象,它包含了我们需要的一切

    <script src="./Cesium/Cesium.js"></script>
    

    「No.2」 引入 widgets.css,为了能使用Cesium 各个可视化控件

    @import url(./Cesium/Widgets/widgets.css)
    

    「No.3」HTMLbody 中我们创建一个 div,用来作为三维地球的容器

    <div id="cesiumContainer"></div>
    

    「No.4」 在 JS 中初始化 CesiumViewer 实例

    let viewer = new Cesium.Viewer('cesiumContainer')
    

    完整代码如下

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="./Cesium/Cesium.js"></script>
        <style>
          @import url(./Cesium/Widgets/widgets.css);
          html,body,#cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
          }
    </style>
      </head>
      <body>
        <div id="cesiumContainer"></div>
        <script>
          window.onload = function () {
            let viewer = new Cesium.Viewer("cesiumContainer")
          }
    </script>
      </body>
    </html>
    
    
    

    运行环境

    平常我们写一个页面,浏览器打开 html 文件即可,在写 Cesium 程序的时候,不要本地双击浏览器运行,因为在实际工作中,它是需要运行在Web服务器上的

    这里我们使用Node来搭建这个服务,首先你要在电脑装Node,这个不过多赘述,不了解自行百度安装即可

    官网包括一般的教程里这个时候就要手写代码用 express 或者 Koa 简单的搭一个Web服务了,但是这也是没有必要的,这里我们只是写个 demo,没必要再去写后端代码什么的,太麻烦,我们装一个 live-server 就行了

    live-server 是一个具有实时加载功能的小型服务器,简单说,你装了它,直接在当前目录命令行运行命令这个服务就起来了

    安装 live-server 命令如下

    npm install -g live-server
    

    再次强调,这只是一个小 demo,一般来说正常项目开发中 Vue+Cesium 我觉得是最佳实践了,而使用 Vue 来开发的话  Vue-CLI 本身就是一个本地服务,我们如果要原生开发的话 live-server 就行了,虽然写个Web服务不难,但终归是浪费时间

    当我们 Node 安装好了,也装上了 live-server 后,我们在终端  cd 到项目根目录下 ,执行下面命令

    live-server
    

    默认启动的是8080端口,如下图

    紧接着,直接在浏览器输入 http://127.0.0.1:8080 ,你的第一个 Cesium 程序就 ???? 了

    如上所示,页面上就会呈现一个 3D 的地球了,是不是很简单,有没有勾起你入手的欲望呢?

    这次就到这里,下次我们来说一说 Vue 里面使用 Cesium 开发以及一些注意事项,一步一步来,心急吃不了热豆腐,每篇文末会给大家列出我一些相关的学习地址

    最后

    初识 Cesium 一定要知道的几个网站

    如果是刚接触Cesium,这些网站无论如何都要点进去看一看,先简单过一遍即可,后期会用上的

    文章收录在GitHub,更多精彩请看  github.com/isboyjc/blog

    展开全文
  • 前言市面上的前端框架中,Vue+Cesium 可谓是最佳搭档,一般做 Cesium B 端产品的公司都会使用 Vue,所以后续内容都将基于 Vue通常情况下,我们要在 Vue 中使用 C...

     

    前言

    市面上的前端框架中,Vue+Cesium 可谓是最佳搭档,一般做 Cesium B 端产品的公司都会使用 Vue,所以后续内容都将基于 Vue

    通常情况下,我们要在 Vue 中使用 Cesium,首先要安装 Cesium,然后要在 vue-cli 的 webpack 配置很多东西,对一些有经验的人来说只不过麻烦些,但是对 Cesium 的初学者来说会很痛苦,因为没有使用过,也不知道要怎么配置,只能搜索网上的教程,一步一步踩坑

    其实不管是有经验或是初学者,每次写项目重复配置这些东西都很麻烦

    vue-cli-plugin-cesium 就是为了解决这个问题

    介绍

    vue-cli-plugin-cesium 是一款针对 Cesium 的 VueCLI 扩展插件,使用它将会让我们在 VueCLI 中零配置使用 Cesium,基于 VueCLI3.0+

    其实就是我开始做 Cesium 的时候,觉得每次配置太麻烦,就写了个插件免配置从而节约开发时间,后来就发到几个 Cesium 开发群里给大家体验了一波,效果还不错

    它会在我们已经创建好的 VueCLI 项目中做基于 Cesium 的扩展,截止目前它的功能也可以说它解决的问题如下

    • 自动安装 Cesium 并追加至 package.json 依赖项(可自选版本)

    • 自动扩展 VueCLI 中 Cesium 相关的 webpack 配置

      • 添加一个 cesium 别名,以便我们在项目中轻松的引入 Cesium 文件资源

      • 使 Cesium 对象实例可在每个 Vue 模块中使用而无须 import 引入

      • 使 webpack 可正常打包 Cesium

      • 允许 webpack 友好地在 Cesium 中使用 require,解决 require 引入警告

      • 开发环境生成 sourcemap,生产环境取消 sourcemap

      • 生产环境抽取公共模块执行压缩

      • 生产环境 loader 切换到优化模式

    • 自动在全局 main.js 中引入Widgets.css,可选

    • 自动在 components/ 文件夹下生成示例文件,可选

    安装

    vue-cli-plugin-cesium 是基于 VueCLI 的扩展插件,所以在使用前要先使用 VueCLI 创建一个 Vue 项目

    如果您不了解 VueCLI 的使用,请移步 VueCLI-官网

    当前插件只支持 VueCLI3.0+ 版本哦

    创建好一个 Vue 项目后就可以按照以下步骤使用该插件了,同所有 VueCLI 插件一样,它有两种使用方式,推荐使用方式一

    使用方式一

    推荐使用 vue add 这种方式安装,一步到位,简单便捷

    vue add vue-cli-plugin-cesium
    
    // 非全局安装的vue-cli可以
    npx vue add vue-cli-plugin-cesium
    

    使用方式二

    首先安装 vue-cli-plugin-cesium 插件,推荐使用 yarn 安装,因为它更简洁

    // npm
    npm install --save-dev vue-cli-plugin-cesium
    
    // yarn
    yarn add vue-cli-plugin-cesium
    

    安装完成后我们要使用 vue invoke 来初始化这个插件

    vue invoke vue-cli-plugin-cesium
    
    // 非全局安装的vue-cli可以
    npx vue invoke vue-cli-plugin-cesium
    

    安装过程

    vue invokevue add 的过程中会有三个询问

    「询问一」

    Please choose a version of 'cesium' from this list
    请在列表中选择 cesium 的版本
    

    在此选择想使用的 Cesium 版本

    「询问二」

    Whether to import styles globally.
    This operation will automatically import widgets.css in main.js
    是否全局引入样式,该操作将自动在main.js引入widgets.css?
    

    此项默认为 yes,该操作将自动在 main.js 引入 widgets.css,即全局引入 Cesium 的 css 样式

    如果此项设置为 no,那么开发时我们要手动引入widgets.css样式文件,引入命令如下

    import "cesium/Widgets/widgets.css"
    

    「询问三」

    Whether to add sample components to the project components directory
    是否添加示例组件到项目components目录?
    

    此选项默认为 yes,该操作会自动在 src/components 文件夹下生成 CesiumExample 文件夹,此文件夹中包含一些 Cesium 的使用示例供参考

    如果此项设置为 no,则不生成示例文件

    生成的示例中每个文件为一个模块,可直接模块引入至项目中查看,欢迎大家PR示例模块

    GUI 安装

    如果我们使用 vue ui 创建项目,也可以直接在项目创建后的插件选项里搜索 vue-cli-plugin-cesium 并安装

    如下所示:

    选中插件点击安装

    使用

    开发时如下,直接在模块中使用 Cesium 对象即可

    查看示例组件,模块引入即可,如下

    常见问题

    当你顺顺利利安装好了插件后开始开发,使用 Cesium 对象时,可能会遇到下面这种错误

    Error:Cesium is no-undef
    

    前端小伙伴都应该知道,这好像是 Eslint 语法错误,没错,这是因为插件内部使用了 Webpack 的内置模块 ProvidePlugin 来做到使用 Cesium 对象时将不再需要 importrequire 引入,而一般我们在使用 VueCLI 创建项目时会默认带上 Eslint,Eslint 语法检验会认为 Cesium 是一个未声明的变量,于是抛出了错误

    「解决办法一」

    package.json 中配置 Eslint 规则允许 no-undef ,如下所示,在 package.jsoneslintConfig 字段下的 rules 配置 "no-undef": 0 ,在不关掉 Eslint 的情况下单独配置允许未声明的变量

    {
      "dependencies": {},
      "devDependencies": {},
      "eslintConfig": {
        "root": true,
        "env": {
          "node": true
        },
        "extends": [
          "plugin:vue/essential",
          "eslint:recommended"
        ],
        "parserOptions": {
          "parser": "babel-eslint"
        },
        "rules": {
          "no-undef": 0
        }
      }
    }
    
    

    「解决办法二」

    我们可以通过在 package.json 中直接删除 eslintConfig 对象来直接关掉 Eslint

    也可以在 vue.config.js 中配置关掉 Eslint,如下

    module.exports = {
      lintOnSave: false
    }
    

    修改之后重启服务即可,推荐使用第一种办法,Eslint 语法校验是一个极好的约束开发的工具,可以让我们同一个团队内的语法风格统一,最好还是不要关掉

    结束

    安装完成后,就可以在 vue 项目中任意模块中使用 Cesium 了,你可以在每个 Vue 模块中直接使用 Cesium 对象实例而无须 import 引入,如果你想引入 cesium 包下的文件,我们为 Cesium 包的目录设置了别名,就叫 cesium,所以在引入 Widgets.css 时引入路径为 cesium/Widgets/widgets.css ,如果对您有所帮助,那么这将是我的荣幸

    目前使用 VueCLI2.0 的应该很少了,当然如果你使用的脚手架 > VueCLI3.0 ,那么就不能使用这个插件了,不过不用担心,VueCLI2.0的配置也是有的,只不过需要你自己手动配置了,详情可以看  VueCLI2.0集成Cesium

    后期也会慢慢完善此插件,并不停迭代,也欢迎大家提出建议,欢迎 PR

    插件地址 isboyjc/vue-cli-plugin-cesium 文章收录在 GitHub,更多精彩请看  isboyjc/blog/issues

    是前端,又不只是前端,所以不正经,认真分享干货,公众号「不正经的前端」,欢迎关注

    展开全文
  • 本发明属于虚拟三维管线领域,特别是涉及基于Cesium的城市三维可视化地下管线系统的建立方法。背景技术:随着我国经济的快速发展,城市规模也在不断地扩大,而城市地下管网的铺设力度也不断加大,城市地下管网担负着...
  • 基于cesium三维城市建筑可视化系统1,快速搭建一个cesium的平台环境2.数据的格式及转化。kml格式应该这样加载:3dtiles第三种文件格式geojson 毕业快半个月了,一直想要把这次毕设所用到的cesium相关的内容记录...
  • 前言开发中我们通常会需要一个干净的三维地球实例,本文将介绍 Cesium 如何初始一个地球,包括地图控件的显示隐藏以及一些常用影像和标注的加载预览Demo[1]Cesium 是一款面向...
  • Cesium三维学习

    千次阅读 2018-11-03 13:58:41
    前言最近折腾了一下三维地球,...当然三维地球重要的肯定不是数据显示,这只是数据可视化的一小部分,重要的应该是背后的数据生成及处理等。本文先为大家介绍这简单的部分。一、 Cesium简介Github地址:https://gith...
  • Cesium三维地球标注

    千次阅读 2018-11-17 10:29:57
    转载:... 1、三维地球上添加图层&amp;nbsp; &amp;nbsp; 添加的图层会覆盖该区域的地图信息//添加图层var layers = viewer.scene.imageryLayers;layers.addImageryProvider(new Cesi...
  • Cesium: 一个新兴的三维开发框架, 提供对框架的免费源码开放, 它能够借 助于 HTML5 新一代网页标准和 WebGL 技术规范在 Web 端实现动态的三维场景 渲染, 其中, HTML5 新添加的 canvas 和媒体资源等标签 [43] ...
  • 基于postgresql数据库,安装postgis插件后,创建空间数据表,并使用nodejs + express服务空间数据表,在前端采用Cesium加载空间数据,实现空间数据可视化
  • 带电子干扰的雷达探测范围可视化技术,有实现部分。
  • 前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个...cesium 三维模型格式数据转换cesium 支持加载三维模型的格式是 .gltf 或者...
  • 参考网上很多文档,都是webpack打包之类的,复杂且容易出错,通过vue-cli-plugin-cesium这个插件可以快速帮你创建一个demo示例,然后根据自己的需要创建三维地图 一、vue-cli快速创建一个vue项目框架(必须使用...
  • C2——cesium加载城市级三维管网模型的方案

    千次阅读 热门讨论 2020-07-06 11:06:35
    本方案的管网覆盖整个市区的管线和管网用shp数据生成三维3Dtiles并加载到cesium里。包括:(绿色) 雨水 ;(紫色)污水;(棕色) 雨污合流;综合管线等。双击可以查看属性,鼠标滑过可以查看ID。管网shp数据达2G,...
  • vue地图可视化 Cesium

    千次阅读 2019-03-08 08:34:00
    最近被问到如何在 vuejs 中集成 cesium,首先想到的官网应该有教程。官网有专门讲 Cesium and Webpack(有坑),按照官网的说明,动手建了一个Demo,在这记录下踩坑过程。 环境如下: node: v10.13.0 npm: 6.4.1 vue...
  • 随着倾斜摄影测量和Lidar广泛应用,三维点云成为地理空间数据的重要数据种类。...对利用倾斜摄影测量所建立的三维点云数据进行处理,在自主开发的webgl客户端上实现了数据三维点云的实时可视化浏览。
  • 前期准备:安装配置Cesium、NodeJS、MongoDB数据库;使用NodeJS中的npm安装express(快捷搭建服务器)和mongoose(快捷操作MongoDB)模块。具体教程网上太多了,总之小白才开始肯定是会踩坑的,特别是npm安装各种...
  • 基于cesium三维管线系统综述

    千次阅读 2021-02-17 00:22:27
    Cesium三维场景支撑下的南水北调地下管线应用_孟晓宇 3 关键技术及应用 3.1 二维地图平台实现 目前二维地图制图的相关功能较为成熟,主流商业软件均能较好实现,对数据并无特殊要求。在 Arc GIS 桌面软件制作地图的...
  • 如果你是Cesium的新用户,可能需要阅读三维模型部分的(空间数据可视化教程)[https://cesium.com/docs/tutorials/creating-entities#3d-models],本系列教程中叫:”空间数据可视化“。 Cesium支持3D...
  • 本文档的主要目的是为了读者能够快捷地了解本软件从虚幻引擎到前端渲染的基本架构。我们的数字大桥利用Autodesk系列软件进行三维建模,再通过虚幻引擎(UE)渲染,最后将视...
  • [cesium] 基于vue+element的三维gis示例

    千次阅读 2020-05-12 17:46:27
    前言 将之前的的三维示例重构了一下,使用vue集成 由于服务挂在gitee上 速度较慢没有部署具体示例。 ...空间分析和数据可视化 目前只添加的部分示例,功能还在完善.. 服务地址: 码云 ...
  • 基于Cesium的WebGIS三维客户端实现技术研究,该论文实现思路清晰
  • 前端知识准备HTML5、CSS、JavaScript学习Cesium环境搭建以及基础API学习 ...推荐找各种可以学前端的网站快速过一遍前端知识,附上一个前端学习资源: ...提取码:wm4y Cesium环境搭建以及基础API...推荐Cesium中文社区教程...
  • 智慧城市/园区三维GIS可视化平台

    万次阅读 2018-05-03 15:16:46
    将业务管理、物联网感知数据、大数据分析数据、视频监控、工程项目数据、地下管网数据、公共安全数据、招商成果数据、区域资源配套数据融合到一个三维可视化平台,进行高度融合与挖掘分析,并构建智慧管理相关的应用...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 622
精华内容 248
关键字:

cesium三维可视化