devbox
AllinToyou
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Cesium 简单航飞线路规划，模拟飞行扫描效果_三维航线网络插件cesium

作者：AllinToyou | 2024-06-09 16:03:25

赞

踩

三维航线网络插件cesium

目录

效果

源码

使用注意

追加说明

参考文档

效果

 动图：

源码

vue2+elementUI+cesium1.97，功能源码已整理到单个文件中。单独运行需要引入cesium、elementUI和turf.js,原理看注释基本都能看懂。上源码：

  1. <template>
  2.   <!-- 航线规划 -->
  3.   <div class="uvaRoutePlanBox" :class="{ hide: !isShow, show: isShow }">
  4.     <div id="cesiumContainerBox" />
  5.     <div
  6.       id="toolTip"
  7.       style="display: none;pointer-events: none;position: fixed;background: rgba(0,0,0,0.5);z-index: 1000;opacity: 0.8;border-radius: 4px;padding: 4px 8px;white-space: nowrap;font-family:黑体;color:white;font-weight: bolder;font-size: 14px;"
  8.     />
  9.     <div class="body">
  10.       <div class="form-item">
  11.         <span class="form-label">
  12.           航飞区域
  13.         </span>
  14.         <div class="form-connect">
  15.           <el-button type="primary" style="width:130px;" @click="drawPoly">
  16.             绘制
  17.           </el-button>
  18.         </div>
  19.       </div>
  20.       <div class="form-item">
  21.         <span class="form-label">航飞间距</span>
  22.         <div class="form-connect">
  23.           <el-input-number
  24.             v-model="hfDistance"
  25.             controls-position="right"
  26.             :min="10"
  27.             :step="10"
  28.             @change="distanceHandleChange"
  29.           />
  30.         </div>
  31.       </div>
  32.       <div class="form-item">
  33.         <div class="form-connect">
  34.           <el-button type="primary" @click="beginCalc">
  35.             开始计算
  36.           </el-button>
  37.           <el-button type="success" @click="moniFly">
  38.             模拟飞行
  39.           </el-button>
  40.           <el-button type="danger" @click="cleanEntity">清除</el-button>
  41.         </div>
  42.       </div>
  43.     </div>
  44.   </div>
  45. </template>
  46.  
  47. <script>
  48. import * as Cesium from '@assets/Cesium'
  49. import * as turf from '@turf/turf'
  50.  
  51.  
  52. var polyArr = [] // 面数据
  53. var jdArrs = [] // 交点集合
  54. export default {
  55.   name: 'UvaRoutePlan',
  56.   components: {},
  57.   props: [],
  58.   data() {
  59.     return { isShow: true, hfDistance: 100, isFly: false }
  60.   },
  61.   watch: {},
  62.   created() {
  63.     this.$nextTick(function() {
  64.       this.startInit()
  65.     })
  66.   },
  67.   mounted() {},
  68.   methods: {
  69.     startInit() {
  70.       const key =
  71.         '你的token'
  72.       Cesium.Ion.defaultAccessToken = key
  73.  
  74.       var viewer = new Cesium.Viewer('cesiumContainerBox', {
  75.         imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
  76.           url:
  77.             'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
  78.         }),
  79.         geocoder: true,
  80.         homeButton: true,
  81.         sceneModePicker: true,
  82.         baseLayerPicker: true,
  83.         navigationHelpButton: true,
  84.         shouldAnimate: true,
  85.         animation: true,
  86.         timeline: true,
  87.         fullscreenButton: true,
  88.         vrButton: true,
  89.         // 关闭点选出现的提示框
  90.         selectionIndicator: false,
  91.         infoBox: false
  92.       })
  93.       viewer._cesiumWidget._creditContainer.style.display = 'none' // 隐藏版权
  94.       viewer.camera.flyTo({
  95.         destination: Cesium.Cartesian3.fromDegrees(
  96.           113.6440552299206,
  97.           34.78411814959118,
  98.           2000
  99.         ),
  100.         orientation: {
  101.           heading: Cesium.Math.toRadians(0.0), // 左右方向
  102.           pitch: Cesium.Math.toRadians(-90.0), // 上下方向
  103.           roll: Cesium.Math.toRadians(0) // 镜头（屏幕）到定位目标点（实体）的距离
  104.         },
  105.         duration: 3 // 执行定位动画的时间
  106.       })
  107.       window.viewer = viewer
  108.     },
  109.     endClose() {
  110.       this.cleanEntity()
  111.     },
  112.     // 画航飞区域
  113.     drawPoly() {
  114.       var viewer = window.viewer
  115.       this.cleanEntity()
  116.       var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
  117.       // 鼠标事件
  118.       handler = new Cesium.ScreenSpaceEventHandler(
  119.         viewer.scene._imageryLayerCollection
  120.       )
  121.       polyArr = []
  122.       var positions = []
  123.       var tempPoints = []
  124.       var polygon = null
  125.       var tooltip = document.getElementById('toolTip')
  126.       var cartesian = null
  127.       // 鼠标移动事件
  128.       handler.setInputAction(function(movement) {
  129.         tooltip.style.left = movement.endPosition.x + 3 + 'px'
  130.         tooltip.style.top = movement.endPosition.y - 25 + 'px'
  131.         tooltip.innerHTML = '<p>单击开始，右击结束</p>'
  132.         const ray = viewer.camera.getPickRay(movement.endPosition)
  133.         cartesian = viewer.scene.globe.pick(ray, viewer.scene)
  134.         if (positions.length >= 2) {
  135.           if (!Cesium.defined(polygon)) {
  136.             polygon = new PolygonPrimitive(positions)
  137.           } else {
  138.             positions.pop()
  139.             positions.push(cartesian)
  140.           }
  141.         }
  142.       }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
  143.       // 左击鼠标事件
  144.       handler.setInputAction(function(movement) {
  145.         tooltip.style.display = 'block'
  146.         tooltip.style.left = movement.position.x + 3 + 'px'
  147.         tooltip.style.top = movement.position.y - 25 + 'px'
  148.         tooltip.innerHTML = '<p>单击开始，右击结束</p>'
  149.         const ray = viewer.camera.getPickRay(movement.position)
  150.         cartesian = viewer.scene.globe.pick(ray, viewer.scene)
  151.         if (positions.length === 0) {
  152.           positions.push(cartesian.clone())
  153.         }
  154.  
  155.         // positions.pop();
  156.         positions.push(cartesian)
  157.         // 在三维场景中添加点
  158.         var cartographic = Cesium.Cartographic.fromCartesian(
  159.           positions[positions.length - 1]
  160.         )
  161.         var longitudeString = Cesium.Math.toDegrees(cartographic.longitude)
  162.         var latitudeString = Cesium.Math.toDegrees(cartographic.latitude)
  163.         var heightString = cartographic.height
  164.         tempPoints.push({
  165.           lon: longitudeString,
  166.           lat: latitudeString,
  167.           hei: heightString
  168.         })
  169.       }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
  170.       // 右击鼠标事件
  171.       handler.setInputAction(function() {
  172.         handler.destroy()
  173.         tooltip.style.display = 'none'
  174.         positions.pop()
  175.         polyArr = positions
  176.       }, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
  177.       var PolygonPrimitive = (function() {
  178.         function _(positions) {
  179.           this.options = {
  180.             name: 'uav-poly',
  181.             polygon: {
  182.               hierarchy: [],
  183.               // perPositionHeight : true,
  184.               material: Cesium.Color.fromCssColorString('#fafafa').withAlpha(
  185.                 0.5
  186.               )
  187.             }
  188.           }
  189.  
  190.           this.hierarchy = { positions }
  191.           this._init()
  192.         }
  193.  
  194.         _.prototype._init = function() {
  195.           var _self = this
  196.           var _update = function() {
  197.             return _self.hierarchy
  198.           }
  199.           // 实时更新polygon.hierarchy
  200.           this.options.polygon.hierarchy = new Cesium.CallbackProperty(
  201.             _update,
  202.             false
  203.           )
  204.           viewer.entities.add(this.options)
  205.         }
  206.  
  207.         return _
  208.       })()
  209.     },
  210.     // 开始计算
  211.     beginCalc() {
  212.       if (polyArr.length === 0) {
  213.         this.$message.warning('未检测到航飞区域')
  214.         return
  215.       }
  216.       var viewer = window.viewer
  217.       // 清除之前计算结果entity
  218.       this.cesium.removeEntityLikeName(viewer, 'uav-tmp')
  219.       var geodesic = Cesium.BoundingRectangle.fromPoints(polyArr) // 外接矩形获取
  220.       var rectangle = Cesium.Rectangle.fromCartesianArray(polyArr) // 外接矩形获取
  221.       // 把面拆分成线并转换为经纬度格式存储
  222.       var polyLines = []
  223.       polyArr.map((res, index) => {
  224.         var tmp = []
  225.         var ellipsoid = viewer.scene.globe.ellipsoid
  226.         var cartesian3 = new Cesium.Cartesian3(res.x, res.y, res.z)
  227.         var cartographic = ellipsoid.cartesianToCartographic(cartesian3)
  228.         var cartesian31 = null
  229.         var cartographic1 = null
  230.         if (index === polyArr.length - 1) {
  231.           // 最后一个点连接顶点
  232.           cartesian31 = new Cesium.Cartesian3(
  233.             polyArr[0].x,
  234.             polyArr[0].y,
  235.             polyArr[0].z
  236.           )
  237.           cartographic1 = ellipsoid.cartesianToCartographic(cartesian31)
  238.  
  239.           tmp.push([
  240.             [
  241.               Cesium.Math.toDegrees(cartographic.longitude),
  242.               Cesium.Math.toDegrees(cartographic.latitude)
  243.             ],
  244.             [
  245.               Cesium.Math.toDegrees(cartographic1.longitude),
  246.               Cesium.Math.toDegrees(cartographic1.latitude)
  247.             ]
  248.           ])
  249.         } else {
  250.           cartesian31 = new Cesium.Cartesian3(
  251.             polyArr[index + 1].x,
  252.             polyArr[index + 1].y,
  253.             polyArr[index + 1].z
  254.           )
  255.           cartographic1 = ellipsoid.cartesianToCartographic(cartesian31)
  256.  
  257.           tmp.push([
  258.             [
  259.               Cesium.Math.toDegrees(cartographic.longitude),
  260.               Cesium.Math.toDegrees(cartographic.latitude)
  261.             ],
  262.             [
  263.               Cesium.Math.toDegrees(cartographic1.longitude),
  264.               Cesium.Math.toDegrees(cartographic1.latitude)
  265.             ]
  266.           ])
  267.         }
  268.         polyLines.push(tmp)
  269.       })
  270.       // 等高分割矩形
  271.       var bool = geodesic.width < geodesic.height
  272.       var len = Math.floor(geodesic.height / (this.hfDistance / 2)) // 高度分割数量
  273.       var step = rectangle.height / len // 步长
  274.       if (bool) {
  275.         len = Math.floor(geodesic.width / (this.hfDistance / 2)) // 宽度分割数量
  276.         step = rectangle.width / len // 步长
  277.       }
  278.       jdArrs = [] // 交点集合
  279.       //   console.log(rectangle, len, step)
  280.       for (var i = 0; i < len; i++) {
  281.         var tmp = null
  282.         if (bool) {
  283.           tmp = new Cesium.Rectangle(
  284.             rectangle.east - step * (i + 1),
  285.             rectangle.south,
  286.             rectangle.east - step * i,
  287.             rectangle.north
  288.           )
  289.         } else {
  290.           tmp = new Cesium.Rectangle(
  291.             rectangle.west,
  292.             rectangle.north - step * (i + 1),
  293.             rectangle.east,
  294.             rectangle.north - step * i
  295.           )
  296.         }
  297.         // 弧度转换为经纬度
  298.         var tmpLonLat = this.rectangle2LonLat(tmp)
  299.         // 计算交点
  300.         var tmpJdarr = []
  301.         polyLines.map(res => {
  302.           var mb = null
  303.           if (bool) {
  304.             mb = turf.lineString([
  305.               [tmpLonLat[1][0], tmpLonLat[1][1]],
  306.               [tmpLonLat[3][0], tmpLonLat[3][1]]
  307.             ])
  308.           } else {
  309.             mb = turf.lineString([
  310.               [tmpLonLat[1][0], tmpLonLat[1][1]],
  311.               [tmpLonLat[0][0], tmpLonLat[0][1]]
  312.             ])
  313.           }
  314.  
  315.           var intersects = turf.lineIntersect(turf.lineString(res[0]), mb)
  316.           if (intersects.features.length > 0) {
  317.             var tmplatlon = intersects.features[0].geometry.coordinates
  318.             tmpJdarr.push(tmplatlon)
  319.           }
  320.         })
  321.         // 就近往返
  322.         if (i > 0) {
  323.           var distance1 = turf.distance(
  324.             turf.point(tmpJdarr[0]),
  325.             turf.point(jdArrs[jdArrs.length - 1]),
  326.             { units: 'kilometers' }
  327.           )
  328.           var distance2 = turf.distance(
  329.             turf.point(tmpJdarr[1]),
  330.             turf.point(jdArrs[jdArrs.length - 1]),
  331.             { units: 'kilometers' }
  332.           )
  333.           //   console.log(i, distance1, distance2)
  334.           if (distance1 > distance2) {
  335.             tmpJdarr = tmpJdarr.reverse()
  336.           }
  337.         }
  338.         // 存储交点
  339.         tmpJdarr.map(res => {
  340.           jdArrs.push(res)
  341.         })
  342.       }
  343.       if (jdArrs[0][0] === jdArrs[1][0] && jdArrs[0][1] === jdArrs[1][1]) {
  344.         jdArrs.shift()
  345.       }
  346.  
  347.       // 线数据
  348.       var linesArrs = []
  349.       // 标字
  350.       jdArrs.map((res, index) => {
  351.         viewer.entities.add({
  352.           name: 'uav-tmp-point',
  353.           position: Cesium.Cartesian3.fromDegrees(res[0], res[1]),
  354.           label: {
  355.             text: index + '',
  356.             font: '14pt SongTi',
  357.             eyeOffset: new Cesium.Cartesian3(0, 0, -100)
  358.           }
  359.         })
  360.         // 存储线数据
  361.         linesArrs.push(res[0])
  362.         linesArrs.push(res[1])
  363.       })
  364.       // 画方向线
  365.       viewer.entities.add({
  366.         name: 'uav-tmp-line',
  367.         // corridor polyline
  368.         polyline: {
  369.           positions: Cesium.Cartesian3.fromDegreesArray(linesArrs),
  370.           material: new Cesium.PolylineArrowMaterialProperty(Cesium.Color.RED),
  371.           followSurface: true,
  372.           width: 10
  373.         }
  374.       })
  375.     },
  376.     // 弧度转换为经纬度
  377.     rectangle2LonLat(coor) {
  378.       const northwest = Cesium.Rectangle.northwest(coor)
  379.       const southwest = Cesium.Rectangle.southwest(coor)
  380.       const northeast = Cesium.Rectangle.northeast(coor)
  381.       const southeast = Cesium.Rectangle.southeast(coor)
  382.  
  383.       const leftTop = [
  384.         Cesium.Math.toDegrees(northwest.longitude),
  385.         Cesium.Math.toDegrees(northwest.latitude)
  386.       ]
  387.       const leftBottom = [
  388.         Cesium.Math.toDegrees(southwest.longitude),
  389.         Cesium.Math.toDegrees(southwest.latitude)
  390.       ]
  391.  
  392.       const rightTop = [
  393.         Cesium.Math.toDegrees(northeast.longitude),
  394.         Cesium.Math.toDegrees(northeast.latitude)
  395.       ]
  396.  
  397.       const rightBottom = [
  398.         Cesium.Math.toDegrees(southeast.longitude),
  399.         Cesium.Math.toDegrees(southeast.latitude)
  400.       ]
  401.  
  402.       return [leftTop, rightTop, leftBottom, rightBottom]
  403.     },
  404.     // 清理entity
  405.     cleanEntity() {
  406.       var viewer = window.viewer
  407.       this.cesium.removeEntityLikeName(viewer, 'uav-')
  408.       this.cesium.cleanEntityCollection(viewer, 'uva')
  409.       polyArr = []
  410.  
  411.       viewer.trackedEntity = undefined
  412.       this.isFly = false
  413.     },
  414.     // 更改航飞间距触发事件
  415.     distanceHandleChange(val) {
  416.       this.beginCalc()
  417.       // 重置飞行
  418.       if (this.isFly) {
  419.         this.moniFly()
  420.       }
  421.     },
  422.     // 模拟飞行
  423.     moniFly() {
  424.       var viewer = window.viewer
  425.       var that = this
  426.       that.isFly = true
  427.       if (polyArr.length === 0) {
  428.         this.$message.warning('未检测到航飞区域')
  429.         return
  430.       }
  431.       // 清除上一个动画
  432.       this.cesium.cleanEntityCollection(viewer, 'uva')
  433.       this.cesium.removeEntityLikeName(viewer, 'uav-tmp-fly')
  434.       viewer.trackedEntity = undefined
  435.       // 加载新动画
  436.       const czml = [
  437.         {
  438.           id: 'document',
  439.           name: 'uva',
  440.           version: '1.0',
  441.           clock: {
  442.             interval: '2022-08-04T10:00:00Z/2022-08-04T15:00:00Z',
  443.             currentTime: '2022-08-04T10:00:00Z',
  444.             range: 'LOOP_STOP',
  445.             multiplier: 10
  446.           }
  447.         },
  448.         {
  449.           id: 'path',
  450.           name: 'uva-tmp-fly',
  451.           description: '<p> 飞行器</p>',
  452.           availability: '2022-08-04T10:00:00Z/2022-08-04T15:00:00Z',
  453.           path: {
  454.             material: {
  455.               polylineOutline: {
  456.                 color: {
  457.                   rgba: [255, 215, 0, 255]
  458.                 },
  459.                 outlineColor: {
  460.                   rgba: [192, 192, 192, 255]
  461.                 },
  462.                 outlineWidth: 5
  463.               }
  464.             },
  465.             width: 8,
  466.             leadTime: 10,
  467.             // trailTime: 1000,
  468.             resolution: 5
  469.           },
  470.           billboard: {
  471.             image:
  472. 'data:image/png;base64,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',
  473.             scale: 1.5,
  474.             eyeOffset: {
  475.               cartesian: [0.0, 0.0, -10.0]
  476.             }
  477.           },
  478.           position: {
  479.             epoch: '2022-08-04T10:00:00Z',
  480.             cartographicDegrees: []
  481.           }
  482.         }
  483.       ]
  484.       var tmp = []
  485.       var timesArr = []
  486.       var timeTmp = 0
  487.       var height = 500 // 飞行高度
  488.       var v = 20 // 飞行速度
  489.       var yc = 2 // 重复飞行延迟时间 秒
  490.       // 手动插值
  491.       timesArr.push(0)
  492.       tmp.push(0)
  493.       tmp.push(jdArrs[0][0])
  494.       tmp.push(jdArrs[0][1])
  495.       tmp.push(height + Math.random() * 5 + 5)
  496.       for (var i = 0; i < jdArrs.length; i++) {
  497.         var times = 0
  498.         if (i < jdArrs.length - 1) {
  499.           var from = turf.point(jdArrs[i])
  500.           var to = turf.point(jdArrs[i + 1])
  501.           var options = { units: 'kilometers' }
  502.           var distance = turf.distance(from, to, options)
  503.           times = Math.round((distance * 1000) / v)
  504.           timeTmp += times
  505.           timesArr.push(timeTmp)
  506.           tmp.push(timeTmp)
  507.           tmp.push(jdArrs[i + 1][0])
  508.           tmp.push(jdArrs[i + 1][1])
  509.           tmp.push(height + Math.random() * 5 + 5)
  510.         }
  511.       }
  512.       // 动态配置CZML
  513.       // 动画结束时间
  514.       var tmpsss = new Date(
  515.         
  516.           new Date(czml[0].clock.currentTime).getTime() +
  517.             (timesArr[timesArr.length - 1] + yc) * 1000
  518.      
  519.       ).toISOString()
  520.  
  521.       var str = czml[0].clock.currentTime + '/' + tmpsss
  522.       czml[0].clock.interval = str
  523.       czml[1].availability = str
  524.       czml[1].path.trailTime = timesArr[2]
  525.       czml[1].position.cartographicDegrees = tmp
  526.  
  527.       // 加载CZML
  528.       var dataSource = viewer.dataSources.add(Cesium.CzmlDataSource.load(czml))
  529.       // 加载同步扫描椎体
  530.       dataSource
  531.         .then(function(dataSource) {
  532.           var entity = dataSource.entities.getById('path')
  533.           entity.viewFrom = new Cesium.Cartesian3(0.0, -1000.0, 1500.0)
  534.           viewer.trackedEntity = entity
  535.           var cylinderEntitys = that.addFrustum({
  536.             length: 510.0,
  537.             topRadius: 0.0,
  538.             bottomRadius: that.hfDistance / 2,
  539.             color: Cesium.Color.GREEN.withAlpha(0.5)
  540.           })
  541.           var property = new Cesium.SampledPositionProperty()
  542.           for (var ind = 0; ind < timesArr.length; ind++) {
  543.             var time = Cesium.JulianDate.addSeconds(
  544.               viewer.clock.currentTime,
  545.               timesArr[ind],
  546.               new Cesium.JulianDate()
  547.             )
  548.             var position = entity.position.getValue(time)
  549.             if (position) {
  550.               var cartographic = Cesium.Ellipsoid.WGS84.cartesianToCartographic(
  551.                 position
  552.               )
  553.               var lat = Cesium.Math.toDegrees(cartographic.latitude)
  554.               var lng = Cesium.Math.toDegrees(cartographic.longitude)
  555.               var hei = cartographic.height / 1.9
  556.               property.addSample(
  557.                 time,
  558.                 Cesium.Cartesian3.fromDegrees(lng, lat, hei)
  559.               )
  560.             }
  561.           }
  562.           cylinderEntitys.position = property
  563.         })
  564.         .catch(function(error) {
  565.           window.alert(error)
  566.         })
  567.     },
  568.     // 创建视锥体
  569.     addFrustum(option) {
  570.       var viewer = window.viewer
  571.       return viewer.entities.add({
  572.         name: 'uav-tmp-fly-wxsimple',
  573.         position: Cesium.Cartesian3.fromDegrees(114.0, 36.0, 200000.0),
  574.         cylinder: {
  575.           slices: option.slices,
  576.           length: option.length,
  577.           topRadius: option.topRadius,
  578.           bottomRadius: option.bottomRadius,
  579.           material: option.color
  580.         }
  581.       })
  582.     }
  583.   }
  584. }
  585. </script>
  586.  
  587. <style lang="scss" scoped>
  588. .show {
  589.   display: block;
  590. }
  591. .uvaRoutePlanBox {
  592.   width: 100vw;
  593.   height: 100vh;
  594. }
  595. /* 可视域 */
  596. #cesiumContainer {
  597.   width: 100%;
  598.   height: 100%;
  599. }
  600. .body {
  601.   position: fixed;
  602.   right: calc(100% - 300px);
  603.   top: 166px;
  604.   z-index: 999;
  605.   width: 300px;
  606.   text-align: center;
  607.   background: rgba(0, 0, 0, 0.6);
  608.   padding: 15px;
  609.   color: #fff;
  610. }
  611. .form-item {
  612.   margin: 5px;
  613.   .form-label {
  614.     display: inline-block;
  615.     width: 100px;
  616.     text-align: center;
  617.     font-size: 16px;
  618.     font-weight: bold;
  619.   }
  620.   .form-connect {
  621.     display: inline-block;
  622.     // width: calc(100% - 120px);
  623.   }
  624. }
  625.  
  626. .hide {
  627.   display: none;
  628. }
  629. </style>

