基于OpenLayer3与云后端的211大学查询系统

nouveau

发布日期: 2018-11-05 10:53:34 浏览量: 859
评分:
star star star star star star star star star_border star_border
*转载请注明来自write-bug.com

1 需求说明

每年高考结束后,毕业生们就面临着志愿填报的难题,学校的地理位置、综合实力,都将成为同学们选择学校的因素。本平台提供了在线查询211大学的功能,可以将各个大学的信息(图片、简介、百科链接等)在地图上展示,方便同学们进行查询和比对。

2 主要功能

211大学地图在线查询,点击显示大学的相关信息,根据鼠标位置实时显示经纬度位置。

3 数据来源

数据全部来源于网络,由8个同学一起收集整理。

4 总体分析与设计

4.1 实现模式

本系统采用B/S架构,以OpenLayer3开源地图引擎为支撑,最终以网页方式呈现。采用Bmob云服务作为后端,方便了数据的维护与管理。部分数据从云后端获取,图片数据从本地服务器获取。

4.2 数据库设计

要将各大高校显示在地图上需要各高校的位置信息。各高校的经纬度坐标数据由两个double字段组成。坐标数据和简介、链接等信息存储在云后端,数据字段格式如下图所示。
(注:ID为学校在数据库中的编号,Sname为学校名称,Settime为建校时间,Sdistrict为学校所在的城市,X为纬度,Y为经度,Surl为百科链接,State为学校简介。)

图片数据存储于本地服务器,命名为“高校名称”+.jpg。通过src值获取。

5 设计亮点

界面友好,色彩美观协调,云后端存储数据方便维护,系统稳定性较好,部署简单,对系统性能要求低。

6 项目部署

test.html为网页文件,包含网页的CSS和JavaScript代码。下载bmob-min.js文件,与将211各大学校图片文件夹和test.html放于同一文件夹下。

Windows系统下打开IIS服务器新建网站,将域名解析到ipv4地址下,默认端口80,同时使用云解析将域名解析到ipv4地址,一段时间后便可以访问站点了。

7 关键代码

大学信息查询与获取:

地图单击监听事件:

8 系统使用说明

打开桌面浏览器(推荐使用火狐或谷歌),输入解析好的域名,或双击test.html,打开查询页面,页面中央定位为中国地图。拖动鼠标滚轴或点击左上方按钮实现页面缩放。

页面左下端可以根据鼠标在页面的位置显示其相应的经纬度。

在页面中央的输入框输入你要搜索的大学名称,如“厦门大学”。

点击查找按钮,地图上的相应位置便会出现厦门大学的标注。

点击标注,标注上方弹出气泡框,显示大学名称,图片,位置,链接,简介。

点击红色的链接,页面跳转至该大学的百度百科主页。

在搜索框中输入大学名称,若该大学不存在,如”鲁磨路大学“,则出现弹框:查无结果。

继续在搜索框输入各个211大学的名称,地图上会继续添加相应大学的标注。

点击各个大学的标注,气泡框中显示相应大学的信息,可以来回查看比对。

9 小结

通过对网络GIS这门课程的学习,我学习了网页编辑的基本技术,了解了建站流程,学会如何将web技术应用到GIS领域。在成功便写了第一个地图页面后,我对前端开发产生了浓厚的兴趣。对API的熟悉程度决定了开发的效率,在今后的学习中,我会注重实践,提高学习的深度和广度。

上传的附件 cloud_download 基于OpenLayer3与云后端的211大学查询系统.7z ( 20.06mb, 15次下载 )
error_outline 下载需要11点积分

发送私信

花花世界,终归空寂

9
文章数
17
评论数
最近文章
eject