openlayers经典例子

合集下载

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层。

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

一：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地图服务的数据。

OpenLayer2 Openlayer3经典案例总结

loader:function(extent,resolution,projection){
varurl='/geoserver/wfs?service=WFS&'+
'version=1.1.0&request=GetFeature&typename=osm:water_areas&'+
<style>
.map{
height:400px;
width:100%;
}
</style>
<scriptsrc="/en/v3.7.0/build/ol.js"type="text/javascript"></script>
<title>OpenLayers 3 example</title>
map.addControl(newOpenLayers.Control.OverviewMap());
map.addControl(newOpenLayers.Control.PanZoomBar());
varvlayer=yer.Vector("Editable");
'outputFormat=text/javascript&format_options=callback:loadFeatures'+
'&srsname=EPSG:3857&bbox='+extent.join(',')+',EPSG:3857';
// use jsonp: false to prevent jQuery from adding the "callback" //阻止JQuery自己增加callback函数

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基类的实现过程，再选择几个典型的子类分析一下。

Openlayers实现地图的基本操作

Openlayers实现地图的基本操作本⽂实例为⼤家分享了Openlayers实现地图基本操作的具体代码，供⼤家参考，具体内容如下1、新建⼀个html页⾯，引⼊ol.js和ol.css⽂件，然后在body中创建⼀个Div标签和4个Button按钮，⽤来实现地图的放⼤、缩⼩、平移等功能；2、代码实现<!DOCTYPE html><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><script src="../lib/ol/ol.js"></script><link href="../css/ol.css" rel="stylesheet" /><style type="text/css">#menu{float : left;position : absolute;bottom : 10px;font-size : 20px;z-index : 2000;}</style><script type="text/javascript">window.onload = function () {//实例化map对象并加载地图var map = new ol.Map({//存放地图⽬标容器target: 'map',//加载图层layers: [//新建⼀个⽡⽚地图图层new yer.Tile({//⽡⽚地图数据源source: new ol.source.OSM()})],//初始化视图view: new ol.View({//视图中⼼点坐标center: [12550000, 3680000],//缩放等级zoom: 8,//最⼩缩放等级minZoom: 6,//最⼤缩放等级maxZoom: 12,//地图旋转30度rotation: Math.PI/6})});//获取地图的初始化信息var view = map.getView();var zoom = view.getZoom();var center = view.getCenter();var rotation = view.getRotation();//地图缩⼩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);};//地图平移document.getElementById("panto").onclick = function () { //获取地图当前视图var view = map.getView();//指定要平移到的位置的坐标var position = ol.proj.fromLonLat([115.2341, 32.4652]);//重设地图中⼼点，实现平移view.setCenter(position);};//地图重置document.getElementById("restore").onclick = function () { //重置中⼼点位置为初始化位置view.setCenter(center);//重置旋转⾓度为初始化⾓度view.setRotation(rotation);//重置缩放等级为初始化缩放等级view.setZoom(zoom);};}</script></head><body><div id="map"><div id="menu"><button id="zoom-out">缩⼩</button><button id="zoom-in">放⼤</button><button id="panto">平移⾄...</button><button id="restore">重置</button></div></div></body></html>3、运⾏结果初始化界⾯单击缩⼩按钮，实现地图缩⼩单击放⼤按钮，实现地图放⼤单击平移⾄按钮，地图平移到指定的位置（⾩阳附近）单击地图右上⾓的箭头按钮，使地图⽆旋转单击重置按钮，地图回到初始状态以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

openlayers addfeatures方法

openlayers addfeatures方法【原创实用版】目录1.OpenLayers 简介2.addFeatures 方法的作用3.addFeatures 方法的参数4.addFeatures 方法的示例5.使用 addFeatures 方法的注意事项正文1.OpenLayers 简介OpenLayers 是一个开源的 JavaScript 库，用于在网页上展示地图。

它允许用户在网页上展示多种地图来源的地图，包括矢量地图、栅格地图和地图标记等。

OpenLayers 具有丰富的功能，可以满足各种地图展示需求。

2.addFeatures 方法的作用在 OpenLayers 中，addFeatures 方法是用于向地图添加地图标记、线条、面等图层的方法。

通过该方法，用户可以在地图上展示各种地理信息数据，如道路、建筑物、湖泊等。

3.addFeatures 方法的参数addFeatures 方法的参数主要包括以下几个：- features：需要添加的地图数据，通常是一个地理对象数组，包含地图标记、线条、面等。

- options：可选参数，用于设置添加图层的样式、事件等属性。

4.addFeatures 方法的示例下面是一个使用 addFeatures 方法添加地图标记的示例：```javascript// 创建一个地图实例var map = new OpenLayers.Map("map");// 创建一个矢量地图图层var vectorLayer = new yer.Vector("My Vector Layer");// 创建一个地图标记var marker = new OpenLayers.Feature.Marker({geometry: new OpenLayers.Geometry.Point(0, 0),map: map});// 将地图标记添加到矢量地图图层vectorLayer.addFeature(marker);// 将矢量地图图层添加到地图实例map.addLayer(vectorLayer);```5.使用 addFeatures 方法的注意事项在使用 addFeatures 方法时，需要注意以下几点：- features 参数应该是一个地理对象数组，包含地图标记、线条、面等。

openlayers arcgis调用方法

openlayers arcgis调用方法（实用版4篇）目录（篇1）1.OpenLayers 简介2.ArcGIS Server 离线瓦片服务的概念与应用3.使用 OpenLayers 加载 ArcGIS Server 离线瓦片服务的方法4.实例：HerryDong 的博客中的离线瓦片服务应用5.结论：OpenLayers 在离线瓦片服务加载方面的优势与意义正文（篇1）1.OpenLayers 简介OpenLayers 是一款开源的 JavaScript 库，用于在网页上展示地图。

它允许用户在网页上快速、方便地搭建地图应用，提供了丰富的地图功能和控件。

OpenLayers 支持多种地图数据源，如 ArcGIS Server、Google Maps 等，为用户提供了灵活的选择空间。

2.ArcGIS Server 离线瓦片服务的概念与应用ArcGIS Server 是 Esri 公司推出的一款地图服务器产品，提供了丰富的地图数据处理和发布功能。

离线瓦片服务是 ArcGIS Server 的一种地图数据发布方式，它将地图数据预先切片并存储为图像文件，用户可以在不需要连接到地图服务器的情况下加载和显示地图。

离线瓦片服务具有减轻服务器负担、提高地图加载速度等优点。

3.使用 OpenLayers 加载 ArcGIS Server 离线瓦片服务的方法要使用 OpenLayers 加载 ArcGIS Server 离线瓦片服务，需要按照以下步骤操作：（1）创建一个 HTML 文件，引入 OpenLayers 的 CSS 和JavaScript 库。

（2）在 HTML 文件中创建一个地图容器（map container），设置地图容器的尺寸和背景颜色。

（3）创建一个地图对象（map object），设置地图的投影、中心点和缩放级别等参数。

（4）使用 OpenLayers 的瓦片加载器（tile loader）加载 ArcGIS Server 离线瓦片服务。

openlayers实例第二十讲-OpenLayers离线地图快速实战(一)

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

和WFS规范， OpenLayers采用纯面向对象的JavaScript方
式开发，同时借用了Prototype框架和Rico库的一些组件。

采用OpenLayers作为客户端不存在浏览器依赖性。由于 OpenLayers采用JavaScript语言实现，而应用于Web浏览器
中的DOM（文档对象模型）由JavaScript实现，同时，
代码实战：pptwms.htm
ቤተ መጻሕፍቲ ባይዱ
欢迎访问我们的官方网站
北风网项目培训
第二十讲 OpenLayers离线地图快速实战（一）
讲师：tom5（北风网版权所有)

内网无法访问外网如何将地图底图提前下载到服务器端？ OpenLayers

/
OpenLayers 是由MetaCarta公司开发的，用于WebGIS客户端的JavaScript包，通过BSD License 发行。它实现访问地理空间数据的方法都符合行业标准，比如OpenGIS的WMS

OpenLayers

OpenLayers案例一

OpenLayers案例⼀序OpenLayers 是⼀个专为Web GIS 客户端开发提供的JavaScript 类库包，⽤于实现标准格式发布的地图数据访问。

例⼦<!doctype html><html lang="en"><head><link rel="stylesheet" href="../css/ol.css"> <?--链接⼀个外部样式表--><style>.map2 { <?--前边的点必不可少-->height: 400px;width: 100%;}</style><script src="../build/ol.js"></script> <?--链接⼀个外部脚本⽂件--><title>OpenLayers 3 example</title></head><body><h2>My Map</h2><div id="map" class="map2"></div> <?--ID如⼈的⾝份证，唯⼀标⽰（1对1）。

Class如⼈穿的⾐服，⽤于定义这个DIV的样式（n对1），这⾥⽤到了上⾯stype定义的map2样式--> <script>var map = new ol.Map({target: 'map',layers: [new yer.Tile({source: new ol.source.MapQuest({layer: 'sat'})})],view: new ol.View({center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),zoom: 4})});</script></body></html>运⾏图⽰为了调⽤map，⼀个web页⾯需要做3件事情：调⽤OpenLayers<div>map容器 (<div>标签⽤来定义⽂档中的分区或节)JavaScript新建map调⽤OpenLayers第⼀部分是调⽤JavaScript库。

