GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程

OpenLayers 是一个开源的 JavaScript 库，广泛用于构建交互式地图应用。OpenLayers 6.x 和 OpenLayers 7.x 之间的主要区别体现在新功能的引入、性能优化、API 调整、以及一些已废弃功能的移除。下面我们用一章的内容来介绍一下 OpenLayers 6.x 和 7.x 版本之间的主要功能变化。通过上述，可以看出，OpenLayers 7.x 在 6.x 的基础上做了许多改进，特别是在性能优化、图层和样式管理、以及模块化支持方面，提供了更多灵活性和更高的性能。

本篇作为Vue整合OpenLayers实战进阶教程的目录，用于整理汇总专栏所有文章，方便查找。本专栏是讲解主流前端框架Vue整合前端最流行的JS二维地图引擎之一OpenLayers的实战教程。

本章使用OpenLayers在地图上实现绘制曲线功能，基于chaikin-smooth多边形平滑曲线算法库来实现绘制平滑曲线。本章除了OpenLayers以外，还依赖chaikin-smooth库。《常用的多边形平滑曲线算法介绍和JavaScript的多边形平滑曲线算法库chaikin-smooth的实现原理》

本章讲解如何使用OpenLayers特殊图形绘制，通过鼠标拖拽方式来绘制出半圆环形（半圆扇形）的功能，效果像磁铁一样的半圆弧。上一章中我们以及实现了四分之一圆环形的特殊图形绘制《OpenLayers6实战，OpenLayers实现鼠标拖拽方式绘制环形（四分之一圆环），OpenLayers特殊图形绘制》，本章在上一章章基础上修改而成。

本章讲解如何使用OpenLayers在地图上实现鼠标拖拽方式绘制环形（四分之一圆环）的功能。

本章讲解OpenLayers特殊图形绘制，也即使用OpenLayers实现鼠标拖拽方式绘制空心圆环的功能。

本章讲解使用OpenLayers在地图上实现鼠标拖拽方式绘制半圆形（半圆扇形）

本周讲解使用OpenLayers在地图上实现鼠标拖拽方式绘制椭圆的功能。

本章介绍使用OpenLayers在地图上实现鼠标拖拽方式绘制矩形（拖拽方式长方形和正方形）。OpenLayers本身是可以通过鼠标点击多个点的方式来绘制多边形的，当然也包括长方形和正方形，但是这种多边形绘制出来的图形并不是准确的“长方形”和“正方形”，多多少少都会有一些变形（形状不规则），而且也不好控制。本章就是为了解决上述问题，只需要通过鼠标拖拽方式就可以直接实时生成形状规则的“矩形”。

本章介绍如何使用OpenLayers在地图上使用实现鼠标拖拽方式绘制平行四边形。

本章讲解如何使用OpenLayers实现鼠标拖拽方式绘制梯形。点击鼠标拖拽梯形，松开鼠标后绘制完成。

本章讲解使用OpenLayers如何绘制三角形。OpenLayers本身是可以通过多边形绘制来绘制自行绘制三角形的，但是这种绘制方式是通过鼠标点击每个点来实现线条链接的，不支持固定的三角形这种特殊图形绘制的。因此本章我们通过自定义OpenLayers的绘制事件，来让OpenLayers支持鼠标拖拽方式绘制三角形，让绘制三角形变得更加方便。

本章讲解使用OpenLayers实现绘制扇形，绘制特殊殊图形扇形（也即：四分之一圆）的功能。本章代码是在绘制圆形的基础上扩展修改而成：圆形绘制可以参考：《OpenLayers6入门，OpenLayers图形绘制功能，OpenLayers实现在地图上绘制线段、圆形和多边形。

本章讲解使用OpenLayers实现六角形（六角星）特殊图形的绘制功能。本章是在《OpenLayers6实战，OpenLayers绘制特殊图形，OpenLayers绘制四角形（菱形），OpenLayers绘制菱形》，《OpenLayers6实战，OpenLayers绘制五角星，OpenLayers绘制特殊图形，地图上画五角星》基础上扩展修改而成。

本章使用OpenLayers实现自定义overlay弹框拖拽事件，点击地图后弹框并使用鼠标拖拽overlay弹框到任意地图位置并在弹框内容实时显示经纬度位置的功能。本章在《OpenLayers6入门，OpenLayers地图鼠标点击事件使用，点击地图后弹框并显示当前位置经纬度》基础上增加overlay弹框拖拽事件。

