1.系统设计

简介

对地图工作空间的管理及展示、发表评论、点赞，能够集成第三方地图、定位、拍照及上传照片、记录路线轨迹，提供了用户信息管理功能，实现了全国空气质量图表展示专题模块。
网址：https://ccgis.cn/mapb/mobile/home/

功能设计

系统分为以下五个功能模块，分别是首页、地图数据管理、地图模块、属性数据管理、用户信息管理，如图所示。

代码文件组织

在mobile文件夹下包含以下文件夹：common（存放公共的类库、图片等）、home（首页）、mapmgr（地图数据管理模块）、mapmodule（地图模块）、tablemgr（属性数据管理模块）、usermgr（用户信息管理模块）。
每个模块文件夹下包含：common（模块需要的公共资源）、modules（该模块下的子模块）、index.html（网页文档）。

2.关键技术

2.1 适配不同分辨率的设备

为了适配不同型号的移动终端，需使用viewport动态设置页面宽度。使用方法如下：在网页的head页面元素中加入meta标签。

1 2	<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

该标签的作用是让当前viewport的宽度等于设备的宽度，页面第一次加载时的缩放比例为1，同时不允许用户手动缩放。

2.2 空气质量图表展示

利用百度API提供的BMap.LocalCity获取用户当前所在城市，通过逻辑判断获取数据库最新的当前城市的空气质量数据。仪表盘是用来表示当前城市空气质量指数平均值及所属污染级别。利用series将仪表盘的区间范围设置为[0,500]，以10段进行分割，用绿色（#32f43e）、黄色（#e4f33e）、橙色（#e4993c）、红色（#f60003）、紫色（#9f034c）、褐红色（#800025）6种颜色将10段划为空气质量级别对应的优、良、轻度污染、中度污染、重度污染和严重污染。

热力图是基于Canvas的，因此在使用热力图之前需要利用isSupportCanvas判断浏览器是否支持Canvas，然后需要生成一个百度地图实例map，在已经生成的地图上将热力图叠加上去即可，其中传入的参数points为用户选择的空气质量指标对应的包含站点经纬度及指标值的对象数组。

2.3 用户评论、点赞

1、用户评论实现思路：在g_usercomment表中插入一条记录；判断评论总数表中是否有该地图的记录，有就更新g_usercommentNum表中该条记录，否则插入一条新的记录。

2、用户点赞实现思路：查询g_userpraise表中是否有该用户为该地图点赞的记录，有的话则删除该记录，并更新g_userpraiseNum表中对应记录点赞数减1；若没有记录，则在g_userpraise表添加一条记录，并判断g_userpraiseNum（点赞总数表）中是否有该地图的记录，有就更新g_userpraiseNum表中该条记录，否则插入一条新的记录。

2.4 定位、逆地理编码

2.4.1 地图定位

1、利用HTML5 geolocation服务的getCurrentPosition方法获取经纬度，使用之前检测浏览器是否支持HTML5 geolocation。
2、获取位置成功后，若为上海地图则转为上海坐标，实例化一个标注加到地图上并zoomTo到该位置；若不是则直接添加标注和zoomTo到该位置。

2.4.2 逆地理编码

1、将之前获取的经纬度坐标转为百度地图上的经纬度，接口由zdoz提供。
2、利用百度地图API反地理编码得到该经纬度对应的地址信息：

1	var myGeo = new BMap.Geocoder();

2.5 拍照

在移动端实现拍照或选取相册使用的是类型为file的input标签，但是不需要使用其默认的样式，因此将input标签css样式的透明度opacity设置为0，并在其上覆盖其他元素。
触发了file类型的input元素的onchange事件后，通过File API提供的异步读取文件的接口FileReader，使用readAsDataURL方法读取文件内容。
在上传图片之前，为了实现图片的预览，使用createObjectURL方法（也可使用FileReader对象的readAsDataURL方法），该方法可创建一个新的对象URL，通过这个URL可以获取到传入的file对象或blob对象的完整内容,然后将图片元素的src属性指向这个URL，实现图片预览功能：

1
2
3

var URL = window.URL || window.webkitURL;
var blob = URL.createObjectURL(files[0]);
$("#firstImg").attr("src",blob);

使用geoserver服务器fileserver接口的putbase64方法，将文件上传到服务器中，并在数据库中记录相关信息，包括：用户ID、经纬度、描述信息、图片存放的路径和时间。

2.6 记录路线轨迹

开启记录轨迹模式后，每隔3秒记录下当前用户所在位置，可暂定记录，也可继续开启该模式，还可以将记录的轨迹上传到服务器供下次查看。

首先需要判断浏览器是否支持HTML5的geolocation，若不支持或获取位置失败则根据错误类型给出相应的提示。利用 navigator.geolocation对象的getCurrentPosition方法获取用户位置，并利用setInterval每隔3秒获取一次（可改为直接使用watchPosition方法，而不需要使用间隔调用）。

获取到用户位置信息后记录下经纬度数据，若是第一次获取实例化一个标注点添加到地图上，并将地图缩放到该点的位置；之后每次调用判断当前记录的位置信息和上一次记录的经纬度是否相同，如果不同就记录下该点位置，并绘制路线：根据所记录的位置实例化一个线要素，并根据第一个和最后一个点的位置信息实例化起点和终点的标注点。判断最后一个点是否在屏幕中间区域，即（x坐标是否位于地图宽度的1/4到3/4处，y坐标是否位于地图高度的1/4到3/4处），如果不是则将地图缩放到最后一个点为中心的位置。

暂定或取消记录轨迹，就是利用clearInterval命令取消固定时间调用获取位置函数：