Vue+OpenLayers6从入门到实战进阶案例汇总目录，Vue+OpenLayers6地图整合教程，OpenLayers6中文文档，OpenLayers6中文手册_openlayers vue

本篇作为《Vue+OpenLayers6入门教程》和《Vue+OpenLayers6实战进阶案例》所有文章的二合一汇总目录，方便查找。

本专栏源码是由OpenLayers6.15.1版本结合Vue2框架编写，同时支持Vue3，零星几篇文章用到了Element-UI库。
本专栏从Vue搭建脚手架到如何引入OpenLayers依赖的每一步详细新手教程，再到通过各种入门案例和综合性的实战案例，带领大家快速上手Vue+OpenLayers6开发。

# 反馈和建议
OpenLayers系列-交流专区，建议和问题反馈

OpenLayers6入门目录

一、介绍

Gis开发入门，OpenLayers、Leaflet、Maplibre-gl和Cesiumjs地图引擎介绍以及几种地图服务vms、vmts介绍

OpenLayers介绍，相比较其他地图引擎有什么优点

重要更新：OpenLayers7.x版本和6.x版本有什么区别，是否需要升级到OpenLayers7版本？

二、入门

1. （vue小白必读）OpenLayers6入门，快速搭建vue+OpenLayers地图脚手架项目
2. （必读）OpenLayers6入门，vue项目集成并使用OpenLayers地图的两种方式
3. （必读）OpenLayers6入门，HTML网页原生如何使用OpenLayers地图
4. OpenLayers6入门，OpenLayers地图基本概念（Map、View、Layer、Source四种基本类型）
5. OpenLayers6入门，OpenLayers地图初始化时如何设置默认缩放级别、设置默认地图中心点、最大缩放级别和最小缩放级别以及默认坐标系
6. OpenLayers6入门，OpenLayers6地图默认使用什么投影? 要如何更改OpenLayers6地图的投影？
7. OpenLayers6入门，如何销毁已经创建好的OpenLayers地图容器

三、地图控件

鹰眼控件
8. OpenLayers6入门，OpenLayers地图显示鹰眼控件
9. OpenLayers6入门，OpenLayers加载离线xyz瓦片地图并显示离线鹰眼控件
地图缩放控件、比例尺控件、鼠标经过地图显示经纬度控件
10. OpenLayers添加地图缩放控件、比例尺控件和鼠标经纬度位置
全屏控件
11. OpenLayers6入门，OpenLayers如何实现地图全屏和退出全屏操作，实现指定网页节点全屏和退出全屏
12. OpenLayers6入门，OpenLayers使用地图全屏控件，控制地图进入全屏和退出全屏
网格标记线控件
13. OpenLayers6入门，地图全图显示经纬度网格标记线

四、地图定位、缩放和可视范围跳转

无动画效果
14. Openlayers6入门，Openlayers调整中心点坐标、Openlayers调整缩放级别、Openlayers调整地图可视角度和地图复位
15. Openlayers6入门，Openlayers调整地图可视范围到多个点组成的多边形边界，可视范围缩放到多个点的中心点
平移效果
16. OpenLayers6入门，OpenLayers平移地图到指定位置，地图平移动画效果
飞行效果
17. OpenLayers6入门，OpenLayers视图飞行动画，OpenLayers飞行到指定经纬度位置
旋转效果
18. OpenLayers6入门，OpenLayers旋转地图到移动到指定位置，旋转动画效果，边旋转边移动到指定位置
弹簧跳跃和弹跳效果
19. OpenLayers6入门，OpenLayers使用弹跳动画和弹簧动画效果移动地图到指定位置，两种弹跳动画效果

五、事件监听

地图加载事件和加载完成事件
20. OpenLayers6入门，OpenLayers如何监听加载事件和加载完成事件来实现加载瓦片时显示动图转圈加载进度条（loading spinner），加载完成后隐藏

