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开源地图引挚发布离线地图这里以吉林省吉林市地图为例，说明如何用OpenLayers开源地图引挚发布离线谷歌卫星地图。

在万能地图下载器中，选择吉林省吉林市显示行政区划，然后点击“下载”按钮，可以新建任务。

在新建任务对话框中选择需要下载的级别，一般是从当前行政区划显示的级别开始选择（这里是第9级），一直接选择到第19级（国内19级清晰度效果最佳，19级以上基于19级放大），由于数据量非常大，这里只为了说明如何用OpenLayers开源地图引挚发布离线卫星地图的方法，因此这里以选择到第13级为例。

在“新建任务”对话框中，点击“导出设置”可以设置相关导出参数，我们可以选择导出大图、导出瓦片和导出离线包等三种方式。

由于这里我们用OpenLayers开源地图引挚发布离线卫星地图需要用的是瓦片格式，因此这里选择“导出瓦片”选项。

新建任务详细参数说明，请参阅：新建地图下载任务参数说明在“导出瓦片”选项的相关参数中，我们选择瓦片格式为“TMS瓦片”、文件格式为PNG，坐标坐标投影为墨认的“WGS84 Web 墨卡托投影”，选择“边界范围裁剪”，背景颜色为“透明”背景。

导出瓦片详细参数说明，请参阅：导出瓦片参数说明分别点击“确定”按钮开始下载任务，下载并自动导出后可以看到导出的瓦片目录为8到12级而不是我们选择的9到13级，这是因为软件中的级别编号是从1开始，而标准的TMS瓦片命名规则都是从0开始，因此该情况属于正常情况，瓦片的行列号编号规则同理。

将下载的地图瓦片目录复制到OpenLayers开源地图引挚发布离线地图的源码示例中。

用专业的WebGIS开发工具Visual Studio Code可以打开源代码进行功能开发。

Visual Studio Code下载安装教程，请参阅：如何安装WebGIS开发工具Visual Studio Code双击OpenLayers开源地图引挚发布离线地图源码中的“map.html”文件，可以在浏览器中打开查看在线地图。

openlayers 的circle方法

文章标题：深度探索openlayers中的circle方法1. 引言在前端地图开发领域，openlayers是一个非常优秀，功能强大的地图开源库。

其中的circle方法作为其中的一个重要功能，可以在地图上绘制圆形要素，并进行相关的交互和样式设置。

本文将深入探讨openlayers中的circle方法，从基础知识到高级应用，全面解读这一功能的用法和潜力。

2. 基础知识在openlayers中，使用circle方法可以绘制一个圆形要素。

通过指定圆心坐标、半径距离等参数，可以轻松创建一个定位精准的圆形要素，并将其添加到地图上进行展示。

对于地图展示中需要标注特定区域的场景，这一功能非常实用，可以帮助用户快速定位和识别地理位置。

3. 高级应用除了基本的绘制功能之外，circle方法还支持丰富的交互和样式设置。

可以通过设置不同的样式、颜色、透明度等属性，让圆形要素在地图上呈现出不同的视觉效果。

还可以添加交互事件，实现对圆形要素的点击、悬浮等操作，为用户提供更加丰富和直观的地图体验。

4. 深入理解通过对circle方法的深入使用，可以发现它在地图展示和交互方面有着非常大的潜力。

可以结合动态数据，实时更新圆形要素的位置和属性，实现实时监控和展示；还可以结合其他图层，实现更加复杂的地图数据展示和切换。

circle方法不仅仅是简单的绘图工具，更是一个可以灵活运用的地图开发利器。

5. 个人观点作为openlayers中的重要功能之一，circle方法在地图开发中有着举足轻重的地位。

其简单易用的特点，加上丰富的扩展能力，使得它成为了开发者们实现地图展示需求的利器。

在今后的开发过程中，我将更加深入地学习和使用这一功能，结合实际项目需求，发挥出它的最大潜力。

6. 总结通过本文对openlayers中circle方法的深度探索，我们不仅了解了其基础知识和使用方法，还深入理解了其高级应用和潜力。

在地图开发中，灵活运用circle方法将为我们带来更加丰富和多样的地图展示效果，为用户提供更加直观和便捷的地理信息展示和交互体验。

