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

OpenLayers介绍，相比较其他地图引擎有什么优点四种流行地图引擎比较Gis开发入门，OpenLayers、Leaflet、Maplibre-gl和Cesiumjs地图引擎介绍以及几种地图服务vms、vmts介绍。

OpenLayers6入门，OpenLayers图形绘制功能，OpenLayers实现在地图上绘制线段、圆形和多边形》，那么本章将在此基础上实现图形的拖拽编辑功能，方便我们对绘制后的图形进行修改操作。

可以问一些GIS领域问题，也可以谈谈自己对GIS行业的看法，以及提一些关于本专栏的建议等等（其他内容也可以欢迎讨论）。2、博主会不定期更新一些内容或者消息在这里（目录的话一般会跟随文章更新一同更新）。1、就是为了方便大家沟通交流，大家可以在本文评论区留言。消息不定期更新，欢迎大家讨论！

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

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

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

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

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

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

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

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

OpenLayers实现地图原地旋转动画效果，顾名思义，就是站在原地转一圈。

OpenLayers使用弹跳动画和弹簧动画效果移动地图到指定位置，分别实现两种弹跳动画效果，一种是弹跳效果，一种是弹簧效果，具体效果看效果图。

本章讲解如何使用视图旋转动画方式，边旋转边移动地图到指定位置。其他地图跳转位置方式：Openlayers入门，Openlayers调整中心点坐标、Openlayers调整缩放级别、Openlayers调整地图可视角度和地图复位OpenLayers入门，OpenLayers视图飞行动画，OpenLayers飞行到指定经纬度位置OpenLayers入门，OpenLayers平移地图到指定位置，地图平移动画效果。

本章讲解OpenLayers如何实现平移地图到指定经纬度位置的功能。其他地图跳转位置方式：Openlayers入门，Openlayers调整中心点坐标、Openlayers调整缩放级别、Openlayers调整地图可视角度和地图复位OpenLayers入门，OpenLayers视图飞行动画，OpenLayers飞行到指定经纬度位置。

本章实现OpenLayers视图飞行动画，根据经纬度和动画持续时长，飞行到指定地图位置。《Openlayers入门，Openlayers调整中心点坐标、Openlayers调整缩放级别、Openlayers调整地图可视角度和地图复位》

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

本章讲解怎么在地图初始化时不加载瓦片，通过事件触发才开始懒加载地图瓦片图层。

本章讲解OpenLayers如何使用离线瓦片，以vue项目为例，将已经下载好的xyz离线瓦片放在vue项目中，使用OpenLayers直接加载vue中的瓦片图片，即可进行加载地图。

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

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

本章讲解OpenLayers如何加载TMS图层服务到地图上，TMS图层介绍请参考《Gis开发入门，OpenLayers、Leaflet、Maplibre-gl和Cesiumjs地图引擎介绍以及几种地图服务vms、vmts、TMS和XYZ介绍》，下面介绍一下TMS图层和XYZ图层的区别。

本章讲解OpenLayers加载google街景地图，无需科学上网，也可以正常访问瓦片。

本章实现OpenLayers加载船讯网航海地图。

本章再次讲解OpenLayers绘制图形功能，上一章中《OpenLayers图形绘制，OpenLayers实现在地图上绘制线段、圆形和多边形》我们已经讲过多种图形的绘制，本章主要讲解自由涂鸦手绘绘制线条，圆形和任意形状。

本章讲解如何使用OpenLayers加载WFS服务的要素资源数据。WFS是基于地理要素级别的数据共享和数据操作，WFS规范定义了若干基于地理要素（Feature）级别的数据操作接口，并以 HTTP 作为分布式计算平台。通过 WFS服务，客户端可以得到矢量数据格式描述的单个地理要素的空间数据或要素集的空间数据，并可以对单个地理要素进行编辑、 删除、 添加等数据操作。WFS采用 GML描述地理要素特征， 根据用户请求的内容返回 GML描述的空间数据。

本章以加载世界各国边界的GeoJSON格式数据为例，讲解如何使用OpenLayers从vue的assets资源路径加载geojson文件并解析数据叠加到地图上。

本章讲解一下OpenLayers如何加载解析TopoJson格式的数据。TopoJson是用于表示地理空间数据的格式。是GeoJson格式的改进版，相比 GeoJSON 直接使用 Polygon、Point 之类的几何体来表示图形的方法，TopoJSON 中的每一个几何体都是通过将共享边（被称为arcs）整合后组成的，因此TopoJSON 消除了部分冗余数据，使得文件最终大小比GeoJson缩小了约 80%。与GeoJson的区别TopoJson和GeoJson是两种用于表示地理空间数据的格式。

上一章中已经说明了TopoJson格式数据，《OpenLayers入门，OpenLayers加载TopoJson数据，使用行政区划边界作为示例》，大家应该都已经有所了解。本章在上一章基础上改用fetch加载TopoJson格式数据，并手动解析数据为Feature要素，并且动态创建要素style格式还要根据要素属性额外叠加文字标注。

本章讲解如何使用OpenLayers通过fetch请求geojson数据，然后通过OpenLayers解析为Feature要素叠加到图层上，并且通过动态设置标注方式显示要素属性为文字标注。

前面几章，已经介绍了如何使用一张图片作为地图图层和xyz瓦片服务作为地图图层等等。本章将介绍一下如何使用国产超图地图发布的地图服务。

一般使用百度地图是需要注册百度地图开放平台并获得对应的访问token才能访问地图的api，我们只使用百度的地图底图作为图层图源，不使用百度地图开放平台的api，使用OpenLayer来实现地图功能。

如果我们项目没有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等地图引擎中使用。

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