一、OpenLayers初识
（1）开源JS框架，在浏览器中实现地图浏览与应用
（2）丰富底图资源：WMS，GoogleMap，Virtual
Earth，ArcGIS Server等，底图也可以是一张图片
（3）面向对象特性：Map，Layer，bounds
（4）地图控件（OpenLayers.Control）：鹰眼，TOC，缩放，比例尺等，Controls的类型分类，在Openlayers中多数Controls直接可以在地图上添加，比如Navigation（导航栏），第二类是需要放在Div元素中才能用，这点与地图map很相似，第三类需要放置在panel（面板）中的操作类似于网页HTML中button按钮，需要点击或绑定才能起作用，最后一类就是自定义类型的
（5）基础图层与业务图层：基础图层置于底层，业务图层顺序可以改变
（6）矢量图层（ Vector
Layer）在矢量图层上，能够展现各种几何对象，像点、线、面、矩形、标记等，能够通过绘制线、面来测量距离和面积。还可以在地图上绘制图形，然后按相应格式导出数据，这些数据能够被其他项目中采用。在OpenLayers中提供三种方法来渲染矢量图层：SVG、Canvas、VML
二、环境配置
（1）下载OpenLayers-2.8.zip，解压
（2）拷贝解压后的OpenLayers.js、img、lib、theme到IIS对应目录，如下图所示：
OpenLayers.js文件路径：http://localhost:80/OpenLayr/OpenLayers.js
（3）开启IIS“目录浏览”功能
三、代码实验
<%@ page
language=”java”pageEncoding=”UTF-8″%>
<!DOCTYPE HTML PUBLIC “-//W3C//DTDHTML 4.01
Transitional//EN”>
<html>
<head>
<title>OpenLayers:First
Course</title>
<script
src=”http://localhost:80/OpenLayr/OpenLayers.js”type=”text/javascript”></script>
<style
type=”text/css”>
#map
{
width:
100%;
height:
100%;
border:
1px solid black;
}
</style>
<script
defer=”defer” type=”text/javascript”>
function
init(){
//数据存储的左、下、右、上的范围，默认为NULL
var
bounds = new OpenLayers.Bounds(
-174,18.4,
-63.5,71
);
//创建一个OpenLayers.Map构造新的地图。
var
options = {
controls: [],
maxExtent: bounds,
maxResolution: 0.25,
projection:”EPSG:4326″,
units: ‘degrees’
};
var
map = new OpenLayers.Map(‘map’,
options);
layer
= new OpenLayers.Layer.ArcGIS93Rest( “ArcGIS
ServerLayer”,”http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer/export”,
{layers:”show:0,2″});
//将创建的图层对象添加到Map对象
map.addLayer(layer);
//显示地图
map.addControl(newOpenLayers.Control.PanZoomBar({div:$(‘nav’)}));
map.addControl(newOpenLayers.Control.MouseDefaults());
map.addControl(newOpenLayers.Control.Scale($(‘scale’)));
map.addControl(newOpenLayers.Control.MousePosition({element:$(‘position’)}));
map.addControl(new
OpenLayers.Control.LayerSwitcher());
map.addControl(new
OpenLayers.Control.OverviewMap());
map.zoomToMaxExtent();
}
</script>
</head>
<body
onload=”init()”>
<div
id=”map”></div>
</body>
</html>
