OpenLayers体系结构

合集下载

openlayers视频教程第一讲-概述

openlayers视频教程第一讲-概述

名称
ARC/INFO
开发单位 美国环境系 统研究所 (ESRI) 美国 MapInfo Corporation 美国 INTERGRA PH(鹰图)公 司 加拿大阿 波罗科技集 团、北京东 方泰坦科技 有限公司 美国 Caliper公司
简介
影响广、功能强、市场占有率高。ARC/INFO可运行于各种平台上,包括 SUN Solaris、SGI IRIX、DigitaI Unix、HP UX、IBM AIX、Windows NT (Intel/Alpha)等。在各种平台上可直接共享数据及应用。 ARC/INFO实行 全方位的汉化,包括图形、界面,数据库,并支持NLS(Native Language System),实现可重定义的自动语言本地化。 完善丰富的产品线;稳定的产品性能;广泛的业界支持;广大的用户群 体;良好的易用性,产品贴近用户;与其他技术的良好融合;良好的可持续 发展;极高的新技术敏感度;良好的本地化技术支持;极高的性价比。 提供了一整套功能强大的分析工具,包括属性和空间查询、缓冲区、空 间叠加和专题分析。使用GeoMedia 的数据库服务器技术,你可以方便的对 多种空间数据格式同时进行分析。GeoMedia 是唯一适合进行 what-if分析的 工具,因为它可以让你在同一个分析管道中使用多个操作,该管道中的数据 发生任何变化,分析结果都会自动变更。
a.什么都不输入直接查询所有车辆及设备的最后位置状态 b.输入设备安装绑定的手机号查询该设备的最后位置状态
c.输入设备安装绑定的手机号及时间段查询该设备的位置轨迹

1.采用互联网公开地图服务◦ 地图,高德地图,google地图,QQ地图,世纪高通地图,阿里云地图,51 地图,搜狗地图。内网安全及断网问题无法解决。

OpenLayers 类分析(一)

OpenLayers 类分析(一)

1.4、OpenLayer.Map 中的事件处理器 events
在 OpenLayer.Map 类初始化时,Map.events 被直接创建了一个事件管理类 OpenLayer.Events,并和 id 为“map”的 div 完成绑定。由 handleBrowserEvent 函数接收 map 上的消息,并发给 listener 队列来处理。
Handler -callbacks 1 +register() +unregister() +activate() +deactivate() +callback()
Handler.Click
在 Control.Click 的 initialize 中,创建了用于事件处理的 Handler.Click 类,并准备好回调函数 callbacks。 在 Control 调用 activate()函数时,Handler.Click 完成和 div 的消息绑定。当收到消息后, 先由 Handler.Click 处理,再传给回调函数 callbacks 。在 callbacks 中完 成消息显示功能。
监听函数 Function(feature) Function(feature)
允许框选 feature 限制选择 feature 的开关
说明 选择 feature 时触发 取消选择 feature 时触发
Handle
OpenLayers.Handler
指定绘制的图形的类型,如:
OpenLayers.Handler.Point
/path/polygon 等.
Options:
内容见下表
Options:
属性: Properties multi

OpenLayers地图重点属性摘录

OpenLayers地图重点属性摘录

一:OpenLayers1.OpenLayers:常量version_number标识版本二:BaseTypes2.BaseTypes(基本类型):这里定制了Openlayers中用到的string、number、function、array 3.Bounds(边界):属性left、bottom、right、top、centerLonLat方法extend 用于扩展边界,toBBox用于绑定bounds = new OpenLayers.Bounds();bounds.extend(new OpenLayers.LonLat(4,5));bounds.extend(new OpenLayers.LonLat(5,6));bounds.toBBOX(); // returns 4,5,5,64.LonLat(经纬度):属性lon经度、lat纬度注意:如果地图不是地理投影,那么调用的LonLat表示的是地图上的x、y轴坐标,为(0,0)表示坐标轴原点例子:map.setCenter(new OpenLayers.LonLat(116.3876,39.8983),13);最后一个参数表示Zoom:放大倍数5.Pixel(像素):属性x、y表示x和y坐标6.Size:属性w、h表示宽和高三:Console7.Console:用于调试和把错误等输出到“控制台”上,需要结合使用firebug四:Control8.Control(控件):使用方法:方法一:var map = new OpenLayers.Map('map', { controls: [] });map.addControl(new OpenLayers.Control.PanZoomBar());方法二:var map = new OpenLayers.Map('map',{ controls: [new OpenLayers.Control.PanZoomBar(),new OpenLayers.Control.Navigation()]});9.Button(按钮):方法trigger()点击按钮的时候会调用使用方法:var button = new OpenLayers.Control.Button({displayClass: "MyButton", trigger: myFunction});panel.addControls([button]);10.DragPan(鼠标拖动地图)11.DrawFeature(在矢量图上画点、线、面)var lines = new yer.Vector("Lines", {styleMap: new OpenLayers.StyleMap({pointRadius: 3,strokeColor: "#ff3300",strokeWidth: 3,fillOpacity: 0})});var panel = new OpenLayers.Control.Panel({displayClass: "olControlEditingToolbar"});var draw = new OpenLayers.Control.DrawFeature(lines, OpenLayers.Handler.Path,{displayClass: "olControlDrawFeaturePath", title: "Draw Lines"});panel.addControls([new OpenLayers.Control.Navigation({title: "Navigate"}),draw]);map.addControl(panel);12.EditingToolbar(编辑工具条)EditingToolbar包含4个控件:draw point、draw lines、draw polygon、pan navigation构造函数参数:layer(yer.Vector)、options例子:var vector = new yer.Vector("Editable Vectors");map.addLayers([vector]);map.addControl(new OpenLayers.Control.EditingToolbar(vector));13.Geolocate(地理定位)把w3c geolocation API包装成控件,与地图绑定,位置发生变化时触发事件14.GetFeature15.Graticule(格子线)在地图上以grid显示经纬线16.KeyboardDefaults:增加了用键盘实现平移缩放功能map.addControl(new OpenLayers.Control.KeyboardDefaults());17.LayerSwitcher(图层切换功能)map.addControl(new yerSwitcher());18.Measure(用于测量绘图):方法getArea和getLength19.MousePosition(鼠标位置):显示鼠标指针移动时的地理坐标map.addControl(new OpenLayers.Control.MousePosition());20.MouseToolbar(鼠标工具栏):有拉框放大的功能,但是需要按住shift键,所以不推荐使用,要实现相同的功能可以使用NavToolbar21.Navigation(导航):导航控件处理鼠标事件(拖动、双击、滚动)的地图浏览注意:这个控件是默认添加到地图中的22.NavToolbar:加入了两个mousedefaults控件,通过使用zoomBox实现拉框放大功能map.addControl(new OpenLayers.Control.NavToolbar());23.OverviewMap(鹰眼):默认在地图的右下角map.addControl(new OpenLayers.Control.OverviewMap());24.Pan(平移)25.Panel(面板):Panel控件是其他控件的容器Each control in the panel is represented by an icon,即表示添加到面板里面的控件都是用图像表示的26.PanZoom(平移缩放):由OpenLayers.Control.PanPanel和OpenLayers.Control.PanPanel 这两个控件组成,具有平移和缩放的功能图标:map.addControl(new OpenLayers.Control.PanZoom());27.PanZoomBar(平移缩放工具栏):由OpenLayers.Control.PanPanel和OpenLayers.Control.ZoomBar这两个控件组成,具有平移和缩放功能,这控件和PanZoom的区别见图标图标:map.addControl(new OpenLayers.Control.PanZoomBar());28. Permalink(永久链接):点击永久链接将用户返回到当前地图视图例子:map.addControl(new OpenLayers.Control.Permalink());29.Scale(比例尺):以1:1这种比率样式显示当前地图的比例例子:map.addControl(new OpenLayers.Control.Scale());30.ScaleLine(比例尺):以线段指标的样式显示当前地图的比例例子:map.addControl(new OpenLayers.Control.ScaleLine());31.SelectFeature 通过点击或是悬停选择给定层上的Feature构造函数参数:layer(yer.Vector)、options属性:multipleKeytoggleKeymultiple:是否允许同时选择多个图形clickout:取消功能,当点击图形外的任何东西,取消对图形的选择hover:鼠标悬停例子:selectControl = new OpenLayers.Control.SelectFeature([vectors1, vectors2],{clickout: true, toggle: false,multiple: false, hover: false,toggleKey: "ctrlKey", // ctrl key removes from selectionmultipleKey: "shiftKey" // shift key adds to selection});map.addControl(selectControl);selectControl.activate();32.SLDSelect33.Snapping(编辑矢量图层时用于捕捉)34.Split35.TouchNavigation(触摸导航):只针对触摸功能的设备的地图绘制应用程序36.TransformFeature37.WMSGetFeatureInfo:使用WMS的查询来获取地图上一个点的信息,显示的格式是Format的38.WMTSGetFeatureInfo:使用WMTS的查询来获取地图上一个点的信息,显示的格式是Format的39.Z oomBox(拉框放大的功能):与NavToolbar同样,属性out 可以实现拉框缩小(这个控件没有实现)Q:在界面中使用map.addControl(new OpenLayers.Control.ZoomBox({alwaysZoom:true}));并不能实现将拉框控件添加到地图中?使用创建新类的方法下面这段代码中调用的this是哪一层?controls[0]是哪个控件?OpenLayers.Control.CustomNavToolbar = OpenLayers.Class(OpenLayers.Control.Panel, {initialize: function(options) {OpenLayers.Control.Panel.prototype.initialize.apply(this, [options]);this.addControls([new OpenLayers.Control.ZoomBox({alwaysZoom:true})]);//this.displayClass = 'olControlNavToolbar'},draw: function() {var div = OpenLayers.Control.Panel.prototype.draw.apply(this, arguments);this.defaultControl = this.controls[0];return div;}});map.addControl(new OpenLayers.Control.CustomNavToolbar()); 40.ZoomIn 放大使用的时候可以通过PanZoomBar控件,ZoomIn每次放大一个级别41.ZoomOut 缩小使用的时候可以通过PanZoomBar控件,ZoomOut每次缩小一个级别42.ZoomPanel 包括OpenLayers.Control.ZoomIn和OpenLayers.Control.ZoomToMaxExtent和OpenLayers.Control.ZoomOut 图标map.addControl(new OpenLayers.Control.ZoomPanel());43.ZoomToMaxExtent 显示地图的最大程度的缩小五:Map44.Map (地图)见资料构造函数参数:div(页面中要显示的标签)、options属性:allOverlays:?3maxExtent:地图的最大范围units:地图的单位projection:覆盖默认的投影字符串地图,如果适当,最好还设置maxExtent、maxResolution、unitsmaxResolution:最大分辨率numZoomLevels:缩放级别数目知道最大分辨率和缩放级别数目可以直接知道最小和最大的缩放级别displayProjection:显示的投影级别,与mouseposition控件结合使用,即设置mouseposition 显示使用的坐标系// create a map with default options in an element with the id"map1"var map = new OpenLayers.Map("map1");// create a map with non-default options in an element with id"map2"var options = {maxExtent: new OpenLayers.Bounds(-200000, -200000, 200000,200000),//最大显示范围maxResolution: 156543,//最大分辨率units: 'm',//projection: "EPSG:41001"};var map = new OpenLayers.Map("map2", options);// map with non-default options - same as above but with a singleargumentvar map = new OpenLayers.Map({div: "map_id",maxExtent: new OpenLayers.Bounds(-200000, -200000, 200000,200000),maxResolution: 156543,units: 'm',projection: "EPSG:41001"});// create a map without a reference to a container - call renderlatervar map = new OpenLayers.Map({maxExtent: new OpenLayers.Bounds(-200000, -200000, 200000,200000),maxResolution: 156543,units: 'm',projection: "EPSG:41001"});六:Marker45.Marker 包括一个OpenLayers.LonLat和OpenLayers,Icon,注意:标记一般都是添加到一个特殊的图层,即yer.Markers使用方法:方法一:var markers = new yer.Markers( "Markers" );map.addLayer(markers);var size = new OpenLayers.Size(21,25);var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);var icon = newOpenLayers.Icon('/dev/img/marker.png', size, offset);markers.addMarker(new OpenLayers.Marker(newOpenLayers.LonLat(0,0),icon));markers.addMarker(new OpenLayers.Marker(newOpenLayers.LonLat(0,0),icon.clone()));方法二:var markers = new yer.Markers( "Markers" );map.addLayer(markers);markers.addMarker(new OpenLayers.Marker(newOpenLayers.LonLat(0,0),newOpenLayers.Icon('/dev/img/marker.png')));注意:标记不能使用同样的图标,但是可以使用clone()方法实现对图标的克隆46.Box 用矩形做标记,同样box要添加到Boxes这个图层里面Q:下面这个程序为什么没有效果?var boxes = new yer.Boxes( "Boxes" );map.addLayer(boxes);var bounds = new OpenLayers.Bounds(-10,50,5,60);var box = new OpenLayers.Marker.Box(bounds);//box.events.register("click", box, function (e) {// this.setBorder("yellow");// });boxes.addMarker(box);七:Popup47.Popup 构造函数参数有六个:ID、lonlat、contentSize、contentHTML、closeBox、closeBoxCallbackpopup = new OpenLayers.Popup("chicken",//标识符new OpenLayers.LonLat(5,40),//在地图上的弹出位置new OpenLayers.Size(200,200),//弹出的提示框的大小"example popup",//提示框中显示的内容true);//是否显示关闭框map.addPopup(popup);通过使用下面的方法,可以在标记中添加点击事件,点击时弹出提示框marker.events.register("click", marker, function (e) {map.addPopup(popup);popup.show();//如果不加这个方法,popup只有在第一次点击marker的时候才会出现,之后点击都没有效果});48.FramedCloud 继承Popup,弹出的形状与Popup是不一样的framedcloud = new OpenLayers.Popup.FramedCloud("chicken",//标识符new OpenLayers.LonLat(5,40),//在地图上的弹出位置new OpenLayers.Size(200,200),//弹出的提示框的大小"example popup",//提示框中显示的内容null,true);//是否显示关闭框map.addPopup(framedcloud);49.Anchored50.AnchoredBubble八:Icon51.Icon (图标)重要属性:url图片源、size图片大小、offset偏移量图标一般与marker结合使用Q:能不能将图标与其他控件结合?能!var size = new OpenLayers.Size(21,25);//用来控制图标的大小var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);//用来控制图标的偏移量var icon = new OpenLayers.Icon('/dev/img/marker.png', size, offset);//定义图标九:Layer52.Layer (图层)..\openlayers\openlayers的类与方法.doc53.ArcGIS93Rest 使用ESRI的ArcGIS Server 9.3地图服务中显示的数据54.ArcIMS 使用ESRI公司的ArcIMS地图服务中显示的数据55.Bing 使用ESRI的Bing地图56.Boxes 为box提供图层方法:drawMarker、removeMarker57.GeoRSS 添加GeoRSS点功能58.GML 通过解析GML文件创建一个适量图层注意:过时,在3.0中被移除59.Google 构造函数中的参数:name显示的名称、options例子:var ghyb = newyer.Google("Google Hybrid",{type: G_HYBRID_MAP, sphericalMercator: true});60.Grid 使用瓷砖晶格层的基类61.VirtureEarth例子:var veroad = newyer.VirtualEarth("Virtual Earth Roads",{'type': VEMapStyle.Road, sphericalMercator:true});var veaer = new yer.VirtualEarth("Virtual Earth Aerial",{'type': VEMapStyle.Aerial, sphericalMercator:true});var vehyb = new yer.VirtualEarth("Virtual Earth Hybrid",{'type': VEMapStyle.Hybrid, sphericalMercator:true});62.Yahoo例子:var yahoo = newyer.Yahoo("Yahoo Street",{sphericalMercator: true});var yahoosat = new yer.Yahoo("Yahoo Satellite",{'type': YAHOO_MAP_SAT, sphericalMercator: true});var yahoohyb = new yer.Yahoo("Yahoo Hybrid",{'type': YAHOO_MAP_HYB, sphericalMercator:true});63.WMSyer.WMS实例是用来显示OGC Web地图服务的数据。

【转】OpenLayers

【转】OpenLayers

【转】OpenLayersOpenLayers:OpenLayers是一个开源的js框架,用于在您的浏览器中实现地图浏览的效果和基本的zoom,pan等功能。

OpenLayers支持的地图来源包括了WMS,GoogleMap,KaMap,MSVirtualEarth等等,您也可以用简单的图片作为源,在这一方面OPenLayers提供了非常多的选择。

WMS服务:1 OGC组织及其开放性规范为了实现异构的地理空间信息及GIS处理功能的互操作的集成,OGC(Open GIS Consortium)一直致力于寻求一种方式,将地理信息系统技术、分布处理技术、面向对象技术、数据库设计以及实时信息处理方法有效地结合起来,实现分布式异构平台上GIS互操作[2]。

OGC制定了开放地理信息互操作规范(OGIS),试图通过共同的开放地理数据模型(OGM)和OGIS参考模型(ORM)来实现互操作。

其目的是希望提出一个可扩展的、基于各种标准的、能无缝集成各种在线空间处理和位置服务的框架,使得分布式空间处理系统能通过XML和HTTP技术进行交互,并为各种在线空间数据资源,来自传感器的信息、空间处理服务和位置服务和基于Web的发现、访问、整合、分析、利用和可视化提供互操作框架[3]。

