基于Vue.js框架的茶业信息管理平台的设计与开发

ISSN

1009-8984CN

22-1323/N长春工程学院学报(自然科学版)2020年第21卷第4期J. Changchun

Inst.

Tech.

(Nat.

Sci.

Edi.

)

,2020

/Vol.

21,

No.

415/2671-76doi：10. 3969/j.

issn.

1009-8984.

2020.

04.

015基于Vue.

js框架的茶业信息管理平台的设计与开发纪梦达，姜

放，张亚球（长春工程学院勘查与测绘工程学院，长春130021）摘

要：为解决传统茶业信息管理平台使用的Jquery、Doj。等框架配置复杂、学习成本较高、可操作性差等

问题。将框架结构更精简、组件化的开发方式更易于扩展的框架引入福建省松溪县茶业一张图平台

的构建。平台采用RS、GIS与外业茶叶种植调查相结合的方法，实现了茶业数据的精确采集和管理；采用

Web全栈开发的方式实现了基于当前主流框架和后端框架Thinkjs的前后端分离；利用WebGIS二

次开发技术完成了对茶业信息管理平台地图功能的设计开发，实现了茶叶一张图、虚拟现实浏览漫游、空间

分析等应用场景。向管理者提供了茶业信息地图数据服务，加强茶树种质资源保护、低产低效茶园改造，完

善茶叶生产设施，提高茶产业防灾减灾能力。为今后松溪县茶产业的发展和规划提供了参考。关键词：Vue.j

s

；

WebGIS;组件化；虚拟现实中图分类号：TP315：S126

文献标志码:A

文章编号：1009-8984（2020}04-0071-060引言近年来，伴随“智慧农业”的提出，以及互联网+、

物联网、云计算等的快速发展,传统的农业生产方式

1数据采集与数据库设计1.

1

研究区域概况松溪县隶属于福建省南平市，地处闽北浙南交界

正在不断与现代科技融合，应用于不同场景的茶产

处,县境介于东经118°33'〜118°55'和北纬27°24'〜

27°51',松溪县域面积1

043

km2。境内多为山地，土

业信息平台也相继涌现。比如基于WebGIS的龙

井茶溯源与产地管理系统研究［1］,基于物联网的智

慧茶园数据采集管理系统的设计与实现［］,基于

GIS的茶园环境实时监测与防冻预警系统［］等都取

层深厚肥沃，有机质含量高，极有利于茶树优良品质

的形成。松溪县属中亚热带湿润季风气候，冬无严

寒，夏无酷暑。城区年平均气温18.

1

C，无霜期

269

d,年日照总时数1

972

h,各地年平均降雨量

1

557-1

743

mm。松溪县辖1街2镇6乡109个村

得了很好的效果。但是从目前来看，依然缺乏以茶

业规划辅助决策为目的的信息管理平台的研究。不

管是质量溯源还是实时监控都要依托于物联网技

（居）。2018年末，全县总人口

16.85万人，其中城

术，运维成本高，前期投入对企业发展不利，并且

WebGIS的功能单一，空间分析能力不足。为此，本

镇户籍人口

4.

87万人，农村户籍人口

11.

98万人,

常住人口

12.3万人。1.2研究数据获取文以位于闽浙交界处的松溪县为研究区，以松溪县

2020年一2025年茶产业发展规划为导向,以松溪县

依托海丝卫星提供的高分辨率卫星遥感影像,

茶业总站的管理人员为应用对象，通过渐进式框架

开发了茶叶信息管理平台，在以空间可视化

结合多光谱遥感影像数据进行茶园分类，并将分类

为基础，以空间分析为目的基础上，尽可能直观简易

结果作为GIS人工目视判读的辅助手段，使用Arc-

Map

完成茶园图斑的遥感解译工作，制作各个乡镇

地设计操作功能，提高规划者的使用体验，组件式的

开发方式实现了开发和维护成本的控制，并为后期