openlayers5-距离测量和面积量测

openlayers5-距离测量和⾯积量测升级到最新版openlayers5.2,重新写量测⽅法，官⽹examples⾥⾯有实现好的代码，但是项⽬是基于vue的模块化开发，官⽹的例⼦直接引⼊不是很合适，并且官⽹的例⼦是可以⼀直连续的测量，⽽项⽬中需要测量⼀次的⽅法，所以需要对官⽹例⼦做⼀些改进，在此mark⼀下，有同样需要的朋友们直接拿⾛不谢o(￣︶￣)o效果图如下所⽰：实现Measure.jsimport Draw from 'ol/interaction/Draw'import VectorSource from 'ol/source/Vector';import VectorLayer from 'ol/layer/Vector';import TileLayer from 'ol/layer/Tile';import OSM from 'ol/source/OSM';import {unByKey} from 'ol/Observable.js';import Overlay from 'ol/Overlay';import {getArea,getLength} from 'ol/sphere.js';import View from 'ol/View';import {LineString,Polygon} from 'ol/geom.js';import {Circle as CircleStyle,Fill,Stroke,Style} from 'ol/style.js';export default{measure(map, measureType) {/*** Currently drawn feature.* @type {module:ol/Feature~Feature}*/var sketch;/*** The help tooltip element.* @type {Element}*/var helpTooltipElement;/*** Overlay to show the help messages.* @type {module:ol/Overlay}*/var helpTooltip;/*** The measure tooltip element.* @type {Element}*/var measureTooltipElement;/*** Overlay to show the measurement.* @type {module:ol/Overlay}*/var measureTooltip;/*** Message to show when the user is drawing a polygon.* @type {string}*/var continuePolygonMsg = '继续点击绘制多边形';/*** Message to show when the user is drawing a line.* @type {string}*/var continueLineMsg = '继续点击绘制线';createMeasureTooltip();createHelpTooltip();/*** Handle pointer move.* @param {module:ol/MapBrowserEvent~MapBrowserEvent} evt The event. */var pointerMoveHandler = function (evt) {if (evt.dragging) {return;}/** @type {string} */var helpMsg = '请点击开始绘制';if (sketch) {var geom = (sketch.getGeometry());if (geom instanceof Polygon) {helpMsg = continuePolygonMsg;} else if (geom instanceof LineString) {helpMsg = continueLineMsg;}}helpTooltipElement.innerHTML = helpMsg;helpTooltip.setPosition(evt.coordinate);helpTooltipElement.classList.remove('hidden');};map.on('pointermove', pointerMoveHandler);map.getViewport().addEventListener('mouseout', function () {helpTooltipElement.classList.add('hidden');});var draw;var formatLength = function (line) {var length = getLength(line);var output;if (length > 100) {output = (Math.round(length / 1000 * 100) / 100) +' ' + 'km';} else {output = (Math.round(length * 100) / 100) +' ' + 'm';}return output;};var formatArea = function (polygon) {var area = getArea(polygon);var output;if (area > 10000) {output = (Math.round(area / 1000000 * 100) / 100) +' ' + 'km<sup>2</sup>';} else {output = (Math.round(area * 100) / 100) +' ' + 'm<sup>2</sup>';}return output;};var source;// var layer ;// 获取存放feature的vectorlayer层。

openlayers4官方例子学习---DAY2

openlayers4官⽅例⼦学习---DAY2加载OSM地图<body><a class="skiplink" href="#map">Go to map</a><div id="map" class="map" tabindex="0"></div><button id="zoom-out">Zoom out</button><button id="zoom-in">Zoom in</button><script>var map = new ol.Map({layers: [new yer.Tile({source: new ol.source.OSM()})],target: 'map',controls: ol.control.defaults({attributionOptions: /** @type {olx.control.AttributionOptions} */ ({collapsible: false})}),view: new ol.View({center: [0, 0],zoom: 2})});document.getElementById('zoom-out').onclick = function() {//缩⼩var view = map.getView();var zoom = view.getZoom();view.setZoom(zoom - 1);};document.getElementById('zoom-in').onclick = function() {//放⼤var view = map.getView();var zoom = view.getZoom();view.setZoom(zoom + 1);};</script></body>使⽤⼀个动态ArcGIS REST MapService，这个源类型⽀持地图和图像服务，动态 ArcGIS服务。

OpenLayers二维地图使用教程

OpenLayers1 OpenLayers简介OpenLayers是由MetaCarta公司开发的，用于WebGIS客户端的JavaScript包。

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

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

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

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

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

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

OpenLayers所能够利用的地图数据资源“丰富多彩”，在这方面提供给拥护较多的选择，比如WMS、WFS、GoogleMap、KaMap、MSVirtualEarth、WorldWind等等。

当然，也可以用简单的图片作为源。

在操作方面，OpenLayers 除了可以在浏览器中帮助开发者实现地图浏览的基本效果，比如放大（Zoom In）、缩小（Zoom Out）、平移（Pan）等常用操作之外，还可以进行选取面、选取线、要素选择、图层叠加等不同的操作，甚至可以对已有的OpenLayers 操作和数据支持类型进行扩充，为其赋予更多的功能。

例如，它可以为OpenLayers 添加网络处理服务WPS 的操作接口，从而利用已有的空间分析处理服务来对加载的地理空间数据进行计算。

openlayers 的 readfeatures

OpenLayers 是一个开源的地图 JavaScript 库，它提供了一系列强大的地图显示和交互功能。

在 OpenLayers 中，readfeatures 方法是一个用于读取地图中用户绘制的要素的函数。

本文将从以下几个方面详细介绍 openlayers 的 readfeatures 方法：一、readfeatures 方法的基本介绍readfeatures 方法是 OpenLayers 中用于读取用户绘制的要素的函数。

用户在地图上进行绘制操作后，readfeatures 方法可以将绘制的要素读取出来，以便进行后续的操作。

readfeatures 方法一般接受一个参数，该参数是一个包含要素信息的对象。

二、readfeatures 方法的使用示例下面是一个简单的示例，演示了如何在 OpenLayers 中使用readfeatures 方法读取用户绘制的要素：```javascript// 创建一个绘制要素的交互对象var draw = new ol.interaction.Draw({source: source,type: 'Point'});// 将绘制要素的交互对象添加到地图中map.addInteraction(draw);// 绑定 drawend 事件，该事件在绘制结束时触发draw.on('drawend', function(event) {// 从绘制的要素中获取要素信息var feature = event.feature;// 调用 readfeatures 方法读取要素信息var features = readfeatures(feature);// 在控制台输出读取到的要素信息console.log(features);});```以上示例中，首先创建了一个绘制要素的交互对象 draw，并将其添加到地图中。

然后绑定了 drawend 事件，当用户完成绘制操作时会触发该事件。

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：新增弹出窗口。

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

OpenLayers教程1开始使用openlayers1.1设置先到它的官方网站下载他的压缩包，解压。

拷贝目录下的OpenLayer.js、根目录下的lib目录、根目录下的img目录到你网站的Scripts目录下（当然，这个只是例子，您网站的目录结构您自己说得算，只要保证OpenLayers.js，/lib，/img在同一目录中即可）。

然后，创建一个****.html作为查看地图的页面。

2试验openlayers环境：geoserver1.7Openlayers2.4Dreamviever82.1第一个地图窗口目标：用openlayers加载geoserver wms。

步骤：（1）空白html文件（2）插入div-map（3）为div付风格以上为未加载地图的静态页面代码为：效果为：（4）插入openlayers代码引用<link rel="stylesheet" type="text/css" href="../theme/default/style.css"/><script src="OpenLayers.js" type="text/javascript"></script>（5）写js代码，主要是init（）第一个地图窗口就完成了注1．js中defer的作用是页面加载完成后，执行脚本。

注2．2222.2控制地图与div的占据区域目标：让地图默认占满展现区方法：设置map的options，由其中两个因素决定：maxExtent－最大地图边界；maxResolution－最大解析度。

当maxExtent设置为地图的最大边界后，maxResolution设置为auto，那地图就占满DIV。

2.4地图控制－鼠标坐标拾取目标：地图上鼠标移动拾取步骤：map.addControl(new OpenLayers.Control.MousePosition());注1．Control的构造函数可以带参数，var control = new OpenLayers.Control({div: myDiv});例如：map.addControl(newOpenLayers.Control.MousePosition({element: $('location')}));就是制定在页面的location元素位置显示坐标。

注2．2注3．22.5地图控制－其他几个常用控件初次、初级使用初次使用，就只写下代码与作用，至于参数以后用到进行研究。

（1）鼠标拖动、滚轴放大缩小，自带一个拉框放大。

map.addControl(new OpenLayers.Control.MouseToolbar());（2）图层控制map.addControl(new yerSwitcher({'ascending':false}));（3）填加永久链接map.addControl(new OpenLayers.Control.Permalink());（4）鹰眼窗口map.addControl(new OpenLayers.Control.OverviewMap());（5）默认的键盘操作支持，比如pageup、等map.addControl(new OpenLayers.Control.KeyboardDefaults());1Openlayers关于数据加载1.1GML目标：加载GML图层步骤：gmlLayer=new yer.GML("GML","gml/polygon.xml",{isBaseLayer: true} );//map.addLayers([untiled,gmlLayer]);map.addLayer(gmlLayer);注1．isBaseLayer属性确定该图层是否是基础图层。

1.2其他类型数据加载目前还不需要深究，暂不研究。

2要素编辑关于openlayers里的要素编辑，就是客户端的操作，因此分为操作和保存两个环节研究。

2.1关于矢量要素的填加分为点、线、多边形以一段例子来说明要素的填加。

<html xmlns="/1999/xhtml"><head>……<script src="OpenLayers.js"></script><script type="text/javascript">var map, drawControls;OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';//****************************************************************** **********①初始化函数，填加一个基础图和一个矢量图层//****************************************************************** **********function init(){map = new Ope－nLayers.Map('map');var wmsLayer = new yer.WMS("OpenLayers WMS","/wms/vmap0",{layers: 'basic'});var vectors = new yer.Vector("Vector Layer");map.addLayers([wmsLayer, vectors]);//****************************************************************** **********②定义一个Control参数对{point:画要素点,line:画线,polygon:画多边形,select:要素选择,selecthover:要素选择}－//****************************************************************** **********drawControls = {point: new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.Point),line: new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.Path),polygon: new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.Polygon),select: new Open―――Layers.Control.SelectFeature(vectors,{clickout: false, toggle: false,multiple: false, hover: false,toggleKey: "ctrlKey", // ctrl key removes from selectionmultipleKey: "shiftKey", // shift key adds to selectionbox: true}),selecthover: new OpenLayers.Control.SelectFeature(vectors,{multiple: false, hover: true,toggleKey: "ctrlKey", // ctrl key removes from selectionmultipleKey: "shiftKey" // shift key adds to selection})};//****************************************************************************③控制动作选择//****************************************************************** **********for(var key in drawControls) {map.addControl(drawControls[key]);}map.setCenter(new OpenLayers.LonLat(0, 0), 3);}function toggleControl(element) {for(key in drawControls) {var control = drawControls[key];if(element.value == key && element.checked) {control.activate();} else {control.deactivate();}}}//****************************************************************** **********④控制撤销选择动作//****************************************************************** **********function update() {var clickout = document.getElementById("clickout").checked;drawControls.select.clickout = clickout;var hover = document.getElementById("hover").checked;drawControls.select.hover = hover;drawControls.select.box = document.getElementById("box").checked;if(drawControls.select.active) {drawControls.select.deactivate();drawControls.select.activate();}}</script></head><body onload="init()"><h1 id="title">OpenLayers Select Feature Example</h1><p id="shortdesc">Select a feature on hover or click with the Control.SelectFeature on avector layer.</p><div id="map" class="smallmap"></div><ul id="controlToggle"><li><input type="radio" name="type" value="none" id="noneToggle"onclick="toggleControl(this);" checked="checked" /><label for="noneToggle">navigate</label></li><li><input type="radio" name="type" value="point" id="pointToggle"onclick="toggleControl(this);" /><label for="pointToggle">draw point</label></li>。