摘要

文章讲述了数字农业可视化大屏制作中的需求分析、技术选型、各图层的实现步骤、遇到的问题及解决方法，还提及项目成果与待优化之处。

一、需求分析

数字农业可视化大屏制作首先需要进行需求分析。

1. 基础配套方面
   • 地形：以三维地形图展示地形分布，为降低难度选择平整的冲击平原。例如可以通过不同颜色和高度标识山地、沼泽、平原等，还可利用等高线、阴影增强立体感。
   • 影像：展示高分辨率卫星影像图，覆盖智慧农业区域，让用户宏观了解区域全貌，包括地形、河流等基础配套元素的分布关系。
   • 水域：在地图上清晰标注河流走向、宽度以及与其他水体连接关系，还要展示水质指标如酸碱度等。
   • 村居建筑：以建筑模型或图标展示村庄分布位置和范围。
2. 农业生产方面
   • 农田：用高精度地图展示农田地块边界和面积，进行编号和分类管理。
   • 鱼塘：标注鱼塘位置、范围、面积和水深等，展示养殖情况。
   • 作物识别：利用图像识别技术识别和分类农田作物，在大屏上标注不同作物种植区域。
   • 灾害预测：通过监测相关因素，运用病虫害预测模型预测病虫害发生趋势和流行范围。
3. 安全监管方面
   • 无人机巡查：在地图上展示无人机巡查路线和实时位置。
   • 入侵告警：划定重点安全区域，有未经授权进入时触发告警。
   • 重点位置 POI：标注摄像头位置，形成 POI 图层，可查看摄像头实时监控画面等信息。
4. 经济效益方面
   • 区块产量预测：对比不同时期产量预测数据，分析产量变化趋势和影响因素。
   • 投入产出比分析：详细展示农业生产各项投入成本，以图表呈现成本占比。

二、技术分析

1. 技术栈说明
   • 高德地图 JSAPI2.0：为 GIS 平台提供基础底图和服务。
   • three.js0.157：主流 webGL 引擎，负责展示功能。
   • QGIS3.32.3：GIS 数据处理工具。
   • cesiumlab3.1.11：三维数据处理工具集。
   • blender3.6：模型处理工具。
   • CityEngine2023.0：支持将 GIS 转换为 3D 模型。
   • vue3.2.25：实现可视化大屏 UI 的语言框架。
   • vite2.9.15：前端工程构建工具。
   • AI Earth 达摩学院提供的 AIE - SEM 影像识别、分割、提取服务：可从遥感影像图片中提取 GIS 数据。
2. 图层说明
   • 不同的专题内容对应不同的 GIS 数据类型和表现形式，例如基础配套中的卫星影像底图是图片瓦片地图（AMap.TileLayer），村居建筑是 polygon 三维建筑模型（GlLayer.TilesLayer）等。

三、实现步骤

1. 主体框架开发
   • 使用 vite 创建工程，安装各种依赖包。在入口模块编写主体逻辑，引入主要模块、声明变量。例如初始化基础地图，并添加卫星影像图，还包括监听地图缩放和点击等操作。
   • 核心代码如下：

<script setup>
import { getMap, initMap } from '@/utils/mainMap2.js'
import GLlayer from '#/gl - layers/src/index'
import * as THREE from 'three'
import * as dat from 'dat.gui'
//...
// 高德可视化类
let loca
// 容器
const container = ref(null)
// 图层管理
const layerManger = new LayerManager()
// 信息提示浮层
let normalMarker
//...
onMounted(async () => {
    // 初始化地图
    await init()
    // 初始化各种图层
    await initLayers()
    // 逐帧函数，用于更新模型动画等内容
    animateFn()
})
</script>
<template>
    <div ref="container" class="container"></div>
    <div class="tool">
        <div class="btn" @click="gotoCenter()">回到中心</div>
        <div class="btn" @click="toggleCross()">越界告警</div>
        <div class="btn" @click="toggleDronView()">无人机巡航</div>
    </div>
</template>