本章讲解如何使用OpenLayers6在地图上绘制五角星这种特殊图形的功能。OpenLayers6实战，OpenLayers绘制特殊图形，OpenLayers绘制四角形（菱形），OpenLayers绘制菱形。

本章讲解如何使用OpenLayers6实现绘制特殊图形，以绘制四角形（菱形），OpenLayers绘制菱形的功能为例。本章核心代码不依赖任何第三方插件，只依赖OpenLayers

本章讲解如何使用OpenLayers实现绘制矩形区域放大地图功能，鼠标框选放大地图的功能。本章是在上一章《OpenLayers6实战，OpenLayers实现绘制圆形放大地图功能，在地图上画圆放大地图到鼠标框选区域》基础上实现的矩形（四边形）的框选功能。

本章讲解如何使用OpenLayers实现绘制圆形放大地图功能，在地图上画圆放大地图到鼠标框选区域。

本章讲解OpenLayers6如何创建自定义鹰眼控件，自定义鹰眼控件样式，调整鹰眼控件位置、大小和文字和按钮等自定义样式的功能。

本章介绍如何使用OpenLayers创建自定义控件。以创建一个地图复位控件为例，讲解如何创建自定义控件来调整地图为默认的中心点、缩放等级和方向。

本章使用OpenLayers6实现动态的雷达扫描图动画效果。使用一个灰色遮罩其他区域，留白中间的圆形，扇形自动旋转扫描整个圆形范围。注意：本章代码未使用任何第三方插件，只使用OpenLayers实现。

本章使用OpenLayers实现飞机飞行轨迹动画效果。使用一张静态png图片作为飞机图标，根据三个轨迹点生成贝塞尔曲线，飞机图标会从起点开始自动沿着生成的贝塞尔曲线进行匀速运动，飞机可以根据实时运动轨迹转向，并最终停止在终点。

本章用于解决OpenLayers使用Cluster点聚合情况下，要素（Feature）出现有相同经纬度坐标时无法展开成单独图标的问题解决办法以及当缩放级别达到一定等级后强行展开聚合为单个点的功能。本章展开后由于经纬度坐标还是同一个点，所以图标还是按照实际情况叠加到同一个点，下一章将会讲解如何更加优雅的将同一个点位扩散展开显示。

本章讲解OpenLayers使用WebGL图层情况下，鼠标经过要素高亮显示，根据变量自动修改WebGL图层要素的透明度、大小和颜色的功能。webgl图层的样式并不像普通矢量图层直接修改或者切换样式就可以的，而是要预先通过webgl的运算符编写特定规则才能动态切换。本章使用match运算符来配合鼠标事件完成整个高亮切换过程。

本章主要讲解OpenLayers使用WebGL图层的情况下，如何使用一张拼接合成图片根据坐标切片成单个图片进行渲染不同图片到地图上的功能。为方便讲解原理，本章使用的一张图片是按照横向4等分，纵向两等分规则拼接了6个图标的合成图片。并使用WebGLPointsLayer图层的match运算符将一张切片图片为6个图标，并分别渲染这6个图标到地图上。

本章使用OpenLayers根据Feature要素的变量动态渲染多种颜色、不同长度和不同透明度的矩形（长方形、四边形和正方形）图形。通过一个WebGL图层生成四种不同颜色、不同大小和不同透明度的矩形图形要素，适用于WebGL图层根据大量点要素区分颜色、区分不同大小和区分透明度显示矩形的需求。本文使用case运算符结合逻辑运算符生成透明度，match运算符生成多种颜色和插值运算符生成长度。

本章使用OpenLayers根据Feature要素的变量动态渲染不同颜色和不同直径大小的圆形和圆点图形。通过一个WebGL图层生成四种不同颜色和不同大小的圆形圆点图形要素，适用于WebGL图层需要根据大量点要素区分颜色区分不同大小显示圆形圆点的需求。

本章使用OpenLayers根据Feature要素的变量动态渲染不同颜色的三角形。通过一个WebGL图层生成四种不同颜色的图形要素，适用于WebGL图层需要根据大量点要素区分颜色显示的需求。更多的WebGL图层使用运算符动态生成样式的内容将会陆续更新。## WebGL图层样式运算符详解OpenLayers入门，OpenLayers6的WebGLPointsLayer图层样式运算符详解。