OGC的中心主题是共享信息和提供服务,在OGC的抽象规范中共有17个主题,其中主题12是开放式Web Services空间信息服务框架[4,5],它包含一系列的抽象规范和实现规范。

概括地来讲,OGC OpenGIS Web Services(OWS)包括三个主要的地理信息服务即Web Map Service(WMS)、Web Feature Service(WFS)和Web Coverage Service(WCS)。

除此之外,还包括Simple Feature Specillcation(SFS),Geography Markup Language(GML)等。

OpenLayers白皮书

OpenLayers白皮书

OpenLayers白皮书贵州怡景汇博科技有限公司2012年6月目录:文档说明: (3)OpenLayers简介 (4)技术原理和实现 (4)运行环境: (4)基本要素: (4)地图表现形式: (5)位图层 (6)矢量图层 (7)技术特征 (7)1、Map地图容器 (8)2、Layer图层 (8)3、Control控件 (8)4、矢量元素 (9)5、数据源 (9)6、面向对象框架 (9)7、WFS-T (10)应用领域 (10)术语解释 (11)文档说明:本文档描述了OpenLayers的基本框架和功能特征。

通过对这些功能的组合运用,或者在其框架上做二次开发,可以搭建一个健壮的WebGIS系统。

文档主要内容OpenLayers简介技术原理和实现技术特征Map地图容器Layer图层Control控件矢量元素数据源面向对象框架WFS-T应用领域OpenLayers简介OpenLayers 是MetaCarta公司采用纯JavaScript开发的用于在主流浏览器上展示地图数据的包,用于WebGIS客户端,通过BSD License 发行。

