您的位置：360文档中心› openlayers经典例子

openlayers经典例子

合集下载

openlayers5-距离测量和面积量测

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

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

一：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经典案例总结

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项目分析——（九）控件-睁眼瞎看-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实现地图的基本操作本⽂实例为⼤家分享了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方法

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 参数应该是一个地理对象数组，包含地图标记、线条、面等。

  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 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。

相关文档
最新文档