OpenLayers学习1

2012-08-26

OpenLayers学习一http://www.blogjava.net/xtitan/archive/2010/03/16/315568.html?OpenLayers基础知识：??

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>

热点排行

Web前端

OpenLayers学习1