功能扩展奠定了基础。收稿日期：020

—

11

—

23作者简介：纪梦达（1996

—

）,男（汉），安徽宿州人，硕士

的外业调查图纸，开展松溪县茶业种植调查工作，完

成了种植面积、茶树品种、茶叶加工重点企业调查。

1.2.1茶园分类影像数据获取自欧空局（European

Space

A-

gency,缩

ESA）

,

Sentinel—

2

卫星的

L1C

级产品，

主要研究WebGIS开发与应用。利用Sen2Cor以及SNAP软件对数据进行大气校

72长春工程学院学报(

自然科学版)2020

，21

(4)正、格式转换等预处理工作。考虑到本研究区为山

毛竹交错生长等情况导致的判读有误进行了新增和

分割。最终得到了如图2所示的调查结果。区，茶树种植区地形起伏较大，且研究区内地形起伏

差值最大为1

177

m,因此需要进行地形校正以削

弱地形对茶园分类结果的影响。DEM数据下载自美国航空航天局(NASA),空

间分辨率为12.

5

m,并以此进行几何校正以及地形

校正。本文以半经验C校正模型做地形校正，即基

于影像的像元值与太阳入射角余弦之间构建线性方

程，加入经验参数对研究区进行地形校正［4—5］。如

式⑴〜(2):DNc

=

DN

X

coscos

ai

十+

cc,

(1)cos

i

=

cosacos"十

siasin/?cos(A

―

co)

,

(2)

式中:DNc、DN分别为校正后、校正前的像元值；

为校正系数;a为太阳入射角；入为太阳天顶角；"和o

分别代表坡度和坡向。以RGB合成的0.8

m分辨率的影像为基础选

取样本区，以RF(Random

Forest)算法初步提取研

究区内茶园的分布。根据混淆矩阵进行精度评定,

RF算法提取的茶园总体精度为72.

14%

,

kappa系

数为0.

71,可以看做具有高度一致性。RF分类结

果

如

图

1

所

示

。图1茶园RF分类提取结果1.2.2解译调绘将上述茶园分类结果作为解译参考资料，海丝

卫星提供的高分影像作为底图，确定最小上图面积,

通过人工判读初步提取4

143块茶园图斑。随后进

行外业调绘，将茶园图斑进行精度到村一级的统计。

调绘开始前制作了外业底图、表格，并通过各村农技

员、基层自治组织等协助完成了茶树品种、承包人及

其联系方式、重点茶企信息等信息的上图入库。对

于初步茶叶图斑成果内同一图斑多个品种、茶叶与

(a)松溪县茶园发展现状图(b)松溪县重点茶叶企业(合作社)分布图

图2松溪县茶业调查结果经过调查统计，松溪县总行政面积1

043.

40

km2,

下属乡镇街道9个，茶叶种植总面积为35.

89

km2,占

总面积的3.

44%,茶叶种类19种，茶叶总图斑4

299

个。从茶园种植来看，松溪县茶叶种植主要分布于茶

平乡和郑墩镇，其中茶平乡种植面积16.

62

km2，占全

县种植总面积的46.

3%，是全县种植面积最大的乡

镇;从茶树品种的种植面积来看，茶叶的种植种类主

要是福云6号和福安大白，其中福云6号种植面积

15.

87

km2，占全县种植面积的44.

23%，是全县种

植面积最大的种类;松溪县境内茶企共156家，茶叶

加工重点企业中省龙头企业1家，获得SC认证企业

35家，通过有机认证企业7家。1.3数据结构与数据库根据项目建设的实际需要，本文将系统数据库

分为地理空间数据库和业务信息数据库两部分页,

并

通

过

Geodatabase

和

PostgreSQL

分

别

进

行

数

据

管理。Geodatabase中主要存储基础地理数据和专

纪梦达，等：基于框架的茶业信息管理平台的设计与开发73表3茶园信息数据表字段设计字段名称数据类型CYBMCYPZVarcharVarcharVarcharVarcharVarchar题地理数据;PostgreSQL中存储管理员信息数据，

