`
xujunJ2EE
  • 浏览: 71058 次
  • 性别: Icon_minigender_1
  • 来自: 南京
文章分类
社区版块
存档分类
最新评论

openlayers加载WMS

阅读更多
关于OpenLayers的资料,网上已经有很多例子了。我这里想说的是如何高效的使用OpenLayers。我们在访问WMS的时候,一般不会只请求一个图层,有可能会是很多图层。

我刚开始使用OpenLayers的时候,是这样使用的:

view plaincopy to clipboardprint?
<script type="text/javascript">  
 
var map, layer;  
 
function init(){  
 
    map = new OpenLayers.Map( 'map' );  
 
    map.addControl(new OpenLayers.Control.LayerSwitcher());  
 
    var bounds = new OpenLayers.Bounds(103.94971885,30.5749127,104.18353815,30.7504793);  
 
    layerblock = new OpenLayers.Layer.WMS( "topp:Block_region",  
 
      "http://localhost:8989/geoserver/wms" ,  
 
      {  
 
            layers: 'topp:Block_region',  
 
            srs: 'EPSG:4326',  
 
            style: '',  
 
            format: 'image/png',  
 
            tiled: 'true' 
 
            //transparent: false  
 
        },  
 
      {  
 
            maxExtent: bounds,  
 
            //maxResolution: 0.0041261434555042165,   
 
        projection: 'EPSG:4326',   
 
        buffer: 0 ,  
 
        reproject: true,  
 
        //opacity: 0.8,  
 
        isBaseLayer: true   
 
      }  
 
    );  
 
    layerpublic = new OpenLayers.Layer.WMS( "topp:PUBLIC_region",  
 
      "http://localhost:8989/geoserver/wms" ,  
 
      {  
 
        layers: 'topp:PUBLIC_region',  
 
            srs: 'EPSG:4326',  
 
            style: '',  
 
            //format: 'image/png',  
 
            tiled: 'true',  
 
            transparent: true 
 
        },  
 
      {  
 
            maxExtent: bounds,  
 
            //maxResolution: 0.0041261434555042165,   
 
        projection: 'EPSG:4326',   
 
        buffer: 0 ,  
 
        reproject: true,  
 
        //opacity: 0.8,  
 
        isBaseLayer: true   
 
      }  
 
    );  
 
    layerroad = new OpenLayers.Layer.WMS( "topp:Road_Regular_polyline",  
 
      "http://localhost:8989/geoserver/wms" ,  
 
      {  
 
        layers: 'topp:Road_Regular_polyline',  
 
            srs: 'EPSG:4326',  
 
            style: '',  
 
            //format: 'image/png',  
 
            tiled: 'true',  
 
            transparent: true 
 
        },  
 
      {  
 
            maxExtent: bounds,  
 
            //maxResolution: 0.0041261434555042165,   
 
        projection: 'EPSG:4326',   
 
        buffer: 0 ,  
 
        reproject: true,  
 
        //opacity: 0.8,  
 
        isBaseLayer: true   
 
      }  
 
    );  
 
    map.addLayers([layerblock,layerpublic,layerroad]);  
 
    map.zoomToExtent(bounds);  
 
}  
 
</script> 

<script type="text/javascript">

var map, layer;

function init(){

map = new OpenLayers.Map( 'map' );

map.addControl(new OpenLayers.Control.LayerSwitcher());

var bounds = new OpenLayers.Bounds(103.94971885,30.5749127,104.18353815,30.7504793);

layerblock = new OpenLayers.Layer.WMS( "topp:Block_region",

  "http://localhost:8989/geoserver/wms" ,

  {

layers: 'topp:Block_region',

srs: 'EPSG:4326',

style: '',

format: 'image/png',

tiled: 'true'

//transparent: false

},

  {

maxExtent: bounds,

//maxResolution: 0.0041261434555042165,

    projection: 'EPSG:4326',

    buffer: 0 ,

    reproject: true,

    //opacity: 0.8,

    isBaseLayer: true

  }

);

layerpublic = new OpenLayers.Layer.WMS( "topp:PUBLIC_region",

  "http://localhost:8989/geoserver/wms" ,

  {

    layers: 'topp:PUBLIC_region',

srs: 'EPSG:4326',

style: '',

//format: 'image/png',

tiled: 'true',

transparent: true

},

  {

maxExtent: bounds,

//maxResolution: 0.0041261434555042165,

    projection: 'EPSG:4326',

    buffer: 0 ,

    reproject: true,

    //opacity: 0.8,

    isBaseLayer: true

  }

);

layerroad = new OpenLayers.Layer.WMS( "topp:Road_Regular_polyline",

  "http://localhost:8989/geoserver/wms" ,

  {

    layers: 'topp:Road_Regular_polyline',

srs: 'EPSG:4326',

style: '',

//format: 'image/png',

tiled: 'true',

transparent: true

},

  {

maxExtent: bounds,

//maxResolution: 0.0041261434555042165,

    projection: 'EPSG:4326',

    buffer: 0 ,

    reproject: true,

    //opacity: 0.8,

    isBaseLayer: true

  }

);

map.addLayers([layerblock,layerpublic,layerroad]);

map.zoomToExtent(bounds);

}

</script>view plaincopy to clipboardprint?
<FONT face=Arial>但是,我发现这样访问的速度极其的慢。然后,又把这个例子改造成以下的样子,发现,速度提高很多。</FONT> 

但是,我发现这样访问的速度极其的慢。然后,又把这个例子改造成以下的样子,发现,速度提高很多。view plaincopy to clipboardprint?
<FONT face=Arial><PRE class=jscript name="code"><script type="text/javascript">  
 
    var map, layer;  
 
    function init(){  
 
        map = new OpenLayers.Map( 'map' );  
 
        map.addControl(new OpenLayers.Control.LayerSwitcher());  
 
        var bounds = new OpenLayers.Bounds(103.94971885,30.5749127,104.18353815,30.7504793);  
 
        layerpublic = new OpenLayers.Layer.WMS( "region",  
 
            "http://localhost:8989/geoserver/wms" ,  
 
            {  
 
                layers: 'topp:Block_region,topp:PUBLIC_region,topp:Road_Regular_polyline',  
 
                srs: 'EPSG:4326',  
 
                style: '',  
 
                format: 'image/png',  
 
                tiled: 'false',  
 
                transparent: false 
 
            },  
 
            {  
 
                maxExtent: bounds,   
 
                //maxResolution: 0.0041261434555042165,   
 
                projection: 'EPSG:4326',   
 
                buffer: 0,  
 
                reproject: true,  
 
                //opacity: 0.5,  
 
                isBaseLayer: true                      
 
            }  
 
    );  
 
    map.addLayer(layerpublic);  
 
    map.zoomToExtent(bounds);  
 
    }  
 
</script></PRE>  
</FONT> 

view plaincopy to clipboardprint?<script type="text/javascript">         var map, layer;         function init(){             map = new OpenLayers.Map( 'map' );             map.addControl(new OpenLayers.Control.LayerSwitcher());             var bounds = new OpenLayers.Bounds(103.94971885,30.5749127,104.18353815,30.7504793);             layerpublic = new OpenLayers.Layer.WMS( "region",                 "http://localhost:8989/geoserver/wms" ,                 {                     layers: 'topp:Block_region,topp:PUBLIC_region,topp:Road_Regular_polyline',                     srs: 'EPSG:4326',                     style: '',                     format: 'image/png',                     tiled: 'false',                     transparent: false                },                 {                     maxExtent: bounds,                      //maxResolution: 0.0041261434555042165,                      projection: 'EPSG:4326',                      buffer: 0,                     reproject: true,                     //opacity: 0.5,                     isBaseLayer: true                                     }         );         map.addLayer(layerpublic);         map.zoomToExtent(bounds);         }     </script>  <script type="text/javascript">

var map, layer;

function init(){

map = new OpenLayers.Map( 'map' );

map.addControl(new OpenLayers.Control.LayerSwitcher());

var bounds = new OpenLayers.Bounds(103.94971885,30.5749127,104.18353815,30.7504793);

layerpublic = new OpenLayers.Layer.WMS( "region",

"http://localhost:8989/geoserver/wms" ,

{

layers: 'topp:Block_region,topp:PUBLIC_region,topp:Road_Regular_polyline',

srs: 'EPSG:4326',

style: '',

format: 'image/png',

tiled: 'false',

transparent: false

},

{

maxExtent: bounds,

//maxResolution: 0.0041261434555042165,

projection: 'EPSG:4326',

buffer: 0,

reproject: true,

//opacity: 0.5,

isBaseLayer: true                   

}

);

map.addLayer(layerpublic);

map.zoomToExtent(bounds);

}

</script>
view plaincopy to clipboardprint?
<FONT face=Arial>这样看,就明白了,最上面的是请求了三个WMS服务,下面的只请求了一个WMS服务。  
</FONT> 

这样看,就明白了,最上面的是请求了三个WMS服务,下面的只请求了一个WMS服务。
view plaincopy to clipboardprint?
<PRE class=jscript name="code"> </PRE> 


本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/mach365/archive/2008/07/09/2627750.aspx
分享到:
评论

相关推荐

    openlayers加载WMS服务

    本文将详细探讨如何使用OpenLayers加载WMS服务,以及这一过程中的关键概念和技术。 ### OpenLayers简介 OpenLayers 提供了一个丰富的API,用于处理各种地图操作,如图层管理、标记添加、图层叠加、地理坐标转换等。...

    openlayers加载arcgis发布的OGC WMS服务

    OpenLayers 是一个流行...总之,通过OpenLayers加载ArcGIS发布的OGC WMS服务,可以让非ArcGIS用户利用丰富的ArcGIS地图数据,实现跨平台的地图应用。理解这些概念和实践操作,对于构建基于Web的地理信息系统至关重要。

    openlayers加载本地切片、高亮显示

    在这个主题中,我们将深入探讨如何利用OpenLayers加载本地切片,并实现高亮显示。 首先,我们需要理解什么是地图切片。地图切片是一种将大尺寸地图分割成多个小块(通常为正方形)的方法,便于更高效地在网络上传输...

    使用openlayers加载离线地图实例

    本实例将详细介绍如何利用OpenLayers加载离线地图,并通过mui将其打包成移动应用。 首先,理解OpenLayers的核心概念至关重要。OpenLayers是一个开源的JavaScript库,它允许开发者在网页中嵌入地图,支持多种地图...

    openlayers 调用 arcgis server wms服务简单图解

    运行修改后的OpenLayers示例,你将看到ArcGIS Server WMS服务提供的地图层被成功加载到网页中。如果想要添加更多图层,只需重复上述步骤,为每个图层调整相应的参数。 此外,OpenLayers还支持其他服务类型,如REST...

    openlayers加载静态图片地图

    本教程将详细介绍如何使用OpenLayers加载静态图片地图,并探讨其流畅操作、可控显示范围和等级设置。 首先,为了加载静态图片,我们需要准备好图片资源。这些图片通常是一系列按照特定比例尺分块的图像,每一块对应...

    OpenLayers加载缩放控件使用方法详解

    本文实例为大家分享了OpenLayers加载缩放控件使用的具体代码,供大家参考,具体内容如下 1、一般的地图打开都有放大、缩小和全图的导航条,以便于用户对地图的查看,下面我们将在OpenLayers中实现这一功能; 2、在...

    openlayers加载本地离线地图瓦片(重新发2018-10-23)

    本文将详细讲解如何利用OpenLayers加载本地离线地图瓦片,这在没有网络连接或者需要保障地图数据隐私的情况下尤其有用。我们将讨论以下几个关键知识点: 1. **OpenLayers基本概念**:OpenLayers是一个JavaScript库...

    openlayers加载在线天地图.zip

    本教程将详细介绍如何使用OpenLayers加载在线天地图。 一、OpenLayers基础知识 OpenLayers 提供了一套完整的API,用于构建动态地图应用程序。它支持多种地图操作,如缩放、平移、图层控制等。同时,OpenLayers 支持...

    openlayers3切换wms服务底图控件

    它提供了丰富的地图操作和可视化功能,包括加载不同类型的图层(如WMS、Tile、Vector等)、缩放、平移、测量等。 **3. 创建WMS图层** 在ol3中,使用`ol.source.TileWMS`或`ol.source.ImageWMS`来创建WMS图层。例如...

    OpenLayer 3加载wms示例

    OpenLayer 3加载wms示例,包括几个常用事件和动画的使用。

    从WMS服务器获取信息1

    11. **OpenLayers的其他功能**:OpenLayers除了支持WMS外,还支持WFS(Web Feature Service)等其他OGC服务,可以创建矢量图层,实现地图的动态绘制、编辑和查询等功能。 总结来说,本文介绍了如何使用OpenLayers与...

    openlayers教程

    openlayers的类与方法.doc OpenLayers技术研究参考文档...Openlayers加载wms.doc openlayers介绍.ppt openlayers开发.doc OpenLayers心得文档.doc openlayers资料1.doc OpenLayer源代码总体结构分析.doc OpenLayers.pdf

    openlayers5加载天地图.zip

    在"openlayers5加载天地图.zip"这个压缩包中,我们可以期待找到一个示例项目,展示了如何利用OpenLayers 5来加载和展示天地图的数据。天地图是中国的一个官方基础地理信息服务平台,提供了丰富的地图服务,包括地形...

    解决openlayers跨域访问的解决方案

    2. **配置OpenLayers**: 如果地图服务支持JSONP,你可以在OpenLayers的WMS层配置中设置`crossOrigin`属性为`'anonymous'`。对于CORS,服务器必须返回`Access-Control-Allow-Origin:*`或指定你的源。 ```javascript...

    openlayers3-切换WMSsupermap服务底图

    OpenLayers 3通过构建不同的层(Layers)来展示地图内容,其中WMS层用于加载通过WMS协议获取的地图服务。创建一个WMS层需要指定服务URL、图层名以及服务版本等信息。例如: ```javascript var wmsLayer = new ol....

    openlayers资料收集

    下面是一个使用 OpenLayers 加载 WMS 和 GML 文件的例子: ```javascript // 导入 OpenLayers.js &lt;script src="../lib/OpenLayers.js"&gt; var lon = 5; // x 轴坐标 var lat = 40; // y 轴坐标 var zoom = 5; //...

    openlayers5加载谷歌地图.zip

    在本案例中,我们讨论的是如何利用OpenLayers 5来加载谷歌地图。对于初学者来说,这是一个很好的起点,因为OpenLayers提供了丰富的API和强大的功能。 首先,我们要了解OpenLayers 5的基本概念。OpenLayers 5的核心...

    openlayers 调用百度地图

    同时,由于动态加载地图的方式可能会有性能问题,实际应用中可能需要考虑缓存策略或优化加载过程。 总的来说,将OpenLayers与百度地图集成,可以结合两者的优点,为用户提供更丰富、更个性化的地图体验。但同时,这...

    openlayers4.0+arcgis10.1+token

    通过OpenLayers,开发者可以轻松地加载各种地图服务,如WMS、WMTS、TMS等,并支持矢量数据的展示和操作。 **ArcGIS 10.1** ArcGIS是由Esri公司开发的一套全面的GIS软件解决方案,涵盖了数据创建、编辑、分析、发布...

Global site tag (gtag.js) - Google Analytics