1、基于移动 RIA 和 WebGIS 的街区购物平台的设计与实现摘要：以重庆市北碚城区为例，采用 HTML5 标准，运用地理信息系统技术、移动互联网及网络开发技术，进行基于移动 RIA 和 WebGIS 的网络平台设计与实现。完成以地理信息服务为载体的新型街区购物平台。将地理信息服务应用于传统网上购物，把网上浏览和线下实体店购物结合，探索一种新的购物模式。 关键词：移动 RIA；WebGIS；购物平台 1 研究背景与目的 电子商务与传统商务模式各有优缺点。一方面，目前电子商务主要采用 B2B，B2C 和 C2C 等商业模式，这种纯虚拟购物模式经营服务范围广泛，便于商家通过网络推广商品。但是，它缺
2、乏本地化、现实性和灵活性等服务特性，相关法律还有待进一步完善，时常发生消费者合法权益遭受侵害的事件。另一方面，传统购物方式能实现面对面交流，让消费者享受较好的售后服务，而且相关法律也比较健全。但是，城市之中实体店布局分散，消费者难以全面了解商品店铺的信息。以至于其在寻找适合自己所需商品的实体店过程中会花费大量的时间和精力。同时，商铺知名度也仅仅能覆盖到其周边的有限地区，销售对象比较单一，影响范围不够大，限制了商家拓展市场和增加销售额的营业需求。因此，整合网上购物与实体店购物的优势，探索一种更安全便捷的购物新方式，成为消费者和商家共同的社会需求。 本文拟通过将 HTML5 移动富客户端开发技术和
3、 WebGIS 技术结合，把网上浏览和线下实体店购物结合，基于地理信息服务，搭建一个面向Android 移动端的街区购物平台。让消费者可以基于地图，进行店面浏览、商品浏览、空间定位、路径导航及各种复杂空间分析等，同时为商家扩大宣传、拓展市场提供便利。 2 技术支撑 本系统采用以 HTML5 为代表的新一代移动富客户端技术，利用HTML5、CSS3 和 JavaScript 的技术组合进行 Web 前端开发，对于简单的地图浏览功能，在客户端完成，复杂的空间查询与分析任务则由服务器完成，之后将结果传送到客户端进行输出。其中，涉及到的关键技术及其实现介绍如下： （1）HTML5 标准下的关键技术 C
4、anvas 元素：Canvas 元素是 HTML5 的一部分，允许脚本语言动态渲染位图像。在本街区购物平台设计中，一方面，在 Canvas 下，通过 JavaScript 语言调用 Google Maps API，将功能强大的 Google 地图服务潜入到本系统平台中，作为系统界面底图。另一方面，在 Canvas 构建的界面画布上，通过调用 WebGL API 进行硬件 3D 加速渲染，结合相关店面的栅格图像资料，对店面进行三维场景展示。 进行数据本地缓存，实现离线应用：HTML5 中新增的 Web storage 存储机制可以进行 key/value 方式的数据存储，以特定的网络数据如地图信
5、息等进行本地缓存。本研究项目主要通过调用其 API，利用 Web storage 的 sessionstorage 和 localstorage 两种本地存储类型，实现地图数据缓存。 （2）空间地理位置信息服务的实现 多方位置共享：本系统提供多方位置共享功能，通过调用手机内置GPS 提供的接口，获取自身位置信息；同时利用 Web SOCKET 即“套接字”技术，建立服务器和客户端的通信，进行用户位置信息共享。 空间分析服务：本购物平台服务器端采用 ArcGIS Sever 作为 GIS 服务器，基于 ArcObject 基础类库，提供强大的空间分析功能。 其它辅助技术：本系统在开发模式上选择基
6、于组件式 Web 开发Sencha Touch，利用 PhoneGap 技术实现对客户端软硬件资源的调用，基于 Ajax 异步传输技术，实现地图显示与数据传输的异步化，增强用户视觉体验。 3 功能模块设计与实现 本平台将现实中的实体店虚拟化，在相对应的地图中进行标注和展示。主要面向用户为：店家、消费者。功能模块划分也从两个角度进行，具体如下： 消费者： 一、 浏览 提供两种商品浏览方式：一是基于地理位置，从地图中找到相应位置的店面，然后对店面里的商品进行浏览。二是基于商品或店面属性，在兴趣点搜索窗口中，输入属性信息，查询和定位到相应属性的店面和商品。 1、 常规：放大、缩小、漫游、鹰眼；2、基
7、于三维场景，进行自动漫游，实现模拟逛街； 二、查询 1、 基于属性字段查询：基于商品名称及类别查询；基于商品价位查询；基于名称关键字查询店面；2、 基于空间位置查询 三、定位 1、确定自己的位置；2、多方好友位置信息共享，并标示于地图上；3、可以设置共同兴趣点，共享位置信息，并显示在用户移动端地图上，便于多方用户快速便捷地向目标店面聚集，使双方在购物时便捷地进行会合碰面。 四、导航 1、产生距离最短距离路径；2、产生加权最佳路径（前提：生成产品价格分布插值图后，为购买商品进行路径规划，设置价钱和距离所占比重，生成最佳路径） ； 五、店面参观 1、观看店面场景的三维展示； 2、了解店面的访问量、
8、评价和某些商品的评价；店家：对于店家，提供服务有：（1） 、常规方面：1） 在虚拟店中上传商品。采集相关商品照片，添加相关注释说明后由手机端上传到服务器，进行各自网店的商品添加；2） 通过手机端对商品进行增删等常规管理。 （2） 、特色服务：1）店家可以利用系统平台，将自己店面的基本信息如：位置，电话，QQ，邮编，网址等整合，通过平台相关模块，生成二维码，将其利用到网页和其它宣传版面，便于店面宣传；2） 系统提供链接模块接口，供用户将自身店面的音视频广告链接到地图上相对应的店面属性中，可以让消费者点击查看广告；3）进行店面三维场景展示。 4.结语 综上所述，基于移动 RIA 和 WebGIS
9、技术构建一个街区购物平台是切实可行的。一方面，采用最新的 HTML5 标准，旨在突破传统插件技术的限制，探索新兴技术的运用，以便达到网络应用无插件，提高网络运行速度，减少安全隐患和改进用户友好体验的目的。另一方面，探索将HTML5 与 WebGIS 技术相结合，搭建街区购物平台，充分利用两种购物方式的优势，探索一个新的购物模式，达到商业盈利和服务消费者的目标。消费者通过这一平台，既可以在手机移动端方便地浏览感兴趣的店面和商品，又可以在地图上定位店铺和多个好友的具体空间位置，获取路线规划等空间分析服务以节约时间成本。商家通过这一平台，可以将自己店铺的相关信息发布到平台网站上，以便消费者进行浏览查
10、询，同时可以对店面进行三维场景展示，这不失为一种扩大宣传和提升店面整体形象的良好机会。方式。因此，基于移动 RIA 和 WebGIS 技术构建的城市街区购物平台，具有商业前景与社会价值。 （作者单位：西南大学地理科学学院） 参考文献： 1杜鹃. 电子商务之内涵简析及其与传统商务的关系J. 产业观察，2011，10（3） ，p.104-105. 2许宁. 020 电子商务商业新模式探析J.中国电子商务，2013（1） ，p.3. 3朱洪军. 基于 GIS 的移动终端 LBS 系统建设与实现D.华东师范大学，2008. 4徐莎，杨帆，徐昌庆. 基于 HTML5 的 WebGIS 的研究与应用J.信息技术，2012（4） ，p.149-151.
