关于DEJA_VU3D - Cesium功能集专栏说明_cesium 呼吸灯_总要学点什么

网络 02-07 1364

博主简介? ???

博主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