使用注意

1、cesium引用切换为自己的引用。

2、this.cesium.removeEntityLikeName 和 this.cesium.cleanEntityCollection报错。

  1. /**
  2.  * 根据名称删除DataSources
  3.  * @param {*} name
  4.  */
  5. export function cleanEntityCollection(viewer, key) {
  6.   var tmp = viewer.dataSources.getByName(key)
  7.   if (tmp.length > 0) {
  8.     tmp.map(res => {
  9.       viewer.dataSources.remove(res)
  10.     })
  11.   }
  12. }
  13. /**
  14.  * 根据name获取entity
  15.  *
  16.  * */
  17. export function getEntityLikeName(viewer, name) {
  18.   if (name) {
  19.     var entities = viewer.entities.values
  20.     var findEntities = []
  21.     for (var i = 0; i < entities.length; i++) {
  22.       var entity = entities[i]
  23.       // console.log(entity);
  24.       if (entity.name && entity.name.indexOf(name) !== -1) {
  25.         findEntities.push(entity)
  26.       }
  27.     }
  28.     return findEntities
  29.   } else {
  30.     return []
  31.   }
  32. }
  33.  
  34. /**
  35.  * 根据类似name移除entity
  36.  *
  37.  * */
  38. export function removeEntityLikeName(viewer, name) {
  39.   if (name) {
  40.     var cleanEntities = getEntityLikeName(viewer, name)
  41.     // 清除
  42.     cleanEntities.map(res => {
  43.       viewer.entities.removeById(res.id)
  44.     })
  45.   } else {
  46.     viewer.entities.removeAll()
  47.   }
  48. }

3、this.$message 报错可将 this.$message.warning删除或换成alert弹窗或其他提示方法。

追加说明

        由于很多人咨询配置环境问题，现配置一份简单的vue的框架。cesium引入采用cdn，npm i 和npm run dev 即可运行。

源码地址：

uav: Cesium 简单航飞线路规划，模拟飞行扫描效果 - Gitee.com

参考文档

数据计算参考：

GET START | Turf.js中文网 (fenxianglu.cn)

飞行效果参考：

CZML Path - Cesium Sandcastle

相关方法参考：

Viewer - Cesium Documentation

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/694840
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号