OpenLayers 学习笔记 (1)

1. 环境准备：
下载好Openlayers包之后，只需要把Openlayers.js，img文件夹，theme文件夹复制到同一个目录即可。

2. 基本的页面调用方式：（通过下面的例子）

<html>
<head>
<title>Test OpenLayers</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="openlayers/OpenLayers.js"></script>
<script defer="defer" type="text/javascript">
var map;

function init(){
    // 创建一个地图map，参数为现实地图的div名字
    map = new OpenLayers.Map('map');

    // 创建一个WMS图层layer
    layer = new OpenLayers.Layer.WMS(
        "深圳行政区域",                          // 图层的名字
        "http://geoserver.dev.gehouse.cn/wms", // WMS服务器的URL
        {layers: "gehouse_sz_2004:sz_zone"}     // 图层的各种选项option的key和value
    );

    // 将layer图层加入到地图中
    map.addLayer(layer);

    // 添加图层切换控件
    map.addControl(new OpenLayers.Control.LayerSwitcher());

    // 确定地图的中心点
    map.setCenter(new OpenLayers.LonLat(-100, 60), 3);
}
</script>
<style type="text/css">
#map {
    width: 100%;
    height: 512px;
    border: 1px solid black;
    background-color: blue;
}
</style>
</head>
<body onload="init()">
    <h1>OpenLayers Test</h1>
    
    <div id="map"></div>
</body>
</html>

posted @ 2007-11-13 17:13 kylindai 阅读(1826) 评论(0) 编辑收藏举报

刷新页面返回顶部

kylin@world

OpenLayers 学习笔记 (1)

公告