科普一下基本知识:
解释:Sphercial Mercator:
Spherical Mercator(球形墨卡托投影):Google Map,Bingmap,YahooMap等商业地图供应商以及OpenStreetMap都提供此投影的缓存切片。
EPSG:900913或者EPSG:3857,为了使用这些商业地图,就需要将地图设置为此投影。一般情况下,在OpenLayers中不需要显示设置map的projection为 EPSG:900913因为,这些商业地图都是用在做baseLayer的而地图的投影一半都决定用baseLayer的投影。在OpenLayer中,如果使用公开的XYZ图层 (如arcgis的),需要测试其是否是球形墨卡托投影的缓存切片,如果是就需要将layer.sphericalMercator设置为true。在使用sphericalMercator投影的地 图中,要时刻注意进行坐标的转换。添加矢量数据前要进行转换transform,显示坐标的地方,如鼠标位置信息,需要设置map的displayProjection为想要显示的投影,一般为(EPSG:4326)。关于Spherical Mercator的说明:http://docs.openlayers.org/library/spherical_mercator.html。
当使用SphercialMercator时,属性被自动设置为True,同时有必要指定maxExtent, maxResolution,uint属性。举个初始化map的例子:
[javascript] view plaincopy
- //初始化map
- var map=new OpenLayers.Map(
- 'map_element',
- {
- progection:new OpenLayers.Projection('EPSG:900913'),
- displayProgection:new OpenLayers.Projection('EPSG:4326'),
- maxExtent:new OpenLayers.Bounds(-20037508,-20037508,20037508,20037508.34),
- maxResolution:156543.0339,
- uints:'m'
- }
- );
设计一个可编辑的图层;代码中第一次展示vector图层,然后加载EditingToolBar进行地图的编辑。在这个例子中,你还要注意到例子中加载了WMS, Google, Vector三个图层类。(这里只贴script脚本)
[javascript] view plaincopy
- <script type="text/javascript" >
- function init(){
- //初始化map
- var map=new OpenLayers.Map(
- 'map_element',
- {
- progection:new OpenLayers.Projection('EPSG:900913'),
- displayProgection:new OpenLayers.Projection('EPSG:4326'),
- maxExtent:new OpenLayers.Bounds(-20037508,-20037508,20037508,20037508.34),
- maxResolution:156543.0339,
- uints:'m'
- }
- );
- var google_street=new OpenLayers.Layer.Google(
- 'Google street',
- {numZoomLevels:20}
- );
- var wms_layer=new OpenLayers.Layer.WMS(
- 'OpenLayer WMS',
- 'http://vmap0.tiles.osgeo.org/wms/vmap0',
- {layers:'basic,clabel,ctylabel,statelabel', transparent:true},
- {isBaseLayer:false,opacity:.5}
- );
- var vector_layer=new OpenLayers.Layer.Vector(
- 'editable vector'
- );
- map.addControl(new OpenLayers.Control.EditingToolbar(vector_layer));
- map.addControl(new OpenLayers.Control.LayerSwitcher({}));
- map.addLayers([google_street,wms_layer,vector_layer]);
- }
- </script>
为了让大家理解的更清楚,特地截了图:
地图加载的时候会默认加载很多的Control用于和用户进行交互,Control类就比如刚刚使用的EditingToolBar,LayerSwitch等。假设将Control不进行初始加载,观察下面例子(代码在上面的基础上添加了一行)
这样的情况下,地图退化成一张图片。鼠标单击,双击,滚轮都不会有任何效果,当然,这种情况非常适合打印。效果图如下:
接下来介绍Control Class:
1. Navigation:主要用于处理与鼠标的交互,比如鼠标的单击,双击,拖拽等;(该Control不会在界面上有显示);
2. PanZoom :主要生成pan用于导航地图,包括上下左右箭头,以及放大缩小等操作。该Control有界面图标的显示,如下图:
3. ArgParser :这个Control有点蛋疼,英语有点看不懂,Map展示不明显。(允许图层缩放到一个具体的位置,关闭基于Url的图层),就说这么点,以后再说;
4. Attribution:该Control将会将Layer的属性添加到Map;使用该属性,需要在图层的option参数中添加attribution属性,该属性用于传递的参数是String类型的值。attribution有两个属性{separator}和{div},分别用来指定attribution属性的分隔符和存放attribution的元素,传递的参数是document.getElementById('id');[由于该属性的解释是在修改的过程中追加的,所以对代码只做展示了]
[javascript] view plaincopy
- <table id='pro'>
- </table>
[javascript] view plaincopy
- var wms_layer=new OpenLayers.Layer.WMS( //对其他图层也可以应用
- 'OpenLayer WMS',
- 'http://vmap0.tiles.osgeo.org/wms/vmap0',
- {layers:'basic,clabel,ctylabel,statelabel', transparent:true},
- {attribution:'OpenLayer WMS A',isBaseLayer:false,opacity:.5}
- );
[javascript] view plaincopy
- map.addControl(new OpenLayers.Control.Attribution({separator:'|', div:document.getElementById('pro')}));
效果图展示如下:
5. PanZoomBar:还是用图片来“聊感“一下吧!
6. Permalink:该Control被设定为连接到一个条目的单独存档页面,目前还没有发现它跟ArgParse有什么瓜葛(--当使用Permalink Control 时,ArgParse Control 将被自动加载到Map中)。
7. MousePosition:记录鼠标的坐标。这个可以在Map上明显的显示出来。其实,细想一下这个挺有用的,通过函数将两个点的x,y求出来,确定两点间的距离,如果,在虚假上经纬度,卧槽,那还不‘掉咋填’。
8. scaleLine :this Control refer to 比例尺。
9. OverviewMap: ??
10. KeyboardDefaults:??没有说明的就放到以后了
综合以上Control,贴出代码:
[javascript] view plaincopy
- <script type="text/javascript" >
- function init(){
- var navigation_control=new OpenLayers.Control.Navigation({});
- var Control_array=[
- navigation_control,
- new OpenLayers.Control.PanZoomBar({}),
- new OpenLayers.Control.LayerSwitcher({}),
- new OpenLayers.Control.Permalink(),
- new OpenLayers.Control.MousePosition({})
- ];
- //初始化map
- var map=new OpenLayers.Map(
- 'map_element',
- {
- controls:Control_array,
- progection:new OpenLayers.Projection('EPSG:900913'),
- displayProgection:new OpenLayers.Projection('EPSG:4326'),
- maxExtent:new OpenLayers.Bounds(-20037508,-20037508,20037508,20037508.34),
- maxResolution:156543.0339,
- uints:'m'
- }
- );
- var google_street=new OpenLayers.Layer.Google(
- 'Google street',
- {numZoomLevels:20}
- );
- var wms_layer=new OpenLayers.Layer.WMS(
- 'OpenLayer WMS',
- 'http://vmap0.tiles.osgeo.org/wms/vmap0',
- {layers:'basic,clabel,ctylabel,statelabel', transparent:true},
- {isBaseLayer:false,opacity:.5}
- );
- var vector_layer=new OpenLayers.Layer.Vector(
- 'editable vector'
- );
- map.addControl(new OpenLayers.Control.Attribution());
- map.addControl(new OpenLayers.Control.EditingToolbar(vector_layer));;
- map.addLayers([google_street,wms_layer,vector_layer]);
- map.addControl(new OpenLayers.Control.ScaleLine());
- var control_overmap=new OpenLayers.Control.OverviewMap();
- map.addControls(
- control_overmap,
- new OpenLayers.Control.KeyboardDefaults()
- );
- if(map.getCenter()){
- map.zoomToMaxExtent();
- }
- }
- </script>
显示的Map:
Summary:
使用addControls([,,]),将一个Control数组添加到map。
当然你也可以使用removeControl()将Control移除Map,移除的参数可以是指向Control的引用,也可以是数组的表示形式,如control[1],或者map.controls[index], 但是这种形式容易照成混乱,比如你删除任意Control之后,数组中的Control会进行重排序。
不知道大家有没有想过,如何检查Map中Control是否存在?
转自:http://blog.csdn.net/whynottrythis/article/details/12869783