OpenLayers系列(2)——多个图层
2012-10-24 15:35
246 查看
工具的使用步骤请参考
OpenLayers系列(1)——入门示例 一节。
多图层地图的构成
多图层的地图由两种图层构成:base layer 和overlay layer 。
Base layer: 任何一个地图中都存在至少一个图层,否则你的应用将呈现空白,我们把最基本的一个图层称为base layer。Base layer不止一种或一个,你可以选择任意一个图层作为应用的base layer,但是任何时候base layer都只能有一个是turn on的,如果程序在打开一个base layer时发现已经存在另一个打开着的base layer,则应用会关掉之前的base layer而使用最近打开的一个。所以base layer在地图中的概念就像是(radio
button)一个单选按钮。
Overlay layer: 非base layer的图层统称为overlay layer。应用中可使用并同时打开任何多的overlay layer,你可以使用参数设置该层是否显示。Overlay layer在地图中的概念就像是(checkbox)多选框。
以上概念你可以在OpenLayers提供的一个图层切换器上形象地看到。
示例1
以下是一个包含两个图层和图层切换器的示例,该示例在base layer上加上了国家,城市,洲名层:
打开图层切换器:
示例1代码:
示例2
示例2主要展示部分图层参数的效果,该示例一共有5个图层,第个图层有不同效果,可以不断放大查看。
代码如下:
OpenLayers系列(1)——入门示例 一节。
多图层地图的构成
多图层的地图由两种图层构成:base layer 和overlay layer 。
Base layer: 任何一个地图中都存在至少一个图层,否则你的应用将呈现空白,我们把最基本的一个图层称为base layer。Base layer不止一种或一个,你可以选择任意一个图层作为应用的base layer,但是任何时候base layer都只能有一个是turn on的,如果程序在打开一个base layer时发现已经存在另一个打开着的base layer,则应用会关掉之前的base layer而使用最近打开的一个。所以base layer在地图中的概念就像是(radio
button)一个单选按钮。
Overlay layer: 非base layer的图层统称为overlay layer。应用中可使用并同时打开任何多的overlay layer,你可以使用参数设置该层是否显示。Overlay layer在地图中的概念就像是(checkbox)多选框。
以上概念你可以在OpenLayers提供的一个图层切换器上形象地看到。
示例1
以下是一个包含两个图层和图层切换器的示例,该示例在base layer上加上了国家,城市,洲名层:
打开图层切换器:
示例1代码:
<!DOCTYPE html> <html lang='en'> <head> <meta charset='utf-8' /> <title>My OpenLayers Map</title> <script type='text/javascript' src='OpenLayers.js'></script> <script type='text/javascript'> var map; function init() { map = new OpenLayers.Map('map_element', {});//初始化map对象 var wms_layer_map = new OpenLayers.Layer.WMS( //定义第一个层 'Base layer', 'http://vmap0.tiles.osgeo.org/wms/vmap0', {layers: 'basic'},//向map server请求basic层 {isBaseLayer: true}//设置该层为basic层 ); var wms_layer_labels = new OpenLayers.Layer.WMS(//定义第二个层 'Location Labels', 'http://vmap0.tiles.osgeo.org/wms/vmap0', {layers: 'clabel,ctylabel,statelabel', transparent: true}, {opacity: .5}//设置透明度为50% ); map.addLayers([wms_layer_map, wms_layer_labels]);//以数组形式将多个层加入map对象 map.addControl(new OpenLayers.Control.LayerSwitcher({}));//添加一个层切换器 if(!map.getCenter()){ map.zoomToMaxExtent(); } } </script> </head> <body onload='init();'> <div id='map_element' style='width: 500px; height: 500px;'> </div> </body> </html>
示例2
示例2主要展示部分图层参数的效果,该示例一共有5个图层,第个图层有不同效果,可以不断放大查看。
代码如下:
<!DOCTYPE html> <html lang='en'> <head> <meta charset='utf-8' /> <title>My OpenLayers Map</title> <script type='text/javascript' src='OpenLayers.js'></script> <script type='text/javascript'> var map; function init() { map = new OpenLayers.Map('map_element', {}); var wms_layer_map = new OpenLayers.Layer.WMS(//base layer 'Base layer', 'http://vmap0.tiles.osgeo.org/wms/vmap0', {layers: 'basic'}, {isBaseLayer: true} ); var wms_layer_labels = new OpenLayers.Layer.WMS(//国家,洲,城市名层 'Location Labels', 'http://vmap0.tiles.osgeo.org/wms/vmap0', {layers: 'clabel,ctylabel,statelabel', transparent: true}, {visibility: false, opacity:0.5}//默认不显示该层(但可以图层切换器中打开) ); var wms_state_lines = new OpenLayers.Layer.WMS(//洲界层 'State Line Layer', 'http://labs.metacarta.com/wms/vmap0', {layers: 'stateboundary', transparent: true}, {displayInLayerSwitcher: false, //设置该层不显示在图层切换器中 minScale: 13841995.078125}//设置一个最小尺度,只有当地图在缩放时达到这个最小尺度时才显示该图层信息 ); var wms_water_depth = new OpenLayers.Layer.WMS( 'Water Depth', 'http://labs.metacarta.com/wms/vmap0', {layers: 'depthcontour', transparent: true}, {opacity:0.8} ); var wms_roads = new OpenLayers.Layer.WMS( 'Roads', 'http://labs.metacarta.com/wms/vmap0', {layers: 'priroad,secroad,rail', transparent: true}, {transistionEffect:'resize'}//让该图层在缩放时呈现重新计算的效果 ); map.addLayers([ wms_layer_map, wms_layer_labels, wms_state_lines, wms_water_depth, wms_roads]); map.addControl(new OpenLayers.Control.LayerSwitcher({})); if(!map.getCenter()){ map.zoomToMaxExtent(); } } </script> </head> <body onload='init();'> <div id='map_element' style='width: 500px; height: 500px;'> </div> </body> </html>
相关文章推荐
- GeoServer中一个shape发布多个图层时出现调用空白的问题及解决办法
- OpenLayers 3 之 地图矢量图层(ol.layer.Vector)详解,openlayersvector
- [转]Ultra Fractal教程系列32——关于变换的学习07——缩放图层
- OpenLayers中layer图层概念和实践
- OpenLayers 3 之 地图矢量图层(ol.layer.Vector)详解,openlayersvector
- 一、ArcGIS Runtime SDK for iOS 100.2.1教程系列之底图与动态图层加载
- ArcGIS API for JavaScript开发教程系列(三)之图层列表控件
- openlayers入门开发系列之图层控制
- C#程序集系列05,让程序集包含多个module
- OpenLayers-Vector图层上添加Feature
- OpenLayers中的图层
- ArcGIS for iOS 开发系列(6) – 基础篇-图层-静态图层
- OpenLayers中的图层(转载)
- [转]Ultra Fractal教程系列18——如何使用图层01——图层面板
- [置顶] arcgis api for js入门开发系列七图层控制(含源代码)
- OpenLayers开发:调用矢量图层
- OpenLayers系列(3)——使用第三方地图API(GoogleMap),聚合多个地图数据
- 使用geoserver的wms功能发布地图(多个图层)
- arcgis-“一个或多个已经添加图层的范围与关联空间参考不一致”“Arcmap不能绘制一个或者多个图层”
- 【Silverlight】Bing Maps学习系列(四):使用图钉层(Pushpin layer)及地图图层(MapLayer) 推荐