长春工程学院学报(自然科学版)2020年第21卷第4期J.Changchun Inst.Tech.(Nat.Sci.Edi.),2020/Vol.21,No.415/26 71-76
ISSN1009-8984
CN22-1323/N
doi：10.3969/j.issn.1009-8984.2020.04.015
基于Vue.js框架的茶业信息管理平台的设计与开发
纪梦达，姜放，张亚球
（长春工程学院勘查与测绘工程学院，长春130021）
摘要：为解决传统茶业信息管理平台使用的Jquery、Doj。等框架配置复杂、学习成本较高、可操作性差等问题。将框架结构更精简、组件化的开发方式更易于扩展的Vue.js框架引入福建省松溪县茶业一张图平台的构建。平台采用RS、GIS与外业茶叶种植调查相结合的方法，实现了茶业数据的精确采集和管理；采用Web全栈开发的方式实现了基于当前主流框架Vue.js和后端框架Thinkjs的前后端分离；利用WebGIS二次开发技术完成了对茶业信息管理平台地图功能的设计开发，实现了茶叶一张图、虚拟现实
浏览漫游、空间分析等应用场景。向管理者提供了茶业信息地图数据服务，加强茶树种质资源保护、低产低效茶园改造，完善茶叶生产设施，提高茶产业防灾减灾能力。为今后松溪县茶产业的发展和规划提供了参考。
关键词：Vue.j s；WebGIS；组件化；虚拟现实
中图分类号：TP315：S126文献标志码:A文章编号：1009-8984（2020}04-0071-06
0引言1数据采集与数据库设计
近年来，伴随“智慧农业”的提出，以及互联网+、物联网、云计算等的快速发展，传统的农业生产方式正在不断与现代科技融合，应用于不同场景的茶产业信息平台也相继涌现。比如基于WebGIS的龙井茶溯源与产地管理系统研究［1］，基于物联网的智慧茶园数据采集管理系统的设计与实现［］，基于GIS的茶园环境实时监测与防冻预警系统［］等都取得了很好的效果。但是从目前来看，依然缺乏以茶业规划辅助决策为目的的信息管理平台的研究。不管是质量溯源还是实时监控都要依托于物联网技术，运维成本高，前期投入对企业发展不利，并且WebGIS的功能单一，空间分析能力不足。为此，本文以位于闽浙交界处的松溪县为研究区，以松溪县2020年一2025年茶产业发展规划为导向，以松溪县茶业总站的管理人员为应用对象，通过渐进式框架Vue.js开发了茶叶信息管理平台，在以空间可视化为基础，以空间分析为目的基础上，尽可能直观简易地设计操作功能，提高规划者的使用体验，组
件式的开发方式实现了开发和维护成本的控制，并为后期功能扩展奠定了基础。
收稿日期：020—11—23
作者简介：纪梦达（1996—），男（汉），安徽宿州人，硕士
主要研究WebGIS开发与应用。1.1研究区域概况
松溪县隶属于福建省南平市，地处闽北浙南交界处，县境介于东经118°33'〜118°55'和北纬27°24'〜27°51'，松溪县域面积1043km2。境内多为山地，土层深厚肥沃，有机质含量高，极有利于茶树优良品质的形成。松溪县属中亚热带湿润季风气候，冬无严寒，夏无酷暑。城区年平均气温18.1C，无霜期269d，年日照总时数1972h，各地年平均降雨量1557-1743mm。松溪县辖1街2镇6乡109个村（居）。2018年末，全县总人口16.85万人，其中城镇户籍人口  4.87万人，农村户籍人口11.98万人，常住人口12.3万人。
1.2研究数据获取
依托海丝卫星提供的高分辨率卫星遥感影像，结合多光谱遥感影像数据进行茶园分类，并将分类结果作为GIS人工目视判读的辅助手段，使用Arc-Map完成茶园图斑的遥感解译工作，制作各个乡镇的外业调查图纸，开展松溪县茶业种植调查工作，完成了种植面积、茶树品种、茶叶加工重点企业调查。
1.2.1茶园分类
影像数据获取自欧空局（European Space A-gency，缩ESA）,Sentinel—2卫星的L1C级产品，利用Sen2Cor以及SNAP软件对数据进行大气校
72长春工程学院学报(自然科学版)2020，21(4)
正、格式转换等预处理工作。考虑到本研究区为山
区，茶树种植区地形起伏较大，且研究区内地形起伏
差值最大为1177m，因此需要进行地形校正以削
弱地形对茶园分类结果的影响。
DEM数据下载自美国航空航天局(NASA)，空
间分辨率为12.5m，并以此进行几何校正以及地形
校正。本文以半经验C校正模型做地形校正，即基
于影像的像元值与太阳入射角余弦之间构建线性方
程，加入经验参数对研究区进行地形校正［4—5］。如
式⑴〜(2):
DN c=DN X cos a +c,(1)
cos i十c
cos i=cosacos"十si a sin/?cos(A―co),(2)式中:DN c、DN分别为校正后、校正前的像元值；为校正系数;a为太阳入射角；入为太阳天顶角；"和o 分别代表坡度和坡向。
以RGB合成的0.8m分辨率的影像为基础选取样本区，以RF(Random Forest)算法初步提取研究区内茶园的分布。根据混淆矩阵进行精度评定, RF算法提取的茶园总体精度为72.14%,kappa系数为0.71，可以看做具有高度一致性。RF分类结果如图1所示。
图1茶园RF分类提取结果
1.2.2解译调绘
将上述茶园分类结果作为解译参考资料，海丝卫星提供的高分影像作为底图，确定最小上图面积，通
过人工判读初步提取4143块茶园图斑。随后进行外业调绘，将茶园图斑进行精度到村一级的统计。调绘开始前制作了外业底图、表格，并通过各村农技员、基层自治组织等协助完成了茶树品种、承包人及其、重点茶企信息等信息的上图入库。对于初步茶叶图斑成果内同一图斑多个品种、茶叶与毛竹交错生长等情况导致的判读有误进行了新增和分割。最终得到了如图2所示的调查结果。
(a)松溪县茶园发展现状图
(b)松溪县重点茶叶企业(合作社)分布图
图2松溪县茶业调查结果
经过调查统计，松溪县总行政面积1043.40km2，下属乡镇街道9个，茶叶种植总面积为35.89km2，占总面积的3.44%，茶叶种类19种，茶叶总图斑4299个。从茶园种植来看，松溪县茶叶种植主要分布于茶平乡和郑墩镇，其中茶平乡种植面积16.62km2，占全县种植总面积的46.3%，是全县种植面积最大的乡镇；从茶树品种的种植面积来看，茶叶的种植种类主要是福云6号和福安大白，其中福云6号种植面积15.87km2，占全县种植面积的44.23%，是全县种植面积最大的种类；松溪县境内茶企共156家，茶叶加工重点企业中省龙头企业1家，获得SC认证企业35家，通过有机认证企业7家。
1.3数据结构与数据库
根据项目建设的实际需要，本文将系统数据库分为地理空间数据库和业务信息数据库两部分页，并通过Geodatabase和PostgreSQL分别进行数据管理。Geodatabase中主要存储基础地理数据和专
纪梦达，等：基于Vue.js框架的茶业信息管理平台的设计与开发73
题地理数据;PostgreSQL中存储管理员信息数据，
包含管理员账户、密码、姓名等。
1.3.1业务信息数据库
松溪县茶园的业务信息数据库采用Pot
greSQL进行管理，因为PostgreSQL是一款开源的
关系数据库，并且稳定性极强，同时在GIS方面表
现出，能够存储空间数据。设置业务信息数据库
主要是为了方便规划者和各个部门的管理人员进行
登录和查看，数据说明具体见表1。
表1管理员信息数据说明
字段名称数据类型备注
AdminID Varchar管理员ID
Password Varchar密码
Name Varchar姓名
Department Varchar所在部门
132地理空间数据
Geodatabase是实现WebGIS系统空间数据
源、建立可视化和空间查询、分析的服务基础，它采
用面向对象的技术可以将现实世界抽象为基于点、
线、面构成的地理空间信息。从数据类型上，又可划
分为基础地理数据和专题地理数据。松溪茶叶信息
管理平台地理空间的平台界面底图分别来自天地图
和ESRI地图资源，不需要本地存储和管理。存储
在本地空间数据库的数据具体说明见表2。
表2地理空间数据说明
类型说明用途
2019年2m高分辨率遥感影像比例尺1:50000以上茶园底图
基础地2019年0.8m高分辨率比例尺1:50000以下茶理数据遥感影像园底图
松溪县行政村边界矢量图行政边界底图
专题地理数据2019年松溪茶园发展现
状矢量图
茶园品种信息查询、空间
分析
2019年重点茶叶企业分
布矢量图
茶企信息查询、空间分析2019年松溪VR点矢量图VR点定位、链接、浏览
133茶园数据表设计
茶园信息管理平台最主要的数据表就是茶园信息数据表。每条茶园信息根据村级行政区进行组织，主要包括了村镇名称、茶叶品种、面积、所属人、等关键数据。具体字段信息见表3。
字段名称数据类型备注
表3茶园信息数据表字段设计
依据行政区划代码和编码规则的茶园CYBM Varchar
编码
CYPZ Varchar茶叶品种
QSXZ Varchar茶园的所属性质，集体或个人
SYR Varchar所属人，茶园所有者
LXFS Varchar茶园所属人的
MJ Double茶园面积(km2)
CZMC Varchar该镇村级的行政区名称
XH Varchar序号，该镇茶园所有数据的序号
BZ Varchar对于新增或分割的数据进行备注
2平台设计与构建
2.1平台设计
平台采用全栈和前后端分离开发的开发模式，其中前端作为本文的研究重点用于探讨茶园数据的浏览、展示、查询和虚拟现实等功能，后端在现阶段主要完成用户登录的验证。前端使用Vue.js框架完成展示、渲染等功能。Vue.js作为当前国内的主流框架，是一套用于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对发布的服务进行存
储，并通过REST API能得到对应数据的URL地
址，由JavaScript程序调用；在表现层利用Vue.js
框架引入ArcGIS API并连接到前端ElementUI设
计的DOM窗口，最终通过前端用户的操作实现功
能的调用和展示。图3为系统框架设计图。
IE|Chrome|Firefox|Others
|表现层'
Vue.js
Element UI][Vuex]
I
—[ArcGIS API for JavaScript]
|逻辑服务层-
[http请求：响应r REST API ArcGIS Online；1[PostgreSQL][Th»kjs] Geodatabase
图3系统框架图
2.2平台运行环境
茶业信息管理平台的搭建，从数据的采集到系统构建，需要地理信息平台、云服务器、GIS服务平台等。相关运行环境选型如下：
1）操作系统：客户端选用Windows10系统；
2）基础地理信息平台：ENVI5.3、ArcMap10.6、ArcGIS Pro；
3）GIS服务平台：ArcGIS Online；
4）开发平台:Visual Studio Code；
5）数据库：Geodatabase A PostgreSQL；
6）JavaScript框架：Vue.js A 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是一个后台前端解决方案，它使用了最新的前端技术栈，基于Vue 和element—ui实现。
设计后台登录逻辑时，首先将数据库配置到后台用于查询用户数据，然后在控制器controller中创建登录路由login。采用JWT完成身份验证，用户首先通过前端DOM发送用户名和密码，服务器验证密码并保存验证信息，然后返回验证信息给前端实现登录跳转，同时前端将这个验证信息即口令保存起来，以便下次发送请求的时候，可以将口令再发送给服务器，服务器可以验证口令，判断用户的信息和登录状态。图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
­
纪梦达，等：基于Vue.js框架的茶业信息管理平台的设计与开发75
View.vue组件通过vuex对view视图数据的状态进行管理，完成数据的传递。
1)通过路由加载组件。将组件引入路由对应的文件/并将路由注入到实例中/在组件需要进行跳转的DOM窗口配置路由链接，并将路由出口渲染到根组件App.vue上。
2)通过Vuex状态管理模式。Vuex使用单一状态树，用一个store(仓库)对象包含全部的应用层级状态，并作为该应用的唯一数据源而存在，也就是说每个应用将包含且仅包含一个store实例。Vuex 采用Getters函数在组件内部获取store中的状态(或理解为Vue组件数据)，通过提交mutations驱动状态的变化，修改store中的状态，使用Actions 在组件内部分发mutations事件函数。
具体实现的方式是：在store文件夹下创建map.js用于管理底图数据状态，并将mapview的state A action A mutation引入到程序中，设定vuex的主程序入口是index,js，再将map.js引入到index. js中。在使用时将地图组件MapView.vue中的视图数据view给提交出来，并在需要的组件中声明并创建对应的对象即可。
2.4应用场景
通过前文对平台需求的分析，在完成了对平台功能设计的基础上，本系统基于ArcGIS API对具体的地图功能进行WebGIS的二次开发。实现了地图数据的加载、要素数据的加载、客户端交互操作、空间分析等功能。并在将各个功能组件化的基础上，完成了登录、茶叶一张图、热力图、缓冲区分析等多个场景的搭建。
241茶叶一张图
主界面首先通过WebTileLayer工具完成对天地图底图的加载，然后通过when方法，加载2m和0.8m的高分辨率遥感影像切片以及行政边界和茶园图斑的要素图层。从茶园品种较多且分布散乱的角度出发，左下角茶园品种的图例调用SQL查询子句definitionExpression实现品种筛选，在视图中仅返回满足定义表达式的要素。从茶园图斑数量较多的角度出发，在右下角添加属性列表，使用Query 和QueryTask工具，实现对茶园信息的属性查询与空间查询，通过点击列表某一列可以缩放至该列对应的图斑并高亮显示属性信息。通过上述两项功能，可以清楚直观地看到不同茶叶品种的分布情况，并且能够精确快速地到每一块图斑的所属人，在进行茶叶品种结构调整时，能够起到辅助决策的作用。在地图左上角标签页绑定click事件实现了茶园图斑和茶企信息的图层切换功能，完成管理者对于不同茶业图层空间和属性查询的需要。右上角的下拉菜单通过调用widgets下的AreaMeasure-ment2D A DistanceMeasurement2D实现对地图的距离测量和面积测量。
(a)—张图主界面
(b)量测工具
图5松溪茶叶一张图
2.4.2虚拟现实定位与浏览
在进行VR要素图层的字段设计时，设置行政村、VR地址链接和相应乡镇的简介，通过template 设置弹窗，点击链接即可跳转至该乡镇的VR场景。可以佩戴VR眼镜进行720°全景浏览漫游，点击下方图片可以跳转至该乡镇的不同种植基地。实现了从“二维平面”到“虚实交互”，从“静态”到“动态”的转变。添加VR功能可以使管理人员之间形成更好的互动机制，提高规划的公众参与度［］。
(a)点位与弹窗
(b)场景浏览
图6VR
定位与浏览

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。