包含管理员账户、密码、姓名等。1.3.1业务信息数据库备注依据行政区划代码和编码规则的茶园编码松溪县茶园的业务信息数据库采用Pot

greSQL进行管理，因为PostgreSQL是一款开源的

茶叶品种茶园的所属性质，集体或个人关系数据库，并且稳定性极强，同时在GIS方面表

QSXZSYR现出色，能够存储空间数据。设置业务信息数据库

所属人，茶园所有者茶园所属人的联系方式主要是为了方便规划者和各个部门的管理人员进行

登录和查看，数据说明具体见表1。LXFSMJDouble茶园面积(km2)表1管理员信息数据说明字段名称数据类型备注AdminIDVarchar管理员IDPasswordVarchar密码NameVarchar姓名DepartmentVarchar所在部门132

地理空间数据Geodatabase

是

实

现

WebGIS

系

统

空

间

数

据

源、建立可视化和空间查询、分析的服务基础，它采

用面向对象的技术可以将现实世界抽象为基于点、

线、面构成的地理空间信息。从数据类型上，又可划

分为基础地理数据和专题地理数据。松溪茶叶信息

管理平台地理空间的平台界面底图分别来自天地图

和ESRI地图资源，不需要本地存储和管理。存储

在本地空间数据库的数据具体说明见表2。表2地理空间数据说明类型 说明用途2019年2

m高分辨率遥

比例尺1

:

50

000以上茶感影像园底图基础地

2019年0.

8

m高分辨率比例尺1

:

50

000以下茶理数据

遥感影像

园底图松溪县行政村边界矢量图行政边界底图2019年松溪茶园发展现

茶园品种信息查询、空间

状矢量图分析专题地2019年重点茶叶企业分

理数据布矢量图茶企信息查询、空间分析2019年松溪VR点矢量图VR点定位、链接、浏览133

茶园数据表设计

茶园信息管理平台最主要的数据表就是茶园信

息数据表。每条茶园信息根据村级行政区进行组

织，主要包括了村镇名称、茶叶品种、面积、所属人、

联系方式等关键数据。具体字段信息见表3。CZMCVarchar该镇村级的行政区名称XHVarchar序号，该镇茶园所有数据的序号BZVarchar对于新增或分割的数据进行备注2平台设计与构建2.1平台设计平台采用全栈和前后端分离开发的开发模式,

其中前端作为本文的研究重点用于探讨茶园数据的

浏览、展示、查询和虚拟现实等功能，后端在现阶段

主要完成用户登录的验证。前端使用框架

完成展示、渲染等功能。作为当前国内的主

流框架，是一套用于Web项目应用的轻型渐进式脚

本框架，它是整个前端工程为实现流程化、低成本、

高效率、高性能等需求所实施应用的基础框架［7］。

后端使用Thinkjs框架完成拦截请求和响应等,

Thinkjs是一款面向未来的Node,

js框架，框架底层

基于Koa并兼容Koa的所有功能，Thinkjs内核小

巧、性能优异，在开发时具有高效和简单的特点。通

过这种前后端分离开发的方法，只需要对前后端的

框架进行简单的配置，就能够连接数据库并完成所

需要的功能，有效地提高了开发效率，降低学习成本

并提高代码质量。平台设计分为数据层、逻辑服务层、表现层3层

结构，同时数据层分为2条分支:一条是业务信息数

据，一条是地理空间信息数据。业务信息数据的存

储和获取,在前文的数据库和表设计的基础上，存储

在PostgreSQL创建的数据库中；在逻辑层将数据

库连接到后台Think,

js

上

,通过查询语句完成数据

的

获

取

，token

的

生

成

等

；

在

表

现

层

利

用

ElementUI

完成前端DOM登录窗口的设计,在Vue的login

