当前位置：文档之家 › OpenLayer2 Openlayer3经典案例总结

OpenLayer2 Openlayer3经典案例总结

  • 格式：docx
  • 大小：38.43 KB
  • 文档页数：12

下载文档原格式

  / 12

合集下载

OpenLayers-3-入门教程

OpenLayers-3-入门教程
注：这些步骤的顺序很重要，OpenLayers 库必须在在自定义脚本执行之前加载，在此示例中，
OpenLayers 库在文档的<head>部分加载（<script src="ol3/ol.js"></script>）。同样的，在文档中作为显示 容器的元素（该实例中为<div id="map"></div>）准备好之前，自定义地图初始化代码是不能执行的，将初 始化代码添加到文档中<body>的后面，我们能在地图生成前，确保库已加载，显示容器已准备好。
<link rel="stylesheet" href="ol3/ol.css" type="text/css"> <style> #map {
height: 256px; width: 512px; } </style> <title>OpenLayers 3 example</title> <script src="ol3/ol.js" type="text/javascript"></script> </head> <body> <h1>My Map</h1> <div id="map"></div> <script type="text/javascript"> var map = new ol.Map({ target: 'map', layers: [ new yer.Tile({

OpenLayers心得

OpenLayers心得

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

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

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

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

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

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

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

OpenLayers实现点要素图层的聚合显示的方法

OpenLayers实现点要素图层的聚合显示的方法

OpenLayers实现点要素图层的聚合显⽰的⽅法⽬录1、前⾔2、点要素图层的聚合3、聚合特殊处理⼀4、聚合特殊处理⼆5.、结语1、前⾔在很多情况下，点要素图层中的要素数量可能会成百上千，这时候如果不做任何处理直接加载到地图上不仅会使⽤户视觉体验下降，⽽且也会造成地图界⾯的卡顿。

下⾯这段代码创建了1000个随机点进⾏显⽰：<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta charset="utf-8" /><title>OpenLayers</title><style>html, body, #map {width: 100%;height: 100%;margin: 0;padding: 0;}</style><link href="libs/ol/ol.css" rel="stylesheet" /><script src="libs/ol/ol.js"></script></head><body><div id="map"></div><script>// 随机创建1000个要素var source = new ol.source.Vector();for (var i = 1; i <= 200; i++) {var coordinates = [120.00 + Math.random(), 30.00 + Math.random()];var feature = new ol.Feature(new ol.geom.Point(coordinates));source.addFeature(feature);}for (var i = 1; i <= 200; i++) {var coordinates = [120.01 + Math.random(), 30.01 + Math.random()];var feature = new ol.Feature(new ol.geom.Point(coordinates));source.addFeature(feature);}for (var i = 1; i <= 200; i++) {var coordinates = [120.02 + Math.random(), 30.02 + Math.random()];var feature = new ol.Feature(new ol.geom.Point(coordinates));source.addFeature(feature);}for (var i = 1; i <= 200; i++) {var coordinates = [120.03 + Math.random(), 30.03 + Math.random()];var feature = new ol.Feature(new ol.geom.Point(coordinates));source.addFeature(feature);}for (var i = 1; i <= 200; i++) {var coordinates = [120.04 + Math.random(), 30.04 + Math.random()];var feature = new ol.Feature(new ol.geom.Point(coordinates));source.addFeature(feature);}// 创建图层var layer = new yer.Vector({source: source,style: function (feature, resolution) {var style = new ol.style.Style({image: new ol.style.Icon({src: 'img/location.png'})})return style;}});// 创建地图var map = new ol.Map({target: 'map',layers: [new yer.Tile({source: new ol.source.OSM()}),layer],view: new ol.View({projection: 'EPSG:4326',center: [120, 30],zoom: 10,minZoom: 5,maxZoom: 14})});</script></body></html>运⾏结果如下图所⽰：这么多点挤在⼀起，是不是感觉很恶⼼？⼀般来说，如果⼀个点要素图层中的点数量很多，我们就会采取图层聚合的⽅式对其进⾏处理。

openlayers经典例子

openlayers经典例子

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。

openlayer开发完全解读

openlayer开发完全解读

看好多人都‎写Open‎L ayer‎s的一些说‎明，但总感‎觉没有具体‎事例解释，‎不太爽。

抽‎点时间从O‎p enLa‎y ers官‎方网站上找‎些例子具体‎解释一下M‎a p、Ve‎c tor、‎F eatu‎r e类的简‎单用法。

有‎些东西是自‎己工作经验‎的理解，没‎完全按英文‎解释来理解‎，希望不会‎对大家造成‎误解。

工作‎太忙，以后‎又时间和精‎力就不断地‎解释点，目‎前有100‎多个例子呢‎。

以下程‎序拷到本机‎应该就能直‎接应用，我‎是在Geo‎s erve‎r中运转地‎。

<h‎t ml x‎m lns=‎"http‎://ww‎w.w3.‎o rg/1‎999/x‎h tml"‎>‎<hea‎d>‎‎<tit‎l e>创建‎不同的Fe‎a ture‎类实例—‎———在‎电子地图上‎绘制Fea‎t ure对‎象实例的方‎式有两种，‎一种是使用‎默认方式（‎但在相应的‎C SS表中‎也可以更换‎图片），另‎一种是自己‎做图片，并‎根据用户选‎择来响应在‎电子地图上‎创建的不同‎F eatu‎r e类实例‎请求</t‎i tle>‎‎ <‎l ink ‎r el="‎s tyle‎s heet‎" hre‎f="..‎/them‎e/def‎a ult/‎s tyle‎.css"‎type‎="tex‎t/css‎" />‎‎ <!‎--本页中‎的样式表-‎->‎‎<sty‎l e ty‎p e="t‎e xt/c‎s s">‎‎‎‎<!--‎显示电子地‎图DIV的‎样式控制-‎->‎‎‎#map ‎{widt‎h: 51‎2px;h‎e ight‎: 512‎p x;bo‎r der:‎1px ‎s olid‎gray‎;}‎‎‎<!--R‎e diod‎对象的样式‎表，是用来‎判断用户请‎求状态的R‎e adio‎-->‎‎‎#con‎t rolT‎o ggle‎li {‎l ist-‎s tyle‎: non‎e;}‎‎‎p {w‎i dth:‎512p‎x;}‎‎ </s‎t yle>‎‎ <‎!--引入‎O penL‎a yers‎.js文件‎的路径地址‎，就像使用‎P orto‎t ype.‎j s一样-‎->‎‎<scr‎i pt s‎r c="O‎p enLa‎y ers.‎j s"><‎/scri‎p t>‎‎ <sc‎r ipt ‎t ype=‎"text‎/java‎s crip‎t">‎‎‎var ‎m ap, ‎d rawC‎o ntro‎l s;‎‎‎Open‎L ayer‎s.Uti‎l.onI‎m ageL‎o adEr‎r orCo‎l or =‎"tra‎n spar‎e nt";‎‎‎‎‎‎//自动加‎载的函数开‎始‎‎ f‎u ncti‎o n in‎i t(){‎‎‎‎ map‎= ne‎w Ope‎n Laye‎r s.Ma‎p('ma‎p');/‎/必须实例‎化的Map‎对象，是电‎子地图成图‎和其它一切‎用户请求和‎服务器相应‎的前提。

openlayer绘制矩形的方法

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图层的地图，并设置了地图的初始视图。

基于OpenLayers3的WebGIS系统 报告

《网络GIS设计与实现》课程大作业报告2019-2020学年第2学期专业：班级：姓名：学号：指导教师：二零二零年六月一、解题思路（1）放大、缩小、漫游、控件加载（鹰眼图、比例尺、缩放按钮）；（2）多图层加载、多图层切换显示，其中，要加载显示的图层包括但不限于谷歌地图、OSM地图、GeoJSON矢量数据等。

（3）左右地图双窗口联动显示：开发功能按钮，控制右边地图窗口的显示与关闭。

（4）图像绘制功能，要求实现点、线、面（矩形、多边形、圆形）等不同图形的绘制。

（5）对于面要素图形的绘制，要求能够编写样式设置面板（开发功能按钮，控制该面板的显示与关闭），自定义地设置边框的颜色、宽度，以及填充颜色。

二、实验代码1.界面HTML结构布局界面布局采用DIV盒模型布局，利用HTML进行结构控制，JavaScript实现页面自适应，工具条、图层控制及样式面板以Position：absoluted绝对定位的方式显示在界面上，默认隐藏状态，点击工具条可进行控制显示。

2.功能JavaScript实现：(1)地图联动自适应与浏览器界面自适应功能实现：通过获取浏览器的宽高大小，利用jQuery选择器对CSS样式进行控制，监听浏览器尺寸改变，实现容器随浏览器及联动地图的变化而改变。

(2)地图加载及联动：地图采用EPSG：4326坐标系，坐标中心[118，39]，缩放级别6级，通过定义相同的View实现地图联动交互，图层加载通过yer。

Tile的方式调用在线地图，代码如下图。

(3)实例化地图基本空间，如鹰眼、比例尺等。

(4)放大、缩小、漫游功能实现：通过View的缩放级别Zoom控制实现放大缩小，漫游需要改变鼠标样式。

(5)图形绘功能、停止绘制、清除图层功能实现：通过参数传递到Draw函数中，实现不同选择绘制不同的图形，并添加监听事件，停止绘制时只需要移除监听事件，清除图层需要将矢量图层的源Source置空。

(6)图层控制功能实现:通过获取图层的name属性，利用Javascript动态控制Html生成图层切换面板。

OpenLayers3实现图层控件功能

OpenLayers3实现图层控件功能本⽂实例为⼤家分享了OpenLayers3实现图层控件的具体代码，供⼤家参考，具体内容如下1. 前⾔在实际应⽤中，我们将加载到地图容器中的图层通过图层显⽰的控件功能，来显⽰加载的图层，便于⽤户查看与操作，OpenLayers 3 中并没有提供类似的图层控件，但是他的 API 却提供了该功能的相关接⼝，我们可以通过调⽤相关的接⼝，实现该功能。

2. 实现思路（1）新建⼀个⽹页，参考前⾯的⽂章加载OSM⽡⽚图层的⽅法，加载OSM⽡⽚、MapQuest 影像、JSON 与KML 格式的⽮量图。

（2）在地图容器中新建⼀个div 层，⽤于显⽰图层列表，在图层列表div 中，添加⼀个列表头部div 、图层列表 ul ，并通过 css 控制他的样式。

（3）编写加载图层列表的功能函数，在地图加载后，调⽤该⽅法，实现图层列表的展⽰。

3. 实现图层列表功能的代码如下：html：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>加载图层控件</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="css/ol.css" ><link rel="stylesheet" href="css/bootstrap.min.css" ><link rel="stylesheet" href="css/ZoomSlider.css" ><script src="js/ol.js"></script><script src="js/loadLayersControl.js"></script><style>body,html,div,ul,li,iframe,p,img {border: none;padding: 0;margin: 0;font-size: 14px;font-family: "微软雅⿊";}#map {width: 100%;height: 100%;position: absolute;}/* 图层控件层样式设置 */.layerControl {position: absolute;bottom: 5px;min-width: 200px;max-height: 200px;right: 0px;top: 5px;z-index: 2001;/*在地图容器中的层，要设置z-index的值让其显⽰在地图上层*/color: #ffffff;background-color: #4c4e5a;border-width: 10px;/*边缘的宽度*/border-radius: 10px;/*圆⾓的⼤⼩ */border-color: #000 #000 #000 #000;/*边框颜⾊*/}.layerControl .title {font-weight: bold;font-size: 15px;margin: 10px;}.layerTree li {list-style: none;margin: 5px 10px;}/* ⿏标位置控件层样式设置 */#mouse-position {float: left;position: absolute;bottom: 5px;width: 200px;height: 20px;z-index: 2000;/*在地图容器中的层，要设置z-index的值让其显⽰在地图上层*/}</style></head><body onload="init()"><div id="map"><div id="layerControl" class="layerControl"><div class="title"><label>图层列表</label></div><ul id="layerTree" class="layerTree"></ul></div></div></body></html>代码解析：创建⼀个id为 layerControl 的 div 作为显⽰图层列表，通过设置 z-index 让其显⽰到地图的上⽅，以及通过图层列表容器中新建⼀个列表（id为layerTree的ul）来承载地图容器中的图层。

(word完整版)OpenLayers接口文档

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

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

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

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

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

2、class OpenLayers。

Map2基于OpenLayers.Map封装，将自有地图图层和常用控件都已经加载在地图当中，用户无需关心地图数据源等问题,简化了用户的地图调用.实例化该类后即可创建一个可查看和使用的地图对象，其方法和属性与OpenLayers。

Map一致，见OpenLayers.Map类。

2、class OpenLayers。

MarkerOpenLayers命名空间下的Marker类可以被实例化为marker对象,用于标注地图上的位置，marker对象是由LonLat对象和Icon对象组合而成的.markers一般被添加到一个叫做yer。

Markers的特殊图层中。

需要注意的是，如果你在一个marker中使用了一个icon，也就是说，你不能在其他的marker中在使用它-—一旦你使用了这个icon，你应该clone（）这个icon然后在另外的marker中使用这个icon。

3、class OpenLayers。

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

Openlayer参考文档介绍


Maps............................................................................................................................................................................ 24 Raster Layers ............................................................................................................................................................... 24 Marker Layers ............................................................................................................................................................. 24 Events and Controls .................................................................................................................................................... 24 Vector Layers .............................................................................................................................................................. 25 Editing Tools ................................................................................................................................................................ 25
  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
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函数
})
],
view:newol.View({
center:ol.proj.transform([37.41,8.82],'EPSG:4326','EPSG:3857'),
zoom:4
})
});
</script>
</body>
</html>
放大缩小
<script>
varmap=newol.Map({
layers:[
collapsible:false
})
}),
view:newol.View({
center:[0,0],
zoom:2
})
});
document.getElementById('zoom-out').onclick=function(){
varview=map.getView();
varzoom=view.getZoom();
layers:'clabel,ctylabel,statelabel',
transparent:true
},{
opacity:.5
});
map.addLayers([wms_base,wms_labels]);
map.addControl(yerSwitcher({}));
'Specialty/ESRI_StateCityHighway_USA/MapServer';
varlayers=[
yer.Tile({
source:newol.source.MapQuest({layer:'sat'})
}),
yer.Tile({
ቤተ መጻሕፍቲ ባይዱextent:[-13884991,2870341,-7455066,6338219],
</head>
<body>
<h2>My Map</h2>
<divid="map"class="map"></div>
<scripttype="text/javascript">
varmap=newol.Map({
target:'map',
layers:[
yer.Tile({
source:newol.source.MapQuest({layer:'sat'})
// parameter to the URL
$.ajax({url:url,dataType:'jsonp',jsonp:false});
},
strategy:ol.loadingstrategy.tile(ol.tilegrid.createXYZ({
maxZoom:19
}))
});
/**
*JSONP WFS callback function.
</head>
<bodyonLoad="init()">
<divid="map_element"style="width:900px;height:900px"></div>
<scripttype="text/javascript">
varmap;
functioninit(){
map=newOpenLayers.Map('map_element',{
source:newol.source.TileArcGISRest({
url:url
})
})
];
varmap=newol.Map({
layers:layers,
target:'map',
view:newol.View({
center:[-10997148,4569099],
zoom:4
})
});
</script>
map.addLayer(vlayer);
map.addControl(newOpenLayers.Control.EditingToolbar(vlayer));
map.addControl(newOpenLayers.Control.PanZoomBar());
if(map.getCenter()){
* @param {Object} response The response object.
*/
window.loadFeatures=function(response){
vectorSource.addFeatures(geojsonFormat.readFeatures(response)); //读取GeoJSON数据response--->geojson--->feature--->map
controls:[]
});
varwms_base=yer.WMS('Base Layer','/wms/vmap0',{
layers:'basic'
},{
isBaseLayer:true
});
varwms_labels=yer.WMS('Location Labels','/wms/vmap0',{
yer.Tile({
source:newol.source.OSM()
})
],
target:'map',
controls:ol.control.defaults({
attributionOptions:/** @type {olx.control.AttributionOptions} */({
一、OL2
1.Control
<!doctype html>
<html>
<head>
<metacharset="utf-8">
<title>创建一个简单的电子地图</title>
<scripttype="text/javascript"src="/olapi/OpenLayers.js"></script>
WMS
<script>
varlayers=[
yer.Tile({
source:newol.source.TileWMS({
attributions:[newol.Attribution({
html:'&copy; '+
'<a href="http://www.geo.admin.ch/internet/geoportal/'+
map.zoomToMaxExtent();
}
}
</script>
</body>
</html>
二、OL3
/en/v3.7.0/examples/
快速开始
<!doctype html>
<htmllang="en">
<head>
<linkrel="stylesheet"href="/en/v3.7.0/css/ol.css"type="text/css">
view.setZoom(zoom-1);