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

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

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

点位加载

效果如下:

首先讲下entities实体,通俗的讲,一个三维地图上,上面可以一些模型,比方说,一个房子模型一个工厂模型,这个房子,工厂,肉眼看上去,就是放在了地图上,你鼠标不管怎么移动视角,都看到这个房子,工厂,是和地图绑定在一块的。房子,工厂都是和地图一起移动的。这个我们人眼看到的模型,在cesium里面有个学名,就叫实体

我们这次说的点位加载,它也属于实体,实体可以是二维的,也可以是三维的,我先讲下我们这个实体里面有哪些东西,在接下来讲二维和三维的实体。

Entities

我们还是先打开cesium的API中文文档,搜索viewer,ctrl + F 搜 entities,回车。

点进去。

增加实体,删除实体

我们要把实体添加到地图上,盲猜应该是xxxAdd()方法。
我们从这一页Entity回到EntityCollection页面,接着往下翻 发现了 添加删除方法。

点位加载

我们现在加载个点位试试看。

ps: 现在代码中的属性,大家可以直接在cesiumAPI文档中查看,就在我上方放的图片中,属性都可以搜得到的。

代码如下:

点位是加载出来了,但是有几个问题

  1. 点位的名称没有,这样谁也不知道哪个点位名称到底表示哪个点。
  2. 点位的图标是cesium固定的,就是白点,实际项目中肯定会因为数据的类型不同,展示出来的点位也不一样。

所以要改。

修改后的代码如下:

修改之后,感觉好一点了,但是,点位的图标 和 文字样式明显不协调,我们把文字的样式再改改。找到了一个可以传入自定义样式的方法。

这样就完成了, 完整代码如下:

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