博主简介? ???
博主90后专业GIS行业开发人员,一直从事GIS相关工作5年左右,主要涉及三维和地图可视化等内容。工作中难免要接触到相关开发框架,对Cesium,Three.js,openlayer,skyline等二三维开发框架的了解和运用还算可以!^_^! 。
专栏说明? ? ?编写这个专栏主要目的是对工作中基于Cesium实现过的功能进行整合,暂时打算一周2-3更的样子来更新,每一篇都会奉上完整源代码(尽可能把代码简洁一些)。功能实现大多数是自己琢磨实现的,也有参考其他大神后整理实现的,初步算了算现在有差不多实现130个左右的功能,后续也会不断的更新。博文内容如存在错误或者有可改进之处,也希望在这里和各位大佬交流提高一下。
? ? ?专栏内容本着尽可能简洁的原则,不多说废话,直接上代码,现在就把现阶段已经实现的部分功能罗列在下面(功能不分先后):雨效果,雪效果,雾气效果,风场效果,局部风场,坐标显示及比例尺,自定义弹窗,导航(cesium-navigation-es6),工程树组件,绘制点,绘制线,绘制矩形,面(多边形),墙体(纯色),墙体(格子色),墙体(过渡色),墙体(呼吸灯),墙体(升降梯),动态扩散点,闪烁点,扇形,entity旋转,entity按需加载,Point点,Box对象,Polyline对象,PolylineVolume类管道,Rectangle对象,Sphere对象,Wall对象,Polygon对象,CoplanarPolygonhan含洞多边形,Corridor走廊,Cylinder圆锥体,Ellipse(椭)圆柱体,Circle对象,Ellipsoid(椭)球,Plane对象,视椎体,聚类分析(primitive版),量测分析-距离,量测分析-面积,量测分析-三角,卷帘分析,等高线分析,坡度分析(底图+箭头),坡度分析(仅底图),坡度分析(仅箭头),地形开挖,淹没分析,地下管网,空间体-体积,地球/地图参数,实时轨迹,历史轨迹-全路径,历史轨迹-刷新路径,抛物线扩散(Entity),卫星扫描(高空),智慧园区,普通白模,白模渲染,gltf模型,倾斜摄影模型,OSGB预览(单文件),OSGB预览(Lod层级),白模相关,动态单体化-整幢,动态单体化-楼层,模型动态调整,自定义坐标圆轴,火焰粒子,烟花效果,卫星效果1,喷泉,消防灭火,飞机过境,让中心点旋转,扫雷预览,geoq地图-ChinaOnlineCommunity_Mobile,geoq地图-ChinaOnlineCommunityENG,geoq地图-ChinaOnlineCommunity,geoq地图-ChinaOnlineStreetGray,geoq地图-ChinaOnlineStreetPurplishBlue,geoq地图-ChinaOnlineStreetWarm,渲染图叠加,点插值时间序列图,序列图-模拟洪水,序列点自动出图,局部地图,地图打印,Echarts图表,飞线图-汇聚,飞线图-发散,流动纹理,自定义表格,地址生成二维码,H5无插件播放RTSP,颜色工具类,Word/PDF/Excel/PPT等预览,导出PDF,导出Word,本地shp文件加载,在线shp文件加载,填挖方分析,电弧球材质,动态遮罩(球)材质,电弧球遮罩材质,流光道路效果,飞线效果,军事标绘-简单箭头,军事标绘-自由线,军事标绘-笔直折线,军事标绘-圆滑曲线,军事标绘-自由面,军事标绘-自定义多边形,军事标绘-正多边形,军事标绘-旗标类,军事标绘-钳击箭头,军事标绘-弓形,军事标绘-燕尾箭头,军事标绘-进攻(攻击)箭头,军事标绘-扇形,军事标绘-集结地,军事标绘-直角箭头,军事标绘-圆角矩形,军事标绘-防御阵型,完整军标组件,通视分析,剖面分析,POI搜索,路径规划分析,立体雷达效果,扇形雷达效果,圆形雷达效果,entity面编辑,entity线编辑,鼠标移入和点击高亮效果,Geoserver样式配置,geoserver配置多图层WMTS服务,Cesium加载geoserver发布的WMTS并点击获取属性,可视域分析(纯前端),可视域分析(后处理),geojson/entity聚合效果,沉降漏斗效果(点/盒子形式),沉降漏斗效果(TIN网格形式),二维热力图,三维热力图,3D网格,3D散点图,地下模式,模拟火箭发射全过程,地图纠偏包括百度地图、高德地图、腾讯地图和智图Arcgis地图,3Dtiles模型编辑(平移和旋转),gltf/glb模型编辑(平移和旋转),图片轨迹线,动态扩散圆,模拟灾害影响范围动态效果,分屏对比,热力图,专题图输出,屏幕打印完整版,状态栏.....待续
已更内容 Cesium交流群链接:Cesium交流群链接 小专栏传送门:关于DEJA_VU3D - Cesium功能集专栏说明? DEJA_VU3D - Cesium功能集 之 完整军标组件系列预告 DEJA_VU3D - Cesium 之 vue3+vite+ts+cesium项目搭建全过程001 - 填挖方分析
002 - 完美集成展示Echarts柱状图/折线图/饼状图
003 - 流光道路效果
004 - 动态单体化(整幢建筑)
005 - 动态单体化(分层分户)
006 - 通视分析
完整军标组件系列预告
007 - 军事标绘系列一:简单箭头
008 - 军事标绘系列二:自由线
009 - 军事标绘系列三:笔直折线
010 - 军事标绘系列四:圆滑曲线
011 - 军事标绘系列五:自由面
012 - 军事标绘系列六:自定义多边形
013 - 军事标绘系列七:正多边形
014 - 剖面分析
015 - 军事标绘系列八:旗标类,包括(曲线/矩形/正三角/倒三角/对三角)
016 - POI搜索并实现路径规划分析
017 - 军事标绘系列九:钳击箭头
018 - 军事标绘系列十:弓形对象
019 - 军事标绘系列十一:燕尾箭头
020 - 坡度和坡向分析
021 - 军事标绘系列十二:直角箭头
022 - 军事标绘系列十三:进攻(攻击)箭头
023 - 军事标绘系列十四:集结地
024 - 军事标绘系列十五:扇形对象
025 - 军事标绘系列十六:圆角矩形
026 - 军事标绘系列完整组件
027 - Cesium加载Geojson鼠标划过和点击提示
028 - 雷达扫描效果1
029 - 雷达扫描效果2
030 - 立体雷达扫描效果
031 - Geoserver发布多图层WMTS服务
032 - 加载Geoserver发布的WMTS服务并点击获取属性
033 - 可视域分析前传:自由绘制视椎体
034 - 可视域分析(纯前端)完整版
035 - 飞线图(汇聚)
036 - 飞线图(发散)
037 - 地图参数修改并配置特殊效果
038 - 直接加载本地或在线的Shape数据
039 - 流光飞线材质
040 - 鼠标跟随提示Tooltip组件
041 - 聚类分析:未修改源码自定义背景聚合效果
042 - 喷泉离子效果
043 - 离子效果:模拟火灾救援灭火
044 - 局部地图遮罩效果
045 - 沉降漏斗效果(点/盒子形式)
046 - 沉降漏斗效果(TIN网格形式)
047 - 纯前端三维网格,3D(点云)散点图仿Echarts
048 - 完整态势(军标)组件前端界面源码
049 - 填挖方分析(同时支持地形和模型)
050 - 纯前端空间体体积计算
051 - 地形开挖完美实现
052 - 模拟卫星轨道(高空)效果
053 - 地下模式效果
054 - 模拟火箭发射全过程
055 - 国内外各厂商地图服务地址汇总说明
056 - 智图Arcgis地图纠偏
057 - 百度地图纠偏
058 - 高德地图纠偏
059 - 腾讯地图纠偏
060 - 国内各厂商地图加载纠偏完整组件
061 - 天气之雨效果
062 - 天气之雪效果
063 - 天气之雾效果
064 - 历史轨迹全路径(折线/圆滑)
065 - 历史轨迹实时刷新
066 - 实时轨迹效果
067 - 洪水淹没效果
068 - 空间坐标系之箭头
069 - 空间坐标系之包围圆
070 - 编辑3Dtiles(平移+旋转)
071 - 编辑gltf(平移+旋转)
072 - 电弧球效果(材质)
073 - 动态遮罩球效果(材质)
074 - 自定义工程树组件
075 - 自定义弹窗组件(基础版)
076 - 缓冲区分析
077 - Geoserver样式配置
078 - 对象材质:图片轨迹线
079 - 对象材质:动态扩散圆
080 - 模拟灾害影响范围动态效果
081 - 编辑gltf(Entity形式)平移+旋转
082 - 热力图绘制原理
083 - Cesium热力图实现完整版
084 - 分屏对比(控制联动)
085 - 屏幕打印(地图出图)
086 - 地图打印(场景专题图输出)完整版
vue3+vite+ts+cesium项目搭建全过程
087 - 完美状态栏组件
088-军事标绘系列十七:防御阵型?
demo简图 代码规范:Cesium + Vue?以初始化为样例Demo.vue:
<template> <div id="cesiumContainer"> <tools></tools> </div> </template> <script> import Tools from "./components/tools.vue"; const Cesium = window.Cesium; let viewer = undefined; export default { components: { Tools }, data() { return {}; }, mounted() { let key = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwZDhhOThhNy0zMzUzLTRiZDktYWM3Ni00NGI5MGY2N2UwZDUiLCJpZCI6MjQzMjYsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODUwMzUwNDh9.DYuDF_RPKe5_8w849_y-sutM68LM51O9o3bTt_3rF1w"; Cesium.Ion.defaultAccessToken = key; window.viewer = viewer = new Cesium.Viewer("cesiumContainer", { imageryProvider: new Cesium.ArcGisMapServerImageryProvider({ url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer", }), // terrainProvider: this.Cesium.createWorldTerrain(), geocoder: true, homeButton: true, sceneModePicker: true, baseLayerPicker: true, navigationHelpButton: true, animation: true, timeline: true, fullscreenButton: true, vrButton: true, //关闭点选出现的提示框 selectionIndicator: true, infoBox: true, }); viewer._cesiumWidget._creditContainer.style.display = "none"; // 隐藏版权 this.initCamera(); }, methods: { initCamera() { viewer.camera.flyTo({ destination: window.Cesium.Cartesian3.fromDegrees( 110.62898254394531, 40.02804946899414, 1000.0 ), //初始定位 }); }, getLocation() { let handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas); handler.setInputAction(function (event) { let earthPosition = viewer.scene.pickPosition(event.position); if (Cesium.defined(earthPosition)) { let cartographic = Cesium.Cartographic.fromCartesian(earthPosition); let lon = Cesium.Math.toDegrees(cartographic.longitude).toFixed(5); let lat = Cesium.Math.toDegrees(cartographic.latitude).toFixed(5); let height = cartographic.height.toFixed(2); console.log(earthPosition, { lon: lon, lat: lat, height: height, }); } }, Cesium.ScreenSpaceEventType.LEFT_CLICK); }, }, }; </script> <style lang="scss" scoped> #cesiumContainer { width: 100%; height: 100%; position: relative; } </style>如果客官您有问题,可以在本文下留言!
如果客官您有什么建议意见,可以在本文下留言!
如果客官您有批评指正,可以在本文下沟通讨论!
如果实例demo有数据缺失,评论留下您的邮箱地址!
如果客官您有其他的功能需求,可以在本文下留言,不管能不能实现,总会给出回复!a
1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,会注明原创字样,如未注明都非原创,如有侵权请联系删除!;3.作者投稿可能会经我们编辑修改或补充;4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |