1、openlayers可以同时定义很多个layer(图层),这些layer之间是相互独立的,当然layer越少性能越好,最大能定义的layer数量取决于用户机器的性能,通常大型的地图(如google地图)就定义了非常少的layer。
2、两种图层:base layer 和 overlay layer
base layer是每一个地图必须至少要定义的一个基础图层,除了基础图层以外的图层都是在其之上的图层,都属于overlay layer(覆盖图层)
3、base layer的设置:基础图层默认是你添加的第一个图层,你也可以通过设置isBaseLayer值为true来手动设置某个图层为base layer;同一时间只能有一个base layer,当你设置某个图层为base layer时,原先的base layer便不再是base layer了
4、layer的顺序:后添加的layer默认在最上层,layer的顺序可以改变,但是base layer一定是最底层的那个图层
<!DOCTYPE html>
<html lang="ch-cn">
<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');
var wms_layer_map = new OpenLayers.Layer.WMS('Base layer', 'http://vmap0.tiles.osgeo.org/wms/vmap3', {layers: 'basic'}, {isBaseLayer: true});
var wms_layer_labels = new OpenLayers.Layer.WMS('Location Labels', 'http://vmap0.tiles.osgeo.org/wms/vmap3', {
layers: 'clabel,ctylabel,statelabel',
transparent: true
}, {opacity: 0.5});
//也可以一次性向wms服务请求所有需要的图层放在我们自定义的一个图层内
// wms_layer_map = new OpenLayers.Layer.WMS('Base layer', 'http://vmap0.tiles.osgeo.org/wms/vmap3',
// {layers: 'basic,clabel,ctylabel,statelabel'},
// {isBaseLayer: true}
// );
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({})); //右上角的加号,点开可以选择是否显示某个覆盖图层
map.setCenter(new OpenLayers.LonLat(118.34, 32.06));
map.zoomTo(1);
if (!map.getCenter()) {
map.zoomToMaxExtent();
}
}
</script>
</head>
<body onload="init()">
<div id='map' style="height: 800px; width: 1900px"></div>
</body>
</html>
5、一些参数
opacity 透明度([0,1]) | isBaseLayer 是否为基础图层(true/false) |
visibility 设置是否可见(true/false) |
|
displayInlayerSwitcher(true/false):设置是否在图层开关表单里面显示 |
6、瓦片(tile)的由来:如果将一整张地图作为一个图片返回,层级变大时,这张图片会是一个巨大的图片文件,因此将地图且分为多个小瓦片,每次改变层级时返回对应的界面内需要展示的少量瓦片,默认256*256像素
7、视口(viewport)的定义:整块地图中你所看到的部分,也就是后台返回给你的瓦片拼接成的整体部分
8、Layer.Grid (网格):该类负责安排好各个tile瓦片所放的位置,WMS就是继承自它
9、Layer.Image:这也是一个图层类,可以用于构建非真实地图的图层
name:图层名 |
url:图片路径 |
extent:{OpenLayers.Bounds} 图片最大边界范围 |
size:{OpenLayers.Size} 像素大小 |
options:其他设置 |
<!DOCTYPE html>
<html lang="ch-cn">
<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');
var image_layer = new OpenLayers.Layer.Image(
'Wallpaper',
'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3068877173,891597122&fm=27&gp=0.jpg',
new OpenLayers.Bounds(-180, -112.5, 180, 112.5),
new OpenLayers.Size(1920, 1200),
{
numZoomLevels: 7,
maxResolution: .625
}
);
var image_layer_2 = new OpenLayers.Layer.Image(
'Wallpaper 2',
'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=198098317,3843373275&fm=27&gp=0.jpg',
new OpenLayers.Bounds(-180, -112.5, 180, 112.5),
new OpenLayers.Size(1920, 1200),
{
numZoomLevels: 7,
maxResolution: .625,
isBaseLayer: false,
opacity: 0.3
}
);
map.addLayers([image_layer, image_layer_2]);
map.addControl(new OpenLayers.Control.LayerSwitcher({})); //右上角的加号,点开可以选择是否显示某个覆盖图层
if (!map.getCenter()) {
map.zoomToMaxExtent();
}
}
</script>
</head>
<body onload="init()">
<div id='map' style="height: 800px; width: 1900px"></div>
</body>
</html>
10、Layer.TileCache 瓦片缓存机制
11、Layer.Vector 绘制各种要素,包括点,多边形等
12、Layer.WFS 不建议使用
13、Layer.WMS 继承自Layer.Grid, 是常用类
14、layer的一些方法
setName |
addOptions(option) 添加额外的option配置 |
redraw() 当向Vector图层添加图形要素时,则需要调用此方法,返回true表示添加成功 |
getVisibility() 判断是否可见 |
setVisibility(visibility) 设置是否可见 |
calculateInRange() 本图层分辨率是否在地图分辨率可接受范围内 |
setIsBaseLayer(is_base) 设置为基底图层 |
setOpacity(opacity) 设置透明度 |