OpenLayers官网示例精选

官方示例很多，但是分类不是很直观，这里整理了一下
基于版本6.10.0
没有收录：比较单一直白的功能演示，国内不常用的冷门数据源演示，使用场景比较冷门且单一的演示

DOM相关

• Custom map element
  使用ShadowDom自定地图dom元素。
• External map
  在新窗口中打开地图（旧地图没了），新窗口开启全屏后设置不可用遮罩。学习了下原生窗口操作。

空间坐标参考

• Custom Tiled WMS
  通过addCoordinateTransforms方法自己实现坐标变换函数

• Single Image WMS with Proj4js
  集成Proj4js，实现自定义投影坐标转换

• Sphere Mollweide
  带经纬网的摩尔威德投影，不明觉厉

交互

• Box Selection
  使用DragBox和Select交互绘制矩形选择要素。
• Draw and Modify Features
  点线面要素的绘制和修改。
• Draw Shapes
  几何体（圆圈，方盒，五角星等）绘制的示例。
• Measure using vector styles
  样式比较好看的量测示例。
• Print to scale example
  按照标准比例尺打印为PDF。

矢量数据/矢量操作

• WebGL points layer
  示例里使用json结构样式设置WebGL点图层，用到的’ol/layer/WebGLPoints’属于6.10.0版本API里尚未稳定的功能。该示例里有较为完整的样式运算语法，可用于其他WebGL图层样式设置。

• Dynamic clusters
  聚类的样式定制。

• Earthquakes Heatmap
  热力图的使用示例。数据源是kml。

• Editable ArcGIS REST Feature Service
  ArcGIS要素服务的加载和编辑。

• Filtering features with WebGL
  使用WebGLPoints图层（新功能）展示点要素，6.10.0版本API里还没有这个类，看例子挺酷炫的。

• Vector Clipping Layer
  使用矢量数据裁切图层

栅格数据和格网

各种栅格数据源加载、配置，以及栅格渲染

• Color Manipulation
  使用RasterSource，接收其他数据源进行色彩处理。示例是调整色调，色度，亮度。
• Image Filters
  使用prerender和postrender对栅格图像进行图像处理（锐化、模糊、边缘检测等）。
• Raster Source
  使用RasterSource，计算VGI（植被绿度指数），根据VGI计算直方图对栅格数据做统计和过滤。
• Region Growing
  使用RasterSource，栅格区域点选。通过鼠标点选获取周围以阈值区分的像素值连续区域。
• Sea Level
  又是RasterSource，海平面上涨模拟淹没。根据地形数据源的rgb算出高度值，和输入的高度值对比，修改被淹地区的颜色。
• Shaded Relief
  又双是RasterSource，地形阴影渲染。地形数据根据输入的太阳位置/高度渲染阴影，炫技。
• Tile Load Events
  瓦片渲染状态监听，实现了数据加载进度条。
• WMS GetFeatureInfo (Image Layer)
  使用ImageWMS数据源的getFeatureInfoUrl方法，进行WMS服务要素查询。
• WMS GetLegendGraphic
  使用GetLegendGraphic方法请求WMS的图例。这个图例的设置大概是在服务端完成的，完整参数示例见- #GetLegendGraphic
• WMS Time
  使用TileWMS数据源的updateParams方法更新时间属性。不确定服务的时间属性是怎么做的，geoserver有相关文档，不确定是不是，见- #Time Support in GeoServer WMS
• WMS 512x256 Tiles
  使用自定比例大小的网格加载WMS瓦片。比较详细的TileGrid使用示范，还有根据投影获取分级分辨率的方法示例。
• WMTS Layer from Capabilities
  使用GetCapabilities方法获取WMTS服务的属性xml，解析并加载该服务。手动配置tileGrid见- #WMTS。WMS服务类似示例见- #WMS Capabilities Parsing
• WMTS Tile Transitions
  WMTS数据源updateDimensions方法改变服务请求参数的示例。改变参数演示海平面上升淹没，很感兴趣原始数据是怎么组织的，和Sea Level那个示例用像元值计算高度不是一个路数。
• XYZ Retina Tiles
  高分辨率瓦片，主要是设置XYZ数据源的tilePixelRatio属性。建议搭配- #这篇文章看，里面详细介绍了OL瓦片系统。
• Rendering 16-bit NumpyTiles
  虽然例子的主题是NumpyTiles数据加载，但这种数据并不常见，但是用到的WebGLTile的波段拉伸样式设置可以看一下。
• Map Graticule
  添加地图经纬度格网图层
• Custom Canvas Tiles
  ol的TileDebug source可以添加xyz瓦片格网图层，这个实例比Canvas Tiles示例多了些参数

栅格数据(GeoTIFF+WebGLTile)

这个应该是新特性，核心类API并不完善（6.10.0），这里放一部分，全部示例可以搜索GeoTIFF、ndvi等等

• Cloud Optimized GeoTIFF (COG)
  使用webgl瓦片图层加载GeoTIFF在线文件数据源（单景），注意view使用的是加载source后的回调，view保存了该景数据的分辨率和范围，以此限制地图缩放。
• Band Constrast Stretch
  在WebGLTile加载GeoTIFF基础上，设置WebGLTile初始图层样式，并使用layer.updateStyleVariables方法更新样式。
• Change Tile Layer Style
  在WebGLTile加载GeoTIFF基础上，设置样式进行波段组合，示例里给出了真彩色、假彩色和NDVI。
• GeoTIFF tile pyramid
  多个WebGLTile作为图层组加载切片后的GeoTIFF金字塔。
• WebGL Tile Layer Styles
  动态调整WebGLTile图层的曝光、对比、饱和度。
• Layer Swipe
  webgl图层的横向卷帘。使用webgl的scissor方法，裁切图层prerender事件里的context上下文。

样式和渲染

各种花里胡哨的Style

• Custom Animation
  使用postrender和vectorContext获取绘制上下文，获取CanvasImmediateRenderer，绘制该对象。
• Custom Circle Render
  style的renderer属性方法的应用示例，和canvas绘图辐射渐变（createRadialGradient）的使用示例。
• Custom Polygon Styles
  style的geometry属性方法的使用示例。
• Flight Animation
  航班轨迹动画，原理和Custom Animation差不多，使用在线数据绘制，内容更复杂一点。
• RegularShape
  'ol/style/RegularShape’的应用实例，展示了使用RegularShape绘制复杂图形（五角星之类的）的方法。
• Styling feature with CanvasGradient or CanvasPattern
  创建Canvas渐变context作为颜色设置填充样式。

矢量瓦片

直接搜vector tile能搜到很多矢量瓦片相关的示例，都很直观。

• Vector tiles created from a Mapbox Style object
  这里用到的’ol-mapbox-style’比较冷门。
• Vector tiles rendered in an offscreen canvas
  使用OffscreenCanvas和WebWorker渲染矢量瓦片。高端操作。

不明觉厉

• Synthetic Lines
  绘制了一层层堆叠的线框，不明觉厉。
• Synthetic Points
  绘制了一堆随机点线圈，附带鼠标移动事件监听，获取最近要素渲染样式。
• Zoomify
  用于高分辨率图像的深度放大。不明觉厉。
• Fractal Rendering
  分形体渲染，重点是生成分形体的算法？