0
点赞
收藏
分享

微信扫一扫

OpenLayers 2.10 Beginners Guide 阅读笔记(第一章)


    OpenLayers 2.10 Beginners Guide 是一本非常好的openlayer2入门书籍,英文水平要求不高,讲解通俗易懂,以下是个人总结珍贵笔记:

  代码中链接了一个Openlayers.js文件,需要自行下载openlayers2.13源码,取用里面的openlayers.js文件

入门小示例:

<!DOCTYPE html>
<html lang='zh-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 = new OpenLayers.Layer.WMS(
'OpenLayers WMS',
'http://vmap0.tiles.osgeo.org/wms/vmap3',
{
layers: 'basic'
},
{}
);
map.addLayer(wms);
if (!map.getCenter()) {
map.zoomToMaxExtent();
}
}
</script>
</head>
<body onload='init();'>
<div id='map' style='width: 800px; height: 600px;'>
</div>
</body>
</html>

重点注意:

1、一个地图至少要有一个图层,该图层用于布置底层瓦片

2、一个WMS图层,至少要传入一个键值对:layers,示例代码中传入了一个layers:’basic’,代表向WMS服务请求basic图层

3、为了使图层可见,最后必须给地图设置一个显示的层级,map.zoomTo…以下列举三种方式:

map.zoomToMaxExtent();   //最大程度展示

map.zoomToExtent(指定范围); 

map.setCenter(new OpenLayers.LonLat(x,y));

map.zoomTo(5);

4、放置地图的<div>的id属性值 === <script>中定义map时的第一个参数值

举报

相关推荐

0 条评论