关于DEJA_VU3D - Cesium功能集专栏说明
Posted 总要学点什么
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于DEJA_VU3D - Cesium功能集专栏说明相关的知识，希望对你有一定的参考价值。
博主简介
博主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项目搭建全过程
002 - 完美集成展示Echarts柱状图/折线图/饼状图
015 - 军事标绘系列八：旗标类，包括（曲线/矩形/正三角/倒三角/对三角）
027 - Cesium加载Geojson鼠标划过和点击提示
032 - 加载Geoserver发布的WMTS服务并点击获取属性
047 - 纯前端三维网格，3D（点云）散点图仿Echarts
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
以上是关于关于DEJA_VU3D - Cesium功能集专栏说明的主要内容，如果未能解决你的问题，请参考以下文章