`
psy_yd
  • 浏览: 23195 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论
  • henchong: 我想实现这个功能。。。控制地图的显示范围。。但不知道地图的级别 ...
    地图实现原理

地图实现原理

阅读更多
创建一个地图
瓦片:地图组成部分,一个地图信息有多个瓦片拼接而成。
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 方法中,可以为标注添加自定义的事件
分享到:
评论
1 楼 henchong 2012-07-17  
我想实现这个功能。。。控制地图的显示范围。。但不知道地图的级别。。。这个要怎么做

相关推荐

    基于Qt的离线地图实现原理简介

    离线地图的实现原理主要基于瓦片的概念,这是一种将地球表面按照特定的投影方式分割成小块图像的方法。Web 墨卡托投影是网络地图常用的一种投影技术,由荷兰地图学家墨卡托在16世纪提出。这种投影方式将地球的球面...

    基于ArcIMS的地图切图原理

    总结来说,基于ArcIMS的地图切图原理是Web GIS发展的重要里程碑,它通过预先分割地图数据为小块,实现了高效、快速的地图浏览,为后来的Web GIS技术奠定了基础。虽然技术不断进步,但这一基本原理在当前的GIS应用中...

    基于百度地图实现的定位功能

    本篇文章将详细讲解如何利用百度地图API实现定位功能,包括基本概念、工作原理以及实际应用步骤。 首先,我们需要了解百度地图定位服务的核心组件——百度定位SDK。它提供了强大的定位能力,支持GPS、基站、WIFI等...

    Unity3D中的小地图制作

    #### 二、小地图实现原理 1. **摄像机投影**:通过设置专用的小地图摄像机,将其视角限定在一个较小的区域,并调整其投影模式为正交投影,以便获得鸟瞰视图效果。 2. **纹理更新**:利用脚本实时更新小地图的纹理...

    2D 45度斜角地图原理

    在游戏开发领域,2D地图的设计与实现是一个重要的环节,特别是在一些复古风格或者像素艺术类游戏中。本主题将深入探讨2D 45度斜角地图的原理,这对于那些对游戏编程感兴趣,尤其是使用ActionScript 3.0(AS3.0)进行...

    google map应用实例

    二、离线地图实现原理 离线地图的核心在于预先下载并存储地图数据。Google Map API虽然默认不支持离线模式,但可以通过以下方式实现: 1. 数据缓存:利用浏览器的本地存储或Web Storage功能,缓存用户浏览过的地图...

    离线地图的实现

    在本文中,我们将深入探讨离线地图的实现原理、瓦片系统以及如何构建和使用离线地图。 一、离线地图的实现原理 离线地图的实现主要基于两个关键概念:地图瓦片和地理坐标系转换。地图瓦片是将整个地球表面按照一定...

    echarts2D地图实现3D阴影效果 山东省.zip

    针对"echarts2D地图实现3D阴影效果"的主题,我们需要关注以下几个关键点: 1. **3D阴影效果**:在ECharts中,可以利用光照和阴影模型来模拟3D效果。这涉及到设置光源的位置、强度和方向,以及调整地图元素的阴影...

    用HTML,JS底层实现地图的平移缩放和移动

    在IT行业中,网页地图的实现是一项常见的需求,特别是在地理信息系统(GIS)和导航应用中。本项目以HTML和JavaScript为基础,结合...通过这样的练习,你可以掌握网页地图的基本原理,并为后续更复杂的GIS应用打下基础。

    基于百度地图实现的轨迹回放

    本项目"基于百度地图实现的轨迹回放"聚焦于如何利用百度地图API来重现和展示用户或物体的移动路径。下面将详细介绍这一技术及其核心知识点。 一、百度地图API 百度地图API是百度提供的一套用于开发地图应用的工具集...

    地图染色_四色原理C++

    ### 地图染色与四色定理:深入解析与C++实现 #### 地图染色问题概览 地图染色问题源自于一个著名的数学难题——四色定理,该定理指出任意一张地图(假设地图上的国家是连续且没有飞地的),只需要四种颜色就可以对...

    数字电子地图制作流程和原理

    通过软件如ArcGIS、QGIS等,可以实现自动化或半自动化的地图生产。 最后是地图发布与更新。数字电子地图可以在线提供,用户可以通过Web浏览器或移动设备访问。地图需要定期更新,以反映最新的地理信息变化,如新的...

    vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息

    内容概要:vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息;增加涟漪特效动画。适合人群:具备一定编程基础,工作1-3年的研发人员能学到什么:- 使用echarts实现省市地图绘制- 根据数据在地图...

    echarts实现地图攻击

    6. **地图投影与地理编码**:ECharts支持多种地图投影方式,理解这些投影原理有助于准确显示地理位置。同时,需要理解地理编码(Geocoding)概念,将地址转换为经纬度坐标,以便在地图上定位。 7. **交互设计**:...

    数字地图制图原理_吴凡

    - **地图模式识别技术**:通过自动识别地图中的地理特征,实现地图要素的自动化提取。 - **地图数据库技术**:高效管理大量地理空间数据的技术。 - **全数字化地图生产系统**:覆盖地图制作全过程的自动化系统。 - *...

    google地图的切图规范以及技术原理

    Google地图切图规范是基于一个特定的切图方案来实现地图数据的组织和展现,该方案被广泛应用于网络地图服务中。其切图原理和细节包括以下几个方面: 1. 瓦片地图系统(Tiling Scheme):Google地图使用了瓦片地图...

    Android-实现高德地图的marker聚合功能

    在本文中,我们将深入探讨如何在Android应用中实现高德地图的Marker聚合功能。 首先,我们来理解一下什么是Marker聚合。Marker聚合是将地理位置相近的Marker合并成一个可展开的Cluster,减少屏幕上的Marker数量,...

    计算机地图制图原理概述ppt课件.ppt

    "计算机地图制图原理概述" 计算机地图制图是一个应用科学,旨在实施地图信息的采集、...计算机地图制图是一个复杂的过程,涉及到地图信息的采集、存储、处理、显示和绘图等多个方面,需要掌握多种技术和方法来实现。

    地图着色算法原理及C语言实现实例

    地图着色算法原理及C语言实现实例,可以用在Gis上,对如何着色作了详细的说明。

    基于Dijkstra法实现基于栅格地图的移动机器人路径规划算法matlab源码+原理说明文档.zip

    基于Dijkstra法实现基于栅格地图的移动机器人路径规划算法matlab源码+原理说明文档.zip 基于Dijkstra法实现基于栅格地图的移动机器人路径规划算法matlab源码+原理说明文档.zip 基于Dijkstra法实现基于栅格地图的移动...

Global site tag (gtag.js) - Google Analytics