关于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项目搭建全过程

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

以上是关于关于DEJA_VU3D - Cesium功能集专栏说明的主要内容,如果未能解决你的问题,请参考以下文章

关于开发Cesium造成的电脑风扇狂飙的问题

首次使用Cesium加载3D数据不成功

Cesium专栏-空间分析之坡度分析(附源码下载)

Cesium专栏-地形开挖2-任意多边形开挖(附源码下载)

Cesium专栏-气象要素(温度降水)色斑图制作

Cesium专栏-terrain地形3dtiles模型gltf模型 高度采样