在vue上使用cesium开发三维地图-点位加载
以前端webGIS开发工程师的角度,讲述关于GIS的知识,带大家快速了解下webGIS的知识。
推荐使用NSDT 3DConvert进行3D模型格式转换,支持glb、obj、stp、fbx、ifc等多种3D模型格式之间进行互相转换,在转换过程中,能够很好的保留模型原有的颜色、材质等信息。
点位加载
效果如下:
首先讲下entities
实体,通俗的讲,一个三维地图上,上面可以放
一些模型
,比方说,放
一个房子模型
,放
一个工厂模型
,这个房子,工厂,肉眼看上去,就是放在了地图上,你鼠标不管怎么移动视角,都看到这个房子,工厂,是和地图绑定在一块的。房子,工厂都是和地图一起移动的。这个我们人眼看到的模型
,在cesium里面有个学名,就叫实体
。
我们这次说的点位加载,它也属于实体,实体可以是二维的,也可以是三维的,我先讲下我们这个实体里面有哪些东西,在接下来讲二维和三维的实体。
Entities
我们还是先打开cesium的API中文文档,搜索viewer
,ctrl + F 搜 entities
,回车。
点进去。
增加实体,删除实体
我们要把实体添加到地图上,盲猜应该是xxxAdd()
方法。
我们从这一页Entity
回到EntityCollection
页面,接着往下翻 发现了 添加
和 删除
方法。
点位加载
我们现在加载个点位试试看。
ps
: 现在代码中的属性,大家可以直接在cesiumAPI文档中查看,就在我上方放的图片中,属性都可以搜得到的。
代码如下:
点位是加载出来了,但是有几个问题
:
- 点位的
名称
没有,这样谁也不知道哪个点位名称到底表示哪个点。 - 点位的
图标
是cesium固定的,就是白点,实际项目中肯定会因为数据的类型不同,展示出来的点位也不一样。
所以要改。
修改后的代码如下:
修改之后,感觉好一点了,但是,点位的图标 和 文字样式明显不协调,我们把文字的样式再改改。找到了一个可以传入自定义样式的方法。
这样就完成了, 完整代码如下:
在vue上使用cesium开发三维地图 - 索引
在vue上使用cesium开发三维地图-坐标系、webGIS简介