OpenLayers学习一

最新推荐文章于 2023-05-26 17:34:20 发布

iteye_15544

最新推荐文章于 2023-05-26 17:34:20 发布

阅读量149

点赞数

文章标签： javascript java 数据结构与算法 ViewUI

本文链接：https://blog.csdn.net/iteye_15544/article/details/82197047

版权

本文介绍了OpenLayers的基础知识，这是一个开源的JavaScript库，用于在浏览器中实现地图浏览效果及基本功能如缩放和平移等。文章详细解释了如何设置Map和Layer对象，展示了多种图层类型，以及如何通过一个简单的示例来初始化并展示WMS地图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 >