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 类分析(一)

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地图重点属性摘录

一：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

【转】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白皮书贵州怡景汇博科技有限公司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教程-电子地图-开放源代码系统技术支持

}
),
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入门（一）

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键时通过⿏标来进⾏旋转地图。

OpenLayers体系结构

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功能。

OpenLayers-3-入门教程

文件夹放在网络服务器的根目录下；（2）创建一个新的文件，命名为 map.html，将以上代码复制进该文件后放入下载的文件
夹的根目录下；（3）在浏览器中输入：http://localhost:8000/ol_workshop/map.html，我们将打开一个
工作的地图。
成功地创建了第一张地图，我们将继续关注地图的组成部分，详见 1.2 剖析你的地图。
一个 ol.View 实例包含投影 projection，该投影决定中心 center 的坐标系以及分辨率的单位，如果没有指定（如下面的代码段），默认的投影是球墨卡托（EPSG：3857），以米为地图单位。
放大 zoom 选项是一种方便的方式来指定地图的分辨率，可用的缩放级别由 maxZoom （默认值为 28）、zoomFactor （默认值为 2）、maxResolution （默认由投影在 256×256 像素瓦片的有效成都来计算）决定。起始于缩放级别 0，以每像素 maxResolution 的单位为分辨率，后续的缩放级别是通过 zoomFactor 区分之前的缩放级别的分辨率来计算的，直到缩放级别达到 maxZoom 。
基本概念
OpenLayers 3 入门教程 | 4
Layer Source
Map
View
Map
OpenLayers 3 的核心部件是 Map（ol.Map）。它被呈现到对象 target 容器（例如，包含在地图的网页上的 div 元素）。所有地图的属性可以在构造时进行配置，或者通过使用 setter 方法，如 setTarget（）。
最初的版本旨在支持第 2 版提供的功能，提供大量商业或免费的瓦片资源以及最流行的开源矢量数据格式。与版本 2 一样，数据可以被任意投影。最初的版本还增加了一些额外的功能，如能够方便地旋转地图以及显示地图动画。

OpenLayers学习心得

OpenLays学习笔记目录（一）项目介绍 (2)（二）源代码总体结构分析 (5)（三）BaseTypes ：定义底层类与定制JS内置类 (9)（四）BaseTypes： OpenLayers中定制JavaScript内置类 (14)（五）空间数据的组织与实现 (19)（六）OpenLayers 数据解析—以GML为例 (22)（七）数据渲染分析 (26)（八）地图表现 (29)（九）地图表现 (34)（十）OpenLayers中的控件 (37)（十一）OpenLayers事件机制分析 (42)（十二）体系结构 (45)OpenLayers项目分析（一）项目介绍OpenLayers 是由MetaCarta公司开发的，用于WebGIS客户端的JavaScript 包，目前的最高版本是2.5 V，通过BSD License 发行。

它实现访问地理空间数据的方法都符合行业标准，比如OpenGIS的WMS和WFS规范， OpenLayers 采用纯面向对象的JavaScript方式开发，同时借用了Prototype框架和Rico库的一些组件。

采用OpenLayers作为客户端不存在浏览器依赖性。

由于OpenLayers采用JavaScript语言实现，而应用于Web浏览器中的DOM（文档对象模型）由JavaScript实现，同时，Web浏览器（比如IE，FF等）都支持DOM 。

OpenLayers APIs采用动态类型脚本语言JavaScript编写，实现了类似与Ajax 功能的无刷新更新页面，能够带给用户丰富的桌面体验（它本身就有一个Ajax 类，用于实现Ajax功能）。

目前，OpenLayers所能够支持的Format有：XML、GML、GeoJSON、GeoRSS、JSON、KML、WFS、WKT(Well-Known Text)。

在OPenlayers.Format名称空间下的各个类里，实现了具体读／写这些Format的解析器。

解析OpenLayers

