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

本章用于汇总OpenLayers地图中各种特殊图形绘制系列汇总目录。内容包含：点、线、多边形、圆形、半圆、四分之一圆、椭圆、圆环、半圆环、环形扇形、三角形、矩形、正方形、长方形、平行四边形、梯形、菱形、五角星、六角形（六芒星）以及箭头等等特殊图形。

本篇作为《Vue+OpenLayers入门教程》和《Vue+OpenLayers实战进阶案例》所有文章的二合一汇总目录，方便查找。> 本专栏源码是由OpenLayers结合Vue框架编写。> 本专栏从Vue搭建脚手架到如何引入OpenLayers依赖的每一步详细新手教程，再到通过各种入门案例和综合性的实战案例，带领大家快速上手Vue+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之前，总是需要了解OpenLayers，知道OpenLayers是什么，OpenLayers能够做什么，OpenLayers有哪些用途和特性，然后OpenLayers相比其他地图引擎又有哪些优点，然后再学习更会更加容易上手OpenLayers。下面一起来了解一下OpenLayers。OpenLayers是一个开源的JavaScript库，用于在Web上创建交互式地图应用程序。它提供了丰富的功能和工具，使开发者能够在网页上展示地图、添加图层、标记位置、进行地图操作等。

尽管现在大部分网页都是使用vue或者react开发了，但是还是有不少开发者使用的是网页原生html进行开发，或者是老项目维护的需要，所以为了照顾使用html原生网页的同学们，本章简单讲解一下如何使用原始html网页情况下使用OpenLayers。《vue项目集成并使用OpenLayers地图的两种方式》。

本章针对Vue初学者，对Vue不熟悉，甚至还不会Vue的入门学生读者。本章会详细讲解从环境到环境的各个步骤，再到使用脚手架快速生成项目，以及添加地图库依赖，编写简单的高德地图显示页面的。如果已有VUE项目或者熟悉VUE的读者可以不用看本章，直接添加ol依赖到VUE项目中即可。

虽然两种方式最终实现功能是一样的，但是当代码越来越多，业务越来越复杂，后面代码分离方式是最优选，可以实现数据和地图功能的解耦。而第一种适合业务简单时快速实现。当然博主还是推荐第二种分离方式，更加优雅。如果您有更好的办法，欢迎在评论区评论。

本章介绍一下Openlayers最基础的调整中心点坐标方式、调整缩放级别、调整地图可视角度和地图复位的小功能示例，非常简单，可直接上手。

本章介绍如何销毁已经创建好的OpenLayers地图容器。在某些场景下，可能会需要销毁之前的地图，重新创建新的地图的需要，因此本章介绍一下在开始创建地图前如何先销毁之前的地图的功能。

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

本章介绍OpenLayers6如何使用全屏控件，来控制地图全屏和退出全屏的功能。注意：这里的全屏控件全屏指的是地图容器全屏，并非整个网页全屏。《OpenLayers6入门，OpenLayers如何实现地图全屏和退出全屏操作，实现指定网页节点全屏和退出全屏》

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

OpenLayers地图默认使用什么投影?在回答这个问题之前，我们需要了解什么是地图投影。地图投影是将球面地图上的三维地理坐标系（经纬度）转换成平面地图上的二维坐标系的过程。由于地球是一个近似的椭球体，而平面地图是一个二维表面，因此需要采用适当的投影方式来实现这种转换。《GIS入门，什么是地图投影，地图投影有哪些类型，墨卡托投影属于哪一种类型的投影，为什么OpenLayers地图默认使用墨卡托投影》之前有同学问到，如果在View中和Source中同时指定了两个不同的投影，那么最终以哪个投影为准？

OpenLayers地图初始化时如何设置默认缩放级别、初始化时设置默认地图中心点、设置最大缩放级别和最小缩放级别，超过缩放级别用户无法再放大和缩小，和设置默认坐标系。

使用OpenLayers在地图上添加地图缩放控件，地图比例尺控件和鼠标经纬度位置展示控件。

OpenLayers想要实现鹰眼控件，必须要新建一个数据源，且不能跟其他图层混用，相当于鹰眼是一个单独图层。

使用OpenLayers实现地图全图显示经纬度网格标记线。方便查看可视区域所处的经纬度区间。

本章讲解如何使用OpenLayers全屏控件，实现OpenLayers地图节点的全屏操作。

本章主要讲解OpenLayers弹出框如何与VUE组件联动，在Popup弹出框内容中嵌入vue的组件，以及iframe第三方网页和html元素等内容。

OpenLayers默认并没有提供图层管理组件，本章就讲一下在vue中如何使用ElementUI的下拉框做一个简单的图层管理组件。话不多说，直接开始。

如果我们项目没有vmts、vms、xyz等地图服务，只有一张静态图片，也可以作为地图基本图层使用。本章我们就讲讲如何使用OpenLayers使用一张图片作为地图的基本底图。

xyz是简单的地图瓦片服务，使用Z为地图缩放级别，使用X和Y对图层图片进行切割编号，URL通常为http://…/Z/X/Y.png，其中Z为缩放级别，X和Y标识图块。甚至可以使用nginx、apache、tomcat、iis等web容器自行使用已有的单图或多图层的瓦片图片搭建简单的xyz服务，只需要确保x、y为编号，z为缩放级别即可在OpenLayers等地图引擎中使用。

本章讲解OpenLayers如何加载必应地图（BingMap）到地图上。需要提前到必应开发者中心申请对应的地图访问api key才可以加载地图。

本章介绍如何使用OpenLayers加载离线xyz瓦片地图图层，并显示离线xyz瓦片的鹰眼控件。OpenLayers入门，OpenLayers地图鹰眼控件OpenLayers入门，OpenLayers加载离线瓦片xyz地图，vue项目如何使用离线瓦片。

本章讲解如何使用OpenLayers加载天地图，需要先到天地图申请key。本文使用xyz方式加载天地图，并且介绍如何加载xyz格式天地图url，包括天地图纯底图（无标记）、卫星影像图和纯标记图（不含底图）

只使用高德地图的底图，不使用高德开放平台的api，使用OpenLayer实现地图功能。