Digital Agriculture Visualization: Technical Implementation with AMap, Three.js, GIS, and Vue

The article introduces digital agriculture visualization as a technique that collects, integrates, and visualizes agricultural data using big data, IoT, AI, and GIS to support precise decision‑making.

It outlines the functional requirements, including base infrastructure (terrain, satellite imagery, water bodies, village buildings), agricultural production layers (farmland, fish ponds, crop recognition, disaster prediction), security monitoring (drone patrol, intrusion alerts), and economic analysis (yield prediction, cost‑benefit ratios).

A detailed technical stack is listed: AMap JSAPI 2.0, three.js 0.157, QGIS 3.32.3, CesiumLab 3.1.11, Blender 3.6, CityEngine 2023.0, Vue 3.2.25, Vite 2.9.15, and AI Earth services.

Layer specifications are provided in a table, mapping each topic to GIS data types, visual forms, and the underlying code layer (e.g., AMap.TileLayer for satellite imagery, GlLayer.PolygonLayer for farmland, Loca.HeatMapLayer for disaster risk).

Implementation steps include project setup with Vite, initializing the map, adding satellite tiles, and creating custom layers. Representative code snippets are shown, such as initializing the map and adding a satellite layer: const map = await initMap({ viewMode: '3D', dom: container.value, center: SETTING.center, zoom: 15.5, pitch: 42.0, rotation: 4.9, mapStyle: 'amap://styles/light', skyColor: '#c8edff' }); const satelliteLayer = new AMap.TileLayer.Satellite(); map.add([satelliteLayer]);

Examples of custom layer creation are provided, for instance a polygon layer for farmland: const layer = new GlLayer.PolygonLayer({ id: 'farmLayer', map, data, lineWidth: 0, opacity: 0.4, interact: true, altitude: 2 }); layerManger.add(layer);

Advanced features such as 3D model conversion to 3DTiles, shader‑based water surfaces, drone patrol animation using GLCustomLayer, and intrusion detection with AMap.GeometryUtil are explained with code excerpts.

The article concludes with a discussion on depth handling between AMap.CustomLayer and AMap.GLCustomLayer, shadow rendering using THREE.ShadowMaterial, and animation export from Blender to glTF.