国内电子地图开源框架mapEasy实现过程

地图实现原理

 

创建一个地图

瓦片：地图组成部分，一个地图信息有多个瓦片拼接而成。

Level ：地图显示级别

 

原理：根据地图基本信息来动态加载 img 集合，并把所有图片拼接成一个完整的地图信息。

定义个地图可视化窗口，设置窗口的大小。

根据地图的级别，地图类型来加载对应的瓦片信息（即由一张完成的图片切割而成的小图片的集合），根据可视窗口的大小和定义的中心点来计算需要显示那些瓦片信息，对于超出可视区域的瓦片，不显示。得到瓦片信息集合后，把瓦片信息按规则来拼接在一起，显示成一张完成的图片信息。

 

地图移动

在地图移动过程中记录地图中心点的位置改变。

移动结束后根据中心点位置改变的大小来重新计算加载的瓦片信息。

并调用地图重绘方法来重新生成显示的地图信息。

地图缩放

根据地图的缩放级别来重新计算加载的瓦片信息。并调用地图重绘方法来重新显示地图信息。

原理：假设当前显示的地图 level=2 由

       a b

       c d

四张图片按这样的排列方式拼接而成。点击放大后 level = 3 ，原理显示图片 a 的区域改变为：

       a1 a2

       a3 a4

四张图片。其他三个区域改变方式相同。（这里的 a1 ~ a4 是由 level=3 的地图图片切割而来的），这样就实现了地图放大的效果。

 

地图 js 功能说明

Map 功能 js 结构如下：

.....

......

 

 

 

 

 

       功能说明：

Action 文件为控制层对象 这里实现对地图中基本操作的控制，如：地图的移动，缩放，地图类型的转换等。

Model 文件为模型定义对象，这里定义了地图中所有使用模型的定义，如：坐标定义，点定义，矩形区域定义，地图对象定义，标注定义，工具定义等。同时实现了对这些模型的基本操作方法。

Widget 文件界面生成对象，扩展工具定义，地图基本方法定义和基本地图工具定义。

Mapbuilder.js 地图创建初始化

MapEvent.js 地图事件定义

BaseAction.js 控制层对象

BaseModel.js 模型对象

BaseWidget.js 界面生成对象

Command.js 事件控制对象

Listener.js 抽象监听对象

ListenerSupport.js 监听对象

Prototype.js   js 库

Util.js 常用操作方法定义

Js 功能说明：

Mapbuilder.js 地图构建器：

地图构建器对象，对创建地图进行初始化加载。

Include 方法：动态加载 js 文件，如果有新添加的 js 文件统一在此处加载。

MapBuilder 方法：地图构建对象，通过创建一个 MapBuilder 对象来生成一个地图 。其中有以下方法：

outputMap ： 输出地图信息。

addTool ： 增加扩展工具信息。

GetMap : 取得地图对象。

 

MapEvent.js 地图事件定义

地图自定义事件，可以加入实现特定功能的事件和方法。

有以下定义方法：

MapEvent. getEventCoord ：取得事件触发的坐标。添加标注时通过该方法取得标注在地图上的具体坐标。

MapEvent. addListener ： 为对象添加监听事件。

Eg ：为地图添加右键单击事件

定义事件常量

MapEvent.ONCONTEXTMENU = "event.oncontextmenu" ;

为地图对象添加监听事件

MapEvent.addListener(map, MapEvent.ONCONTEXTMENU , function (e) {

    var coord = MapEvent.getEventCoord(e, map);

    …

} );

添加用户自定义事件（ MapPaneWidget.js 中 customEvent 方法 ）

if (eventName == MapEvent.ONCONTEXTMENU) {

       mapDiv.oncontextmenu = this .model.events[MapEvent.ONCONTEXTMENU];

}

GeoObject.js 地理信息定义

坐标定义，点定义和矩形区域定义。并实现了相应的操作方法。

MapModel.js 地图对象定义