解析OpenLayers 3加载⽮量地图源的问题⼀、⽮量地图⽮量图使⽤直线和曲线来描述图形，这些图形的元素是⼀些点、线、矩形、多边形、圆和弧线等等，它们都是通过数学公式计算获得的。

由于⽮量图形可通过公式计算获得，所以⽮量图形⽂件体积⼀般较⼩。

⽮量图形最⼤的优点是⽆论放⼤、缩⼩或旋转等不会失真。

在地图中存在着⼤量的应⽤，是地图数据中⾮常重要的组成部分。

为了便于存储，传递，使⽤，⽮量地图会按照⼀定的格式来表达，⽐如常见的GeoJSON，TopoJSON，GML，KML，ShapeFile等等。

除了最后⼀个ShapeFile，其他⼏个格式的⽮量地图OpenLayers 3都⽀持。

⼆、使⽤GeoJson格式加载⽮量地图1、项⽬结构2、map.geojson{"type":"FeatureCollection","features":[{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[104.08859252929688,30.738294707383368],[104.18060302734375,30.691068801620155],[104.22042846679688,30.739475058679485],[104.08859252929688,30.738294707383368]]]}},{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[104.08859252929688,30.52323029223123],[104.08309936523438,30.359841397025537],[104.1998291015625,30.519681272749402],[104.08859252929688,30.52323029223123]]]}},{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[103.70269775390624,30.675715404167743],[103.69308471679688,30.51494904517773],[103.83316040039062,30.51494904517773],[103.86474609375,30.682801890953776],[103.70269775390624,30.675715404167743]]]}}]}3、map.html<!Doctype html><html xmlns='/1999/xhtml'><head><meta http-equiv='Content-Type' content='text/html;charset=utf-8'><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><meta content='always' name='referrer'><title>OpenLayers 3 :加载⽮量地图</title><link href='ol.css ' rel='stylesheet' type='text/css'/><script type='text/javascript' src='ol.js' charset='utf-8'></script></head><body><div id='map' style='width: 1000px;height: 800px;margin: auto'></div><script>/*** 创建地图*/new ol.Map({// 设置地图图层layers: [//创建⼀个使⽤Open Street Map地图源的图层new yer.Tile({source: new ol.source.OSM()}),//加载⼀个geojson的⽮量地图new yer.Vector({source: new ol.source.Vector({url: 'geojson/map.geojson', // 地图来源format: new ol.format.GeoJSON() // 解析⽮量地图的格式化类})})],// 设置显⽰地图的视图view: new ol.View({center: [104,30], // 设置地图显⽰中⼼于经度104度，纬度30度处zoom: 10, // 设置地图显⽰层级为10projection: 'EPSG:4326' //设置投影}),// 让id为map的div作为地图的容器target: 'map'})</script></body></html>4、运⾏结果三、获取⽮量地图上的所有Feature,并设置样式1、map2.html<!Doctype html><html xmlns='/1999/xhtml'><head><meta http-equiv='Content-Type' content='text/html;charset=utf-8'><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><meta content='always' name='referrer'><title>OpenLayers 3 :获取⽮量地图上的所有Feature,并设置样式</title><link href='ol.css ' rel='stylesheet' type='text/css'/><script type='text/javascript' src='ol.js' charset='utf-8'></script></head><body><div id='map' style='width: 800px;height:500px;margin: auto'></div><br><div style='width: 800px;margin: auto'><button type="button" onclick = 'updateStyle()' >修改Feature样式</button> </div><script>/*** 创建地图*/var map = new ol.Map({// 设置地图图层layers: [//创建⼀个使⽤Open Street Map地图源的图层new yer.Tile({source: new ol.source.OSM()}),],// 设置显⽰地图的视图view: new ol.View({center: [104,30], // 设置地图显⽰中⼼于经度104度，纬度30度处 zoom: 10, // 设置地图显⽰层级为10projection: 'EPSG:4326' //设置投影}),// 让id为map的div作为地图的容器target: 'map'});//创建⼀个⽮量地图源图层，并设置样式var vectorLayer = new yer.Vector({source: new ol.source.Vector({url: 'geojson/map.geojson', // 地图来源format: new ol.format.GeoJSON() // 解析⽮量地图的格式化类}),// 设置样式，颜⾊为绿⾊，线条粗细为1个像素style: new ol.style.Style({stroke: new ol.style.Stroke({color: 'green',size: 1})})});map.addLayer(vectorLayer);/*** 获取⽮量图层上所有的Feature,并设置样式*/function updateStyle(){//创建样式，颜⾊为红⾊，线条粗细为3个像素var featureStyle = new ol.style.Style({stroke: new ol.style.Stroke({color: 'red',size: 3})})//获取⽮量图层上所有的Featurevar features = vectorLayer.getSource().getFeatures()//遍历所有的Feature，并为每个Feature设置样式for (var i = 0;i<features.length;i++){features[i].setStyle(featureStyle)}}</script></body></html>2、运⾏结果4、⽮量地图坐标系转换⽮量地图⽤的是EPSG:4326，我们可以通过OpenLayers 3内置了地图格式解析器，将坐标转换为EPSG:3857 1、map3.html<!Doctype html><html xmlns='/1999/xhtml'><head><meta http-equiv='Content-Type' content='text/html;charset=utf-8'><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><meta content='always' name='referrer'><title>OpenLayers 3 :⽮量地图坐标系转换</title><link href='ol.css ' rel='stylesheet' type='text/css'/><script type='text/javascript' src='ol.js' charset='utf-8'></script><script src="jquery-3.6.0.js"></script></head><body><div id='map' style='width: 1000px;height: 800px;margin: auto'></div><script>/*** 创建地图*/var map = new ol.Map({// 设置地图图层layers: [//创建⼀个使⽤Open Street Map地图源的图层new yer.Tile({source: new ol.source.OSM()})],// 设置显⽰地图的视图view: new ol.View({center: ol.proj.fromLonLat([104,30]), // 设置地图显⽰中⼼于经度104度，纬度30度处zoom: 10, // 设置地图显⽰层级为10}),// 让id为map的div作为地图的容器target: 'map'});// 加载⽮量地图function addGeoJSON(data) {var layer = new yer.Vector({source: new ol.source.Vector({features: (new ol.format.GeoJSON()).readFeatures(data, { // ⽤readFeatures⽅法可以⾃定义坐标系 dataProjection: 'EPSG:4326', // 设定JSON数据使⽤的坐标系featureProjection: 'EPSG:3857' // 设定当前地图使⽤的feature的坐标系})})});map.addLayer(layer);};$.ajax({url: 'geojson/map.geojson',success: function(data, status) {// 成功获取到数据内容后，调⽤⽅法将⽮量地图添加到地图addGeoJSON(data);}});</script></body></html>2、运⾏结果到此这篇关于OpenLayers 3加载⽮量地图源的⽂章就介绍到这了,更多相关OpenLayers 3加载⽮量地图内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！。

OpenLayers接口文档

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

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

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

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

1、class OpenLayers.MapMap类将div DOM元素实例化的对象为地图容器，可以向地图容器中添加图层和控件。

属性2、class OpenLayers.Map2基于OpenLayers.Map封装，将自有地图图层和常用控件都已经加载在地图当中，用户无需关心地图数据源等问题，简化了用户的地图调用。

实例化该类后即可创建一个可查看和使用的地图对象，其方法和属性与OpenLayers.Map一致，见OpenLayers.Map类。

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

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

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

简述openlayers中map对象的基本构成。

OpenLayers是一个基于JavaScript的开源地图库，用于在Web上展示交互式地图。

在OpenLayers中，map对象是地图的核心，并且是构建地图应用的起点。

map对象由几个基本组件构成，包括：
1. View（视图）：视图定义了地图的空间范围（extent）、缩放级别（zoom）和投影方式（projection）。

它决定了地图上显示的区域和样式。

2. Layers（图层）：图层是地图上不同数据源的可视化表现。

OpenLayers支持多种图层类型，包括瓦片图层、矢量图层、WMS图层等。

每个图层可以有不同的样式和属性。

3. Controls（控件）：控件是用于交互操作地图的工具，如平移、缩放、旋转、测量等。

OpenLayers提供了一系列内置的控件，也可以自定义控件来满足特定需求。

4. Interactions（交互）：交互是与地图交互的方式，如鼠标点击、拖拽、滚轮缩放等。

OpenLayers提供了多种交互方式，可以根据需求进行配置和使用。

5. Overlays（覆盖物）：覆盖物是在地图上添加的额外元素，如标记点、信息框、
热区等。

它们可以用来展示额外的信息或者与用户进行交互。

在OpenLayers中，通过创建一个map对象并设置相应的属性和组件，可以实现对地图的显示、操作和增加各种图层和覆盖物等功能。

通过使用map对象，可以构建丰富多样的地图应用，满足不同的需求。

openlayers的类与方法

openlayers 中的一些方法yer：initialize：创建层Div，注册事件destroy：注销clone：克隆当前层setName：设置层nameaddOptions：添加附属属性onMapResize：虚函数。

由子函数实现。

redraw：重画moveTo：移动。

（未实现有意义动作）setMap：设置层所属的地图removeMap：移除地图。

虚函数，由子函数实现getImageSize：返回图片尺寸setTileSize：设置瓦片尺寸和图片尺寸getVisibility：返回层可见性setVisibility：设置层的可见性display：显示或隐藏层calculateInRange：本层分辨率是否在地图分辨率容纳范围内setIsBaseLayer：设置或取消该层为BaseLayer initResolutions：初始化分辨率相关数据getResolution：取当前分辨率getExtent：取地图当前范围getZoomForExtent：由尺寸范围得缩放级别getDataExtent：取本层的范围边界，虚函数由子函数实现getResolutionForZoom：由缩放级别得分辨率getZoomForResolution：由分辨率得缩放级别getLonLatFromViewPortPx：视口坐标转经纬度getViewPortPxFromLonLat：经纬度转视口坐标setOpacity：设置层的透明度（包括其所以子节点，即图片）setZIndex：设置层的z轴值adjustBounds：边界校正---------------------------OpenLayers.Map：initialize：初始化。

瓦片尺寸、地图最大范围、弹出窗口边界、主题样式、创建地图Dom元素、创建视窗Div、创建层容器Div、更新地图Div尺寸、注册事件、添加Controldestroy：销毁Control、销毁层、移除视口Div、注销监听事件setOptions：设置附件参数getTileSize：返回瓦片尺寸getBy：使用指定的规则对队列的某属性匹配出一组对象getLayersBy：使用指定的规则对地图的层的某属性匹配出一组对象getLayersByName：使用指定的规则对地图的层的名字匹配出一组对象getLayersByClass：使用指定的规则对地图的层的类名匹配出一组对象getControlsBy：使用指定的规则对地图的control匹配出一组对象getControlsByClass：使用指定的规则对地图的control的类名匹配出一组对象getLayer：根据id由层堆栈中检索层setLayerZIndex：设置z轴值resetLayersZIndex：重置所有层的z轴值（按其在堆栈中的位置设置）addLayer：增加层addLayers：批量增加层removeLayer：移除层getNumLayers：返回层数目getLayerIndex：返回指定层在地图的层堆栈中的位置setLayerIndex：设置指定层在地图的层堆栈中新的位置（ZIndex），并触发层次序改变事件raiseLayer：向上或下调整层的次序setBaseLayer：设置新的BaseLayer，隐藏原BaseLayeraddControl：添加ControladdControlToMap：将Control加进地图getControl：返回指定id的ControlremoveControl：移除ControladdPopup：新增弹出窗口。

OpenLayers心得

采用OpenLayers作为客户端不存在浏览器依赖性。

由于OpenLayers采用JavaScript语言实现，而应用于Web浏览器中的DOM（文档对象模型）由JavaScript实现，同时，Web浏览器（比如IE，FF等）都支持DOM 。

目前，OpenLayers所能够支持的Format有：XML、GML、GeoJSON、GeoRSS、JSON、KML、WFS、WKT(Well-Known Text)。

在OPenlayers.Format名称空间下的各个类里，实现了具体读／写这些Format的解析器。

OpenLayer源代码总体结构分析

OpenLayer源代码总体结构分析通过前面的项目介绍，我们大概已经知道Openlayers是什么，能够做什么，有什么意义。

接下来我们分析它怎么样，以及怎样实现的等问题。

这个图是从它的文档上截取的，旨在从感官上认识一下OpenLayers的类。

下面分别介绍（文档中的类是按字母顺序排列的，也按这个顺序说吧）：我们看到在类的顶层“高高在上”的是OpenLayers，它为整个项目实现提供名称空间（JavaScript语言没有名称空间一说，但是它确实有自己的机制实现类似的功能，后面会说明），它直接拥有一常量VERSION_NUMBER，以标识版本。

Ajax：顾名思义，用于实现Ajax功能，只是OpenLayers的开发者们把它单独写到一个类里了，其中用到了Prototype.js框架里的一些东西。

同时，设计的时候也考虑了跨浏览器的问题。

BaseTypes：这里定制了OpenLayers中用到的string，number 和function。

比如，OpenLayers. String. startsWith，用于测试一个字符串是否一以另一个字符串开头；OpenLayers. Number.limitSigDigs，用于限制整数的有效数位；OpenLayers. Function.bind，用于把某一函数绑定于对象等等。

Console：OpenLayers.Console，此名称空间用于调试和把错误等输出到“控制台”上，需要结合使用../Firebug/firebug.js。

Control：我们通常所说的控件类，它提供各种各样的控件，比如上节中说的图层开关LayerSwitcher，编辑工具条EditingToolbar等等。

加载控件的例子：class = new OpenLayers.Map('map', { controls: [] });map.addControl(new OpenLayers.Control.PanZoomBar());map.addControl(new OpenLayers.Control.MouseToolbar());Events：用于实现OpenLayers的事件机制。

OpenLayers项目分析——（九）控件-睁眼瞎看-3sNews_最具影响力地...

OpenLayers项目分析——（九）控件-睁眼瞎看-3sNews_最具影响力地...（九）OpenLayers中的控件OpenLayers中的控件，是通过加载到地图上而起作用的，也算地图表现的一部分。

同时，控件需要对地图发生作用，所以每个控件也持有对地图（map对象）的引用。

前面说过，控件是于事件相关联的。

具体的说就是控件的实现是依赖于事件绑定的，每个OpenLayers.Control及其子类的实例都会持有一个handler的引用的。

那么，怎么来创建并添加一个控件呢？用下面的语句：//实例化一个控件var control1 = new OpenLayers.Control({div: myDiv});//向地图中添加控件var map = new OpenLayers.Map('map', { controls: [] });map.addControl(control1 );对一些常用的OpenLayers控件，项目本身都封装好了，用下面的语句添加：map.addControl(new OpenLayers.Control.PanZoomBar());map.addControl(new OpenLayers.Control.MouseT oolbar());map.addControl(new yerSwitcher({'as cending':false}));map.addControl(new OpenLayers.Control.Permalink());map.addControl(new OpenLayers.Control.Permalink('permal ink'));map.addControl(new OpenLayers.Control.MousePosition());map.addControl(new OpenLayers.Control.OverviewMap());map.addControl(new OpenLayers.Control.KeyboardDefaults());先看看OpenLayers. Control基类的实现过程，再选择几个典型的子类分析一下。