2. 村居/绿化图层
   • 制作村居数据：可以通过 GIS 数据工具下载或 AI Earth 提取建筑面数据，生成 geoJSON 文件后在 QGIS 中清洗加工，没有高度数据可在 QGIS 中生成随机值。
   • 制作绿化区域数据：在 QGIS 中新建多边形面图层圈选绿化区域，涉及带孔多边形制作可利用矢量多边形布尔运算，还可生成随机点。
   • 转换为 3D 瓦片：通过一系列操作将村居和绿化数据转换为 3Dtiles，如在 cityEngine 工程中进行配置、导出模型等操作，最后在 cesiumlab 中转换。
   • 在高德地图呈现：部署 3dtiles 静态服务，在高德地图中重新定义原点坐标，使用 TilesLayer 图层加载。加载完成后对模型打光调亮、添加阴影等操作。
3. 水域图层
   • 使用 QGIS 获取水域范围数据，水面通过在多边形平面添加水纹材质（使用 ShaderMaterial 自定义着色器材质，封装为 WaterLayer 图层）实现。
4. 农田地块
   • 农田和鱼塘地块特性相似，在 QGIS 上通过属性表对 polygone 按属性分类获取数据。实例化 Polylone 并添加图片纹理区分不同状态。核心代码涉及将空间坐标数组转为 Mesh 的顶点三角面并赋予材质等操作。
5. 作物识别图层
   • 展示 AI 遥感识别技术对农田作物的识别结果和鱼塘产量预测数据，用 AMap.MassMarker 实现。注意点标记坐标位置生成，可利用 QGIS 自动创建质心。对 MassMark 和 MassMakers 进行封装以统一基础属性等。
6. 区域边界
   • 区域边界数据是常规封闭线图形 polyline，使用 GlLayer.BorderLayer 实例化渲染。模拟区域入侵监控，包括新增 setColor 方法切换颜色状态，利用几何计算方法判断点是否在多边形内以改变边界状态。
7. 无人机巡查功能
   • 实现单架无人机模型沿指定闭合轨迹飞行移动和第三人称视角俯瞰地图。核心代码包括在 Tween 更新函数中调整 NPC 位置和朝向，同步更新相机朝向等。将无人机巡航和飞行轨迹拆分为两个图层实现，最大难度是让无人机螺旋桨旋转摆动，采用逐帧函数更新 gltf 自带动画的方法。
8. 灾害预测图层
   • 本质是 3D 热力图，源数据是带有权重属性的坐标点集合，在 QGIS 上编辑查看二维效果后导出数据，使用高德自带的可视化图层 Loca.Heatmap 实现。切换图层显示状态时可加上动画效果。
9. 使用图层管理器操作图层
   • 为方便操作十几个图层，创建图层管理器 layerManager，提供添加、查找、清除功能，给图层赋予唯一 id 值便于操作。

四、其他问题解决方案

1. 如何在场景中产生投影
   • 渲染器打开投影（如设置 autoClear、shadowMap.enabled 等属性），创建合适的平行光源并设置各种参数，关联物体设置 castShadow 和 receiveShadow 属性为 true，给底部平面赋予 shadowMaterial 材质。
2. 给模型制作常规动画
   • 在 sketchfab 上找 FBX 格式的无人机模型，在 blender 中导入并将部件归属到根节点，在动画时间轴加关键帧，导出 gltf 时勾选动画并设置动画模式。
3. 图层的深度关系
   • 了解高德提供的 CustomLayer 和 GLCustomLayer 的区别，前者会覆盖一个 Canvas 标签，内容置于 Canvas1 内容之上；后者与地图实例共享画布，内容能与地图元素共享深度关系，但 Map 需逐帧重绘，性能损耗高，要根据业务场景选择。

五、项目总结

此项目并非最终成品，还有很多想法未落实，如精细化农业大棚搭建等功能展示，技术上也存在一些未解决的问题，如 cesiumlab 使用 FBX 生成的 3dtiles 没有支持 LOD，希望分享后能吸引更多人参与共建。