MapModel ：地图模型定义，定义地图的缩放比例，中心区域坐标，地图事件等。

方法：

addOverlay : 添加地图标注信息，参数为地图标注对象（ marker ）。在地图上添加一个标注可以直接用以下方法实现：

MapModel.addOverlay(new Marker(coord.getPoint(), Marker.LARGE));

                     removeOverlay : 移除单个标注信息（移除指定的标注，参数为标注对象）。

           clearOverlays ： 清除地图所有标注信息。

MapType ：地图类型定义，我们自定义的地图类型继承该方法，并重写 getSrc 方法来获得正确的图片路径。如果要添加一个新的地图类型，可以用以下方法实现：

           function MapMapType() {

      // 继承 maptype

      MapType.apply( this );

      // 重写 getSrc 方法

      this .getSrc = function (level, row, column) {

    var url = "mapdemo\\images\\zoom" +level+ "\\" +level+ "_" +column+ "_" +row+ ".jpg" ;

         return url;

      }

            }

MapModel.mapTypes = new Array();

MapModel.mapTypes.push( new MapMapType());

这里 new MapMapType() 为我们自定义的地图类型。

Zoom : 比例模型定义，定义了地图当前等级，当前所有瓦片集合和边缘瓦片数。

Tile ：瓦片定义，定义列，行和地图缩放级别

Overlay.js 地图覆盖物定义

Overlay ：地图覆盖物抽象类 ，定义覆盖物区域范围，坐标，显示图形，阴影图形。

Icon ： 覆盖物显示图标

Marker ： 标记定义（继承 overlay ）。定义了标记的基本信息，我们可以在起初添加新的属性，并实现他的 get 和 set 方法。

Marker.LARGE ：定义标记显示图片和阴影图片。

ExttoolsWidget.js 扩展工具类

SliderWidget ：滑块工具 参数： model （ MapModel 对象）。

    定义滑块工具和点击放大 / 缩小时触发事件

sliderMDown ：滑块拖动

    实现在地图上按住鼠标左键可以拖动地图。

MarkerWidget ： 标记定义

    实现对标记信息的添加，对标记信息窗口的显示和隐藏。

    有以下方法：

addMarker ：在地图上添加一个标记图片和阴影图片，并给该标记添加触发事 件。我们可以对此方法进行改写。

    showInfoWindow ： 显示标记信息显示窗口。可以对此方法进行改写

    hideInfoWindown ：隐藏标记信息显示窗口。

MapTypeWidget ：地图类型定义。可以定义多个不同类型的地图信息。

 

MapPaneWidget.js 地图面板控制，注册了地图的移动，缩放，类型改变和自定义方法事件。定义了地图的输出方法。

Paint ：地图界面绘制方法。

设置地图容器的 style 属性，屏蔽右键和全选功能，添加地图移动工具栏，地图类型切换栏和地图 div 。

propertyChange ：监听地图触发事件。

实现了对地图缩放（ zoom ），移动（ move ），用户自定义事件（ event.addlistener ）和地图类型变换（ maptype ）事件的控制。根据不同的事件名来进行对应的处理操作。

customEvent ：用户自定义事件。

可以在此处添加用户自定义的事件。

changeMaptype ：地图类型改变方法。

方法先移除就的瓦片集合，然后根据新的地图类型来重绘显示的地图。 paintMap （）地图重绘方法。

paintMap ：地图重绘方法。

根据新的地图 level ，和中心点位置。来取得所有要显示的瓦片集合（即分割的小图片），对新取得的集合循环输出，在显示的同时判断该瓦片是否在旧的瓦片集合中存在，如果存在则不重新加载。

mapMDown ：地图拖动方法。

记录地图中心点的位移，拖动完成后重新输出地图。

ToolsWidget.js   基本地图工具，实现地图的上，下，左，右移动和居中显示。

MapBuilder.js 地图构建对象。

加载地图 js 脚本库。实现地图构建器，和地图的输出。

