OpenLayer示例网址汇总
1.https://openlayers.org/en/latest/examples/feature-move-animation.html
图标 行进轨迹动画 使用后期渲染事件和矢量上下文沿线对标记要素设置动画。在该示例中，使用了编码折线。
2.https://openlayers.org/en/latest/examples/utfgrid.html?q=dynamic-data 有用
鼠标移动事件，鼠标移动，随着指向一个国家以查看其名称和标志
3.https://openlayers.org/en/latest/examples/canvas-tiles.html
帆布砖 黑色网格图块是使用HTML5画布在客户端上生成的。显示的图块坐标是XYZ图块坐标。
4.https://openlayers.org/en/latest/examples/bing-maps.html
Bing Maps当Bing Maps切片服务没有给定分辨率和区域的切片时，它将返回“占位符”切片，指示该情况。将地图缩放到19级以上，以查看“占位符”图块。如果您希望OpenLayers显示拉伸的图块，以代替缩放级别19以上的“占位符”图块maxZoom，请19在传递给的选项中将其设置为ol/source/BingMaps。
5.https://openlayers.org/en/latest/examples/cartodb.html
Carto源示例 一个带有匿名cartodb映射的简单示例
6.https://openlayers.org/en/latest/examples/arcgis-tiled.html 有用
平铺的ArcGIS MapServer 本示例说明如何将ArcGIS REST MapService用作图块。此源类型支持地图和图像服务。对于缓存的ArcGIS服务，通过使用可以提供更好的性能ol/source/XYZ。
7.https://openlayers.org/en/latest/examples/custom-interactions.html
自定义互动,能拖动页面上的子元素，本示例演示了如何通过子类化创建自定义交互ol/interaction/Pointer。请注意，内置交互ol/interaction/Translate可能是移动要素的更好选择。
8.https://openlayers.org/en/latest/examples/chaikin.html
使用Chaikins算法平滑线条，能够在页面上画折线，此示例使用chaikin-smooth实现Chaikins算法的npm包来平滑绘制的线条。首先在地图上绘制。完成工程图后，将通过表单元素对特征的几何进行平滑处理。
9.https://openlayers.org/en/latest/examples/cluster.html
集群距离,本示例说明如何对点要素进行聚类
10.https://openlayers.org/en/latest/examples/drag-and-drop.html
拖放,使用拖放交互的示例。将GPX，GeoJSON，IGC，KML或TopoJSON文件拖放到地图上。没有投影变换支持，因此仅适用于EPSG：4326和EPSG：3857中的数据。
11.https://openlayers.org/en/latest/examples/drag-and-drop-image-vector.html
拖放图像矢量,在ol/layer/VectorImage图层上使用拖放交互的示例。将GPX，GeoJSON，IGC，KML或TopoJSON文件拖放到地图上。每个文件都呈现为客户端上的图像。
12.https://openlayers.org/en/latest/examples/draw-and-modify-features.html
在地图上绘制几何类型(点/折线/多边形/圆)。将ol / interaction / Draw交互与ol / interaction / Modify交互一起使用的示例。
13.https://openlayers.org/en/latest/examples/draw-features.html
绘图功能，按住shift可以自由画图，使用Draw交互的示例。从上面的下拉列表中选择一种几何类型以开始绘图。要完成绘图，请单击最后一点。要激活线条，多边形和圆形的徒手绘图，请按住Shift键。
14.https://openlayers.org/en/latest/examples/draw-freehand.html
写意画，此示例演示了ol/interaction/Draw手绘模式(可绘点/折线/多边形/圆)。在徒手绘制过程中，拖动时会添加点。设置freehand: true为启用手绘模式。请注意，可以通过使用该freehandCondition选项来有条件地启用手绘模式。例如Shift，使用键切换徒手模式freehandCondition: shiftKeyOnly。
15.https://openlayers.org/en/latest/examples/drag-rotate-and-zoom.html
拖动，旋转和缩放。Shift+鼠标单击可 围绕地图中心旋转和缩放地图。
16.https://openlayers.org/en/latest/examples/device-orientation.html
设备方向,说明如何跟踪设备方向的变化。gyronorm.js库用于从浏览器访问和规范事件。
17.https://openlayers.org/en/latest/examples/dynamic-data.html
动态数据,动态数据示例
18.https://openlayers.org/en/latest/examples/edit-geographic.html
地理编辑,useGeographic在’ol/proj’模块中调用该函数可以使地图视图使用地理坐标（即使视图投影不是地理坐标）。能修改既成的地理板块。
19.https://openlayers.org/en/latest/examples/draw-shapes.html
绘制形状,这演示了的geometryFunction选项的使用ol/interaction/Draw。从上方的下拉菜单中选择一种形状类型以开始绘图。要激活徒手绘图，请按住Shift键。通过使用type: 'Circle’带有type的type 来实现正方形绘图，该type geometryFunction创建4边的常规多边形而不是圆形。箱形图type: 'Circle’与配合使用geometryFunction，可创建盒形多边形而不是圆形。星图绘制使用自定义的几何函数，该函数使用绘制交互作用提供的中心和半径将圆心覆盖到起点。可以绘制圆圈，正方形，长方形，五角星。
20.https://openlayers.org/en/latest/examples/epsg-4326.html
EPSG:4326本示例说明如何在EPSG:4326中创建地图。
21.https://openlayers.org/en/latest/examples/earthquake-custom-symbol.html
带有自定义符号的地震，本示例将解析KML文件，并将要素呈现为矢量层。图层指定了style，可使用自定义的闪电符号和相对于震级的大小来绘制地震位置。
22.https://openlayers.org/en/latest/examples/animation.html
查看动画,本示例说明如何使用该view.animate()方法来运行一个或多个动画。
23.https://openlayers.org/en/latest/examples/extent-constrained.html 有用
约束范围,显示一定的区域,该地图的视图在一定程度上受到限制。这是使用extentview选项完成的。请注意，指定constrainOnlyCenter: true只会将范围限制应用于视图中心。
24.https://openlayers.org/en/latest/examples/filter-points-webgl.html
使用WebGL过滤功能，本示例说明如何ol/layer/WebGLPoints与文字样式一起使用以动态过滤大量的点几何。上面的地图基于来自NASA的数据集，其中包含45k个记录的陨石着陆点。每个陨石在地图上都有一个圆圈标记（圆圈越大，物体越重）。添加了脉冲效果，但被影响年份略微抵消了。调整滑块会使超出日期范围的对象从地图中过滤掉。这是通过style更改提供给WebGL层的对象中的变量来完成的。还要注意，最后一段代码是必需的，以确保地图每帧刷新一次。
25.https://openlayers.org/en/latest/examples/feature-animation.html
自定义动画,本示例说明如何使用postrender和vectorContext设置要素动画。在这里，我们选择每次将特征添加到图层时都执行Flash动画。
26.https://openlayers.org/en/latest/examples/extent-interaction.html
互动,本示例说明如何使用Extent交互来绘制可修改范围。使用Shift+Drag绘制的程度。 Shift+Drag在范围的角或边缘上调整大小。Shift+Click取消删除的程度。
27.https://openlayers.org/en/latest/examples/flight-animation.html
飞行动画,本示例说明如何使用postrender和vectorContext为飞行设置动画。两个机场之间的大圆弧形计算公式是arc.js然后飞行路径与动画postrender。
28.https://openlayers.org/en/latest/examples/geojson.html
GeoJSON功能示例。
29.https://openlayers.org/en/latest/examples/geojson-vt.html
与geojson-vt库集成的示例。
30.https://openlayers.org/en/latest/examples/getfeatureinfo-layers.html
WMS GetFeatureInfo(层),演示layers在ol/format/WMSGetFeatureInfoformat对象中使用该选项，该选项允许单个WMS GetFeatureInfo请求返回的功能，这些请求要求通过层名称读取多个层。
31.https://openlayers.org/en/latest/examples/geolocation.html
地理位置，本示例使用Geolocation API来控制视图。位于“ https://www.googleapis.com/”上的网络位置提供商：未收到任何回复。
32.https://openlayers.org/en/latest/examples/arcgis-image.html
Image ArcGIS MapServer,本示例说明如何使用动态ArcGIS REST MapService。此源类型支持地图和图像服务。用于动态ArcGIS服务。
33.https://openlayers.org/en/latest/examples/gpx.html
使用GPX来源的示例。
34.https://openlayers.org/en/latest/examples/getfeatureinfo-tile.html
WMS GetFeatureInfo（平铺层）,本示例说明如何单击WMS切片图层以触发WMS GetFeatureInfo请求。另外，map.forEachLayerAtPixel当将鼠标悬停在地图上的非透明像素上时，可用于更改鼠标指针。
35.https://openlayers.org/en/latest/examples/here-maps.html
HERE地图图块API使用ol/source/XYZ。使用其tile API时，请务必遵守HERE服务条款。
36.https://openlayers.org/en/latest/examples/heatmap-earthquakes.html
地震热图,本示例将解析KML文件并将要素呈现为ol/layer/Heatmap图层。
37.https://openlayers.org/en/latest/examples/hit-tolerance.html
命中公差,默认情况下，map.forEachFeatureAtPixel（）函数仅考虑直接位于提供的像素下方的要素。这会使与触摸设备上的功能进行交互变得困难。要考虑距提供的像素一定距离内的要素，请使用hitTolerance选项。例如，map.forEachFeatureAtPixel（pixel，callback，{hitTolerance：3}）将使用位于提供的像素三个像素之内的所有要素来调用回调。
38.https://openlayers.org/en/latest/examples/hitdetect-vector.html
矢量层命中检测，这些国家/地区是从GeoJSON文件加载的。有关国家/地区的信息位于悬停上，并且使用图层的getFeatures()方法来获取点击。对于矢量图层，此函数使用仅具有最高要素的数组来解析。它使用非常有效的命中检测算法，但会降低准确性。对于像素精确命中检测，在不考虑性能的情况下，请使用地图的getFeaturesAtPixel()或forEachFeatureAtPixel()方法。
39.https://openlayers.org/en/latest/examples/icon-color.html
图标颜色,将自定义颜色分配给图标的示例。本示例中的功能全部使用同一张图片，而其中的颜色来自javascript文件。请注意，图标文件需要遵循相同的原始策略或发送适当的CORS标头才能起作用。当依赖CORS标头时，ol/style/Icon必须使用进行配置crossOrigin: ‘anonymous’。
40.https://openlayers.org/en/latest/examples/graticule.html 有用
地图刻度,本示例说明如何在地图上添加标线图层。
41.https://openlayers.org/en/latest/examples/icon-negative.html 有用
图标像素操作,使用图标符号化点的示例。单击图标将其选中，它将使用其图像进行渲染。可改变其颜色。
42.https://openlayers.org/en/latest/examples/icon-sprite-webgl.html
WebGL图标精灵,本示例说明如何使用ol/layer/WebGLPoints渲染大量精灵。上面的地图基于国家不明飞行物报告中心的数据集：每个图标根据报告的形状（磁盘，光，火球…）标记不明飞行物目击事件。视线越旧，图标越红。一个非常简单的精灵图集以PNG文件的形式使用，其中包含网格上的所有图标。然后，style提供给ol/layer/WebGLPoints构造函数的对象用于根据瞄准形状指定要使用的精灵。该数据集包含约80k点，可在以下位置找到：https : //www.kaggle.com/NUFORC/ufo-sightings
43.https://openlayers.org/en/latest/examples/icon.html 有用
图标符号器,使用图标符号化点的示例。
44.https://openlayers.org/en/latest/examples/igc.html
IGC数据，从IGC文件读取的同一天多次滑翔伞飞行记录的航迹示例。这五个轨道总共包含49,707个唯一坐标。放大以查看更多细节。背景层来自OpenCycleMap。
45.https://openlayers.org/en/latest/examples/immediate-geographic.html
立即渲染，本示例将“即时”渲染API与地理坐标中的几何一起使用。立即渲染API使您可以绘制样式化的几何图形，而无需先将其添加到图层中。使用该getVectorContext函数从渲染事件创建渲染上下文。在此渲染上下文上使用context.drawGeometry()和context.setStyle()方法，可以在每个渲染框架上绘制任何几何图形。useGeographic在此示例中使用了该函数，以便几何可以位于地理坐标中。
46.https://openlayers.org/en/latest/examples/image-filter.html
将滤镜应用于图像，层渲染可以被操纵prerender和postrender事件侦听器。这些侦听器通过引用Canvas渲染上下文获取一个事件。在此示例中，postrender侦听器将过滤器应用于图像数据。
47.https://openlayers.org/en/latest/examples/iiif.html
IIIF图像API，国际图像互操作框架（IIIF）图像服务的切片源示例。尝试使用任何Image API版本1或2服务。
48.https://openlayers.org/en/latest/examples/image-vector-layer.html
矢量图像层，此示例ol/layer/VectorImage用于在交互和动画期间更快地渲染，但代价是精度较低。
49.https://openlayers.org/en/latest/examples/getfeatureinfo-image.html
WMS GetFeatureInfo（图像层），本示例说明如何单击WMS图像层以触发WMS GetFeatureInfo请求。另外，map.forEachLayerAtPixel当将鼠标悬停在地图上的非透明像素上时，可用于更改鼠标指针。
50.https://openlayers.org/en/latest/examples/jsts.html
JSTS整合，显示JSTS与OpenLayers 集成的示例。
51.https://openlayers.org/en/latest/examples/layer-extent.html
限层范围，本示例使用该layer.setExtent()方法修改覆盖层的范围。使用上面的控件可以根据范围（大约国家/地区范围）限制渲染。
52.https://openlayers.org/en/latest/examples/layer-zoom-limits.html
图层缩放限制，图层支持minZoom和maxZoom选项，用于根据视图的缩放级别控制可见性。如果设置了最小或最大缩放，则该图层仅在大于minZoom和小于或等于的缩放级别下可见maxZoom。构造后，可以使用图层的setMinZoom和setMaxZoom来设置限制。此示例显示了缩放级别为14和更低的OSM层，以及缩放级别为高于14的USGS层。
53.https://openlayers.org/en/latest/examples/layer-spy.html
层与层渲染，层渲染可以被操纵prerender和postrender事件侦听器。这些侦听器通过引用Canvas渲染上下文获取一个事件。在此示例中，prerender侦听器在最近的鼠标位置周围设置了一个剪贴蒙版，为您提供了一个望远镜效果，用于查看一层以上的图层。在地图上移动以查看效果。使用↑向上和↓向下箭头键调整望远镜的尺寸。
54.https://openlayers.org/en/latest/examples/layer-swipe.html
图层滑动，自由控制左右图层的显示大小，可以自由拖动，图层滑动贴图的示例。
55.https://openlayers.org/en/latest/examples/layer-z-index.html
图层排序示例，可自由设定图层上下排序的顺序。有两个托管图层（正方形和三角形）和一个非托管图层（星形）。Z索引确定渲染顺序；索引为{square：1，triangle：0，star：unmanaged}，其渲染顺序为三角形，正方形和星形。
56.https://openlayers.org/en/latest/examples/line-arrows.html 有用
LineString 箭头，每个线串段的绘制箭头示例，可以任意绘制，按shift,带箭头的黄线
57.https://openlayers.org/en/latest/examples/mapbox-layer.html
Mapbox-gl图层，显示如何在openlayers地图中添加mapbox-gl-js图层。注意：使用此示例时，请确保在https://www.maptiler.com/cloud/上获得自己的API密钥。API密钥过期后，将看不到任何地图。
58.https://openlayers.org/en/latest/examples/magnify.html
放大图层，有一个放大镜的效果，本示例使用postrender事件侦听器对指针位置周围的圆圈中的图像进行过采样。此事件的侦听器可以访问Canvas上下文，并且可以操纵图像数据。在地图上移动以查看效果。使用↑向上和↓向下箭头键调整放大的圆圈大小。
59.https://openlayers.org/en/latest/examples/localized-openstreetmap.html
本地化的OpenStreetMap，基底层是OpenCycleMap与来自覆盖OpenSeaMap。
60.https://openlayers.org/en/latest/examples/attributions.html
Attributions，当地图由于调整大小而变得太小时，属性将被折叠。这是因为collapsible如果地图的宽度小于600像素，则此选项设置为true。
61.https://openlayers.org/en/latest/examples/min-max-resolution.html
图层最小/最大分辨率，放大两次：应该隐藏MapBox图层，并显示OSM图层。如果继续放大，将会看到OSM层也消失了。此处，使用minResolution和maxResolution选项控制图层的渲染。
62.https://openlayers.org/en/latest/examples/modify-features.html
修改功能，此示例演示了如何将修改和选择交互一起使用。放大到感兴趣的区域，然后选择要编辑的功能。然后在周围拖动点以修改功能。您可以通过在编辑之前选择多个要素来保留拓扑（Shift+Click以选择多个要素）。
63.https://openlayers.org/en/latest/examples/min-zoom.html
查看最小缩放，在minZoom一个视图选项限制多远，你可以放大或缩小。可以通过调用来更新此属性view.setMinZoom(newMinZoom)。在此示例中，设置了最小缩放级别，以使您一次只能看到一个世界。调整浏览器窗口的大小以更改阈值。
64.https://openlayers.org/en/latest/examples/navigation-controls.html
导航控件，本示例说明如何使用ol/control/ZoomToExtent控件。以下导航控件已添加到地图：ol/control/Zoom （默认添加）ol/control/ZoomToExtent
65.https://openlayers.org/en/latest/examples/mouse-position.html
滑鼠位置，地图外部的鼠标位置控制示例。显示鼠标所在位置，可以精确到任意位数。
66.https://openlayers.org/en/latest/examples/moveend.html
Moveend事件，在此示例中，为地图moveend事件注册了一个侦听器。每当调用此侦听器时，它将使用十进制度度的地图范围更新以下输入。
67.https://openlayers.org/en/latest/examples/overviewmap.html
概述地图控件，本示例演示了OverviewMap控件的用法。主地图和概览地图都使用相同的来源配置了图层。请注意，必须为概览图明确配置图层。
68.https://openlayers.org/en/latest/examples/pinch-zoom.html
放大，默认情况下，ol/interaction/PinchZoom可以使地图处于分数缩放级别。相反，如果要将收缩缩放限制为整数缩放级别，请constrainResolution: true在构造视图时进行设置。
69.https://openlayers.org/en/latest/examples/permalink.html#map=5.009085039026268/12683847.19/4790433.82/0
随着地图的移动，更新Url，在此示例中，HTML 5 History API用于在移动地图时使用当前的缩放级别，中心和旋转度来更新浏览器URL。请注意，并非所有浏览器都支持History API ，因此可以考虑使用polyfill。
70.https://openlayers.org/en/latest/examples/polygon-styles.html
自定义多边形样式，在此示例中，为多边形创建了两种不同的样式：第一种样式是针对多边形本身的。第二种样式是绘制多边形的顶点。
71.https://openlayers.org/en/latest/examples/page-scroll.html
页面滚动，要仅在地图具有焦点时执行滚轮/触控板缩放和拖动和平移操作，请为地图div配置一个tabindex属性。
72.https://openlayers.org/en/latest/examples/mapbox-style.html
一个满屏大地图，
73.https://openlayers.org/en/latest/examples/preload.html
预载图块，顶部的地图会预加载低分辨率图块。底部的地图不使用任何预加载。尝试缩小和平移以查看差异。
74.https://openlayers.org/en/latest/examples/reprojection.html
栅格投影，本示例显示了各种投影之间的客户端栅格重新投影。
75.https://openlayers.org/en/latest/examples/reprojection-by-code.html
使用EPSG.io搜索进行重新投影，本示例通过在EPSG.io数据库中进行搜索，显示了从OSM（EPSG：3857）到任意投影的客户端栅格重新投影功能。
76.https://openlayers.org/en/latest/examples/reprojection-wgs84.html
OpenStreetMap重新投影，此示例显示了WGS84中OpenStreetMap的客户端重新投影。
77.https://openlayers.org/en/latest/examples/render-geometry.html
将几何体渲染到画布，本示例说明如何将几何图形渲染到任意画布。
78.https://openlayers.org/en/latest/examples/reusable-source.html
可重用资源，您可以调用source.setUrl()以更新图块源的URL。请注意，当您更改图块源的URL时，在加载新图块之前，不会替换现有图块。如果您有兴趣清除当前渲染的图块，则可以调用该source.refresh()方法。另外，如果要删除渲染的图块并重新加载新图块，则可以使用两个单独的源。
79.https://openlayers.org/en/latest/examples/reprojection-image.html
影像投影，此示例显示了单个图像源的客户端重新投影。
80.https://openlayers.org/en/latest/examples/rotation.html
旋转地图，使用Alt+shift+Drag旋转地图。
81.https://openlayers.org/en/latest/examples/scaleline-indiana-east.html
带有ScaleLine控件的OpenStreetMap重投影，此示例显示了OpenStreetMap到NAD83 Indiana East的客户端重新投影，包括带有美国单位的ScaleLine控件。
82.https://openlayers.org/en/latest/examples/regularshape.html
常规形状，这个例子中示出了若干规则形状或符号如何（表示x，cross，star，triangle，square和stacked）可以被创建。样式stacked表示可以堆叠多个具有偏移的形状
83.https://openlayers.org/en/latest/examples/mobile-full-screen.html
移动全屏示例
84.https://openlayers.org/en/latest/examples/select-hover-features.html
按悬停选择功能，在此示例中，在地图上注册了一个侦听器，pointermove以突出显示当前悬停的要素。例如鼠标移到中国疆域时，会出现中国二字。
85.https://openlayers.org/en/latest/examples/select-features.html
选择功能，选择之间Single-click，Click，Hover和Alt+Click作为事件类型在下面的组合框中选择。使用Single-click或时，Click您可以按住do Shift键在选择中切换功能。注意：Single-click使用时，双击将不会选择功能。与相比Click，双击会同时选择要素和缩放地图（由于DoubleClickZoom交互）。请注意，Single-click它的响应速度较慢，这是Click因为它用于检测双击的延迟。在此示例中，为Select交互select事件注册了一个侦听器，以更新上面的选择状态。
86.https://openlayers.org/en/latest/examples/snap.html
可在地图上，画点/圆/多边形/线，也可对其进行修改。将快照交互与绘制和修改交互一起使用的示例。快照交互必须最后添加，因为它必须是第一个处理该pointermove事件的对象。
87.https://openlayers.org/en/latest/examples/simple.html
简单地图，一个带有OSM源的简单映射。
88.https://openlayers.org/en/latest/examples/select-multiple-features.html
选择多个功能，单击选中，再次单击取消。在此示例中，在地图singleclick事件上注册了一个侦听器，以在数组中添加和删除要素。
89.https://openlayers.org/en/latest/examples/static-image.html
静态影像，本示例使用静态图像作为图层源。地图视图配置有自定义投影，该投影将图像坐标直接转换为地图坐标。
90.https://openlayers.org/en/latest/examples/street-labels.html
街道标签，该示例显示了如何使用文字样式placement: 'line’来沿路径呈现文本。
91.https://openlayers.org/en/latest/examples/stamen.html
组成两层：具有地形标签的水彩基础层。
92.https://openlayers.org/en/latest/examples/kml.html
本示例使用ol/format/KML来解析KML以使用矢量源进行渲染。
93.https://openlayers.org/en/latest/examples/mapguide-untiled.html
分层MapGuide地图的示例。
94.https://openlayers.org/en/latest/examples/teleport.html
单击地图上的按钮，可以使地图从一个目标移动的另一个目标。
95.https://openlayers.org/en/latest/examples/tile-transitions.html
默认情况下，将使用不透明过渡渲染图块-淡入超过250毫秒。若要禁用此行为，请将transition图块源的选项设置为0。
96.https://openlayers.org/en/latest/examples/tilejson.html
TileJSON图层的示例。
97.https://openlayers.org/en/latest/examples/tissot.html
Indicatrix地图示例。顶部的EPSG:4326地图是地图。底部的一个是EPSG:3857。
98.https://openlayers.org/en/latest/examples/topolis.html
可以在地图中标识很多点位置，及多边形。该示例显示了Topolis与OpenLayers 的集成，从而可以创建和编辑拓扑几何。标准交互绘制边缘，捕捉到现有边缘。通过画一条与要删除的边相交的新边来删除边。
99.https://openlayers.org/en/latest/examples/synthetic-points.html
鼠标悬停，会标出离鼠标最近的圆圈。
100.https://openlayers.org/en/latest/examples/translate-features.html
翻译功能，此示例演示了翻译和选择交互如何一起使用。放大到感兴趣的区域，然后单击以选择功能。然后在周围拖动特征以将其移动到地图上的其他位置。
101.https://openlayers.org/en/latest/examples/topojson.html
本示例使用矢量图层，ol/format/TopoJSON用于呈现TopoJSON的功能。
102.https://openlayers.org/en/latest/examples/turf.html
显示turf.js与OpenLayers 集成的示例。turf.js函数along用于沿街道每200米显示一个标记。
103.https://openlayers.org/en/latest/examples/two-finger-pan-scroll.html
按住ctrl键用鼠标滚轮，可以实现地图的放大与缩小。否则鼠标滚轮控制页面的上下滑动。
104.https://openlayers.org/en/latest/examples/tracing.html
此示例展示了如何设置绘制交互API，以更轻松地沿现有几何图形捕捉快照，同时保留拓扑结构（有时称为“跟踪”）。当用户单击爱达荷州边界上的两个不同点时，这两个点之间的边界部分将添加到当前绘制的要素中。这利用appendCoordinates了ol/interaction/Draw交互方法。
105.https://openlayers.org/en/latest/examples/vector-esri.html
当视图范围更改时，本示例将从ArcGIS REST功能服务中加载新功能。
106.https://openlayers.org/en/latest/examples/synthetic-lines.html
合成线
107.https://openlayers.org/en/latest/examples/earthquake-clusters.html
本示例将解析KML文件，并将要素呈现为矢量层上的群集。此示例中的样式非常复杂。单个地震位置（呈星状）的大小相对于其大小。集群相对于集群中的要素数量具有不透明性，其大小表示组成集群的要素的范围。单击或悬停在集群上时，将显示组成集群的各个功能。为此，我们大量使用样式功能。
108.https://openlayers.org/en/latest/examples/vector-osm.html
OSM XML矢量数据是使用bbox策略从Overpass API动态加载的。请注意，平移和缩放最终将导致Overpass API出现“请求过多”错误。
109.https://openlayers.org/en/latest/examples/vector-tile-selection.html
单击渲染的矢量平铺特征以在地图上突出显示它。单击一个空白点（海洋）以重置选择。通过将操作类型更改为“多选”，您可以一次选择多个功能。使用“悬停时单选”，当指针在要素上方时，要素将被高亮显示。选择层配置有“ renderMode：‘vector’”，以便在频繁重绘时（例如，选择“悬停时单选”）获得更好的性能。
110.https://openlayers.org/en/latest/examples/vector-layer.html
矢量层，这些国家/地区是从GeoJSON文件加载的。在悬停并单击时显示有关国家的信息。
111.https://openlayers.org/en/latest/examples/vector-esri-edit.html
本示例从ArcGIS REST功能服务加载功能，并允许添加新功能或更新现有功能。
112.https://openlayers.org/en/latest/examples/vector-label-decluttering.html
矢量标签整理，整理用于避免标签重叠。在overflow: true对文本样式设置使得它如此也包括不适合多边形的范围内的标签。
113.https://openlayers.org/en/latest/examples/webgl-points-layer.html
WebGL点图层，从下面的列表中选择预定义的样式，或手动将其编辑为JSON。
114.https://openlayers.org/en/latest/examples/vector-wfs.html
当视图范围更改时，此示例将从GeoServer WFS加载新功能。
115.https://openlayers.org/en/latest/examples/wkt.html
使用WKT解析器的示例，根据WKT(知名文本)格式的几何图形创建要素。
116.https://openlayers.org/en/latest/examples/vector-wfs-getfeature.html
WFS-GetFeature，本示例生成一个GetFeature使用PropertyIsEqualTo和PropertyIsLike过滤器的请求，然后发布该请求以加载与查询匹配的功能。
117.https://openlayers.org/en/latest/examples/wms-custom-tilegrid-512x256.html
WMS可以提供任意大小的图块。本示例使用具有非正方形图块的自定义图块网格。
118.https://openlayers.org/en/latest/examples/wms-getlegendgraphic.html
WMS GetLegendGraphic，WMS支持getLegendGraphic请求。本示例演示了该getLegendUrl方法的用法。由于图例可以响应比例，因此每次更改分辨率都会对其进行更新。
119.https://openlayers.org/en/latest/examples/wms-image-custom-proj.html
集成Proj4js进行坐标转换的示例，带有Proj4js的单图像WMS，通过Proj4js集成，OpenLayers可以在任意投影之间转换坐标。
120.https://openlayers.org/en/latest/examples/sphere-mollweide.html
具有Graticule图层的球形Mollweide贴图的示例。
121.https://openlayers.org/en/latest/examples/wms-tiled.html
WMS可以用作此处所示的Tile层，也可以用作Single Image WMS示例示例中所示的Image层。可以缓存图块，因此浏览器将不会重新获取已查看区域的数据。但是对于WMS服务器来说，重复标签可能会出现问题，这些标签不了解图块，在这种情况下，单个图像WMS将产生更好的制图效果。
122.https://openlayers.org/en/latest/examples/wms-tiled-wrap-180.html
默认情况下，WMS磁贴在180°子午线上重复使用。可以通过将wrapX选项设置为来禁用此行为false。
123.https://openlayers.org/en/latest/examples/wms-no-proj.html
无投影的WMS，只要不需要坐标转换，OpenLayers即可与仅配置有code和的投影配合使用units。
124.https://openlayers.org/en/latest/examples/wms-time.html
WMS time 演示在连续更改时间维度时平滑重新加载图层。显示的数据：IEM生成的NWS NEXRAD WSR-88D III级基本反射率的CONUS复合材料。
125.https://openlayers.org/en/latest/examples/vector-tiles-4326.html
该示例显示了ol-mapbox-style从maptiler.com 加载的EPSG：4326（使用设置样式）中的矢量图块。
126.https://openlayers.org/en/latest/examples/wmts.html
WMTS，本示例说明如何手动创建用于访问WMTS的配置。功能示例中的WMTS层显示了如何从GetCapabilities响应中创建配置。
127.https://openlayers.org/en/latest/examples/wmts-dimensions.html
WMTS平铺过渡。演示在连续更改尺寸时平滑重新加载图层。演示层是全局海平面计算（来自SCALGO的洪水计算，来自CGIAR-CSI SRTM的基础数据），其中，如果海平面上升到大于x m的位置，则被淹没的单元被涂成蓝色。用户使用滑块选择海平面尺寸。
128.https://openlayers.org/en/latest/examples/wms-image.html
WMS可以用作此处显示的图像层，也可以用作平铺WMS示例示例中所示的平铺层。可以缓存图块，因此浏览器将不会重新获取已查看区域的数据。但是对于WMS服务器来说，重复标签可能会出现问题，这些标签不了解图块，在这种情况下，单个图像WMS将产生更好的制图效果。
129.https://openlayers.org/en/latest/examples/worker.html
移动地图时，会向工作人员发送一条消息。作为响应，工作人员发送回带有版本标识符的消息。
130.https://openlayers.org/en/latest/examples/xyz-esri.html
XYZ Esri ArcGIS REST Tile服务受ol/source/XYZ。
131.https://openlayers.org/en/latest/examples/xyz.html
XYZ源用于通过URL（包括缩放级别和图块网格x / y坐标）访问的图块数据。
132.https://openlayers.org/en/latest/examples/wmts-ign.html
IGN WMTS 在此示例中，显示了IGN WMTS图层。有关IGN的WMTS服务的更多信息，请参见IGNGéoportailAPI网页和Géoportail网络服务描述技术（法语）。
133.https://openlayers.org/en/latest/examples/xyz-esri-4326-512.html
具有自定义图块大小（此处：512x512像素）和投影（这里：EPSG：4326）的ArcGIS REST图块服务受ol/source/XYZ。自定义图块url功能用于处理缩放级别偏移。
134.https://openlayers.org/en/latest/examples/wms-custom-proj.html
自定义平铺WMS，使用addCoordinateTransforms()可以将自定义坐标变换功能添加到已配置的投影中。
135.https://openlayers.org/en/latest/examples/xyz-retina.html
XYZ源接受一个tilePixelRatio选项。是使用MapTiler从GeoTIFF文件准备的。
136.https://openlayers.org/en/latest/examples/zoom-constrained.html
该地图的视图被限制在缩放级别9和13之间。这是使用minZoom和maxZoom视图选项完成的。
137.https://openlayers.org/en/latest/examples/wmts-layer-from-capabilities.html
WMTS层的功能，本示例说明如何创建用于从GetCapabilities响应访问WMTS的配置。所述WMTS示例示出了如何手动创建的配置。
138.https://openlayers.org/en/latest/examples/zoomify.html
Zoomify是一种用于深度放大高分辨率图像的格式。本示例说明如何将Zoomify源与像素投影配合使用。还处理了具有JTL扩展名的Internet映像协议（IIP）。
139.https://openlayers.org/en/latest/examples/geolocation-orientation.html
具有方向的移动地理位置跟踪
140.https://openlayers.org/en/latest/examples/scale-line.html
刻度线
141.https://openlayers.org/en/latest/examples/button-title.html
自定义工具提示，此示例显示了如何使用Bootstrap自定义按钮工具提示。
142.https://openlayers.org/en/latest/examples/accessible.html
该页面的map元素的tabindex属性设置为"0"，使其可聚焦。要聚焦地图元素，您可以使用“ Tab”键导航至该元素，也可以使用跳过链接。当map元素被聚焦时，+和-键可用于放大和缩小，箭头键可用于平移。单击地图下方的“放大”和“缩小”按钮可放大和缩小地图。您可以使用“ Tab”键导航至按钮，然后按“ Enter”键触发缩放动作。
143.https://openlayers.org/en/latest/examples/center.html
高级视图定位，此示例演示了如何调整地图视图，以便将几何或坐标定位在特定的像素位置。上方的地图在视口内应用了上，右，下和左填充。视图的fit方法用于使用相同的填充将视图中的几何拟合。视图的centerOn方法用于将坐标（Lausanne）定位在特定像素位置（黑匣子的中心）。使用Alt+Shift+Drag旋转地图。
144.https://openlayers.org/en/latest/examples/box-selection.html
盒子选择，通过鼠标拖动区域，可选择这个区域所包含的所有的国家。本示例说明如何使用DragBox交互来选择要素。所选要素将添加到所选交互（ol/interaction/Select）的要素叠加中以突出显示。使用Ctrl+Drag（Command+Drag在Mac上为）绘制框。
145.https://openlayers.org/en/latest/examples/canvas-gradient-pattern.html
CanvasGradient或CanvasPattern的样式功能，本示例创建一个CanvasPattern和一个CanvasGradient。这些国家/地区是从GeoJSON文件加载的。样式函数为每个国家/地区确定是使用CanvasGradient（彩虹色）还是CanvasPattern（重复堆积的圆圈）填充。注意：对于无缝重复图案，图案图像的图像宽度和高度必须是两倍（2、4、8，…，512）。
146.https://openlayers.org/en/latest/examples/color-manipulation.html
色彩处理，可调色调、色度、亮度。栅格源允许任意操纵像素值。在此示例中，在使用第二个栅格源渲染之前，以像素为单位调整输入图块源上的RGB值。光栅操作将RGB空间中的像素获取，将其转换为HCL颜色空间，根据上述控件调整值，然后将其转换回RGB空间以进行渲染。
147.https://openlayers.org/en/latest/examples/d3.html
d3整合，该示例加载TopoJSON几何图形，并使用d3（d3.geo.path）将这些几何图形呈现为SVG元素。
148.https://openlayers.org/en/latest/examples/export-map.html
地图导出，将地图导出为PNG图像的示例。本示例使用html-to-image库。
149.https://openlayers.org/en/latest/examples/fractal.html
分形渲染，分形，渲染，可调几边形。
150.https://openlayers.org/en/latest/examples/custom-controls.html
本示例创建一个“向北旋转”按钮。显示如何创建自定义控件。
151.https://openlayers.org/en/latest/examples/geographic.html
地理坐标，useGeographic在’ol/proj’模块中调用该函数可以使地图视图使用地理坐标（即使视图投影不是地理坐标）。
152.https://openlayers.org/en/latest/examples/export-pdf.html
导出PDF示例，使用jsPDF库将地图导出为PDF的示例。
153.https://openlayers.org/en/latest/examples/full-screen.html
全屏控制，单击右上角的控件进入全屏状态。再次单击它退出全屏。
154.https://openlayers.org/en/latest/examples/image-load-events.html
有进度条，图像源引发与图像加载有关的事件。你可以听的imageloadstart，imageloadend和imageloaderror类型的事件，以监控图像加载进度。本示例为这些事件注册侦听器，并在地图底部渲染图像加载进度栏。
155.https://openlayers.org/en/latest/examples/kml-earthquakes.html
本示例将解析KML文件，并将要素呈现为矢量层。给该层提供一个style以地震震级相对于震级的大小进行渲染的位置。
156.https://openlayers.org/en/latest/examples/kml-timezones.html
演示从KML渲染时区，KML时区，本示例将解析KML文件，并将要素呈现为矢量层。给该层提供一个ol/style/Style以黄色填充时区的不透明度，该不透明度是根据当前到本地中午的偏移量计算得出的。
157.https://openlayers.org/en/latest/examples/layer-clipping.html
图层裁剪，图层裁剪示例
158.https://openlayers.org/en/latest/examples/layer-group.html
图层组，具有图层组的地图示例。单击下面的图层节点以更改属性。图层组，可调可见度，不透明度。具有图层组的地图示例。
159.https://openlayers.org/en/latest/examples/lazy-source.html
lazy-source,懒加载。通常，层的源提供给层构造函数。如果在构造后需要设置图层源，则可以使用该layer.setSource()方法完成。上面地图中的图层没有源。使用下面的链接设置/取消设置图层源。在设置其源之前，不会渲染图层。
160.https://openlayers.org/en/latest/examples/mapbox-vector-tiles-advanced.html
Mapbox矢量图块，向量图块地图可将相同的源图块重新用于后续缩放级别，以节省移动设备上的带宽。注意：访问令牌过期后，将看不到任何地图。
161.https://openlayers.org/en/latest/examples/modify-test.html
修改功能测试，测试功能修改的示例。
162.https://openlayers.org/en/latest/examples/mapbox-vector-tiles.html
Mapbox矢量图块。一个简单的矢量图块地图。
163.https://openlayers.org/en/latest/examples/overlay.html
使用Bootstrap中的Popovers创建弹出窗口。
164.https://openlayers.org/en/latest/examples/measure.html 有用
使用绘图交互来测量长度和面积。该getLength()和getArea()功能计算几何球形长度和面积。通过假设几何坐标之间的大圆弧段来计算长度。面积的计算就好像多边形的边是大圆弧段一样。请注意，geometry.getLength()和geometry.getArea()方法会返回投影（平面）几何的度量。在某些情况下，这些措施与地面措施可能大不相同-例如在北纬和南纬使用Web Mercator的情况下。为了获得更好的结果，请使用ol/sphere模块中的功能。
165.https://openlayers.org/en/latest/examples/overviewmap-custom.html 有用
本示例演示如何使用其支持的选项以及定义自定义CSS来定制Overviewmap控件。您也可以使用Shift键旋转地图，以查看概览地图的反应。
166.https://openlayers.org/en/latest/examples/popup.html
单击地图以弹出一个对话框。弹出窗口由一些基本元素组成：一个容器，一个关闭按钮以及一个放置内容的位置。要将弹出窗口锚定到地图，将ol/Overlay使用弹出容器创建一个。为地图click事件注册了一个侦听器以显示弹出窗口，并且将另一个侦听器设置为click关闭按钮以隐藏弹出窗口的处理程序。
167.https://openlayers.org/en/latest/examples/full-screen-source.html
可以扩展的全屏控制，具有扩展源元素的全屏控制，单击右上角的控件进入全屏状态。再次单击它退出全屏。
168.https://openlayers.org/en/latest/examples/raster.html
本示例使用ol/source/Raster来基于另一个源生成数据。栅格源接受任意数量的输入源（基于平铺或基于图像的输入），并对输入像素运行一系列操作。最终操作的返回值用作输出源的数据。在这种情况下，将单个图块图像源用作输入。对于每个像素，从输入像素中计算出植被绿色指数（VGI）。第二个操作基于阈值为这些像素着色（阈值以上的值为绿色，而阈值以下的值为透明）。
169.https://openlayers.org/en/latest/examples/region-growing.html
区域着色，单击地图上的一个区域。计算的区域将为红色。本示例使用ol/source/Raster来基于另一个源生成数据。栅格源接受任意数量的输入源（基于平铺或基于图像的输入），并对输入数据运行一系列操作。最终操作的返回值用作输出源的数据。在这种情况下，将图像数据的单个平铺源用作输入。使用用户单击地图提供的“种子”像素，在单个“图像”操作中计算区域。“阈值”值确定给定的连续像素是否属于“区域”-候选像素的RGB值和种子值之间的差必须低于阈值。此示例还显示了如何使附加功能可用于操作。
170.https://openlayers.org/en/latest/examples/osm-vector-tiles.html
一个简单的矢量 地图与Mapzen矢量瓷砖。本示例使用TopoJSON格式的layerName选项来确定样式图层（“水”，“道路”，“建筑物”）。注意：[ ol/format/MVT]是用于矢量切片的更为有效的格式。
171.https://openlayers.org/en/latest/examples/sea-level.html
海平面，本示例使用ol/source/Raster带有 Mapbox Terrain-RGB瓦片 的“淹没”海平面滑块上显示的高程以下的区域。ol/source/Raster可以使用图块源或图层。在这种情况下，一层用于允许在prerender图像平滑时禁用，这会更改像素中设置的精确高程值。
172.https://openlayers.org/en/latest/examples/shaded-relief.html
阴影，可自由设置太阳高度，方位角，本示例使用ol/source/Raster来基于另一个源生成数据。栅格源接受任意数量的输入源（基于平铺或基于图像的输入），并对输入数据运行一系列操作。最终操作的返回值用作输出源的数据。在这种情况下，将单个平铺的高程数据源用作输入。阴影浮雕是在单个“图像”操作中计算的。通过operationType: 'image’在栅格源上进行设置 ，ImageData将为每个输入源的对象调用操作。操作也被称为通用data对象。在此示例中，来自上面输入的太阳高度和方位角数据被分配给该data对象，并在阴影操作中进行访问。阴影操作返回ImageData 对象数组。当图像层使用栅格源ImageData时，管道中最后一个操作返回的第一个 对象将用于渲染。
173.https://openlayers.org/en/latest/examples/semi-transparent-layer.html
半透明层，本示例将在OSM背景上半透明地显示平铺的MaxBox图层。通过使用CSS过滤器，OSM层变为黑白。
174.https://openlayers.org/en/latest/examples/svg-layer.html
SVG层，具有平原ol/Layer和render功能，我们可以使用交互式svg作为图层。将鼠标悬停在国家/地区上即可查看仅使用css :hover伪类定义的交互性。
175.https://openlayers.org/en/latest/examples/side-by-side.html
两张地图，（一条路，一条天线）共享相同的中心，分辨率和旋转度。
176.https://openlayers.org/en/latest/examples/vector-labels.html
矢量标签，本示例展示了可以在文本样式上设置的许多选项。选择“文本/换行”时（例如，对于线要素），通过插入字符来包装标签\n，这将创建多行标签。“ Open Sans”网络字体将按需加载，以显示动态字体加载。
177.https://openlayers.org/en/latest/examples/tile-load-events.html
图像图块源触发与图块加载相关的事件。你可以听的tileloadstart，tileloadend和tileloaderror类型的事件，以监视瓦加载进度。本示例为这些事件注册了侦听器，并在地图底部呈现了图块加载进度栏。
178.https://openlayers.org/en/latest/examples/vector-tile-info.html
矢量平铺信息，将指针移至渲染的要素上以显示要素属性。
179.https://openlayers.org/en/latest/examples/wmts-capabilities.html
WMTS功能解析，本示例显示了解析WMTS功能响应后结果对象的内容。
180.https://openlayers.org/en/latest/examples/wmts-hidpi.html
高DPI WMTS
181.https://openlayers.org/en/latest/examples/wms-capabilities.html
WMS功能解析
182.https://openlayers.org/en/latest/examples/full-screen-drag-rotate-and-zoom.html
全屏拖动，旋转和缩放。按住Shift+Drag可旋转和缩放。点击右上角的按钮进入全屏模式。然后再做Shift+Drag一遍。
183.https://openlayers.org/en/latest/examples/zoomslider.html
变焦滑块，