瓦片加载事件
21. OpenLayers6入门，OpenLayers使用瓦片加载事件实现瓦片加载进度条，进度条根据瓦片加载数量自动更新进度，加载完毕后隐藏进度条
鼠标移动事件
22. OpenLayers6入门，OpenLayers鼠标移动事件使用，实现鼠标移动到点位上方后高亮显示点位要素
鼠标点击事件
23. OpenLayers6入门，OpenLayers地图鼠标点击事件使用，点击地图后弹框并显示当前位置经纬度
与Vue组件联动弹框
24. OpenLayers6入门，OpenLayers的Popup弹出框如何内嵌Vue组件内容和内嵌iframe网页，根据所点击要素动态切换弹框内容

六、图层管理

25. Openlayers6入门，OpenLayers多图层切换显示隐藏，支持多个Layer同时显示和隐藏，以百度地图和高德地图为例实现vue的Layer图层管理组件

26. OpenLayers6入门，OpenLayers懒加载瓦片，点击事件后才开始加载瓦片，初始化地图时不加载瓦片

七、各种类型地图瓦片图层加载（图片、xyz、超图、百度、高德、天地图、谷歌地图、必应地图，wmts、wms、tms和wfs等）

27. OpenLayers6入门，OpenLayers使用一张图片作为地图的基本底图
    xyz（google、高德）
28. OpenLayers6入门，OpenLayers如何加载xyz瓦片图层
    WMTS
29. OpenLayers通过WMTSCapabilities.xml加载GeoServer发布的标准wmts地图服务
30. Openlayers通过计算matrixIds和resolutions方式加载WMTS地图服务，不需要解析WMTSCapabilities文档方式加载WMTS地图服务
    WMS
31. OpenLayers6入门，OpenLayers加载GeoServer发布的WMS地图服务作为底图
    TMS
32. OpenLayers6入门，OpenLayers如何加载TMS瓦片服务，以腾讯地图TMS图层为例
    高德底图
33. OpenLayers6入门，OpenLayers如何使用高德地图底图作为图层图源
    百度底图
34. OpenLayers6入门，OpenLayers使用百度地图底图作为图源，不需要地图开放平台token就可以访问
    天地图
35. OpenLayers6入门，OpenLayers加载天地图
    超图底图
36. OpenLayers6入门，OpenLayers如何使用超图地图（supermap）发布的地图服务作为基础图层
    Goole地图
37. OpenLayers6入门，OpenLayers加载Google街景地图
38. OpenLayers6入门，OpenLayers加载必应地图（BingMap），需要申请api key
    海图
39. OpenLayers6入门，OpenLayers加载船讯网航海地图
    离线瓦片地图
40. OpenLayers6入门，OpenLayers加载离线瓦片xyz地图，vue项目如何使用离线瓦片

八、叠加热力图

41. OpenLayers6入门，OpenLayers实现热力图效果

九、点、线、多边形、图片、动态图片、点聚合等多种图形叠加

42. OpenLayers6入门，添加一个Image图片点要素到地图上
43. OpenLayers6入门，使用OpenLayers叠加多边形、圆形、线段和点要素到地图上

WebGL图层简单叠加圆点和图标

44. OpenLayers6入门，使用webgl图层叠加大量Point点要素，解决叠加超过一百万数据量点位导致浏览器卡住变慢的问题
45. OpenLayers6入门，使用webgl图层叠加超过一百万数据量图片到地图，解决叠加大量图片导致浏览器卡住变慢的问题

WebGL样式运算符

46. OpenLayers6入门，OpenLayers6的WebGLPointsLayer图层样式和运算符详解，四种symbolType类型案例

叠加Gif动态图片

47. OpenLayers6入门，OpenLayers如何使用gifler库来实现gif动态图图片叠加到地图上

点聚合（聚散点）

