CesiumJS地图中通过经纬度不断生成网格

已于 2024-04-07 17:10:07 修改
阅读量300 收藏 5
点赞数 4
文章标签： 前端
于 2024-04-07 17:05:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Haley9999/article/details/137468019
版权

业务场景

通过无人机不断上报的数据(其中包含经纬度和其他业务数据)，根据经纬度生成网格，这个网格有范围，当无人机的位置超出这个网格则再次创建一个相同的网格，以此类推…，这些网格可以利用无人机上报的数据中的业务数据显示不同的信息。

实现思路

  1. 创建两个数组，一个作为无人机所经过的网格，另一个作为无人机可能到达的网格 ；
  2. 以第一个数据作为基准，并创建网格，这个网格存储在无人机经过的网格中；
  3. 根据网格的长度计算紧邻当前网格的八个格子的四个角坐标，形成九宫格的模式，当然，计算出来的这八个格子作为备选并不直接显示，存储在备选网格中；
  4. 每一条上报的数据都需要判断，判断是否在已经经过的网格或者备选的网格中，如果在备选的网格中，则将这个网格“转正”，然后再以这个网格计算它的备选网格，逐次类推；

示例Demo

最终实现功能

  1. 网格根据飞行数据不断自增
  2. 网格可以显示最新的业务数据
  3. 可以从接口返回的历史数据进行加载网格
  4. 可以根据自己的业务需求对表格的长宽做修改

grid.html

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <!-- <link rel="stylesheet" href="./Cesium-1.85.0-fix-18//Widgets/widgets.css">
 <script src="./Cesium-1.85.0-fix-18/Cesium.js"></script> -->
 <script src="https://cesium.com/downloads/cesiumjs/releases/1.104/Build/Cesium/Cesium.js"></script>
 <link href="https://cesium.com/downloads/cesiumjs/releases/1.104/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
 <title>Document</title>
 <script src="./grid.js"></script>
 <script>
   Cesium.Ion.defaultAccessToken = '替换成自己的Cesium Token'
 </script>


 <style>
   html,
   body {
     width: 100vw;
     height: 100vh;
     margin: 0;
     padding: 0;
   }

   #container {
     width: 100%;
     height: 100%;
   }
 </style>


</head>

<body>
 <div id="container"></div>

 <script>
   const viewer = new Cesium.Viewer('container', {})

   let gridInstance = new Grid({
     viewer,
   })

   let flightDataArr = []

   const start = () => {
     // gridInstance.reloadGrid(flightDataArr)

     const flightData = {
       longitude: 118.98468275078057,
       latitude: 28.947040637215718,
       gas: 30
     }

     const cl = setInterval(() => {
       if (flightDataArr.length < 100) {
         flightData.latitude += 0.00004
         flightData.longitude += 0.00004
         gridInstance.watchFlightData(flightData)
         flightDataArr.push({
           longitude: flightData.longitude + 0.00004,
           latitude: flightData.latitude + 0.00004,
           gas: 30
         })

       } else {
         clearInterval(cl)
         gridInstance.destory()
         gridInstance = undefined
       }
     }, 600)
   }

   start()

 </script>
</body>

</html>

grid.js


class Grid {
  constructor(options) {
    this.#viewer = options.viewer;
    this.#gridWidth = options.gridWidth ?? 30;
    this.#gridHeight = options.gridHeight ?? 30;
  }

  #viewer;
  #preGridsScope = [];  // 无人机经过的格子
  #reserveGridsScope = []; // 无人机可能经过的格子
  #gridWidth = 30;   // 格子宽，注意：只需修改这里即可
  #gridHeight = 30; // 格子长，注意：只需修改这里即可
  #pointEntity  // 模拟显示无人机的位置
  #isReloadTimeing = false  // 重载Timing

  getPreGridsScope() {
    return this.#preGridsScope
  }

  /* 绘制数据库已有数据的表格 */
  reloadGrid(list) {
    this.#isReloadTimeing = true
    for (let i = 0; i < list.length; i++) {
      this.#startWorking(list[i])
    }
    this.#isReloadTimeing = false
  }