Include ：动态载入地图 js 脚本库文件，如果有新添加的 js 文件统一在此处加载。

MapBuilder ：地图构建器，参数： container 为地图容器。

    定义地图的基本信息，并为地图添加相应的操作监听事件。

outputMap ：地图输出。根据出入的中心点和地图显示 level 调用地图的 print 方法来输出地图信息。

addTool ：添加地图扩展工具，如滑块工具和地图类型变换工具。

getMap ：取得地图对象。

 MapEvent.js 自定义事件控制

getEventCoord ：取得事件触发的坐标点位置。

addListener ：添加用户自定义事件监听。

MapEvent.CLICK ：添加用户自定义事件。

    其他类功能说明，请参考对应的 api 文档。

   

.地图使用

1.创建一个 jsp 或 html 页面，在页面添加地图显示 div

< div align = "center" >

    < div id = "newmap" style = "width:800px;height:400px; background :#F2F6FF" " ></ div >

    </ div >

2.导入初始化的 js 文件，样式文件

 

<!-- 加载样式 -->

    < LINK rel = "stylesheet" href = "webep/css/style.css" type = "text/css" >

   

    <!-- 加载地图生成 js 文件 -->

    < script language = "JavaScript" src = "mapdemo/js/Util.js" ></ script >

< script language = "JavaScript" src = "mapdemo/js/map/MapBuilder.js" ></ script >

 

3.自定义地图类型，重写 getsrc 方法，并把新的地图类型添加到 MaoModel 的 mapTypes 中

// 定义自己的 map 类型

    function MyMapType() {

    // 继承 maptype

    MapType.apply( this );

    // 重写 getSrc 方法

    this .getSrc = function (level, row, column) {

      var url = "mapdemo\\images\\zoom" +level+

 

 

4.设置 MapModel 基本常量值

 

    // 设置地图显示基本信息

    /** 地图坐标系范围 */

    MapModel.bound = new Bound(-180e16, 180e16, -90e16, 90e16);

    /** 第一个缩放等级的瓦片数 */

    MapModel.firstZoomTileNum = 1;

    /** 每层缩放之间的比例参数 */

    MapModel.scalePara = 2;

    /** 瓦片尺寸 */

    MapModel.tileSize = 256;

    /** 最大缩放比例 */

MapModel.maxZoomLevel = 4;

5.定义地图初始化对象，调用 outoutMap 方法输出地图，添加地图缩放移动工具

// 初始化 mapbuilder 对象

    var mymapbuilder = new MapBuilder($( "newmap" ));

    // 输出地图信息

mymapbuilder.outputMap( new Point(10, -20), 3);

// 滑块工具

mymapbuilder.addTool(MapBuilder.TOOL_SLIDERBAR);

 

6.地图类型切换工具

 

// 定义的第二个地图类型

    function MyType1() {

       // 继承 maptype

    MapType.apply( this );

   

    // 添加地图切换图片

    this .enablePic = imgBaseDir + "maptype_1b.gif" ;

        this .disablePic = imgBaseDir + "maptype_1a.gif" ;

       

    // 重写 getSrc 方法

    this .getSrc = function (level, row, column) {

            var url = "mapdemo\\images\\zoom" +level+ "\\" +level+ "_" +row+ "_" +column+ ".jpg" ;

           return url;

        }

    }

 

// 添加第二个地图类型

MapModel.mapTypes.push( new MyType1());

 

// 地图类型工具

mymapbuilder.addTool(MapBuilder.TOOL_MAPTYPE);

7.添加 / 删除标记

 

添加标记：

// 添加一个标记

var newmark = new Marker( new Point(20,-20),Marker.LARGE);

newmark.setInfo( " 您添加了一个新的标记 " );

map.addOverlay(newmark);

删除标记：

Map.removeOverlay(mark); // 删除指定标记信息

8.添加自定义方法

 

在 ExtToolsWidget.js 中 addMarker 方法中，可以为标注添加自定义的事件