48. OpenLayers6入门，OpenLayers实现点聚合（聚散点）功能，地图缩小显示聚集数量，点击聚集点散开和地图放大后显示要素图片
49. OpenLayers6入门，OpenLayers点聚合（聚散点）动态样式，根据周围聚集数量不同切换多种颜色显示，点击聚集点散开和地图放大后显示要素图片

十、格式化数据叠加

（1）WFS格式

50. OpenLayers6入门，OpenLayers如何加载WFS服务的要素资源数据

（2）GeoJSON格式

51. OpenLayers6入门，OpenLayers如何加载GeoJson数据并叠加到OpenLayers矢量图层上
52. OpenLayers6入门，OpenLayers如何加载百万数据量的GeoJson点数据并叠加到webgl渲染图层上，百万海量点数据叠加不卡
53. OpenLayers6入门，OpenLayers如何加载GeoJson多边形、线段、点和区域范围等数据并叠加到OpenLayers矢量图层上
    从vue项目的assets资源目录加载geojson文件
54. OpenLayers6入门，OpenLayers从vue的assets资源路径加载geojson文件并解析数据叠加到地图上，以加载世界各国边界为例
    fetch方式加载geojson
55. OpenLayers6入门，OpenLayers解析通过fetch请求的GeoJson格式数据，并叠加要素文字标注，以行政区划边界为例

（3）wkt格式

56. OpenLayers6入门，读取wkt格式数据，OpenLayers解析并显示wkt格式的要素数据

（3）TopoJson数据叠加

57. OpenLayers6入门，OpenLayers加载TopoJson数据，使用行政区划边界作为示例
    从vue项目的assets资源目录加载TopoJson文件
58. OpenLayers6入门，OpenLayers从vue的assets资源路径加载TopoJson文件并解析数据叠加到地图上，以加载世界各国边界为例
    fetch方式加载TopoJson
59. OpenLayers6入门，OpenLayers使用fetch加载并显示TopoJson格式区划边界数据并叠加文字标注，动态创建要素样式

十一、动画

60. OpenLayers6入门，OpenLayers动画效果实现，OpenLayers实现轨迹运动动画
61. OpenLayers6入门，OpenLayers实现多个轨迹运动动画效果，也可以实现二维地图迁徙图效果
62. OpenLayers6入门，OpenLayers实现地图原地旋转动画效果

十二、图形绘制编辑拖拽

63. OpenLayers图形绘制，OpenLayers实现在地图上绘制线段、圆形和多边形
64. OpenLayers6入门，OpenLayers涂鸦手绘线条、圆形和多边形，涂鸦线条自动收尾连接成多边形
65. OpenLayers选择拖拽，OpenLayers实现对地图上的任意要素进行选择和拖拽

十三、其他

66. OpenLayers6入门，OpenLayers导出整幅地图为png图片并保存下载

---

入门和实战分界线

Openlayers6实战进阶

综合案例

1. Openlayers6实战，Openlayers如何设置米作为作为圆形的真实半径，解决圆形半径跟随地图缩放同时缩放的失真问题
   图形交集计算
2. OpenLayers6实战，OpenLayers判断点位是否与多边形有交集，判断车辆是否在电子围栏内
   鼠标经过要素事件
3. OpenLayers6实战，OpenLayers实现地图鼠标经过点要素时显示名称标注提示框，移出后隐藏
4. OpenLayers6实战，OpenLayers自定义overlay弹框拖拽事件，点击地图后弹框并使用鼠标拖拽overlay弹框到任意地图位置并在弹框内容实时显示经纬度位置
   鼠标经过边界高亮显示：基于GeoJson格式数据
5. OpenLayers6实战，OpenLayers解析渲染GeoJson格式中国省级边界并实现鼠标经过区划高亮显示省级边界
   鼠标经过边界高亮显示：基于TopoJson格式数据
6. OpenLayers6实战，OpenLayers解析渲染TopoJson格式区划边界数据和实现鼠标经过高亮显示区划边界和文字
   鼠标点击选中边界范围高亮显示：基于GeoJson格式数据
