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

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

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

地图加载

效果如下:

地图实例是这样创建下来的,见下图:

但是cesiumViewer方法中,是可以设置不少参数的,我们打开cesiumAPI文档看看:

cesium的官方文档,内容很多。

我们先看Viewer方法

点进去。

点击上图的这个Viewer.ConstructorOptions 配置项看看。

项目式学习

开始

实际开发中,都是开局一张展开的地图,屏幕上就是一张地图,其他什么都没有,最后成功加载出来的地图上,我们要改改,如下图:

开始改动,一番操作下来,现在页面上只剩下地球了。

设置地图源

接下来,我们来设置地图的地图服务,我这里使用高德影像图。

  • 高德影像地形地图:
  • 高德影像注记地图:

因为我们关掉了默认的图层切换按钮,所以我们需要给他配上这个地图源。

我们配置地图源调用的是这个方法Cesium.UrlTemplateImageryProvider。

在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号