OpenLayers基础知识(一)
来源:互联网 发布:电视直播点播软件下载 编辑:程序博客网 时间:2024/05/08 09:16
最近几年,交互式网络地图变得很流行。以前只有一些大公司或者行业专家才能创建交互式网络地图。但现在,借助于免费的Google Maps和Yahoo! Maps,人人都可以很方便的创建在线地图。今天,任何人通过使用合适的工具,只需要一点甚至根本不需要地理学、制图学和编程知识,就可以轻松创建网络地图。
人们希望网络地图能更加快速、精准并易于使用。因为是在线服务,因此希望从任何地方任意平台上都能访问。目前,仅有少量工具能满足这些需求。
OpenLayers就是这样一种工具。它免费、开源,功能十分强大。不论是初学者还是GIS(地理信息系统)专家,借助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>
- OpenLayers基础知识(一)
- OpenLayers基础知识(1)
- OpenLayers基础知识(二)
- openlayers 3(一)
- OpenLayers(一)
- OpenLayers基础知识
- openlayers基础知识
- openlayers 学习笔记(一)
- OpenLayers开发学习(一)
- OpenLayers开发记录(一)
- openlayers框架介绍(一)
- openlayers 能干的事情(一)
- OpenLayers项目分析(一)项目介绍
- OpenLayers 3自定义地图工具条(一)
- 跟着实例学习OpenLayers(一)
- OpenLayers的API讲解(一)
- OpenLayers项目分析一
- OpenLayers学习笔记一
- unity 事件(顺序及功能说明)
- SQL Developer 4.0 启动报错“unable to create an instance of the java virtual machine located at path”
- Inter-Integrated Circuit
- LinuxCast学习笔记九:mount
- 菜鸟如何web.xml配置参数,并在serlvet取得该值
- OpenLayers基础知识(一)
- 推荐书系列
- Scala学习笔记7 (actor)
- 黑马程序员学习笔记——流操作规律
- opencv 人脸识别 (二)训练和识别
- iOS 应用程序本地化
- cocostudio 问题记录
- http断点续传
- 我的shiro之旅: 十三 shiro 用户的登录与退出