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（）函数仅考虑直接位于提供的像素下方的要素。这会使与触摸设备上的功能进行交互变得困难。要考虑距提供的像素一定距离内的要素，请使用hitTo