当前位置: 代码迷 >> Web前端 >> OpenLayers学习1
  详细解决方案

OpenLayers学习1

热度:243   发布时间:2012-08-26 16:48:06.0
OpenLayers学习一

http://www.blogjava.net/xtitan/archive/2010/03/16/315568.html

?

OpenLayers基础知识:
????? OpenLayers是一个开源的js框架,用于在您的浏览器中实现地图浏览的效果和基本的zoom,pan等功能。OpenLayers支持的地图来源 包括了WMS,GoogleMap,KaMap,MSVirtualEarth等等,您也可以用简单的图片作为源,在这一方面OPenLayers提供了 非常多的选择。
????? 要使用OpenLayers,您可以到它的官方网站http://www.openlayers.org下载他的压缩 包,解压后可以看到其中的一些目录和 文件。拷贝dist目录下的OpenLayer.js、根目录下的lib目录、根目录下的img目录到你网站的scripts目录下(当然,这个只是例 子,您网站的目录结构您自己说得算,只要保证OpenLayers.js,/lib,/img在同一目录中即可)。
????? OpenLayers中最重要的2个对象Map和Layer.
????? OpenLayers.Map的实体化方法:
???????? var map = new OpenLayers.Map("map");
???????? 这里参数"map"对应页面中显示Map地图的DIV的id名称。
???? OpenLayers.Layer为创建图层对象,OpenLayers提供了很多图层的扩展:
???????? * 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

???????? Image类封装一个实际图象作为图曾内容
???????? HTTPRequest类可以接收一个动态生成的图片,你可以通过HTTPRequest类的参数向 服务器发送参数
???????? Grid类是HTTPRequest类的子类,提供更加详细的方法
???????? WMS类用于连接WMS服务器以获得图象
???????? KaMap 类用于连接MapServer
???????? EventPane类作为用于接收用户操作的图层
???????? Google类用于从Google获得图象,它仍然需 要你从Google获得API KEY,并且include
???????? VirtualEarth类用于操作VirtualEarth的图层
???????? Markers 类用于生成接收和显示用户本地标记的图层
???????? Text类用于接收CSV文件
???????? GeoRSS类是Marker类的子类,用于封装接收 GeoRSS并在图层中作出marker
???????? Boxes同样也是Marker类的子类,可以用div来做marker,而非image
???????? TMS 用于接收TMS服务器的地图

???? OpenLayers还提供了丰富的Control类为地图浏览添加一些工具,继承自OpenLayers.Control类

???????? * 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

???? 这些类的实例会在地图浏览的“窗口”上增加一些工具栏或是“按钮”,增加互动性和功 能性。

???????? OpenLayers对常用的数据结构进行了封装
???????? # OpenLayers.LonLat
???????? # OpenLayers.Size
???????? # OpenLayers.Pixel
???????? # OpenLayers.Bounds以便于操作。

???? 现在写个最简单的例子做记录:

<% @?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构造新的地图。
???????????? var ?options? = ?{
????????????????controls:?[],
????????????????maxExtent:?bounds,
????????????????maxResolution:?
1.5234375 ,
????????????????projection:?
" EPSG:4326 " ,
????????????????units:?'degrees'
????????????};
????????????
var ?map? = ? new ?OpenLayers.Map('map',?options);
????????????
// 创建一个图层信息
???????????? var ?layer? = ? new ?OpenLayers.Layer.WMS( " State " ,? " http://127.0.0.1:8080/geoserver/wms " ,?{
????????????????????????layers:?
" dwg:0_line "
????????????????????});
//
???????????? // 将创建的图层对象添加到Map对象
????????????map.addLayer(layer);
????????????
// 显示地图
????????????map.zoomToMaxExtent();
????????}
????
</ script >
??
</ head >
??
??
< body? onload ="init()" >
????
< div? id ="map" ></ div >
??
</ body >
</ html >


  相关解决方案