组件中完成登录方法的设计和路由的配置，最终通

过验证实现跳转。第二部分是地理空间数据的存

储，地理空间数据在Arcgis平台中完成数据逻辑错

误和拓扑错误的检查、符号设计和配图，利用Geo­database

完成服务的发布；在逻辑服务层，通过云

74长春工程学院学报（自然科学版）2020,21(4)GIS服务器ArcGIS

Online对发布的服务进行存

解决方案，它使用了最新的前端技术栈，基于Vue

储,并通过REST

API能得到对应数据的URL地

和

element—ui

实

现

。设计后台登录逻辑时，首先将数据库配置到后

台用于查询用户数据，然后在控制器controller中

创建登录路由login。采用JWT完成身份验证，用

址，由JavaScript程序调用；在表现层利用

框架引入ArcGIS

API并连接到前端ElementUI设

计的DOM窗口，最终通过前端用户的操作实现功

能的调用和展示。图3为系统框架设计图。IE

|Chrome|Firefox|

Others户首先通过前端DOM发送用户名和密码，服务器

验证密码并保存验证信息，然后返回验证信息给前

|表现层'端实现登录跳转,同时前端将这个验证信息即口令

保存起来,以便下次发送请求的时候,可以将口令再

ent UI ]

[

Vuex

]I—[ArcGIS

API

for

JavaScript]|逻辑服务层-[http请求:响应rREST

APIArcGIS

Online

；[Th»kjs]Geodatabase1

[

PostgreSQL

]图3系统框架图2.2平台运行环境茶业信息管理平台的搭建，从数据的采集到系

统构建，需要地理信息平台、云服务器、GIS服务平

台等。相关运行环境选型如下：1）

操作系统：客户端选用Windows

10系统；2）

基础地理信息平台：ENVI5.

3、ArcMap10.

6、

ArcGIS

Pro；3）

GIS

服务平台：ArcGIS

Online；4）

开发平台:Visual Studio

Code；5）

数据库：GeodatabaseAPostgreSQL；6） JavaScript

框架：Vue.

jsA

Element

UI、Thi-

nkjs

；7）

Web

GIS

地图服务接口

：

ArcGIS

API

for

JavaScript；8）

浏览器:支持HTML5标准的框架。2.3具体功能设计2.3.1登录功能设计登录功能的完成需要前端、后端和数据库的共

同配合，所以设计登录界面要完成前端框架的搭建

和后台的创建，实现前后端的数据对接。前端Vue框架采用vue

—

admin一

template模

板的登录代码，在其基础上对登录界面进行了两方

面的修改,首先是对登录方法跳转路由的修改，使其

完成验证后跳转到地图组件，其次是对登录界面的

前端DOM利用HTML和CSS完成了修改。vue

—element

—

template

是

vue—element—admin

的

基础模板,vue

—

element

—

admin是一个后台前端

发送给服务器，服务器可以验证口令,判断用户的信

息和登录状态。图4为平台登录界面。图4平台登录界面2.3.2地图功能设计地图功能设计在Vue框架中进行,目的是为了

与Web

GIS地图服务接口完成对接，利用ArcGIS

API

当中的

map

类、views

类、layers

类、tasks

类、

widgets类实现地图的加载、空间查询、属性查询、

测量、热力图等功能。基于对功能的设计，通过Vue

路由和Vuex管理模式，将所有可以重复利用的结

构拆分为可复用的组件，形成一个层次清晰的组件

架构体系。表4为地图功能主要组件架构。表4主要Vue组件架构列表组件名称备注App.

vue根组件MapView.

vue地图组件QueryList.

vue查询组件Measurement,

vue量测组件HeatMap.

vue热力分析组件Buffer,

vue缓冲区分析组件其中，App.

vue为根组件，存放在项目源代码

sc目录下，其他组件，为子组件存放在项目源代码

src

目

录下的

components

子

目录中［8］。HeatMap.

vue、MapView.

vue、Buffer,

vue

组

件采用

Vue

Router路由管理，通过将组件映射到路由中，并将

出口渲染到根组件App.

vue完成页面的跳转。而

Measurement,

vue

和

QueryList.

vue

则需要

Map­

纪梦达，等：基于框架的茶业信息管理平台的设计与开发75View.

vue组件通过vuex对view视图数据的状态

于不同茶业图层空间和属性查询的需要

。

右上角的

下拉菜单通过调用

widgets下的

AreaMeasure-

ment2DADistanceMeasurement2D

实现对地图的距

进行管理，完成数据的传递。1)

