OpenLayers开发:调用栅格数据

     栅格图像是GIS系统中非常重要的一类数据。OpenLayers可以集成调用多种不同来源的栅格图像,比如GoogleMaps、Bing Maps、OpenStreetMap以及任何提供了WMS规范的服务。

     在调用栅格图像的过程中,为提高地图浏览速度,获得良好的用户体验,增强客户端与服务端的交互能力,应尽量使用瓦片地图,即使用缓存过的地图。本章介绍了栅格图层的使用,重点介绍WMS图层的调用。

使用Google Maps

OpenLayers调用GoogleMaps imagery的方法实际上是对GoogleMaps API进行了封装,使用过程包括以下步骤:

1. 创建HTML文件,引入OpenLayers开发类库。

2. HTML文件中加入以下对GoogleMaps API引用:

<scripttype=”text/javascript”src=”http://maps.google.com/maps/api/js?v=3.5&sensor=false”></script>

3. 添加一个包含地图的div元素:

<!– Map DOM element –>

<div id=”google_maps”style=”width: 100%; height: 100%;”></div>

4. 编写javascript脚本代码,创建地图实例,并添加图层控制列表控件,如下:

<!– The magic comes here–>

<scripttype=”text/javascript”>

//Create the map using the specified DOM element

varmap = new OpenLayers.Map(“google_maps “);

map.addControl(newOpenLayers.Control.LayerSwitcher());

5. 创建GoogleMaps图层,并添加到地图:

varstreets = new OpenLayers.Layer.Google(“Google Streets”, {

numZoomLevels:20

});

varphysical = new OpenLayers.Layer.Google(“Google Physical”, {

type:google.maps.MapTypeId.TERRAIN

});

varhybrid = new OpenLayers.Layer.Google(“Google Hybrid”, {

type:google.maps.MapTypeId.HYBRID, numZoomLevels: 20

});

varsatellite = new OpenLayers.Layer.Google(“Google Satellite”, {

type:google.maps.MapTypeId.SATELLITE, numZoomLevels: 22

});

map.addLayers([physical,streets, hybrid, satellite]);

6. 最后设置地图中心:

map.setCenter(newOpenLayers.LonLat(0, 0), 2);

</script>

运行结果如下:

使用Bing Maps

使用BingMaps之前,应该首先到官网上注册,并获得一个API密钥,在以后的每次请求中都要验证该密钥。

1. 创建HTML文件,引入OpenLayers开发类库。

2. 添加一个包含地图的div元素:

<div id=”ch2_bing”style=”width: 100%; height: 100%;”></div>

3. 编写javascript脚本代码,创建地图实例,并添加图层控制列表控件,如下:

<scripttype=”text/javascript”>

//Create the map using the specified DOM element

varmap = new OpenLayers.Map(“ch2_bing”);

map.addControl(newOpenLayers.Control.LayerSwitcher());

4. 创建Bing图层,并添加到地图:

varbingApiKey = “your_bing_API_must_be_put_here“;

varroad = new OpenLayers.Layer.Bing({

name:”Road”,

type:”Road”,

key:bingApiKey

});

       varhybrid = new OpenLayers.Layer.Bing({

name:”Hybrid”,

type:”AerialWithLabels”,

key:bingApiKey

});

varaerial = new OpenLayers.Layer.Bing({

name:”Aerial”,

type:”Aerial”,

key:bingApiKey

});

map.addLayers([road,hybrid, aerial]);

map.setCenter(newOpenLayers.LonLat(0, 0), 2);

</script>

运行结果如下:

调用WMS图层

WebMap Service (WMS)是OpenGeospatial Consortium (OGC)的服务标准之一,规定了地图服务器以统一的方式发布地图服务,客户端则严格按照该方式访问地图服务。关于WMS服务的详细信息可以参照http://en.wikipedia.org/wiki/Web_Map_Service

BeyonServer便是提供了WMS标准服务的地图服务器,下面以BeyonServer提供的WMS服务为例说明客户端如何调用WMS图层。

1. 创建HTML文件,引入OpenLayers开发类库。

2. 添加一个包含地图的div元素:

<div id=”wms_layer”style=”width: 100%; height: 100%;”></div>

3.编写javascript脚本代码,创建地图实例:

//Create the map using the specified DOM element

varmap = new OpenLayers.Map(“wms_layer”);

4.增加两个WMS图层,第一个是基础图层,第二是普通的叠加图层,如下:

//添加WMS图层

varfirstwms = new OpenLayers.Layer.WMS(“中国”,

“http://map.chinalbs.org/beyonserver/gwc/service/wms”,

{

layers:’china’,

format:’image/png8′

},

    {

        isBaseLayer: true

    }

    );

//添加第二个WMS图层

varsecondwms = new OpenLayers.Layer.WMS(“中国注记”,

“http://map.chinalbs.org/beyonserver/gwc/service/wms”,

{

layers:”beyondb:b0100p014″,

format:’image/png’

},

{

isBaseLayer:false

});

map.addLayers([firstwms,secondwms]);

这里用到了OpenLayers.Layer.WMS类,实例化该类的构造方法如下:

new OpenLayers.Layer.WMS(name,url, params, options)

其中,

l  name参数表示图层名称,是客户端所看到的图层名称,避免与地图服务器上的图层名称混淆

l  url参数指向WMS服务器地址

l  params参数包含了WMS请求的具体参数,例如图层或图层组名称、格式、样式等,详细信息可查阅WMS标准

l  options参数包含了WMS图层有关的可选项

5.最后,添加图层列表控件,设置地图中心。

//Add layer switcher control

map.addControl(newOpenLayers.Control.LayerSwitcher());

//Set the center of the view

map.setCenter(newOpenLayers.LonLat(116.39, 39.91), 8);

运行结果如下:


转载自:https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/46878219.jpg

You may also like...

退出移动版