基于百度地图API的WebGIS研究与实现
作者：田力 栾绍鹏
来源：《科学导报·学术》2019年第18期
        摘要：本文从理论研究以及技术实践出发，自主设计并开发完成了基于百度地图API的信
息查询系统。客户端基于百度地图API实现了地图展示、查询等功能，并通过Ajax请求服务端的SqlServer数据库将服务端存储的信息查询出来并显示到浏览器中;同时浏览器端基于HTML5 GeolocationAPI实现了定位功能。
        关键词：百度地图;HTML5;WebGIS;XML
        近些年互联网技术在全球高速发展，万维网成为便捷高效的全球信息发布工具。GIS和Web技术的结合，让GIS插上网络的翅膀迅速走进了千家万户。借助Web技术，GIS实现了从桌面到Web浏览器的转移，使得人们在任何能够接入互联网的电脑前使用浏览器，就能够迅速获取所需要的地理信息。传统的WebGIS应用开发相对复杂和困难，因为这涉及到很多关于地图数据的收集、位置信息的收集和处理等各種各样的服务能力。而地图API则把地图数据处理、位置获取甚至空间计算的大部分工作来完成，把GIS功能封装为简单的应用程序接口供应用开发人员来调用，开发者只需要考虑应用本身的逻辑，使用JavaScript或者其他语言调用百度地图的API，即可将需要的GIS功能嵌入到自己的网页或其他应用中。
        1百度地图API
        观察在线地图的发展现状，继国际上Google地图之后，近些年国内百度地图、搜狗地图、高德地图、阿里云地图和腾讯SOSO地图等都纷纷推出了自己的地图搜索服务和路况等应用服务，极大的便利了人们的出行。
        百度地图API是LBS位置应用的开发平台，API和SDK的应用模式是：API和SDK本身并不面向最终用户，开发者在开发应用时调用API或SDK来开发LBS应用，然后把应用提供给最终的用户。百度地图API平台有四大核心能力：1、数据，可以检索周边餐饮、旅馆等各类信息。百度出身于数字搜索，在数据方面经验丰富，拥有并提供大量的信息数据;2、搜索，包括所有跟计算有关的能力，比如POI的搜索，检索附近的餐饮、酒店等等;3、导航，比如路径计算，驾车导航，公交检索等;4、定位，定位是LBS应用的关键功能。
        2平台总体架构设计
        本系统基于百度地图API，目标是实现任意区域的信息检索，并将搜索结果合理展现在网页文档中。对于位置信息，采用百度地图API提供的接口数据;对于详细信息，采用自己架设ASP.NET服务器提供Web服务的方式提供详细数据。
        本系统的核心功能是提供地图展示，允许用户通过修改地图视野，并点击“查询”按钮立即查询本地图视野区域的信息，并以标注的方式展示在地图中。同时允许用户点击任意一个结果标注查询详细信息。图1描述了系统的设计逻辑。
        2.1 JavaScript API实现地图功能
        使用JavaScript API只需将百度地图API的JS文件加载到网页，并设置初始化地图容器的代码即可。百度地图API支持2D、3D、卫星图的展示、平移、缩放、拖拽等操作。还可以在地图展示控件：添加/删除鹰眼、工具条、比例尺、自定义版权、地图类型及定位控件，并可以设置各类控件的显示位置。
        自1.5版本之后，需先百度地图API申请密钥。ak的使用方法如下：
        <script src="http：//api.map.baidu/api？v=1.5&ak=您的密钥" type="text/javascript"></script>
        其中参数v为API当前的版本号，目前最新版本为1.5。
        由于JavaScript在网页中的加载是自上而下进行的，而在本系统中，网页模型、API类、初始化动作都是有先后逻辑次序的。因此要求网页DOM（文档对象模型）的加载先于百度地图JS文件的加载，百度地图JS的加载要先于地图初始化代码。
        为此，我们需要借助百度地图API异步加载技术，同时运用适当的方法解决以上次序问题。首先，我们将地图API的加载封装为loadBaiduJs的函数，然后在网页文档的head标签中加入load = loadBaiduJs;即可等网页所有DOM（文档对象模型）加载完毕之后再加载百度的JS代码。如图是loadBaiduJs函数的逻辑代码。
        其中，引入百度地图JS文件的参数callback=initialize代表加载完成百度地图JS文件后的回调函数，这就确保了initialize初始化函数的执行是在百度地图JS文件加载之后进行的。在自定义的initialize回调函数中，需要对地图展示的初始参数进行初始化，包括设置地图初始的中心点、缩放级别等。
        2.2 Javascript API实现POI搜索
        百度地图API中，BMap.LocalSearch提供本地搜索服务，在使用本地搜索时需要为其设