通过路由加载组件。将组件引入路由对应的

文件/并将路由注入到实例中/在组件需要进行跳转

的DOM窗口配置路由链接，并将路由出口渲染到

离测量和面积测量。根组件App.

vue上。2)

通过Vuex状态管理模式。Vuex使用单一

状态树，用一个store(仓库)对象包含全部的应用层

级状态，并作为该应用的唯一数据源而存在，也就是

说每个应用将包含且仅包含一个store实例。Vuex

采用Getters函数在组件内部获取store中的状态

(或理解为Vue组件数据)，通过提交mutations驱

动状态的变化，修改store中的状态，使用Actions

在组件内部分发mutations事件函数。具体实现的方式是：在store文件夹下创建

map. js用于管理底图数据状态，并将mapview的

stateAactionAmutation引入到程序中，设定

vuex的

主程序入口是index,

js,再将map.

js引入到index.

js中。在使用时将地图组件MapView.

vue中的视

图数据view给提交出来，并在需要的组件中声明并

创建对应的对象即可。2.

4应用场景通过前文对平台需求的分析，在完成了对平台

功能设计的基础上，本系统基于ArcGIS

API对具

体的地图功能进行WebGIS的二次开发。实现了

地图数据的加载、要素数据的加载、客户端交互操

作

、

空间分析等功

能

。

并

在

将

各个

功能

组

件

化

的基

础上，完成了登录、茶叶一张图、热力图、缓冲区分析

等多个场景的搭建。241

茶叶一张图主界面首先通过WebTileLayer工具完成对天

地图底图的加载，然后通过when方法，加载2

m和

0.8

m的高分辨率遥感影像切片以及行政边界和茶

园图斑的要素图层。从茶园品种较多且分布散乱的

角度出发,左下角茶园品种的图例调用SQL查询子

句definitionExpression实现品种筛选，在视图中仅

返回满足定义表达式的要素。从茶园图斑数量较多

的角度出发，在右下角添加属性列表，使用Query

和QueryTask工具，实现对茶园信息的属性查询与

空间查询，通过点击列表某一列可以缩放至该列对

应的图斑并高亮显示属性信息。通过上述两项功

能，可以清楚直观地看到不同茶叶品种的分布情况，

并且能够精确快速地找到每一块图斑的所属人，在

进行茶叶品种结构调整时，能够起到辅助决策的作

用。在地图左上角标签页绑定click事件实现了茶

园图斑和茶企信息的图层切换功能，完成管理者对

(a)—张图主界面(b)量测工具图5松溪茶叶一张图2.4.2虚拟现实定位与浏览在进行VR要素图层的字段设计时，设置行政

村、VR地址链接和相应乡镇的简介，通过template

设置弹窗，点击链接即可跳转至该乡镇的VR场景。

可以佩戴VR眼镜进行720°全景浏览漫游，点击下

方图片可以跳转至该乡镇的不同种植基地。实现了

从“二维平面”到“虚实交互”，从“静态”到“动态”的

转变。添加VR功能可以使管理人员之间形成更好

的互动机制，提高规划的公众参与度［］。(a)点位与弹窗(b)场景浏览图6

VR定位与浏览

76243

空间分析长春工程学院学报(

自然科学版)2020

，21

(4)工作量大且容易出错的问题，同时模块组件

