地理信息世界
GEOMATICS WORLD 第28卷 第1期2021年2月2021.2Vol.28 No.1
引文格式：周 艳， 蒋程程， 张 聪，等. 轻量化校园地图导览小程序的设计与实现[J].地理信息世界,2021,28(1):61-67.
周 艳，蒋程程，张 聪，覃梦逗
（电子科技大学 资源与环境学院，四川 成都 611731）
基金项目：
国家重点研发计划项目（2018YFB0505501，2016YFB0502303）、国家自然科学基金（41871321，41471332，41571392）资助作者简介：
周艳（1976-），女，陕西西安人，副教授，博士，主要从事地理信息系统和空间大数据分析等研究工作。E-mail:
********************* 通讯作者：
蒋程程（1995-），女，四川德阳人，测绘科学与技术专业硕士研究生，主要研究方向为地理信息系统。E-mail:
**********************.edu
收稿日期：2020-10-21
【摘要】针对传统纸质校园地图导览手册更新滞后、查询慢，而普通的移动地图服务应用难以聚焦于校园特定建筑、缺乏校园信息资源等问题，设计一个基于小程序框架的轻量化校园地图导览小程序。基于前后端分离模式，采用mpvue、React框架和Webpack工具构建小程序前端页面，利用腾讯地图开源SDK实现实时多情景路线规划。使用腾讯CynosDB云数据库配置数据库环境，结合User Dash API编写独立的运营后台系统，在云数据库基础上开发校园服务接口集成校园信息。以电子科技大学校园环境及数据为例，实现的校园地图导览小程序的性能测试及实测评分结果表明，小程序运行稳定可靠，达到了实时规划校园路线和获取校园服务的要求。
【关键词】小程序；地图导航；轻量化校园地图；小程序设计；校园服务
【中图分类号】P208 【文献标识码】A 【文章编号】1672-1586（2021）01-0061-07
Design and Implementation of Lightweight Campus Navigation and
Guidance Program
ZHOU Y an, JIANG Chengcheng, ZHANG Cong, QIN Mengdou
(School of Resources and Environment , University of Electronic Science and Technology of China ,
Chengdu 611731, China)
Abstract: Traditional campus navigation map is not up-to-date and slow in query, and conventional mobile navigation
service is hard to focus on given buildings. To solve these problems, a light weight campus navigation program is designed. The frontend pages are constructed using mpvue, React framework and Webpack tools. The Tencent map open-source SDK is applied to realize real-time multi-scenario route planning function. The database environment is configured by the Tencent CynosDB cloud data base, and the independent operation background system is established with User Dash API. The University of Electronic Science and Technology of China is taken as an example. Results of per
formance testing and practical experiences show that this program is workable and feasible.
Key words: WeChat mini programs; map navigation; lightweight campus map; mini program design; campus service
0 引 言
目前，基于移动设备的地图应用逐渐取代传统纸质校园地图导览手册，成为新生、访客熟悉校园环境的主要工具。此类地图应用能实现实时导航功能，然而应用于校园导览时，存在地理信息粒度粗，难以支撑校园内关键地标定位、页面内容混杂以及缺乏多样性信息资源等问题。针对校园环境这类小范围内的地图导览应用场景，需要一种满足使用者及时需求、能容纳校内环境数据体量并极大化节省资源的“轻量化”应用。
轻量化概念起源于汽车行业，是指在确保稳定提升性能的基础上，优化零部件及能源消耗。引申到移动应用领域，用以形容以“小程序”为代表的空间占用较小、硬件要求较低的一类新型应用程序[1]。小程序作为一种
汽车电子调节器易获取、易开发的轻型应用，轻量化是其区别于传统应用程序的特征之一。在实际使用时，无需安卸，操作简洁，适用于校园各类服务场景。在开发制作时，官方为开发者提供多数功能的开放接口，
允许自定义组件，技术和成本门槛低，开发灵活性及自由度高。目前，小程序在校园服务场景中的应用主要聚焦于地图导航、校园服务两方面。
地图导航类小程序通过调用腾讯地图、高德地图等开源SDK，实现用户当前位置的实时定位及路线规划功能。如基于原生地图组件补充标志地点位置，手绘地图等个性化信息以丰富地图内容和突显地点风格[2]；或者对地图导航功能进行扩展，为每个位置点添加语音讲解信息，增强小程序实用性及互动性[3-4]。校园服务类小程序通常
62
地理信息世界
GEOMATICS WORLD第28卷
按照校园服务类型划分不同模块，展现各类信息或接入功能，如以共享校园信息为主，将小程序划分为新生指南、教学信息等信息模块[5]，根据从小程序客户端接收到的查询需求，从后台数据库中
调用对应内容，并及时返回到页面。此类小程序实质上可视为供应者与需求者的中间工具，信息和资源通过官方提供的组件和接口进行有效对接，如文件组件、支付接口等，小程序作为校园服务平台，专注于特定功能或服务，如后勤报修、图书馆移动服务等[6-7]。
校园地图导览小程序需要在展现校园自身特的同时，避免导航页面层级深、界面拥挤、列表式信息展示方式单一等问题，尽可能符合人们日常使用地图应用的
习惯。鉴于此，围绕校园精准导航和校园服务两个核心点，采用前后端分离模式，结合组件化开发思想，融合地理信息系统（Geographic Information System，GIS）及mpvue、React框架、Webpack、腾讯云服务等主流前后端技术和工具，设计实现轻量化校园地图导览小程序核心功能，通过图片、文字和音频等方式向新生、访客提供跟随式的校园导览服务。在满足用户位置导航基础需求同时，兼顾用户校园导览、信息获取等泛性需求，通过自定义组件和个性化界面设计，优化用户使用体验，展现校园特风格。
1 总体设计
采用前后端分离模式，保证小程序运行可靠性，前端基于mpvue、React框架，利用Webpack及开发者工具[8]，使用JavaScript语言开发，并结合组件化思想使页面达到高复用性。后端数据库环境为腾讯CynosDB云数据库，配置Node.js环境，结合User Dash API编写独立的后台，在云数据库基础
上建立校园信息服务功能接口，同时利用云提供的云函数、文件存储和数据库建立校园生活服务功能接口并进行后台整合，实现数据的存储与查询，以减少响应时间和响应负载。轻量化校园地图导览小程序的系统架构如图1所示。
1.1 架构设计
轻量化校园地图导览小程序系统整体结构可分为逻辑层、视图层和系统层，如图1所示。视图层（View）负责渲染页面，由WXML（WeiXin Markup language）、WXS（WeiXin Script）和WXSS（WeiXin Style Sheet）编写，描述页面结构及样式，并由组件（Component）展示。逻辑层（App Service）负责逻辑处理、数据请求、接口调用，由JavaScript编写业务代码，包含多个JS脚本。为提高渲染速度并降低性能消耗，小程序的底层架构为双线程模型，由两个线程分别管理逻辑层与视图层。双线程的渲染结合了模板数据绑定和虚拟文档对象模型（Document Object Model，DOM）机制，逻辑层采用JSCore线程运行JS脚本，视图层采用WebView线程渲染页面，由于小程序包含多个页面，每个页面各自有一个WebView线程，通常视图层包含多个WebView线程。
系统层（Native）位于结构底层，负责管理及通信，包括数据存储、网络请求及其他硬件能力等，逻辑层和视图层通过系统层的WeixinJSBridge进行通信，逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈；视图层把逻辑层的数据反映成视图，并将触发的事件发送给逻辑层进行业务处理。
1.2 数据库设计
由于校园地图导览小程序功能需求涉及的数据种类繁多，数据之间相关程度不高，因此，根据页面内容，在后台数据库中创建学校简介（intro）、学院（college）、风光（scene）、师资（teachers）、历史（history）、教师团队（team）、导航地点（navigator）、美食（cate）、拍照打卡地点（photo）以及用户（user）等数据表。导航地点（navigator）表字段描述见表1，当接收到小程序客户端的HTTP Request请求时，根据查询请求返回对应地点信息。由于表格的原始数据量较大，数
据形式除文本外，还包含音频文件、高清图片，在获取图1 轻量化校园地图导览小程序的系统架构Fig. 1 System architecture of campus navigation and guidance
program
63
2021年第1期周 艳，等. 轻量化校园地图导览小程序的设计与实现图片数据时，对图片进行压缩处理，提升使用数据的加载速度。
表1 导航地点（navigator ）表字段描述
Tab. 1 The field description for navigation location
2 关键功能设计
囿轻量化校园地图导览小程序旨在为访问校园的新生和游客提供全面可靠的服务，围绕校园精准地图导航和校园服务，将小程序划分为介绍、地图和攻略3个功能模块，如图2所示。地图模块是校园地图导览小程序的核心，实现校园精准地图导航，包括精准定位及多情境路线规划功能；介绍及攻略模块实现校园服务，分别提供校园基本信息与生活服务信息。
图2 轻量化校园地图导览小程序的功能模块示意图
Fig. 2 Schematic diagram of campus navigation and guidance
program
2.1 介绍模块
介绍模块主要为师生及访客提供校园基本信息。由于
校园相关信息分散冗杂且形式多样，用户难以快速剥离出有效信息。将不同途径获取到的庞杂信息进行汇总分类，梳理出较为完整且准确的信息，从校园简介、史、校园环境和师资队伍4个方面进行展示，因此，介绍模块细分为简介、历史、风光、师资4个部分。
1）简介：根据校园信息及媒体资源，以文字、轮播图和语音形式对学校概况进行简单介绍，便于到访师生及游客速览校园基本情况。
2）历史：以文字和视频形式展示学校重大历史事件，并使用时间轴的形式标注出重要史略发生的时间节点，让用户了解学校自建校以来的发展变化和所获成就。
3）风光：基于前期实地拍摄及处理的图片资料，以图片流的形式展示学校特建筑及生态环境。
4）师资：以文字形式展示学校各个学院的教师团队及其研究方向，方便学生加深对学院各位老师的了解。
2.2 地图模块
地图模块主要提供精准定位及路线规划功能。由于传
统静态地图需要用户寻参照物，无法准确定位，而通用的地图服务应用难以顾及校园各个特建筑，并且缺乏相关参考内容，用户无法快速掌握地理位置及其相关属性信
息。地图模块通过精准定位和多情境路线规划两个核心功能，帮助用户掌握实时位置信息，并针对不同出行方式，提供多种规划路线作为出行辅助方案。
2.2.1 精准定位
精准定位功能通过引导式位置查询及实时精准定位
实现，用户可根据小程序提供的校园建筑类型引导条目，结合当前位置实时定位信息，快速掌握校园建筑的全局分布情况。在引导式位置查询方面，为了帮助用户概览校园中不同类型建筑的分布位置及说明信息，基于校园实际环境，通过前期实地采集到的数据，结合校园各个建筑的功能性质，将校园内所有地点分类展示到导航栏中，同时为每个地点补充“图文+语音解说”介绍信息，用户可按照分类引导或利用搜索功能查询目的地点，根据附带的辅助内容加深了解。在实时精准定位方面，轻量化校园地图导
览小程序基于腾讯位置服务小程序JavaScript SDK，通过调用wx.getLocation( )接口实时获取当
前位置信息，由于小程序默认坐标是WGS84，API的type参数的默认值为‘wgs84’，而在开发工具中定位模拟是使用的IP地址，存在一定误差，因此，在开发时需要设置type参数为‘gcj02’，转换为国测局坐标，并使用真机测试以避免坐标偏移。
2.2.2 多情境路线规划
路线规划是导航的核心，此功能基于步行、骑行、驾
车这3种出行方式，为不同需求的用户规划多种合理的导航路径，并在导航时实时更新到达目的地的距离和时长，基于用户当前位置及行进状态动态调整路线方案。在开发
字段名称描述loc-id 地点id 索引loc-name 地点名称campus 所属校区longitude 经度位置latitude 纬度位置icon-back 图标（未选中状态）icon-homefill 图标（选中状态）
image-src
图片地址
64
地理信息世界
GEOMATICS WORLD
第28卷
路线规划功能时，同样借助腾讯位置服务SDK，设计流程如图3所示。
图3 多情景路线规划设计
Fig. 3 Multi scenarios route planning and design
针对校园内不同出行场景的路线方案，通过设置direction接口的mode参数值实现，包括驾车（driving）、步行（walking）、骑行（bicycling）等，步行方式路线查询的部分代码如下所示：
qqmapsdk.direction({mode: 'walking',
from: igin.split(',')[1] + ',' + igin.split(',')[0],
to: this.data.destination.split(',')[1] + ',' + this.data.destination.split(',')[0],
success: function (res) {let strategySwitch = []
for (var k = 0; k < utes.length; k++) {
let coors = utes[k].polyline, polyline_going = [];
for (let i = 2; i < coors.length; i++) {
c o o r s [i ] = N u m b e r (c o o r s [i - 2]) + Number(coors[i]) / 1000000;
}
for (let i = 0; i < coors.length; i += 2) {polyline_going.push({ latitude: coors[i], longitude: coors[i + 1] })
}
strategySwitch.push({points: polyline_going,
黑泽明的电影风格
distance: utes[k].distance,duration: utes[k].duration),
})
对于实时导航更新策略，轻量化校园地图导览小程序的刷新机制为：以固定时间间隔调用API刷新数据，更新时间和距离参数，当累计到达一定时长阈值后更新当前显示路径，同时将计时器清零，重新计时，反复执行上述步
骤，直到使用者抵达目的地，从而实现动态导航。结合不同出行场景下用户的移动速率及设备使用频率，以及刷新机制对后台资源占用情况，为3种出行场景的路线规划的默认更新方案设置见表2。
表2 路线规划更新方案
Tab. 2 Route planning update scheme
2.3 攻略模块
攻略模块主要为师生及访客提供校园生活服务信息。
饮食、游玩、校内交通是校园新生及访客关注的重点，而相关信息通常由不同校园平台管理，难以直接传达给信息需求者。针对以上3种校园服务类型，将攻略模块划分为美食推荐、拍照打卡和班车查询3个功能，分别整合相关校园平台的共享信息，并与官方平台保持同步更新，确保信息的准确性及多样性。
1）美食推荐：以图片形式展示学校各个餐厅的不同美食，并且附带所属餐厅名称、喜爱人数及路线导航功能，用户可基于图文介绍及互动信息掌握校园饮食服务概况，并可通过路线导航直接前往目标餐厅。
2）拍照打卡：以卡片形式展示校园重要景点并附带路线导航，用户可以按照所选方案的导航路线前往目标景点。
3）班车查询：根据收集到的校园交通时刻表，以图片形式展示校内各种交通方式的发车时间及站点，并在各站点名称旁接入路线导航功能，方便用户制定出行规划。
3 界面设计
轻量化校园地图导览小程序的基础界面主要包括：主界面、介绍页面、地图页面和攻略页面。主界面是小程序首页，包括介绍、地图和攻略按钮控件，分别指向对应的功能界面。
小程序界面是对用户可见的直观表现形式和信息交互接口，提供小程序的功能入口并指引用户进行相关操作。为了帮助用户快速掌握小程序操作流程及原理，向用户传递正确信息的同时展现小程序风格和特，因此在设计小程序界面时，需要顾及人机交互、界面逻辑和界面美观
设计3个方面因素，在符合交互操作逻辑及设计原则基础
出行场景调用API 频率（s ）
累计时长阈值（s ）
驾车315步行545骑行
5
30
春天麻
65
2021年第1期
上，进一步体现小程序的定位风格。校园地图导览小程序采用ColorUI [9]和“一ONE”[10]开源库进行界面开发设计，界面的导航栏、轮播图、搜索框基于ColorUI的相应组件实现，卡片效果基于“一ONE”开源库。第一代领导集体
ColorUI是一套专注于视觉交互并支持组件高度自定义的样式库，其组件制作精良、封装良好，组件代
drs系统码具有良好的兼容性和扩展性，每个独立的class选择器都是封装好的CSS组件，便于灵活组装及修改。首先从GitHub网站下载官方维护的原文件并进行解压，将文件colorui.wxss和icon.wxss拷贝到校园地图导览小程序项目的根路径下，在项目的全局样式文件app.wxss中加入以下代码：“@import "icon.wxss";@import "colorui.wxss";”引入ColorUI样式库。之后根据校园地图导览小程序的界面风格，在导航栏、轮播图、搜索框组件库基础上进行自定义调整，其中导航栏部分代码如下：
<view class="navigator-menus_menu navigator-menus_menu_items" style='{{key==index?"border-bottom: 1px solid #fff;":""}}'
wx:key wx:for="{{ menus }}" wx:for-item="menu" wx:for-index="index"
data-index='{{index}}' data-loc="{{ menu.loc }}" bindtap="updateCategory">
{{ menu.loc }}</view>
“一ONE”是一个开源的第三方图文推送小程序，通过卡片形式为用户推荐图文，并提供分享功能，这种卡片效果推荐形式可应用于校园地图导览的拍照打卡功能。从GitHub网站下载官方开源文件one.wxss，将文件拷贝到校园地图导览小程序“拍照打卡”功能的根路径下，在“拍照打卡”功能的样式文件中加入代码：“@import './one.wxss';”，拍照打卡的部分代码如下：
<s w i p e r c l a s s ="o n e _s w i p e r s " bindchange='changeHandler'>
<s w i p e r -i t e m c l a s s ="o n e _s w i p e r " wx:for="{{placesInfo}}" wx:key="{{item.id}}">
<one id="{{item.longitude}},{{item.
latitude}}"
image="{{item.img_url}}" title="{{item.title}}" bindtap="findLocation" />
<!-- bind:twoBottom="openMenu" /> --> </swiper-item></swiper>
4 小程序开发实例
以电子科技大学为小程序实例，对校内各类型建筑进行实地拍摄，记录坐标信息以支撑导航功能；将收集到的文字、图片及音频数据分类存入云数据库；开发后期在不同型号的移动终端、网络质量条件下进行性能测试及调整，测试内容见表3。同时，官方开发者工具中嵌套的体验评分功能[8]，从性能、体验、最佳实践3个模块划分出27条评分规则，如首屏时间、请求耗时、窗口变化适配等，对小程序在运行时的页面渲染、交互等表现情况进行自动实时评分。根据官方制定的评分方法，通过的体验规则计分为100分，不通过则为0分，最后综合各规则权重计算出总分。每项体验分数低于70分时，
系统会在console面板中打印warning信息提示，开发者可根据得分结果及优化建议对导览程序进行针对性调整。图4为开发者工具中体验评分功能示意图，图5为轻量化校园地图导览小程序在不同设备及无线网络环境中的体验评分结果，3种设备的总分均处于90分以上。
表3 校园地图导览小程序测试内容
Tab. 3 Test content of campus map navigation and guidance mini
program 轻量化校园地图导览小程序主界面如图6所示，是用户首次进入小程序的初始页面，提供3个功能按钮，方便用户直接进入对应模块。
测试名称
描 述
测试结果操作系统兼
容性
Android 和iOS 系统设备中界面和功能是否一致
是屏幕兼容性界面显示在不同屏幕尺寸中是否兼容是兼容性是否支持不同版本是网络测试在各种网络状况（断网、移动网、无线网等）下的运行情况
正常缓存测试清除缓存是否对小程序产生影响否授权测试
在不同权限下是否运行正常
是
周 艳，等. 轻量化校园地图导览小程序的设计与实现
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议