7. OpenLayers6实战，OpenLayers实现GeoJson格式的省级区划数据渲染和鼠标点击省界自动选中并高亮显示省界范围，点击空白区域取消高亮
   鼠标点击选中边界范围高亮显示：基于TopoJson格式数据
8. OpenLayers6实战，OpenLayers实现TopoJson格式区划边界鼠标点击选中高亮显示，点击空白区域取消高亮
   Vue组件联动动态切换效果：基于TopoJson格式数据
9. OpenLayers6实战，OpenLayers结合TopoJson区划边界数据，结合下拉菜单实现城市切换，动态切换城市边界到地图视图视角范围内
10. OpenLayers6实战，OpenLayers点聚合有相同经纬度坐标时无法展开问题解决办法，当缩放级别达到一定等级后强行展开聚合为单个点

定位

11. Openlayers6实战，Openlayers获取浏览器当前用户的经纬度位置并定位到对应位置
12. OpenLayers6实战，OpenLayers获取移动端精确定位，OpenLayers适配App混合H5方式调用手机定位位置并定位到指定点
13. OpenLayers6实战，OpenLayers调用手机陀螺仪方向实现指南针效果
    定位并高亮显示用户所在行政区划边界
14. OpenLayers6实战，OpenLayers获取用户定位位置并高亮显示用户所在行政区划边界

webgl图层运算符实战

• match运算符实现一张合成拼接图根据坐标切片成单独图标渲染

15. OpenLayers6实战，WebGL图层如何使用一张拼接合成图片根据坐标切片成单个图片进行渲染

• match运算符匹配多种颜色三角形实战案例

16. OpenLayers6实战，WebGL图层根据Feature要素的变量动态渲染多种颜色的三角形，适用于大量三角形渲染不同颜色

• match运算符和interpolate插值运算符匹配多种颜色和多种直径大小的圆形圆点实战案例

17. OpenLayers6实战，WebGL图层根据Feature要素的变量动态渲染多种颜色和不同直径大小的圆形和圆点图形，适用于大量圆形圆点渲染不同颜色不同大小

• case运算符结合逻辑运算符判断透明度，match运算符匹配多种颜色和interpolate插值运算符匹配大小

18. OpenLayers6实战，WebGL图层根据Feature要素的变量动态渲染多种颜色、不同长度和不同透明度的长方形（矩形）图形，适用于大量矩形图形渲染

• match运算符配合鼠标经过事件高亮要素效果

19. OpenLayers6实战，WebGL图层鼠标经过要素高亮显示，根据变量自动修改WebGL图层要素的透明度、大小和颜色

动画特效

20. Openlayers实战，Openlayers实现类似呼吸灯的闪烁圆圈特效，光晕扩散动画特效，可调光晕扩散速度，可调光晕圆圈大小
21. Openlayers实战，OpenLayers实现定时闪烁动画效果，定时闪烁光晕特效
22. OpenLayers6实战，OpenLayers实现动态的雷达扫描图动画效果

运动轨迹和迁徙图

23. Openlayers6实战，Openlayers一个车辆转向运动轨迹动画，支持根据轨迹运动方向自动改变车头转向角度，无需定时器，丝滑小车转向运动效果
24. OpenLayers6实战，OpenLayers实现多个车辆船舶运动轨迹动画和迁徙图效果，车头方向根据轨迹方向自动转向，无需定时器
25. OpenLayers6实战，OpenLayers实现多个轨迹运动动画，各个轨迹使用不同的运动速度，运动方向根据轨迹运动方向自动转向
    飞机飞行轨迹动画
26. OpenLayers6实战，OpenLayers实现飞机飞行轨迹动画。飞机图标自动沿着生成的贝塞尔曲线匀速运动
    气象台风动画
27. OpenLayers6实战，OpenLayers实现气象台风飓风运动轨迹运动动画，可调台风旋转速度和运动速度，静态图片旋转动画

特殊图形绘制