openlayers addfeature方法

openlayers addfeature方法（原创实用版4篇）《openlayers addfeature方法》篇1OpenLayers 是一款开源的JavaScript 库，用于在网页上展示地图。

addFeature 方法是OpenLayers 中用于向地图添加地图特征（如点、线、面等）的方法。

要使用addFeature 方法，首先需要创建一个地图对象（Map Object），然后创建一个特征对象（Feature Object），最后将特征对象添加到地图对象中。

下面是一个简单的示例：```javascript// 创建一个地图对象var map = new ol.Map({target: "map", // 地图容器，这里为ID 为"map" 的HTML 元素layers: [ // 添加地图图层new yer.Tile({source: new ol.source.OSM() // 使用OSM 图层})],tools: [ // 添加地图工具new ol.feature.Feature.Draw({radius: 10, // 半径featureType: "water", // 类型，可以是"water" 或"land"enable dragging: true // 是否允许拖动}),new ol.feature.Feature.Draw({radius: 10,featureType: "land",enable dragging: true})]});// 创建一个特征对象var feature = new ol.feature.Feature();feature.setGeometry(new ol.geom.Point(ol.proj.fromLonLat([104, 36]), {radius: 5})); // 以经纬度创建一个点特征// 将特征对象添加到地图对象中map.addFeature(feature);```在这个示例中，我们创建了一个OpenLayers 地图对象，添加了一个OSM 图层和一个水图层。

vue openlayer例子

1. 概述Vue.js是一种流行的JavaScript框架，用于构建灵活且高效的用户界面。

而OpenLayers则是一个用于地图绘制和交互的JavaScript库。

本文将会展示如何在Vue.js中使用OpenLayers，并给出一个简单的实例。

2. Vue.js和OpenLayers的结合2.1 Vue.jsVue.js是一种流行的JavaScript框架，它的核心聚焦在视图层，同时也是一款非常灵活的框架。

通过使用Vue.js，开发者可以轻松构建交互式的用户界面。

2.2 OpenLayersOpenLayers是一个用于地图绘制和交互的JavaScript库，它提供了丰富的地图功能和交互性。

借助OpenLayers，开发者可以在网页上轻松创建和展示地图，并与用户进行交互。

3. 在Vue.js中使用OpenLayers在Vue.js中使用OpenLayers可以通过安装相应的npm包，然后在Vue组件中进行引入和使用。

以下是一个简单的示例：3.1 安装OpenLayers我们需要通过npm安装OpenLayers依赖包：```jsnpm install ol```3.2 在Vue组件中引入和使用OpenLayers在Vue组件中，我们可以直接引入OpenLayers并使用它来创建地图。

以下是一个简单的示例：```js<template><div id="map" style="width: 100; height: 400px;"></div></template><script>import 'ol/ol.css';import Map from 'ol/Map';import View from 'ol/View';import TileLayer from 'ol/layer/Tile';import OSM from 'ol/source/OSM';export default {mounted() {const map = new Map({target: 'map',layers: [new TileLayer({source: new OSM() })],view: new View({center: [0, 0],zoom: 2})});}}</script><style scoped>#map {width: 100;height: 400px;}</style>```在上面的示例中，我们在Vue组件的mounted()生命周期钩子中创建了一个简单的地图。

openlayers 语法

OpenLayers 语法OpenLayers是一个用于创建交互式地图的JavaScript库。

它的语法和对象结构是JavaScript风格的，同时包含一些专有的API和概念。

以下是OpenLayers中的一些基本概念和语法示例：1.创建Map对象在OpenLayers中，首先需要创建一个Map对象来容纳地图。