  /* 监听飞行数据变化 */
  watchFlightData(flightData) {
    if (!this.#isReloadTimeing) {
      this.#startWorking(flightData)
      this.#mockAirMove(flightData)
    }
  }

  /* 开始 */
  #startWorking(flightData) {
    if (this.#preGridsScope.length > 0) {
      this.#judgeIsNotFirstGrid(flightData)
    } else {
      this.#calcFirstGrid(flightData);
    }
  }

  #mockAirMove(flightData) {
    const c = this.#wgs842Dkr(flightData)
    if (!this.#pointEntity) {
      this.#pointEntity = this.#viewer.entities.add({
        position: c,
        point: {
          pixelSize: 10,
          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
          disableDepthTestDistance: Number.POSITIVE_INFINITY,
        }
      })

      this.#viewer.trackedEntity = this.#pointEntity
    } else {
      this.#pointEntity.position = c
    }
  }

  /* 计算第一个表格的位置 */
  #calcFirstGrid(flightData) {
    const center = this.#wgs842Dkr(flightData)
    const positions = this.#calcGridPeaksWidthCenter(center)
    const scope = this.#calcScopeWithPositions(positions)
    this.#updatePreGrids({
      scope,
      positions,
      center,
    }, flightData)
  }

  /* 如果当前已经有表格显示了 */
  #judgeIsNotFirstGrid(flightData) {
    const firstGrid = this.#preGridsScope[this.#preGridsScope.length - 1]
    // 判断是否是在最后一个表格
    const isInLastGrids = this.#judgeIsInGridScope(firstGrid.scope, flightData)
    if (isInLastGrids === false) {
      // 判断是否在前面的表格中
      const isInPreGrids = this.#judgeFlightDataIsInPreGrids(flightData)
      if (isInPreGrids === false) {
        if (this.#reserveGridsScope.length > 0) {
          // 判断是否在备选表格中
          const isInReserveGrids = this.#judegeFlightDataIsInReserveGrids(flightData)
          if (isInReserveGrids === false) {
            // console.log('不在任何格子中');
            this.#calcFirstGrid(flightData)
            return
          } else {
            // console.log(`在第${isInReserveGrids + 1}个备选格中`);
            const findReserveGrid = this.#reserveGridsScope[isInReserveGrids]
            this.#updatePreGrids(findReserveGrid, flightData)
          }
        }
      } else {
        // console.log(`在第${isInPreGrids + 1}个格中`);
        const findGrid = this.#preGridsScope[isInPreGrids]
        this.#updateGridEntity(flightData, findGrid.id)
      }
    } else {
      // console.log('在最后一个格中');
      this.#updateGridEntity(flightData, firstGrid.id)
    }
  }

  /* 更新表格列表 */
  #updatePreGrids(grid, flightData) {
    // this.#reserveGridsScope = []  // 这里可以清空备选表格，也可以不清空。清空的话可能会导致无人机在以一个小角度折返时形成的网格与之前的重叠。具体依据业务而定
    const entity = this.#createGridEntity(grid.scope, flightData)
    this.#preGridsScope.push({
      ...grid,
      entity,
      data: flightData,
    })
    this.#calcReserveGrids({
      ...grid,
      data: flightData,
    })
  }

  /* 计算备选表格的位置（九宫格） */
  #calcReserveGrids(data) {
    const { positions: P, center: C } = data
    const calcReserveGrid = (cente, start, end, dis) => {
      const lineC = this.#calcLineCenter(this.#wgs842Dkr(start), this.#wgs842Dkr(end))
      const gridC = this.#translateByDirection(lineC, cente, dis)
      const gridP = this.#calcGridPeaksWidthCenter(gridC)
      const gridM = this.#calcScopeWithPositions(gridP)
      return {
        scope: gridM,
        positions: gridP,
        center: gridC
      }
    }

    // 正上
    const T = calcReserveGrid(C, P.LT, P.RT, this.#gridHeight)
    // 正右
    const R = calcReserveGrid(C, P.RT, P.RB, this.#gridWidth)
    // 正下
    const B = calcReserveGrid(C, P.LB, P.RB, this.#gridHeight)
    // 正左
    const L = calcReserveGrid(C, P.LB, P.LT, this.#gridWidth)
    // 左上
    const LT = calcReserveGrid(T.center, T.positions.LT, T.positions.LB, this.#gridWidth)
    // 右上
    const RT = calcReserveGrid(T.center, T.positions.RT, T.positions.RB, this.#gridWidth)
    // 左下
    const LB = calcReserveGrid(B.center, B.positions.LT, B.positions.LB, this.#gridWidth)
    // 右下
    const RB = calcReserveGrid(B.center, B.positions.RT, B.positions.RB, this.#gridWidth)

    this.#reserveGridsScope = [T, RT, R, RB, B, LB, L, LT]
  }

  /* 根据中心点计算表格的四个顶点 */
  #calcGridPeaksWidthCenter(center) {
    const L2W = Cesium.Transforms.localFrameToFixedFrameGenerator('east', 'up')(center);
    const computedposition = (L2W, x, y, z) => Cesium.Matrix4.multiplyByPoint(L2W, Cesium.Cartesian3.fromElements(x, y, z), new Cesium.Cartesian3())
    return {
      LT: this.#dkr2Wgs84(computedposition(L2W, -this.#gridWidth, 0, -this.#gridHeight)),
      LB: this.#dkr2Wgs84(computedposition(L2W, -this.#gridWidth, 0, this.#gridHeight)),
      RT: this.#dkr2Wgs84(computedposition(L2W, this.#gridWidth, 0, -this.#gridHeight)),
      RB: this.#dkr2Wgs84(computedposition(L2W, this.#gridWidth, 0, this.#gridHeight))
    }
  }

  /* 根据宫格顶点坐标数据筛选经纬度极值（指最大、最小的经、纬度，共四个数字） */
  #calcScopeWithPositions(positions) {
    const { LT, LB, RB, RT } = positions
    const lons = [LT.longitude, LB.longitude, RB.longitude, RT.longitude]
    const lats = [LT.latitude, LB.latitude, RB.latitude, RT.latitude]
    return {
      maxX: Math.max(...lons),
      maxY: Math.max(...lats),
      minX: Math.min(...lons),
      minY: Math.min(...lats)
    }
  }

  /* 判断飞行数据是否在已经展示的表格中(除去最后一个，因为已经判断过了) */
  #judgeFlightDataIsInPreGrids(position) {
    for (let i = 0; i < this.#preGridsScope.length - 1; i++) {
      const isIn = this.#judgeIsInGridScope(this.#preGridsScope[i].scope, position)
      if (isIn) {
        return i
      }
    }
    return false
  }

  /* 判断飞行数据是否在备选的表格中 */
  #judegeFlightDataIsInReserveGrids(position) {
    for (let i = 0; i < this.#reserveGridsScope.length; i++) {
      const isIn = this.#judgeIsInGridScope(this.#reserveGridsScope[i].scope, position)
      if (isIn) {
        return i
      }
    }
    return false
  }

  /* 判断经纬度是否在格子范围内 */
  #judgeIsInGridScope(scope, position) {
    const { minX, minY, maxX, maxY } = scope
    if (position.longitude < minX || position.longitude > maxX || position.latitude < minY || position.latitude > maxY) {
      return false
    } else {
      return true
    }
  }

  /* 地图上创建表格entity */
  #createGridEntity(scope, flightData, color = '#ffab00') {
    return this.#viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees((scope.minX + scope.maxX) / 2, (scope.minY + scope.maxY) / 2, 0.5),
      rectangle: {
        coordinates: Cesium.Rectangle.fromDegrees(scope.minX, scope.minY, scope.maxX, scope.maxY),
        outline: true,
        extrudedHeight: 0,
        material: Cesium.Color.fromCssColorString(color).withAlpha(0.8),
        outlineColor: Cesium.Color.fromCssColorString(color),
        outlineWidth: 100,
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
      },
      label: {
        font: "40px",
        text: `${flightData.gas}`,
        fillColor: Cesium.Color.BLACK,
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
      },
      flightData,
      scope
    })
  }

  /* 修改地图上表格的entity信息 */
  #updateGridEntity(flightData, id) {

  }

  /* 销毁 */
  destory() {
    for (let i = 0; i < this.#preGridsScope.length; i++) {
      this.#viewer.entities.remove(this.#preGridsScope[i].entity)
    }
    this.#preGridsScope = []
    this.#reserveGridsScope = []
    this.#isReloadTimeing = []
  }


  /* wgs84转笛卡尔 */
  #dkr2Wgs84(c3) {
    let cartographic = Cesium.Cartographic.fromCartesian(c3)
    let x = Cesium.Math.toDegrees(cartographic.longitude)
    let y = Cesium.Math.toDegrees(cartographic.latitude)
    let z = Cesium.Math.toDegrees(0)
    return {
      longitude: x,
      latitude: y,
      height: z,
    }
  }

  /* 笛卡尔转wgs84 */
  #wgs842Dkr(wgs84) {
    return Cesium.Cartesian3.fromDegrees(wgs84.longitude, wgs84.latitude, 0)
  }

  /* 计算一个点向一个方向平移一段距离的点 */
  #translateByDirection(end, start, offset) {
    const direction = Cesium.Cartesian3.subtract(
      end,
      start,
      new Cesium.Cartesian3()
    );

    let normalize = Cesium.Cartesian3.normalize(
      direction,
      new Cesium.Cartesian3()
    );
    let scalerNormalize = Cesium.Cartesian3.multiplyByScalar(
      normalize,
      offset,
      new Cesium.Cartesian3()
    );
    return Cesium.Cartesian3.add(
      end,
      scalerNormalize,
      new Cesium.Cartesian3()
    );
  }

  /* 计算线段中点 */
  #calcLineCenter(startPosition, endPosition) {
    return Cesium.Cartesian3.midpoint(startPosition, endPosition, new Cesium.Cartesian3())
  }
}
```![请添加图片描述](https://img-blog.csdnimg.cn/direct/20f6dae4caf24f1bb52dcf2958db1c0a.gif)


## 结语
>以上功能可能会存在一些数据上的重复计算，但无伤大雅，如果特别要求，可以自行更改优化；且目前来说应该足以应对大部分应用场景；各位有更好的实现方案也十分欢迎讨论；
zhangshaoying19
关注
  • 4
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Cesium：网格绘制
席木木的博客
12-02 1184
Cesium：网格绘制示例代码
cesium-martini:用于CesiumJS虚拟地球仪的栅格高程瓷砖的即时网格划分
05-09
铯马提尼酒 用于CesiumJS虚拟地球仪的栅格高程瓷砖的即时网格划分 该程序包包含的初步但实用的实现，该实现使用率先使用的右三角形不规则网络（ ）将转换为，以便在进行渲染。 该模块提供了适用于所有栅格图像的通用技术（尽管Terrain-RGB格式对于流高程数据来说是近乎理想的）。 正在改进性能并更好地控制渲染质量的修复程序。 创建该模块是为了支持我们在地质地图可视化工作，并作为将来丰富的地球科学可视化的基础。 安装 该软件包在NPM上以@macrostrat/cesium-martini形式列出。 可以使用以下命令安装 npm install --save @macrostrat/cesium-martini 发展 克隆此存储库后，您可以使用npm run build来构建模块（使用Rollup），或者使用npm run watch构建并监视更改。 要运行示例应用程序，请将MAP
cesium地图根据经纬度画网格线
irisMoon06的博客
04-24 959
【代码】cesium地图根据经纬度画网格线。
Cesium绘制经纬度栅格&网格抗锯齿
qq_38417082的博客
09-28 4426
Cesium绘制经纬度栅格&网格抗锯齿 var viewer = new Cesium.Viewer("cesiumContainer"); if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) { //判断是否支持图像渲染像素化处理 viewer.resolutionScale = window.devicePixelRatio; } //开启抗锯齿 viewer.scene.fxaa = true; viewer.
Cesium解决方案 绘制网格 绘制经纬度栅格
HMS Howe的学习笔记
04-08 3324
Cesium解决方案 绘制网格 绘制经纬度栅格
Cesium 地图显示鼠标经纬度和高度
02-23
基本版-显示鼠标经纬度和高度 html文件
69.（cesium篇）cesium接入天地图影像（经纬度）.zip
12-21
下载如有问题，可私信博主。下载前建议先查看博客内容，其地址为：https://blog.csdn.net/QQ98281642/article/details/122054627
全国省地图坐标经纬度js文件
04-05
china.js文件 百度地图全国城市坐标经纬度js文件见链接（全国城市）：https://download.csdn.net/download/m0_54925305/85079431
Cesium 常用地图纠偏 百度、高德、Arcgis、腾讯地图纠偏
04-10
Cesium 常用地图纠偏 百度、高德、Arcgis、腾讯地图纠偏 资源预览:http://dongnan185.com:8083/videos/jiupian.mp4 启动:npm i npm run serve
Cesium 绘制经纬网，方格里不显示经纬度
vanora1111的博客
04-24 1047
其实调用图层叠加是最好的方式，又省事。但是也记录一下前端自己生成的吧。发现同事调用的图层，代码更加简洁，但API明显是用的公司封装的，等问清楚了 再来补充。
Cesium 展示——经纬网添加
虎康的博客
09-21 461
要在 Cesium 中添加经纬网，可以使用 GridMaterialProperty 来创建网格材质，并将其应用到一个 Polygon 或 Rectangle 对象上。接下来，我们使用 Cesium.GridMaterialProperty 创建了一个网格材质 gridMaterial，并设置材质的颜色、单元格透明度、线数量和线厚度等属性。最后，我们创建了一个矩形的 Entity 对象 gridRectangle，并将经纬网材质 gridMaterial 应用到矩形的 material 属性上。
Cesium绘制经纬网
最新发布
m0_57715356的博客
02-21 673
此篇博客主要基于vanora1111博主绘制经纬网文章进行添加经纬度标注。
Cesium Scene渲染（2）：网格构建
zhangiser的专栏
02-20 783
看完Scene的整体调度，我们来看地球的两个最重要部分，地形和影像。要搞清楚地形和影像如何渲染，我们还需要了解一下Cesium的网格构建。网格才是Cesium地球构建的方式，是地形数据和影像数据的载体
cesium 实现经纬线绘制和经纬度标注
一碗老面的博客
10-09 2078
废话不对数直接上线效果图及代码 1.效果图 2.实现代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=
cesium原理篇（二）--网格划分
热门推荐
夕颜的专栏
10-25 1万+
转自：http://www.cnblogs.com/fuckgiser/p/5772077.html上一篇我们从宏观上介绍了Cesium的渲染过程，本章延续上一章的内容，详细介绍一下Cesium网格划分的一些细节，包括如下几个方面： 流程 Tile四叉树的构建 LOD 流程首先，通过上篇的类关系描述，我们可以看到，整个调度主要是update和endFrame两个函数中，前者分工，后者干活。 另外
cesium 绘制网格
liyan_gis的专栏
07-27 1917
原文链接https//blog.csdn.net/weixin_42496466/article/details/107644193。legendTitles.push('低于'+range[i]);//如果值大于range最大的值时，则奖励最高一档。来源于网络，有时间的时候可以实验一下。//如果值小于range最小的值时，则奖励0。//网格放置位置(放置到起点经纬度位置)//设置对应颜色信息(16颜色值)//设置值的区间(16个区间)//根据数据查询颜色值。//查找所在区间的颜色。.........
js 百度地图通过经纬度获取城市名称
05-11
可以使用百度地图提供的逆地址解析功能，将经纬度转换为具体的地址信息，然后从地址中提取出城市名称。以下是一个简单的示例代码： ```javascript // 引入百度地图 API <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=your_ak"></script> // 定义一个函数，传入经纬度参数 function getCityName(lat, lng) { var geoc = new BMap.Geocoder(); var point = new BMap.Point(lng, lat); geoc.getLocation(point, function(rs){ var addComp = rs.addressComponents; var cityName = addComp.city; console.log(cityName); }); } ``` 其中，`your_ak` 需要替换为你自己的百度地图开发者密钥。调用 `getCityName` 函数时，传入经纬度参数即可获取对应的城市名称。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值