在vue上使用cesium开发三维地图-地图加载项目学习

以前端webGIS开发工程师的角度,讲述关于GIS的知识,带大家快速了解下webGIS的知识。

在vue上使用cesium开发三维地图-地图加载项目学习
推荐使用NSDT 3DConvert进行3D模型格式转换,支持glb、obj、stp、fbx、ifc等多种3D模型格式之间进行互相转换,在转换过程中,能够很好的保留模型原有的颜色、材质等信息。

项目式学习

定位

我们要让地图一加载就定位到一个位置,我这里以张家港为例,那我正常的流程应该是:

  1. 页面一加载
  2. 展示出来的是高德地图,有地图有标注
  3. 地图直接定位到张家港

定位操作,要先设置一个区域,作为初始位置,确定区域的方法是BoundingSphere

然后要定位到这个初始位置,new Cesium.Camera.flyTo

贴上代码

cesiumMap.vue

效果有了

优化一下

因为这个创建出来的实例 viewer,只在init方法中,我们接下来要经常用到它,所以我们把这个viewer对象,提升到data中。

提升之后:

完整代码:

在vue上使用cesium开发三维地图 - 索引

在vue上使用cesium开发三维地图-常用地图开发框架

在vue上使用cesium开发三维地图-坐标系、webGIS简介

在vue上使用cesium开发三维地图-webgis功能介绍

在vue上使用cesium开发三维地图-地图加载

在vue上使用cesium开发三维地图-地图加载项目学习

在vue上使用cesium开发三维地图-点位加载

在vue上使用cesium开发三维地图-点位弹框

在vue上使用cesium开发三维地图-定位及优化

在vue上使用cesium开发三维地图-点击波纹特效

在vue上使用cesium开发三维地图-波纹特效偏移问题

在vue上使用cesium开发三维地图-点位悬空

在vue上使用cesium开发三维地图-加载三维数据

NSDT场景编辑器 | NSDT 数字孪生 | GLTF在线编辑器 | 3D模型在线转换 | UnrealSynth虚幻合成数据生成器 | 3D模型自动纹理化工具
2023 power by nsdt©鄂ICP备2023000829号