这个对象需要指定一个HTML元素（通常是一个<div>）作为地图的容器。

javascriptvar map = new OpenLayers.Map("map_div");2.添加图层地图由多个图层组成，每个图层包含一种类型的地理数据（例如街道、地形、卫星图像等）。

你可以通过调用addLayer方法来向地图添加图层。

Javascript3.控制图层可见性你可以通过调用图层的setVisibility方法来控制图层的可见性。

javascriptlayer.setVisibility(false); // 隐藏图层layer.setVisibility(true); // 显示图层4.地图缩放和中心点设置你可以通过调用zoomTo或setCenter方法来设置地图的缩放级别和中心点。

javascriptmap.zoomTo(5); // 设置地图缩放级别为5map.setCenter(new OpenLayers.LonLat(100, 0), 5); // 设置地图中心点为(100, 0)，缩放级别为55.添加控件OpenLayers提供了许多内置的控件，例如缩放滑块、图层切换器等。

你可以通过调用addControl方法向地图添加控件。

javascriptvar zoom = new OpenLayers.Control.Zoom();map.addControl(zoom);zoom.activate();6.处理事件你可以通过监听地图和图层的事件来响应用户交互。

openlayers实现地图弹窗

openlayers实现地图弹窗本⽂实例为⼤家分享了openlayers实现地图弹窗的具体代码，供⼤家参考，具体内容如下<html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="https:///en/v5.3.0/css/ol.css" /><script type="text/javascript" src="https:///en/v5.3.0/build/ol.js"></script><script src="https:///jquery-3.5.1.min.js"></script><title>Ol3 popup</title><style type="text/css">body, #map {border: 0px;margin: 0px;padding: 0px;padding: 0px;padding: 0px;width: 100%;height: 100%;font-size: 13px;}.ol-popup {display: none;position: absolute;background-color: white;-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.2);-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));border: 1px solid #cccccc;bottom: 12px;left: -50px;width: 200px;}.ol-popup:after, .ol-popup:before {top: 100%;border: solid transparent;content: " ";height: 0;width: 0;position: absolute;pointer-events: none;}.ol-popup:after {border-top-color: white;border-width: 10px;left: 48px;margin-left: -10px;}.ol-popup:before {border-top-color: #cccccc;border-width: 11px;left: 48px;margin-left: -11px;}.popup-title{font-weight: bold;border-bottom:1px solid #cccccc;padding: 5px 8px;}.popup-content{padding: 5px 8px;}.ol-popup-closer {text-decoration: none;position: absolute;top: 6px;right: 6px;}.ol-popup-closer:after {content: "✖";}</style><script type="text/javascript">function init(){var format = 'image/png';var bounds = [73.4510046356223, 18.1632471876417,134.976797646506, 53.5319431522236];var vectorSource = new ol.source.TileWMS({url: 'http://localhost:8080/geoserver/map/wms?service=WMS&version=1.1.0&request=GetMap&layers=map:capital&styles=&bbox=87.57607938302118,19.97015007757606,126.56705607814561,45.69385655384421&width=768&height=506&srs=EPSG:4326& params:{'LAYERS':'capital','TILED':false},serverType:'geoserver'});var untiled = new yer.Tile({source: vectorSource});var container = document.getElementById('popup');var content = document.getElementById('popup-content');var title = document.getElementById('popup-title');var closer = document.getElementById('popup-closer');closer.onclick = function(){container.style.display = 'none';closer.blur();return false;};var overlay = new ol.Overlay({element: container});var osmsource = new ol.source.OSM()//console.log(osmsource.getProjection().getCode());var map = new ol.Map({controls: ol.control.defaults({attribution: false}),target: 'map',layers: [new yer.Tile({source: osmsource, //将数据源坐标系统进⾏转换projection:ol.proj.getTransform("EPSG:3857", "EPSG:4326")}),untiled],overlays: [overlay],view: new ol.View({center:[117,42],projection:'EPSG:4326',zoom:1})});map.addOverlay(overlay);map.getView().fit(bounds, map.getSize());map.on('click', function(evt) {var coordinate = evt.coordinate;var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(coordinate, 'EPSG:4326', 'EPSG:4326'));overlay.setPosition(coordinate);content.innerHTML = '<p>You clicked here:</p><code>' + hdms +'</code>';container.style.display = 'block';title.innerHTML = "提⽰信息";title.style.display = 'block';map.getView().setCenter(coordinate);});}</script></head><body onLoad="init()"><div id="map"><div id="popup" class="ol-popup"><a href="#" rel="external nofollow" id="popup-closer" class="ol-popup-closer"></a><div id="popup-title" class="popup-title"></div><div id="popup-content" class="popup-content"></div></div></div></body></html>效果图：以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

