GIS开发百度地图+Extjs相关

百度电子地图

 

 

1.开发背景...........................................................................................（2）

2.需求分析...........................................................................................（2）

3.系统设计...........................................................................................（2）

     3.1系统功能结构......................................................................（2）

3.2系统预览..............................................................................（2）

     3.3开发环境..............................................................................（5）

4.各模块设计.......................................................................................（5）

4.1模块实现关键代码..............................................................（5）

5.总结...................................................................................................（7）

6.参考资料...........................................................................................（7）

 

 

 

 

 

1.开发背景

随着城市发展，道路街道情况愈加复杂，实用、高效快速的电子地图应运而生。电子地图可以非常方便的对普通地图的内容进行任意形式的要素组合、拼接，形成新的地图。可以对电子地图进行任意比例尺、任意范围的绘图输出。非常容易进行修改，缩短成图时间。可以方便的与卫星影像、航空照片等其他信息源结合，生成新的图种。

本软件的开发为用户提供一款网络地图搜索服务，地图提供了普通搜索，周边搜索和视野内搜索三种方法，帮您迅速准确地找到您所需要的地点。

2.需求分析

测量距离：能够测量地图任意位置之间的距离；

区域缩放：能对拖拽绘制的矩形区域进行放大和缩小

本地搜索：提供某一特定区域的位置收索服务；

周边信息：根据搜索结果，获得周边信息的数据信息，并能根据需要自定义标注。

3.系统设计

    3.1系统功能结构

 

 

 

 

 

 

 

3.3系统预览

 

 

 

 

 

3.3.1系统界面

 

 

3.3.2搜索功能

 

 

3.3.3放大缩小

 

 

点击地图左侧缩放标尺可以进行放大缩小操作

 

鼠标滚轮也可以进行缩放操作

3.3.4测距

 

3.4开发环境

IE 8.0

4.各模块设计

4.1. 模块实现关键代码

/**************************

*  使用百度地图版本1.1    *

**************************/

 

/* 创建和初始化地图 */

function initializeMap(containerId){

createMap(containerId);  // 创建地图

setMapTools(); // 设置地图工具

setMapEvent(); // 设置地图事件

addMapControl(); // 添加地图控件

addMapListener(); // 添加地图事件监听器

}

 

/* 创建地图 */

function createMap(containerId){

var baiduMap = new BMap.Map(containerId);// 创建Map实例

var point = new BMap.Point( 104.067923, 30.679943); //定义一个中心点坐标

baiduMap.centerAndZoom( point, 12 ); //设定地图的中心点和缩放等级并将地图显示在地图容器中

window.baiduMap = baiduMap;//将baiduMap设为全局变量

}

 

/* 设置地图事件 */

function setMapEvent(){

baiduMap.enableDragging();//启用地图拖拽事件，默认启用(可不写)

baiduMap.enableScrollWheelZoom();//启用地图滚轮放大缩小

baiduMap.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)

baiduMap.enableKeyboard();//启用键盘上下左右键移动地图

}

 

/* 添加地图控件 */

function addMapControl(){

baiduMap.addControl(new BMap.MapTypeControl()); //添加地图类型控件

baiduMap.addControl(new BMap.NavigationControl()); // 添加平移缩放控件

baiduMap.addControl(new BMap.ScaleControl()); // 添加比例尺控件

baiduMap.addControl(new BMap.OverviewMapControl()); // 添加缩略地图控件

}

 

/* 设置地图工具 */

function setMapTools(){

// 测距

var distanceTool = new BMap.DistanceTool(baiduMap);

window.distanceTool = distanceTool;

// 标注

var pushpinTool = new BMap.PushpinTool(baiduMap);

window.pushpinTool = pushpinTool;

// 右键菜单

setContectMenu();

}

5.总结

经过对开发的电子地图的测试，该地图已基本实现了需求中的基本功能。此次GIS我们采用了百度地图的API，为了很好的开发电子地图，我们小组对百度API中的基础知识、控件、覆盖物、事件、地图图层、工具、服务进行认真的阅读和研究，从而对电子地图有了更深的认识。同时也学习了EXYJS技术并应用到ＧＩＳ的开发中。在ＥＸＴＪＳ和ＧＩＳ的衔接中遇到了很多问题，经过努力得到了相应的解决。通过这次实践我们不仅学到了专业知识，更学会了解决的方法和思路。当然GIS的应用开发远不止此，值得我们不断学习和探索。

6. 参考资料

1.百度地图开放平台：http://dev.baidu.com/wiki/map

2.EXTJS 开发文档

7. 附件

 源代码：