OpenLayers基础知识Q?/strong>
OpenLayers是一个开源的js框架Q用于在您的览器中实现地图览的效果和基本的zoomQpan{功能。OpenLayers支持的地图来?
包括了WMSQGoogleMapQKaMapQMSVirtualEarth{等Q您也可以用单的囄作ؓ源,在这一斚wOPenLayers提供?
非常多的选择?
要用OpenLayersQ您可以到它的官方网站http://www.openlayers.org下蝲他的压羃
包,解压后可以看到其中的一些目录和
文g。拷贝dist目录下的OpenLayer.js、根目录下的lib目录、根目录下的img目录C|站的scripts目录下(当然Q这个只是例
子,您网站的目录l构您自p得算Q只要保证OpenLayers.jsQ?libQ?img在同一目录中即可)?
OpenLayers中最重要?个对象Map和Layer.
OpenLayers.Map的实体化ҎQ?br />
var map = new OpenLayers.Map("map");
q里参数"map"对应面中显CMap地图的DIV的id名称?br />
OpenLayers.Layer为创建图层对?OpenLayers提供了很多图层的扩展Q?br />
* OpenLayers.Layer.Image
* OpenLayers.Layer.HTTPRequest
*
OpenLayers.Layer.Grid
* OpenLayers.Layer.WMS
*
OpenLayers.Layer.KaMap
* OpenLayers.Layer.EventPane
*
OpenLayers.Layer.Google
* OpenLayers.Layer.VirtualEarth
*
OpenLayers.Layer.Markers
* OpenLayers.Layer.Text
*
OpenLayers.Layer.GeoRSS
* OpenLayers.Layer.Boxes
*
OpenLayers.Layer.TMS
Imagecd装一个实际图象作为图曑ֆ?
HTTPRequestcd以接收一个动态生成的囄Q你可以通过HTTPRequestcȝ参数?
服务器发送参?
GridcLHTTPRequestcȝ子类Q提供更加详l的Ҏ
WMScȝ于连接WMS服务器以获得图象
KaMap
cȝ于连接MapServer
EventPanecM为用于接收用h作的囑ֱ
Googlecȝ于从Google获得图象Q它仍然需
要你从Google获得API KEYQƈ且include
VirtualEarthcȝ于操作VirtualEarth的图?
Markers
cȝ于生成接收和昄用户本地标记的图?
Textcȝ于接收CSV文g
GeoRSScLMarkercȝ子类Q用于封装接?
GeoRSSq在囑ֱ中作出marker
Boxes同样也是Markercȝ子类Q可以用div来做markerQ而非image
TMS
用于接收TMS服务器的地图
OpenLayersq提供了丰富的ControlcMؓ地图览d一些工Pl承自OpenLayers.Controlc?
*
OpenLayers.Control.LayerSwitcher
* OpenLayers.Control.MouseDefaults
*
OpenLayers.Control.MousePosition
* OpenLayers.Control.MouseToolbar
*
OpenLayers.Control.OverviewMap
* OpenLayers.Control.PanZoom
*
OpenLayers.Control.PanZoomBar
* OpenLayers.Control.Permalink
*
OpenLayers.Control.Scale
q些cȝ实例会在地图览?#8220;H口”上增加一些工h或是“按钮”Q增加互动性和?
能性?
OpenLayers对常用的数据l构q行了封?
# OpenLayers.LonLat
#
OpenLayers.Size
# OpenLayers.Pixel
# OpenLayers.Bounds以便于操作?br />
现在写个最单的例子做记录:
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>WMS MAP INIT</title>
<script src="http://localhost:8080/geoserver/openlayers/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(
17831.799, 91085.208,
18221.799, 91287.26
);
//创徏一个OpenLayers.Map构造新的地图?/span>
var options = {
controls: [],
maxExtent: bounds,
maxResolution: 1.5234375,
projection: "EPSG:4326",
units: 'degrees'
};
var map = new OpenLayers.Map('map', options);
//创徏一个图层信?/span>
var layer = new OpenLayers.Layer.WMS("State", "http://127.0.0.1:8080/geoserver/wms", {
layers: "dwg:0_line"
});//
//创建的囑ֱ对象d到Map对象
map.addLayer(layer);
//昄地图
map.zoomToMaxExtent();
}
</script>
</head>
<body onload="init()">
<div id="map"></div>
</body>
</html>

]]>