openlayers foreachfeature 用法

openlayers foreachfeature 用法
OpenLayers中`forEachFeature`方法用于遍历地图中的所有要素，该方法接受一个回调函数作为参数，该函数将对每个要素进行操作。

下面是一个简单的示例代码：```javascript
// 获取地图中的所有feature
var features = map.getLayers().getArray()[0].getSource().getFeatures();
// 遍历feature
features.forEach(function(feature) {
// 在控制台输出feature的属性
console.log(feature.getProperties());
});
```
在回调函数中，你可以根据自己的需求执行任何操作，例如获取要素的属性、修改要素的样式等。

在OpenLayers中，有多种方法可以获取要素的中心点，具体选用哪种方法取决于具体需求和情况。

具体的使用方法可能会因版本更新而有所不同，如果你还有关于OpenLayers的问题，请提供更多详细信息继续向我提问。

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服务。

openlayer绘制矩形的方法

OpenLayers绘制矩形的方法OpenLayers是一个开源的JavaScript库，用于在Web浏览器上展示地理信息。

它提供了丰富的功能，包括地图显示、地图交互和地图绘制等。

在本文中，我们将探讨如何使用OpenLayers绘制矩形。

1. 准备工作在开始绘制矩形之前，我们需要进行一些准备工作。

首先，我们需要引入OpenLayers库。

你可以通过下载OpenLayers库，或者使用CDN来引入它。

下面是一个使用CDN引入OpenLayers的例子：<!DOCTYPE html><html><head><title>OpenLayers绘制矩形</title><link rel="stylesheet" href="" type="text/css"><script src=""></script></head><body><div id="map" style="width: 100%; height: 400px;"></div><script>// 在这里编写绘制矩形的代码</script></body></html>2. 创建地图在绘制矩形之前，我们需要创建一个地图。

可以使用OpenLayers的Map类来创建地图。

在创建地图时，我们需要指定地图容器的ID，以及地图的视图和图层。

下面是一个创建地图的例子：var map = new ol.Map({target: 'map',layers: [new yer.Tile({source: new ol.source.OSM()})],view: new ol.View({center: ol.proj.fromLonLat([0, 0]),zoom: 2})});在上面的例子中，我们创建了一个包含一个OSM图层的地图，并设置了地图的初始视图。

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

Openlayers经典例子
案例地址 (2)
一. Popup (2)
二、图层叠加 (3)
三、编辑功能 (5)
四、鹰眼 (7)
五、书签及样式 (7)
六、改变显示内容 (9)
七、SLD (9)
八、动画效果 (10)
九、获得属性 (11)
十、局部放大 (12)
十一、记录上次操作历史 (12)
十二、鼠标滚轮 (13)
十三、鼠标坐标 (13)
十四、标签 (14)
十五、全屏 (14)
十六、显示缩放比例 (15)
案例地址
/releases/OpenLayers-2.10/examples/ /dev/examples/
一.Popup
/dev/examples/sundials.html
/dev/examples/sundials-spherical-mercator.html
/dev/examples/select-feature-openpopup.html 二、图层叠加
/dev/examples/layerswitcher.html
/dev/examples/wmts-getfeatureinfo.html
/dev/examples/wmts-capabilities.html
/dev/examples/wmst.html
三、编辑功能
/dev/examples/wfs-snap-split.html
/dev/examples/snap-split.html
四、鹰眼
五、书签及样式
/dev/examples/styles-unique.html
/dev/examples/styles-context.html
六、改变显示内容
七、SLD
/dev/examples/SLDSelect.html
八、动画效果
/dev/examples/rotate-features.html 九、获得属性
/dev/examples/osm-layer.html 十、局部放大
/dev/examples/navtoolbar.html 十一、记录上次操作历史
/dev/examples/navigation-history.html 十二、鼠标滚轮
/dev/examples/mousewheel-interval.html 十三、鼠标坐标
/dev/examples/mouse-position.html 十四、标签
/dev/examples/mm.html
十五、全屏
十六、显示缩放比例
/dev/examples/fractional-zoom.html。