基于H5的土壤墒情监测平台设计与实现

学士学位毕业设计（论文）基于H5的土壤墒情监测平台设计与实现学生姓名：王灿学学生号：20134071107指导教师：曹洪军所在学院：信息技术学院专专专业：计算机科学与技术中国大庆2017 年 5 月黑龙江八一农垦大学本科毕业设计（论文）任务书论文题目基于H5的土壤墒情监测平台设计与实现学院名称信息技术学院姓名王灿专业班级13级计科指导教师曹洪军课题类型应用研究毕业论文（设计）基本要求1. MySQL数据库表的设计，系统整体规划及模块划分。2. 具体模块的设计。包括百度地图API封装，数据交互。3. 利用HTML5实现具体前台数据可视化及交互操作。工作量要求1.毕业论文形成过程中，至少查阅5篇中外文教材；2.毕业论文形成过程中，查阅20篇左右中外文参考文献；3.毕业论文的正文内容不少于20页（含软件、硬件）4.毕业论文前8周，教师通过QQ或电话等信息工具，不定期对毕业设计及论文进行 指导、答疑，也可以在办公室现场指导 5.毕业论文9-13周，学生每周至少一次向指导教师进行毕业设计及论文书写情况 汇报，并听取指导教师意见；毕业论文（设计）的主要阶段计划（分前期、中期、后期） 前期 熟悉PHP、SQL语句的应用，百度地图API 中期 需求分析，交互设计，编写代码并调试 后期 系统优化，撰写论文任务下发日期2016年12月14日完成日期2017年5月19日系主任签字：主管教学院长审批（签字）：摘要摘要土壤墒情的监测主要是确定土壤环境对农作物的影响，研究土壤墒情的自动监测系统可以有效的节约用水，同时也可以根据植物的需要及时的灌溉.土壤墒情自动监测系统的设计为农田灌溉以及实现土壤的综合节水目标提供了强有力的管理手段和方法。H5即HTML5，它是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改，自发布以来极大地推动了世界互联网的的发展，改变了人类的生活。面对传统的农业，H5技术可以极大地推动农业的发展，农业信息化，农业现代化的进程，本系统采用百度地图和H5图表库echarts实现了对土壤墒情的可视化管理，提高用户体验和工作效率。关键词：H5；数据可视化；土壤墒情。IIIABSTRACTABSTRACTH5 The monitoring of soil moisture content is mainly to determine the effect of soil environment on crops, and to study the soil moisture content.The system can save water efficiently, and it can also be irrigated according to the need of the plant.The design of dynamic monitoring system provides strong management means and methods for the irrigation of farmland and the comprehensive water-saving target of soil. H5 or HTML 5, is the core of the world wide web language, under the standard generalized markup language of an application of hypertext markup language (HTML) fifth major revisions, since released greatly promoted the development of the world of the Internet, changed the life of human beings. In the face of traditional agriculture, H5 technology can greatly promote the development of agriculture, agricultural informatization, agricultural modernization process, this system adopts the baidu map and H5 chart library echarts implements visualization management of soil moisture, improve the user experience and productivity.Keywords：H5;Data Visualization;Soil Moisture目录目录摘要IABSTRACTII前言IV1 绪论11.1 本课题研究的目的和意义11.2 土壤墒情监测平台的发展现状与趋势12 相关技术简介22.1 H5简介22.2 百度地图API22.3 图表库echarts22.4 Amaze UI简介32.5 Ajax简介33 需求分析53.1 可行性分析53.2 系统业务需求分析53.3 系统功能需求分析64 系统总体设计74.1 系统结构图74.2 主要模块的流程图74.3 概念设计84.4 数据库设计115 系统详细设计与实现135.1 用户信息管理模块设计135.2 数据展示模块设计135.3 监测点管理模块设计145.4 监测点数据管理模块设计145.5 系统登录145.6 数据展示155.7 监测点管理195.8 监测数据管理20结论26参考文献27致谢29前言前言中国是世界上13个贫水国之一，并且水资源分配不均，南方多，北方少，东方多，西方少，土壤水分含量对农作物的生长密切相关，我国是一个农业大国，农业是我国的第一产业，在我国产业中占据重要位置。土城墒情是指土壤中水分的含量以及土壤中水分被作物的利用程度，对土壤墒情的检测主要是采集土壤中含水量，土壤含水t的高低对作物的生长发育及其重要，在植物生长过程中起着重要的作用.对作为的发育情况和最终的产量至关重要，同时对土壤墒情的研究也可以作为衡量土壤质量的标准。土壤墒情的研究和发展为农业和林业的发展提供了充足的科学依据，土壤墒情的检测和研究也为节水灌溉提供了科学依据。为了合理利用水资源，充分发挥水资源和肥料的作用，对土壤进行墒情监测，然后对资源的合理分配，以达到节约水资源，降低成本，提高资源利用率，发展农业的目的。然而，纵观当今使用比较多的土壤墒情监测系统，大多操作繁琐，使用门槛高，数据显示不够直观，而今H5技术的蓬勃发展，数据可视化极大地提高了用户体验和生产力，因此开发一套基于H5的土壤墒情监测系统刻不容缓，可以推动农业信息化的快速发展。黑龙江八一农垦大学毕业设计（论文）1 绪论1.1 本课题研究的目的和意义由于我国水资源空间分配不均，土地干旱和洪涝灾害一直阻碍着我国农业的发展，许多耕地由于洪涝和干旱造成农作物大量减产，如果使用土壤墒情监测平台对某一地区的土壤墒情进行实时监测，对监测数据进行分析，就可以有效预仿土地干旱和洪涝灾害，还可以做到对水资源的有效利用，也能为作物生长提供良好的生长环境。精细化农业与科学化农业的飞速发展，使得传统的农业需要改造升级，将传感器技术和农业的生产决策系统加入到现代农业中，减少生产的人工投入，并提高产品的农业产出，实现农业的可持续发展。精细农业的发展过程中，农作物的生长环境信息和土壤墒情信息的获取是决策农业精细化生产的关键所在。农业生产中土壤墒情的采集和处理以及根据土壤墒情对农业的控制技术需要进一步的研究解决。1.2 土壤墒情监测平台的发展现状与趋势20世纪50年代。从事灌溉研究的专业人员进行了大量的探索和研究，但由于影响土壤墒情的因素太多，且相互之间关系较为复杂，在相当长的一段时期内，没有制定出比较完善、切合实际生产的土壤墒情测报方法。90年代，计算机发展起来，土壤墒情监测有了较快发展，邓天宏等人开发了测定冬小麦的土壤墒情监测系统，准确地预报了一个月以内的土壤墒情变化。西北农林科技大学针对西部农产品的优势和西部地区的农业设施特点，研究了以水果、蔬菜为代表西部农作物的生长发育模型和量化管理，并且建立了农作物的生长、产量数据库。北京地理研究所与南京土坡研究所共同合作研究开发了农田环境参数信息采集和灌溉控制管理系统，该系统除了能够采集土壤中的各种信息和农田的气息信息之外，还可以根据土壤温度和湿度的变化来预测灌溉的时间，然后通过控制信号，控制自动灌溉系统实现对农田的自动灌溉。我国土壤墒情监测系统的研究起步虽晚但发展较快，在一定区域取得了显著成效，但还有所欠缺，使用时学习门槛较高，用户体验还不够好，数据显示方面不够直观。28黑龙江八一农垦大学毕业设计（论文）2 相关技术简介2.1 H5简介H5是HTML5的简称，H5具有强大的交互功能，匹配了当下强调的用户参与感，它改变了传统的信息传播方式，能够快速灵活的在手机端进行展示和传播。它提供了强大的API，如canvas,数据存储，可以在此基础上进行数据展示，数据交互等操作。HTML5新添加了一些有趣的特性：1.用于绘画的 canvas 元素。2.用于媒介回放的 video 和 audio 元素。3.对本地离线存储的更好的支持。4.新的特殊内容元素，比如 article、footer、header、nav、section。5.新的表单控件，比如 calendar、date、time、email、url、search。Html5非常强大，许多色彩绚丽的效果都是通过它来实现的，它承担了web开发的大部分功能，在网页开发中承担着越来越重要的角色。2.2 百度地图API百度地图是百度提供的一项网络地图搜索服务，覆盖了国内近400个城市、数千个区县。在百度地图里，用户可以查询街道、商场、楼盘的地理位置，也可以找到离您最近的所有餐馆、学校、银行、公园等等，也可以查找线路，公交，地铁，交通拥挤情况展示。少数市区实现了三维地图和街景功能，极大的方便了人们的生活。百度地图API是为开发者免费提供的一套基于百度地图服务的应用接口，包括JavaScript API、Web服务API、Android SDK、iOS SDK、定位SDK、车联网API、LBS云等多种开发工具与服务，提供基本地图展现、搜索、定位、逆/地理编码、路线规划、LBS云存储与检索等功能，适用于PC端、移动端、服务器等多种设备，多种操作系统下的地图应用开发。本系统就是在百度地图API的基础上开发的，使用了百度API中的标注，定位，信息窗口等功能。许多做O2O的企业都在使用百度地图API，比如去哪儿网等。2.3 图表库echartsECharts，是一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。ECharts 提供了常规的折线图，柱状图，散点图，饼图，K线图，用于统计的盒形图，用于地理数据可视化的地图，热力图，线图，用于关系数据可视化的关系图，treemap，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。丰富的案例代码，详细的开发文档，开发者使用起来非常顺手，其采用的配置项管理对前端开发者来说通俗易懂，学习门槛比较低。凭借ECharts丰富的图表库，可以满足大多数场景下的数据展示，直观明了，非常适合可视化展示用，现在已经支持了3D地图功能，越来越强大，并且其支持主题切换，色彩非常丰富，本系统使用它是最适合不过了。2.4 Amaze UI简介Amaze UI 中国首个开源 HTML5 跨屏前端框架，Amaze UI 以移动优先（Mobile first）为理念，从小屏逐步扩展到大屏，最终实现所有屏幕适配，适应移动互联潮流。Amaze UI 包含 20 个 CSS 组件、20 余 JS 组件，更有多个包含不同主题的 Web 组件，可快速构建界面出色、体验优秀的跨屏页面，大幅提升开发效率。Amaze UI 面向 HTML5 开发，使用 CSS3 来做动画交互，平滑、高效，更适合移动设备，让 Web 应用更快速载入。AmazeUI字体针对中文优化，界面扁平化设计，风格友好。有了Amaze UI，可以很快的搭建起来合乎规范的，视觉感触比较好的系统页面，凭借其丰富的CSS组件和JS组件，可以满足大部分后台管理系统的要求，并且是中国程序员开发的，学习起来和上手比较容易。2.5 Ajax简介在上世纪90年代，几乎所有的网站都由HTML页面实现，服务器处理每一个用户请求都需要重新加载网页。形式是怎样的呢？就比如说你在浏览器上登录自己的微博账号，填完了表单，点击登录按钮，一次”完整”的HTTP请求就此触发，服务器发现你的登录密码不对头，立马把网页原原本本的返回给你，在用户看来呢，就是一次重新加载的过程！用户体验极差！而且这个做法浪费了许多带宽，因为在前后两个页面中的大部分HTML码往往是相同的。由于每次应用的沟通都需要向服务器发送请求，应用的回应时间依赖于服务器的回应时间。这导致了用户界面的回应比本机应用慢得多。到了2005年，google率先在它的应用(诸如google地图、gmail)里使用了ajax技术，这才让这项技术正式风靡开来。现在软件开发的方方面面都可见它的身影，各种基于它的开发技术层出不穷，比如单页面，懒加载等等，极大的推动了互联网技术的发展。Ajax的工作原理相当于在用户和服务器之间加了一个中间层(ajax引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像些数据验证(比如判断用户是否输入了数据)和数据处理(比如判断用户输入数据是否是数字)等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。把这些交给了Ajax引擎，用户操作起来也就感觉更加流畅了。AJAX可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，AJAX的原则是“按需取数据”，可以最大程度的减少冗余请求和响应对服务器造成的负担，提升站点性能。Ajax在数据交互上面有着很好的体验，在此技术被发明之前，用户要添加，修改删除某个数据，必须要提交表单，获取数据必须要刷新页面，因此操作繁琐，占用带宽，浪费时间。然而有了ajax，我们不在需要那些复杂冗余的操作，只需要点击几下，数据操作就可以完成，不要需要刷新浏览器，节约了时间和成本。3 需求分析在软件开发过程中，需求分析可以说是核心任务之一，就像一支将要远航的船队，要在指定时间内到达目录地，他们需要一条正确的航线，才能到达目的地，如果航线有误，他们将会误时到达，或是不回到原位将永远到达不了。所以需求分析尤为重要，是软件开发的灯塔和航向标，指引软件开发的方向。本系统的目标是为国家及各机构建立一个监测土壤信息的监测系统，为农业的灌溉，精细管理提供科学数据，一提高农业生产效率，满足农业管理，生产，经济发展和节约水资源的需求，推进农业信息化和可持续发展战略。3.1 可行性分析3.1.1 技术可行性随着互联网技术的不断发展，数据可视化技术层出不穷，在web应用开发中前端所占的比重越来越多，重要性也越来越大，卫星导航，卫星遥感技术的发展使得地理信息的监测越来越准确，百度地图，高德地图的不断努力，众多开发者可以免费使用其开发的服务，并且提供了详细的API文档和案例，降低了学习成本，一个没有任何地图开发经验的开发者可以在很短的时间内做出效果出来。基本上所有的现代浏览器都已经支持了HTML5和AJAX，开发者不需要考虑烦人的兼容问题，随意地使用，没用任何问题。以后浏览器对HTML5的支持会越来越完善，众多开发者的使用和反馈已经证明这些技术已经很成熟了。因此要实现本系统的主要功能在技术上没有太大的问题。3.1.2 经济可行性对于软件开发而言，所花费用比较大的主要是系统编程和维护方面，系统编程占了软件开发的大部分时间，服务器的租金，带宽费用相比于此不值一提，因此只要控制好系统编程开发的周期，就能降低开发成本，提高性价比。系统投入运行之后对生产力的提升是巨大的，将会极大的降低生产成本，提高生产效率，未来所带来的价值不可估量。3.2 系统业务需求分析一直以来我国的土壤墒情信息化基础薄弱，信息采集困难，采集技术手段落后，信息准确性差，无法满足当前农业信息化的需要。基于此课题的目标为国家及各机构建立一个监测土壤信息的监测系统，实现对土壤墒情信息的采集，管理，存储，传输，及时掌握当地的土壤墒情信息，并通过可视化的形式，为当地农业的灌溉，抗旱提供决策。土壤墒情信息包括温度信息和湿度信息，监测采集点在不同时刻，不同土壤深度的温度湿度信息，添加到数据库，土壤墒情展示要直观，色彩鲜明，给人印象深刻，力求简洁明了，易于使用。3.3 系统功能需求分析主要满足墒情监测地理数据及非地理数据的采集，数据存储，数据传输等资源的管理。信息展示：监测数据的可视化展示，在地图上展示各个监测点的位置，当某一区域监测点太多时，采用点聚合的方式展示，并且能看到监测点的实时监测数据。能够直观的展示数据信息。操作尽可能简洁，高效，摒除复杂繁琐的操作，尽可能让用户看了就知道怎么用，降低学习成本。监测点管理：此模块主要是对监测点的添加和删除，能够根据地理坐标等信息添加监测点，并在地图上显示，操作简洁，方便。监测数据管理：对监测点的监测数据添加和删除，要求能够快速的找到需要的监测点，数据的添加，删除操作简单，快速。简洁美观的界面设计，风格统一，视觉体验良好，用完即走，节约时间。4 系统总体设计4.1 系统结构图根据需求分析，土壤墒情监测系统分为4个部分，用户信息管理、数据展示、监测点管理、监测数据管理。如图1所示。土壤墒情监测系统监测数据管理用户信息管理数据展示监测点管理图1 系统结构图4.2 主要模块的流程图4.2.1 用户管理此模块可以管理用户信息，用户信息的操作分为更改信息，修改密码。4.2.2 数据展示此模块通过百度地图API渲染云麻点到地图，点击云麻点出现气泡，为最新的监测数据，点击详细信息跳转到该监测点的所有信息展示页，通过echarts的折线图表和表格来展示数据。其流程图如图2所示。开始地图叠加云麻点结束点击详细信息点击云麻点监测点最新数据展示监测信息详情页面图2 数据展示流程图4.2.3 监测点管理监测点管理就是对地图上的监测点进行添加，删除。当用户进入监测点管理模块后，就可以在百度地图上对监测点进行操作，可视化方式操作，操作过程尽可能简单明了。4.2.4 监测数据管理监测数据管理就是对监测点的监测数据进行添加，删除。也是采用可视化的方式操作，保证数据的准确存储。4.3 概念设计概念设计的任务是设计满足用户需求的中性的概念数据模型，即概念模式。采用了实体联系（ER）的方法来进行数据库的概念设计。在设计概念结构时，按照信息处理需求，模拟现实世界，使用了“先分后合”的策略，即：先分别考虑用户的信息需求，形成局部概念结构，然后再综合成全局的概念结构。再E-R方法中，局部概念设计又称为局部E-R模式，全局概念结构又称为全局ER模式，其图形表示为E-R图。4.3.1 局部E-R图设计(1)确定局部结构范围设计系统的各个局部E-R模式的第一步是局部结构的划分。根据功能相对独立、外界联系较少、内部联系较紧、实体个数适量的划分准则来进行划分。如图3所示。需求分析结果确定局部结构范围确定基本实体确立联系实体确定属性还有结果要分析吗？进入全局E-R模式设计是否图3 局部E-R模式设计（2）确定基本实体实体类型都是包括在局部结构中，确定基本实体的主要任务就是确定每个实体的关键字。（3）确定联系实体确定联系实体任务是确定联系、给该联系命名、给出关键字并对联系进行测度。（4）确定属性确定属性阶段的主要任务就是进行属性分配，并给属性命名。4.3.2 本系统局部ER图（部分摘录）（1）监测点，包括名称、坐标、地址等字段。如图4所示：经度纬度名称联系方式地址联系人创建时间备注监测点编号图4 监测点（2）土壤墒情信息，包括编号、监测时间，温度，湿度等字段。如图5所示：80cm湿度60cm湿度20cm湿度40cm湿度20cm温度60cm温度80cm温度40cm温度土壤墒情编号监测时间图5 土壤墒情4.3.3 全局关系E-R图的设计 根据局部E-R图的结构设计方法，进行了全局关系E-R图的设计，如图6所示：监测点拥有土壤墒情N1图6 全局关系ER图4.4 数据库设计4.4.1 数据库逻辑结构设计（1）数据库名称：soil_system（2）数据库表如下：1.用户表存储用户的姓名、用户名，登录密码等等信息，便于用户管理，保障信息安全，具体表结构见表1所示。表1 用户表字段名字段说明类型长度索引备注id编号Int15主键非空name姓名Varchar50非空username用户名Varchar18非空Password密码Varchar50非空2. 监测点表存储监测点的坐标，地址，编号，联系人等信息。是土壤墒情监测的标识，具体表结构见表2所示。表2 监测点表字段名字段说明类型长度索引备注no编号Int15主键非空mark_title监测点名称Varchar50非空point_lng监测点经度Varchar15非空point_lat监测点纬度Varchar15非空address详细地址Varchar50非空message备注Varchar50非空principal联系人Varchar50非空principal_tel联系电话Varchar20非空create_time创建时间Datetime10非空3.土壤墒情表存储监测点某一时刻的温度湿度情况，是判断土壤墒情情况的凭证，具体表结构见表3所示。表3 土壤墒情表字段名字段说明类型长度索引备注no编号Int15主键非空adddate监测时间Datetime15主键非空temperature_2020cm温度Int5非空temperature_4040cm温度Int5非空temperature_6060cm温度Int5非空temperature_8080cm温度Int5非空humidity_2020cm湿度Int5非空humidity_4040cm湿度Int5非空humidity_6060cm湿度Int5非空humidity_8080cm湿度Int5非空这一章主要内容为系统的结构图，主要模块的流程图，系统的概念设计，数据库设计，合理的系统结构，首先会给系统加分，其次会让使用者更加方便快捷的使用本系统。与此同时数据库设计也是尤为重要的，良好的数据库设计能够对后期程序扩展，功能优化，软件安全起到保障作用。5 系统详细设计与实现5.1 用户信息管理模块设计修改用户信息修改用户密码用户信息管理图7 用户信息管理用户信息的管理，主要是分为2个部分，修改用户信息，修改用户密码。如图7所示。5.2 数据展示模块设计图形是直观呈现数据的直接方法。然而，将大量数据在同一个图表中画出来并不容易。早期的测绘、天气数据都需要长时间的手工绘制。随着计算机绘图功能的开发，手工绘画已经完全被自动绘图程序取代。问题的核心转移为，要以怎样的方式呈现数据，以便数据中的信息能自然的体现出来。数据可视化(data visualisation)就是研究如何利用图形，展现数据中隐含的信息，发掘数据中所包含的规律。它是一门横跨计算机、统计、心理学的综合学科，并随着数据挖掘和大数据的兴起而进一步繁荣。数据展示模块是本系统的核心，分为两个部分，监测点麻点展示，监测点详细数据展示。点击麻点出现气泡，气泡内容为此监测点最新的监测数据，点击详细信息跳转到此监测点的历史监测数据页面，用折线图和表格展示该监测点的所有监测数据。折线图适合展示信息的波动情况，直观明了，可以很轻易的发现哪一时刻的墒情信息异常，及时采取措施，减少损失，提高生产。而表格可以比较好的展示数据的详细信息，查找比较方便准确，因此，图表与表格结合是最佳选择，完美的展示墒情信息。5.3 监测点管理模块设计添加监测点监测点管理删除监测点图8 监测点管理监测点管理是本系统的重点，图8所示，分为2个部分，添加监测点，删除监测点。点击添加监测点按钮，在地图上找到要添加的监测点的位置，输入监测点信息，点击保存，监测点保存到数据库。5.4 监测点数据管理模块设计监测点数据管理分为2个部分，分别是添加数据，删除数据。前端页面使用easyui的数据表格插件，后端采用PHP，数据库使用MYSQL，前端执行相关操作，通过ajax把数据传到后端，后端执行添加，删除功能。本着软件设计易用，直观，体验好的原则，减少用户操作的步骤，尽量做到操作方式的简洁，灵活，所以采用了ajax技术，在本页面就可以完成数据的交互操作，不需要再进行额外的表单提交，提高用户体验。5.5 系统登录系统登录就是在登录页面输入用户名和密码登录本系统，界面图如图9所示：图9登录界面登录之后进入数据展示页面，导航栏右侧显示登录的用户名，比如登录的用户是 admin ,如图10所示：图10展示页面15.6 数据展示数据展示模块的实现，包含两部分，展示页面和详情页面，要考虑到百度地图信息窗口，标注，标注标题的使用，和echarts,数据表格的使用。对百度地图原生信息窗口加以封装，更改样式。5.6.1 展示页面展示页面就是展示数据，把所有的监测点依靠百度的标注功能通过云麻点的形势渲染到地图上。在页面加载时后端输出所有监测点数据为JSON格式，前端用封装好的方法调用百度地图的添加标注点方法，渲染完成，如图11所示：图11 展示界面2并在标注点上添加信息窗口和点击事件，标注点出发点击事件时，信息窗口打开，若此监测点有监测数据，窗口里的内容为最新的一条监测数据，如图12所示：图12 展示界面3反之，提示暂无数据，如图13所示：图13 展示界面4核心代码：function addInfo(lng,lat,title,wd20,sd20,wd40,sd40,wd60,sd60,wd80,sd80,url) /添加信息窗口方法 坐标点，标题，信息，链接var marker=new BMap.Marker(new BMap.Point(lng,lat);var label = new BMap.Label(title,offset:new BMap.Size(0,-20);if(wd20=)var content=title+暂无数据;elsevar content=title+20cm土壤温度+wd20+20cm土壤湿度+sd20+%+40cm土壤温度+wd40+40cm土壤湿度+sd40+%+60cm土壤温度+wd60+60cm土壤湿度+sd60+%+80cm土壤温度+wd80+80cm土壤湿度+sd80+%+详细信息;map.addOverlay(marker);marker.setLabel(label);/添加labeladdClickHandler(content,marker);function addClickHandler(content,marker)marker.addEventListener(click,function(e)openInfo(content,e);function openInfo(content,e)var p = e.target;var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);var infoWindow = new BMap.InfoWindow(content,opts); / 创建信息窗口对象 map.openInfoWindow(infoWindow,point); /开启信息窗口var data=;/console.log(data); 测试数据是否输出正确for(var i=0;idata.length;i+)addInfo(dataipoint_lng,dataipoint_lat,dataimark_title,dataitemperature_20,dataihumidity_20,dataitemperature_40,dataihumidity_40,dataitemperature_60,dataihumidity_60,dataitemperature_80,dataihumidity_80,data_detail.php?no=+dataino);5.6.2 详情页面详情页面是数据展示的核心，通过展示页面跳转到详情页面，监测数据以折线图表和表格的形式展现，直观，明了地体现监测情况，如图14，图15所示：图14 详情页面1图15 详情页面2土壤墒情信息通过两个折线图来展现，第一个是温度折线图，第二个是湿度折线图。5.7 监测点管理监测点管理是本系统的重点，包含两个部分监测点添加，监测点删除，采用易于交互的可视化技术，直接在地图上面操作，所见即所得，提高操作效率和用户体验。5.7.1 添加监测点当用户登陆系统后，进入到监测点管理页面，点击选择标注样式，选好样式之后点击监测点在地图上的大致位置，弹出信息窗口，输入或更改监测点的详细数据，点击保存按钮，通过ajax把监测点详细数据以json的格式传到后端接口，后端通过SQL方法添加该监测点到数据库，添加操作完成，图16所示。图16 添加监测点页面5.7.2 删除监测点首先找到要删除的监测点，然后右键选择删除监测点，通过ajax把要监测点的no传到后端，删除监测点并删除监测点下的数据。5.8 监测数据管理监测数据的管理分为2个部分，添加监测数据，删除。首先通过百度地图API把所有的监测点渲染到页面上，绑定点击事件，点击监测点获取到该监测点对应的no，通过ajax传到后端，回调得到监测点的所有数据，数据为json格式，弹出模态框，渲染数据表格到模态框，然后执行添加，删除等操作。5.8.1 添加数据管理员登陆系统后，通过导航栏进入数据管理页面，点击要操作的监测点，弹出模态框，模态框中的数据就是该监测点的所有数据，数据以表格的形式展示，点击左上角添加按钮，数据表格自动添加空的一行，输入数据，点击保存，数据以json的格式通过ajax保存到数据库，不需要提交表单，提高用户体验和使用性，图17所示。图17 数据管理页面5.8.2 删除数据选中要删除的数据行，取得数据no，通过ajax传输no给后端，执行删除语句，即可删除该条数据。如图18所示：图18 监测数据删除核心代码：function grid(num)no=num;$(#tt).datagrid(title:监测点数据,iconCls:icon-edit,width:800,height:450,singleSelect:true,idField:no,url:./action/query_miosture_by_no.php?no=+num,columns:field:no,title:no,width:25,align:center,field:adddate,title:监测时间,width:60,align:center, editor:type:datetimebox,field:temperature_20,title:20cm土壤温度,width:80,align:center, editor:type:numberbox,field:temperature_40,title:40cm土壤温度,width:80,align:center, editor:numberbox,field:temperature_60,title:60cm土壤温度,width:80,align:center, editor:numberbox,field:temperature_80,title:80cm土壤温度,width:80,align:center, editor:numberbox,field:humidity_20,title:20cm土壤湿度,width:80,align:center, editor:type:numberbox,field:humidity_40,title:40cm土壤湿度,width:80,align:center, editor:numberbox,field:humidity_60,title:60cm土壤湿度,width:80,align:center, editor:numberbox,field:humidity_80,title:80cm土壤湿度,width:80,align:center, editor:numberbox,field:action,title:操作,width:60,align:center,formatter:function(value