为了辅助管理者在规划时进行决策，在一张图

化的开发思想，能够将应用拆分成独立的、小型的、

界面右上角下拉菜单引入了两个在规划时常用的分

析工具。热力分析可以将茶企要素图层渲染为栅格

复用性高的组件模块，提高程序可维护性和扩展性

的同时，简化了代码编写强度，大幅提高系统的开发

效率；3)通过福建省松溪县茶叶平台的开发，结合

ArcGIS

API进行地图渲染，实现了数据查询、空间

表面,强调点密度高的区域，矢量点越密集的地方越

接近黄色,矢量点越稀疏的地方则热力图呈现的颜色

会更接近蓝色甚至无色。缓冲区分析以距离为单位,

以线、点、圆形、多边形、矩形实体为基础，自动建立周

分析、VR浏览等功能，能够完成松溪县产业发展规

围一定宽度的多边形图层。通过热力分析和缓冲区

划的需求，为茶园的科学规划和辅助决策提供技术

支持，弥补以规划为目的的茶园管理信息平台的空

白，能够真正地为乡村振兴战略服务，将科学技术作

为发展现代茶产业的助推器，加速产业转型步伐。分析能够充分考虑茶叶布局、茶企分布的空间因素,

减少规划主观性，提升区位选择的理论支持[10]。参考文献[I]

刘佳恒，丁一，魏玺，等.基于GIS技术的乡村旅游用地

规划实践[J].北京测绘,2019,33(10)1268

—

1271.[]陈兰.基于物联网的智慧茶园数据采集管理系统的设计

与实现[D].杭州：浙江理工大学，2019.(a)茶企点热力分析[]毛炎.基于Vue.

js框架的Web方言地图的设计与开发[D].

武汉:武汉大学,201&[4]

RICHTER

R,KELLENBERGER

T,

KAUFMANN

H.

Comparison

of

topographic

correction

methods

[J].

Re­mote

Sening,2009,1(3):184—196.[5]

李龙伟，李楠，陆灯盛.多时相Sentinel—2影像在浙西北

茶园信息提取中的应用[].浙江农林大学学报，2019,

36(5)841

—

848.[]杨昊霖.基于开源平台的WebGIS客户端设计与开发[D].

(b)缓冲区分析

图7空间分析昆明：昆明理工大学,201&[7]邓雯婷.基于Vue.

js构建单页面GIS应用的方法研究[J].

3结语本文基于框架的茶业信息管理平台的

设计与开发得到结论如下：1)

将RS和GIS技术相结合，利用RF算法进

科技创新与应用,2018(14):5

—

7.[]王星捷，李春花.基于WebGIS技术旅游系统的设计与

实现[].计算机技术与发展,2018,28(8):148

—

151.[]李晓燕，姜广辉，胡磊，等.基于GIS与虚拟现实的土地

利用总体规划仿真展示平台设计[J].国土资源遥感,

2014,26(4)195

—

200.[10]刘翔.基于WebGIS的龙井茶溯源与产地管理系统研

行茶园分类,并将结果作为目视判读的参考依据，提

高了人工判读的速度，极大地缩短了茶叶信息采集

完成的时间；2)

采用Vue.

js的MWM前端框架进行数据

究

[D]

杭

州

：

浙

江大 学

，2014[II]

何敏.基于GIS的茶园环境实时监测与防冻预警系统[D].长春:吉林大学,2013.绑定，解决了传统JavaScript技术如jQuery,dojo等

The

Design

and

Development

of

Tea

Industry

Information

Management

Platform

Based

on

Vue.

js

FrameworkJI

Meng一da,et al.(School

of

Prospccting

and

Surveying

Engineering

,Changchun

Institute

of

Technology

^Changchun

130021,China)Abstract:In

order

to

solve

the

problems

of complex

configuration,high

learning

cost,and

poor

operation

(下转第84页)

84术与软件工程，2018(18)60

—