gis字符串是什么
置一个检索区域，检索区域可以是BMap.Map对象、BMap.Point对象或者是省市名称（比如："北京市"）的字符串。BMap.LocalSearch构造函数的第二个参数是可选的，可以在其中指定结果的呈现。BMap.RenderOptions类提供了若干控制呈现的属性，其中map属性指定了结果所展现的地图实例，panel属性指定了结果列表的容器元素。
        本文所设计的系统为检索商场信息，因此现以检索当前视野内的POI商场信息为例。我们的搜索参数设置为renderOptions：{ map：myMap，panel：win2，autoViewport：true，selectFirstResult：false }，即搜索结果展现在myMap地图实例，搜索结果面板展现在“win2”面板，搜索完成后自动调整地图视野，并选择第一条搜索结果。
        同时，本系统要求点击搜索结果的地图标注后要触发自定义的事件，我们在自定义的事件代码中使用Ajax访问Web Service，因此，我们需要在本地搜索的第二个参数中设置onMarkersSet属性，在标注添加完成后给每个标注添加Click事件的绑定函数。我们的本地搜索参数设置如图2，其中addInfoWindow函数是为标注添加点击事件的函数：
        2.3 Javascript API实现公交线路查询
        BMap.TransitRoute类提供公交导航搜索服务。和本地搜索类似，在搜索之前需要指定搜索区域，注意公交导航的区域范围只能是市，而不能是省。如果搜索区域为BMap.Map对象，路线结果会自动添加到地图上。如果网页中提供了结果容器，相应的路线描述也会展示在页面上。创建一个公交导航对象的方法为：var transit= new BMap.TransitRoute（map，{ renderOptions：{map：myMap，panel："results"}.这样便声明了一个公交线路查询对象transit，第二个参数指明了此次查询结果标注展现在myMap地图对象上，结果内容展示在“result”网页容器内。公交对象定义完成后执行transit.search（起点字符串，终点字符串）便可执行线路查询。
        3 总结
        本文从理论研究以及技术实践出发，自主设计开发完成的基于百度地图API的独立于GIS平台的信息查询系统，采用HTML5和CSS3作为客户前端UI展现方式，基于百度地图API接口实现了地图展示、关键词搜索、大学位置检索、大学信息查询、公交线路检索、定位等功能。借助ASP.NET创建的Web Service，实现了自定义数据在地图上的展现。
        参考文献：
        [1] 易晓飞.HTML5 Geolocation API 研究与应用[J].计算机光盘软件与应用，2012，6：101.
        [2] 王红崧，周海晏.基于百度地图 API 的旅游地理信息系统开发[J].现代计算机：上半月版，2012（8）：60-63.
        [3] 李艳，高扬.基于地图 API 的 Web 地图服务及应用研究[J].地理信息世界，2010，8（002）：54-57.
        [4] 赵文雪.百度 MapAPI 在气象自动站监测的应用[J].科技资讯，2012，15：005.
        作者简介：
        田力（1963-），研究方向：国土资源信息管理、测绘地理信息、智慧城市等
        （作者单位：烟台市地理信息中心）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。