三角形
28. OpenLayers6实战，OpenLayers实现鼠标拖拽绘制三角形，OpenLayers自定义绘制特殊图形
菱形
29. OpenLayers6实战，OpenLayers绘制特殊图形，OpenLayers绘制四角形（菱形），OpenLayers绘制菱形
矩形
30. OpenLayers6实战，OpenLayers实现鼠标拖拽方式绘制矩形（拖拽方式绘制长方形和正方形）
平行四边形
31. OpenLayers6实战，OpenLayers实现鼠标拖拽方式绘制平行四边形
五角星
32. OpenLayers6实战，OpenLayers绘制五角星，OpenLayers绘制特殊图形，地图上画五角星
六芒星
33. OpenLayers6实战，OpenLayers绘制六角形（六角星）图形，OpenLayers绘制特殊图形
扇形
34. OpenLayers6实战，OpenLayers实现绘制扇形，OpenLayers绘制特殊殊图形四分之一圆
箭头
35. OpenLayers6实战，Openlayers实现绘制箭头，Openlayers绘制轨迹路径箭头，可调箭头角度和箭头长度
椭圆
36. OpenLayers6实战，OpenLayers实现鼠标拖拽方式绘制椭圆
半圆扇形
37. OpenLayers6实战，OpenLayers鼠标拖拽方式绘制半圆形（半圆扇形）
画圆环
38. OpenLayers6实战，OpenLayers实现鼠标拖拽方式绘制空心圆环
39. OpenLayers6实战，OpenLayers实现鼠标拖拽方式绘制环形（四分之一圆环），OpenLayers特殊图形绘制
40. OpenLayers6实战，OpenLayers鼠标拖拽方式绘制半圆环形（半圆扇形）
曲线
41. OpenLayers6实战，OpenLayers基于chaikin-smooth多边形平滑曲线算法库实现绘制平滑曲线
测量距离和测量区域面积
42. OpenLayers6实战，OpenLayers画线测量距离和画多边形测量区域面积
框选地图放大
43. OpenLayers6实战，OpenLayers实现绘制圆形放大地图功能，在地图上画圆放大地图到鼠标框选区域
44. OpenLayers6实战，OpenLayers实现绘制矩形区域放大地图功能，鼠标框选放大地图

自定义控件

45. OpenLayers6实战：OpenLayers创建自定义控件，以创建一个地图复位控件为例
46. OpenLayers6实战，OpenLayers创建自定义鹰眼控件，自定义鹰眼控件样式，调整鹰眼控件位置、大小、文字和按钮等样式

气象风场

风场效果
47. OpenLayers6实战，OpenLayers使用wind-layer插件实现风场动态效果

台风/飓风
台风/飓风动画轨迹同时放在运动轨迹中： OpenLayers实战，OpenLayers实现气象台风飓风运动轨迹运动动画，可调台风旋转速度和运动速度，静态图片旋转动画

性能优化（瓦片加载速度优化）

48. Openlayers6实战，OpenLayers预加载瓦片，解决移动地图或缩放地图时出现空白瓦片的问题
49. Openlayers6实战，Openlayers优化加载地图瓦片太慢的问题，Openlayers瓦片缓存实现和请求失败瓦片重试功能
50. Openlayers6实战，Openlayers使用浏览器内置IndexDB数据库缓存地图瓦片，优化地图瓦片加载速度和浏览器内存占用

坐标转换

51. OpenLayers6实战，高德GCJ-02坐标系转WGS-84坐标系
52. OpenLayers6实战，OpenLayers高德地图瓦片位置纠偏，将高德底图瓦片位置转换为EPSG:4326和EPSG:3857

未完，持续更新中…

---

Vue+OpenLayers6进阶专栏推荐：
《OpenLayers扩展组件系列汇总目录：常用OpenLayers地图扩展组件ol-ext、ol-cesium、ol-layerswitcher、ol-geocoder和ol-wind等扩展库实战示例》