61.长春工程学院学报(自然科学版)2020，21

4)[6]刘坚.基于深度神经网络的鸟类图像识别系统设计农

[22]李君宝，杨文慧，许剑清，等.基于深度卷积网络的SAR

业装备与车辆工程,2019,68(9)113

—

116.[27]刘元周，倪令格，晁亚东，等.基于深度神经网络的车辆

图像目标检测识别导航定位与授时，2017,4(1)：

60—66[3]刘晓春.基于深度学习的手写体图像分类识别研究[].

图片特征自动识别技术研究警察技术，2019(5)：

86—88[8]左向梅，武亮.基于深度图像分割的场景物体识别与匹

江西通信科技，2016,56(4)35

—

39.[24]张野,李明超，韩帅.基于岩石图像深度学习的岩性自动识

配工程技术研究，2019(17)219

—

221.[29]叶长明，蒋建国，詹曙，等.基于曲面等高线特征的不同

别与分类方法岩石学报,2018,34(2)81

—

90.[5]唐超，张苗辉，李伟，等.基于深度图像的人体行为识

姿态三维人脸深度图识别模式识别与人工智能,

2013，26(2)：219—219别系统仿真学报，2018,30(5)1641

—

Research

on

Image

Magnification

and

Image

Recognition

Based

on

Deep

LearningZHAO

Yan—ping{Anhui

Water

Conservancy

Technical

College

,

Hefei

230001,

China}Abstract：The

Deep

Learning

methods

have

achieved

excellent

results

in

a

number

of

challenging

computer

vision

benchmarks.

Therefore,this

paper

proposes

an

enlarged

image

recognition

algorithm

based

on

deep

mages，anddevelopstheuseofend-to-end

machinelearning

Deeplearningbasedonquantum

neuralnet-

work(QNN)

algorithm

is

a

novel

pattern

recognition

method

.

The

key

component

is

a

customer-made

super

computer

dedicated

to

deep

learning.

It

adopts

a

highly

optimized

parallel

algorithm,and

uses

the

most

ad-

vancedimagerecognitionsystem，agreaterdepthoftheneuralnetworkmodelforimagerecognition

Mean­while

the

new

data

and

communications

strategies

are

used

to

optimize

the

whole

system，and

multi-scale

high-resolutionimagesareusedtoverifythewholesystemKey

words：

deep

learning

；

neural

network

；

image

recognition

；machine

translation(上接第76页)

abilityoftheJquery，Dojoandotherframeworksusedbythetraditionalteaindustryinformation

manage­mentplatform

ThispaperintroducestheVuejsframeworkintotheconstructionofapictureplatformfor

theteaindustryinSongxiCounty，FujianProvinceChina，whichhasamorestreamlinedframeworkstruc-

tureandacomponent-baseddevelopmentmethodthatiseasiertoexpand

Thisplatformrealizestheaccu-

ratecolectionandmanagementofteaindustrydatathroughthemethodofcombiningRS，GISandfieldtea

plantinginvestigation；adoptsthe

Webful-stackdevelopment

methodtorealizethefront-endseparation

modebasedonthecurrentmainstreamframeworkVuejsandtheback-endframeworkThinkjs；theuseof

WebGISsecondarydevelopmenttechnologycompletesthedesignanddevelopmentofthe

mapfunctionof

theteaindustryinformationmanagementplatform，andrealizesapplicationscenariossuchasateamap，vir-

tualrealitybrowsingandroaming，andspatialanalysisItprovidesmanagerswithteaindustryinformation

mapdataservices，strengthenstheprotectionofteagermplasmresources，transformstolow-yieldandlow-

eficiencyteagardens，improvesteaproductionfacilities，andimprovestheabilityoftheteaindustrytopre-

ventandreducedisastersItprovidesareferenceforthefuturedevelopmentandplanningoftheteaindus-

tryinSongxiCountyChinaKeywords：Vuejs；

WebGIS；componentization；virtualreality