OpenLayers 为构建富客户端地理信息应用实现了一套JavaScript API,类似Google Maps和微软的Virtual Earth的APIs,和他们有个重要的不同点是,OpenLayers是完全开源和免费的。

通过OpenLayers可以很轻松地在web页中创建一个动态的地图。

OpenLayers是一个用于浏览器地图展示的开源js库,用于在您的浏览器中实现地图浏览的效果和基本的zoom,pan等功能。

OpenLayers APIs采用动态类型脚本语言JavaScript编写,同时借用了Prototype.js框架和Rico库的一些解决方案,实现了类似与Ajax功能的无刷新更新页面,能够带给用户丰富的桌面体验(它本身就有一个Ajax类,用于实现Ajax功能),而应用于Web浏览器中的DOM(文档对象模型)由JavaScript实现,同时Web浏览器(比如IE,FF等)都支持DOM ,所以客户端不存在浏览器依赖性。

OpenLayers教程-电子地图-开放源代码系统技术支持

OpenLayers教程-电子地图-开放源代码系统技术支持
}
),
selecthover: new OpenLayers.Control.SelectFeature(
vectors,
{
multiple: false, hover: true,
toggleKey: "ctrlKey", // ctrl key removes from selection
multipleKey: "shiftKey" // shift key adds to selection
<script type="text/javascript">
var map, drawControls;
OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';
//****************************************************************************
注1.isBaseLayer属性确定该图层是否是基础图层。
目前还不需要深究,暂不研究。
关于openlayers里的要素编辑,就是客户端的操作,因此分为操作和保存两个环节研究。
分为点、线、多边形
以一段例子来说明要素的填加。
<html xmlns="/1999/xhtml">
<head>
……
<script src="OpenLayers.js"></script>
就是制定在页面的location元素位置显示坐标。

OpenLayers

OpenLayers

<script>
function test1()
{
var d = $('myDiv');
alert(d.innerHTML);
}
function test2()
{
var divs = $('myDiv','myOtherDiv');
for(i=0; i<divs.length; i++)
ele.hide(); //隐藏DOM对象对比从前的版本var ele = $("myelement");
Element.hide(ele); //隐藏DOM对象
这样的改变有什么益处呢? 我觉得一来是更面向对象了,二来就是便于将来IDE里的代码提示。
2.1. 使用 $()方法
$() 方法是在DOM中使用过于频繁的 document.getElementById() 方法的一个便利的简写,就像这个DOM方法一样,这个方法返回参数传入的id的那个元素。
2.2. 使用$F()方法
$F()方法是另一个非常受欢迎的简写。它可以返回任何输入表单控件的值,如文本框或下拉框。 这个方法可以传入元素的id或者元素自己。
<script>
function test3()
{
alert( $F('userName') );
}
</script>
<script>
function getXmlNodeValue(xmlNode() {return xmlNode.text;},
function() {return xmlNode.textContent;)

OpenLayers入门(一)

OpenLayers入门(一)

OpenLayers⼊门(⼀)OpenLayers简介有如下特点:1. ⽀持任何XYZ⽡⽚资源,同时也⽀持OGC的WMTS规范的⽡⽚服务以及ArcGIS规范的⽡⽚服务2. ⽀持⽮量切⽚,包括pbf、GeoJSON、TopoJSON格式3. ⽀持⽮量图层,能渲染GeoJSON、TopoJSON、KML、GML和其他格式的⽮量数据4. ⽀持OGC制定的WMS、WFS等GIS⽹络服务规范5. ⽀持在移动设备上运⾏6. 可以通过css来为地图控件设置样式7. ⾯向对象开发⽅式,在OpenLayers中万物皆对象和另⼀个流⾏的地图库leaflet不同,openLayers完全是⽤⾯向对象的⽅式开发的,且⼏乎内置了所有地图开发需要的功能,⽽leaflet核⼼库只提供基本功能,其他功能都是通过第三⽅插件进⾏扩展。

使⽤上来说leaflet更容易上⼿,OpenLayers上⼿难度⽐较⼤,所以业务可预见较为简单的建议采⽤leaflet。

OpenLayers虽然很强⼤,但是因为⼀切皆对象,所以使⽤起来很⿇烦,再加上⽆⽐难看的⽂档,所以对新⼿极其不友好,这也是本系列⽂章的初衷,旨在基于实际业务开发的场景下来沉淀⼀些内容,来帮助新⼿使⽤OpenLayers。

这是本系列的第⼀篇,主要介绍地图的实例化、基本的要素操作,后续不定期更新。

本⽂基于OpenLayers v6+版本,代码基于Vue。

安装npm i ol实例化地图<div class="ol-map" ref="olMap"></div>import Map from 'ol/Map'import View from 'ol/View'import { Tile as TileLayer } from 'ol/layer'import {XYZ, OSM} from 'ol/source'import { fromLonLat } from 'ol/proj'// fromLonLat⽅法能将坐标从经度/纬度转换为其他投影// 使⽤内置的OSM//const tileLayer = new TileLayer({// source: new OSM()//})// 使⽤⾼德const tileLayer = new TileLayer({source: new XYZ({url: 'https:///appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'})})let map = new Map({layers: [tileLayer],view: new View({center: fromLonLat([120.771441, 30.756433]),//地图中⼼点zoom: 15,// 缩放级别minZoom: 0,// 最⼩缩放级别maxZoom: 18,// 最⼤缩放级别constrainResolution: true// 因为存在⾮整数的缩放级别,所以设置该参数为true来让每次缩放结束后⾃动缩放到距离最近的⼀个整数级别,这个必须要设置,当缩放在⾮整数级别时地图会糊 }),target: this.$refs.olMap// DOM容器})这样就可以显⽰⼀个基本的地图:可以拖动和缩放,但是不能旋转,如果需要⽀持旋转,需要加上旋转交互:import {defaults as defaultInteractions,DragRotateAndZoom,} from 'ol/interaction'let map = new Map({// ...interactions: defaultInteractions().extend([new DragRotateAndZoom()])})这样就可以按住shift键时通过⿏标来进⾏旋转地图。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

OpenLayers体系结构由于OpenLayers是采用JavaScript实现的,不存在包的概念,但是它可以通过命名空间来实现类似包的功能。

另外,JavaScript不存在继承的感念,也不存在私有、公有、保护等概念,OpenLayers中所谓的继承其实就是将基类中的所有属性和方法复制到子类中去。

OpenLayers的命名空间如下:一、OpenLayers命名空间:如上图所示,OpenLayers是整个webgis系统的最外层命名空间,所有的地理信息系统相关web程序都在此命名空间下,在此命名空间下又创建了其他的命名空间来管理相关功能的程序。

在这个命名空间下定义了一些基础类和基类来构建整个框架。

1、class OpenLayers.MapMap类实例化的对象为地图容器,可以向地图容器里面添加图层和控件。

属性2、class OpenLayers.MarkerOpenLayers命名空间下的Marker类可以被实例化为marker对象,用于标注地图上的位置,marker对象是由LonLat 对象和Icon对象组合而成的。

markers一般被添加到一个叫做yer.Markers的特殊图层中。

需要注意的是,如果你在一个marker中使用了一个icon,也就是说,你不能在其他的marker中在使用它——一旦你使用了这个icon,你应该clone()这个icon然后在另外的marker中使用这个icon。

3、class OpenLayers.PopupPopup类实例化一个弹出窗口,通常被添加到地图容器中。

构造函数4、class OpenLayers.IconIcon为图标类,图标指定用来在地图上显示Marker 的图像。

构造函数5、class OpenLayers.Format各种format类的基类,它的子类实现reading/writing方法。

属性方法6、OpenLayers.RequestOpenLayers.Request命名空间下包含两个常用的AJAX方法,通过这两个方法可以方便的实现XMLHttpRequests功能。

方法7、class OpenLayers.FeatureFeature是几何信息和属性的结合体,在OpenLayers.Feauter中主要是包括一个标记和经纬度。

属性方法二、BaseType命名空间:在BaseTypes命名空间下定义了一些基本类型的类,如LonLat、Size等。

1、class OpenLayers.LonLatLonLat是以经度和纬度表示的地理坐标点。

注意:进行地图投影时通常将经度与地图的x 坐标联系起来,将纬度与y 坐标联系起来。

构造函数2、class OpenLayers.PixelPixel是以像素坐标表示的地图上的一点。

在地图坐标系统中,x坐标向右增大,y坐标向下增大。

构造函数属性方法3、class OpenLayers.SizeSize是地图矩形区域的大小(以像素表示)。

大小对象有两个参数:width 和height。

宽度是点的x 坐标的差值,高度是y 坐标的差值。

构造函数属性方法三、Control命名空间:OpenLayers命名空间下面定义了Control基类,Control命名空间下面的所有类都继承于Control基类。

每个具体的控件类实现地图的一项具体操作。

控件影响地图的显示和行为,它允许拖动和放大缩小地图以控制地图的比例尺,默认的控件是被添加到地图上的,尽管如此,也可以通过传递可选参数将其加入到地图外部的DIV中。

1、class BM.Control.TMeasureDistanceTMeasureDistance为测距控件,它实现OpenLayers.Control接口,因此可用OpenLayers.map.addControl()方法添加到地图中。

可能会增加控件定位的参数或方法事件2、class BM.Control.TMeasurePolygonTMeasurePolygon为测面积控件,它实现OpenLayers.Control接口,因此可用OpenLayers.Map.addControl()方法添加到地图中。

可能会增加控件定位的参数或方法方法事件3、class BM.Control.TPanZoomBarPanZoomBar为缩放移动控件,继承于OpenLayers中的PanZoomBar,主要工作为修改样式,使图标跟以前GZGIS中对应的控件一样,增加设置最大级别和最小级别的功能,它实现了OpenLayers.Control接口,因此可用OpenLayers.Map.addControl()方法添加到地图中。

4、class BM.Control.TOverviewMapOverviewMap为缩略图控件(鹰眼控件),可继承于OpenLayers中的OverviewMap,主要工作为修改样式,由于OpenLayers.OverviewMap实现了OpenLayers.Control接口,因此可用OpenLayers.Map.addControl()方法添加到地图中。

属性5、class BM.Control.TNavigationTNavigation为导航控件,该控件将分类导航,一个导航控件中包含一到多个TNavPage实例。

该控件实现了OpenLayers.Control接口,可由OpenLayers.Map.addControl()方法加载到地图中。

6、class BM.Control.TGotoTGoto为定位控件,根据用户输入的经纬度定位地图。

//调用事例//1、不设置标题//map.addControl(new BM.Control.TGoTo());//2、设置标题//var gotoControl = new BM.Control.TGoTo();//gotoControl.setTitle("标题");//map.addControl(gotoControl);7、class BM.Control.TDivTreeTDivTree为复选框树行控件,被添加到DOM元素中,无需实现OpenLayers.Control接口,与地图无关。

构造函数8、class BM.Control.TTreeTTree为复选框树的数据结构,可以获得数组形式的所有节点和树形式的所有节点,可以获得包含自己的树对象。

不需用户进行实例化,TDivTree自动调用。

9、class BM.Control.TTreeNodeTTreeNode为复选框节点类。

四、Feature命名空间:特征元素是几何信息(geometry)和地理信息(attribute)的结合体,从类结构来看它实际上是marke类和lonlat 类的组合。

1、class OpenLayers.Feature.VectorVector类使用OpenLayers.Geometry类描述其几何特征,它有一个数据对象的attributes属性,和一个style属性,默认的style属性在<OpenLayres.Feature.Vector.style>中定义。

构造函数方法五、Format命名空间:Format命名空间下定义了一系列的解析器用于将特征元素格式化为具体格式的标准数据,然后利用格式化后的标准数据与采用此标准实现的服务器端交互。

例如,WFS请求过程中,客户端和服务器端统一采用GML格式的数据进行交互,所以客户端用Format命名空间下的GML类将具体的特征元素格式化为GML数据发送到服务器端或将服务器端传送过来的GML数据解析为特征元素显示在地图上。

Format命名空间下的类都继承了format基类,重写了它的read/write方法。

1、class OpenLayers.Format.XML解析XML数据的类,继承于OpenLayers.Format类。

参考openlayers/XML example.htm例子。

六、Geometry命名空间:Geometry是对地理学对象的描述,此命名空间下的类都继承了OpenLayers命名空间下的Geometry基类,具体子类描述了各种具体的地理学对象,例如Point、Line、Polygon分别描述了能用点、线、面指代的具体地理学对象。

1、class OpenLayers.Geometry所有具体geometry对象的基类,Geometry命名空间下面的所有类都直接或间接的继承了Geometry类,所有具体能够实例化的类定义了所有geometry对象都应该有的属性和方法。

方法2、class OpenLayers.Geometry.Rectangle矩形几何对象,继承于Geometry基类。

(暂不支持)构造函数属性方法3、class OpenLayers.Geometry.Point点的几何对象,继承于Geometry基类。

4、class OpenLayers.Geometry.Collection该集合类继承了Geometry类。

OpenLayers中的多点、多线线、、面、多面其实是点的集合,继承了该集合类,使其既继承了Geometry的属性和方法,又具备了Collection类的属性和方法。

集合,顾名思义就是一系列Geometry对象的集合,这些Geometry对象存储在集合对象的components属性中,components属性可以作为参数传递给集合的构造函数。

当新的Geometry对象被加入到集合中时并不是加入它的副本。

当从集合中移除Geometry对象需要该集合对象的引用。

集合对象中的getArea()方法和getLength()方法只不过是对集合对象中的所有Geometry对象各自的距离和面积求和。

构造函数5、class OpenLayers.Geometry.MultiPoint多点是点的集合对象,MultiPoint继承于Collection类。

下面的属性和方法只列出重写的部分,其他的请参考父类。

构造函数属性6、class OpenLayers.Geometry.CurveCurve(曲线)类继承于MultiPoint类,它的点被看做是连接的,提供的getLength()方法是相连两点间的距离的累加。

方法7、class OpenLayers.Geometry.LineString线类继承于曲线类,一旦添加了两个点,就不能再少于两个点。

(线至少有两个点)构造函数方法8、class OpenLayers.Geometry.LinearRingLinearRing是特殊的LineString,它是闭合的,当加入一个新的点的时候它会自动的闭合,不用你去与第一个点连接。

相关文档
最新文档