OpenLayers体系结构
- 格式:doc
- 大小:580.50 KB
- 文档页数:23
一: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地图服务的数据。
【转】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白皮书贵州怡景汇博科技有限公司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简介有如下特点: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是采用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功能。
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 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是采用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的特殊图层中。
需要注意的是,如果你在一个marker中使用了一个icon,也就是说,你不能在其他的marker中在使用它——一旦你使用了这个icon,你应该clone()这个icon然后在另外的marker中使用这个icon。
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 中的一些方法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:新增弹出窗口。
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的解析器。
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中的控件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基类的实现过程,再选择几个典型的子类分析一下。
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,它是闭合的,当加入一个新的点的时候它会自动的闭合,不用你去与第一个点连接。