本章使用OpenLayers实现从vue项目中加载assets资源目录中的GeoJson格式数据，实现鼠标点击区划边界范围内时选并高亮显示，点击区划边界区域外取消高亮的功能。本章是综合应用，为方便大家理解代码，拆分为简单的单一技术可以看下面的入门内容：1、如何监听鼠标点击事件OpenLayers入门，OpenLayers地图鼠标点击事件使用，点击地图后弹框并显示当前位置经纬度2、如何从vue项目中加载assets资源目录中的GeoJson格式数据。

本章使用OpenLayers实现从vue项目中加载assets资源目录中的GeoJson格式数据，解析渲染GeoJson格式中国省级行政区划边界数据，并且实现鼠标经过省级区域高亮显示省级区域边界的功能。本章是综合应用，为方便大家理解代码，拆分为简单的单一技术可以看下面的入门内容：1、如何监听鼠标监听事件OpenLayers入门，OpenLayers鼠标移动事件使用，实现鼠标移动到点位上方后高亮显示点位要素2、如何从vue项目中加载assets资源目录中的GeoJson格式数据。

本章是OpenLayers综合实战案例，使用OpenLayers结合下拉菜单实现城市切换，动态切换城市边界到地图视图视角范围内。本章需要使用到ElementUI的下拉框组件和OpenLayers的TopoJson格式解析地市边界数据并负责渲染，通过动态创建style样式来切换城市区划边界高亮效果。如何从vue项目中加载assets资源目录中的TopoJson格式数据。

本章使用OpenLayers实现从vue项目中加载assets资源目录中的TopoJson格式数据，实现鼠标点击区划边界范围内时选并高亮显示，点击区划边界区域外取消高亮的功能。本章是综合应用

本章使用OpenLayers实现从vue项目中加载assets资源目录中的TopoJson格式数据，解析渲染TopoJson格式行政区划边界数据，并且实现鼠标经过区域高亮显示区划边界和文字的功能。

本篇文章通过国内的省、自治区和直辖市的GeoJson数据作为行政区划边界数据，然后根据用户定位位置，通过OpenLayers计算得到用户所在行政区划，并使用OpenLayers高亮显示用户所在行政区划边界。本章是综合应用场景，所以代码稍稍有些复杂，对于新入门读者可能难以上手，因此下面提供本文中使用到的技术，方便大家拆分参考，容易上手：加载GeoJson数据渲染行政区划边界参考文章OpenLayers入门，OpenLayers如何加载GeoJson数据并叠加到OpenLayers矢量图层上。

本章讲解OpenLayers如何使用手机陀螺仪实现指南针，除了需要调用陀螺仪外，还需要获取手机的实时位置。通过获取到的实时位置显示箭头图标位置，通过获取陀螺仪水平方向来调整箭头指向。

OpenLayers实战，OpenLayers判断点位是否与多边形有交集，可以用于判断车辆是否在电子围栏内，船舶是否在锚泊位中等常用案例。在实际GIS地图业务开发中，一般是不会在前端实现是否在电子围栏这种计算的。如果有人让你在前端实现，那肯定在坑你，可以用下面的原因分析堵他嘴。原因有两点：1、前端性能太差，计算太慢。前端计算交集的速度远比后端c/c++或者java计算要慢太多，后端只需要用一个sql语句就可以筛出所有在电子围栏内的数据，而前端要一个一个去跟电子围栏去计算交集。

本章讲解OpenLayers实现地图鼠标经过点要素时显示名称标注提示框，移出后隐藏的功能。

本文通过自定义GCJ02坐标系方式来对底图栅格/瓦片进行整体纠偏在日常开发中，经常遇到使用高德底图，总是要对高德坐标进行转换才能使用。本章不需要对要素经纬度位置进行转换，而是使用OpenLayers将高德地图图层的所有瓦片从GCJ02坐标进行整体偏移为EPSG:4326和EPSG:3857坐标系来实现。

本章实现高德GCJ-02坐标系转WGS-84坐标系。日常开发中经常遇到源坐标高德的情况，这时候如果地图不是高德，而是使用的wgs84坐标系的地图，或者其他坐标系的情况下，就会导致位置偏移，本章就是解决高德坐标偏移问题。