OpenLayer(Sphercial Mercator)

来源:互联网 发布:太阳花 知乎 编辑:程序博客网 时间:2024/05/22 04:27

        科普一下基本知识:

        解释: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的例子:

//初始化mapvar 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脚本)

<script type="text/javascript" >function init(){//初始化mapvar 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');[由于该属性的解释是在修改的过程中追加的,所以对代码只做展示了]

        

<table id='pro'></table>
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});
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,贴出代码:

<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({})];//初始化mapvar 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是否存在?


原创粉丝点击