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

Gis开发入门，OpenLayers、Leaflet、Maplibre-gl和Cesiumjs地图引擎介绍以及几种地图服务vms、vmts介绍OpenLayers介绍，相比较其他地图引擎有什么优点OpenLayers7.x版本和6.x版本有什么区别，是否需要升级到OpenLayers7版本？OpenLayers6实战：OpenLayers创建自定义控件，以创建一个地图复位控件为例OpenLayers6实战，OpenLayers创建自定义鹰眼控件，自定义鹰眼控件样式，调整鹰眼控件位置、大小、文字和按钮等样式。

本章讲解如何使用OpenLayers的气象风场插件wind-layer实现气象风场动态效果，该插件除了可用于OpenLayers之外，还可用于mapgl、leaflet和cesuim等二维/三维地图引擎，还是很强大的，废话少谈，让我们立刻开始实现吧。

在上一章中Openlayers实现类似呼吸灯的闪烁圆圈特效，光晕扩散动画特效，可调光晕扩散速度，可调光晕圆圈大小我们实现了类似呼吸灯一样的连续不断的光晕闪烁动画效果，本章在这个基础上实现定时闪烁，到时间后自动停止动画。

相信找到这篇文章的同学肯定遇到了Openlayers直接设置圆形半径（ radius）单位不准确的问题，而且失真严重。这是因为默认圆形半径设置的是浏览器像素大小，而不是真实地理信息中的半径长度。那么怎么进行转换成我们现实中的“米”这个单位呢，接着往下看就知道了。

本章在《OpenLayers入门，OpenLayers实现多个轨迹运动动画效果，也可以实现二维地图迁徙图效果》基础上实现多个车辆船舶运动轨迹动画效果，并支持车头方向根据轨迹方向自动转向。本章代码不使用任何setTimeout和setInterval定时器。

在此之前，我们已经实现了基本图形（点、线、圆、多边形）的绘制（OpenLayers图形绘制，OpenLayers实现在地图上绘制线段、圆形和多边形），本章实现一个计算稍微麻烦一点的图形（箭头）来实现Openlayers绘制箭头，Openlayers绘制轨迹路径箭头，还支持箭头角度和箭头长度可调整。

在入门教程中，我们已经详细介绍了如何对地图瓦片进行缓存，请参考《Openlayers优化加载地图瓦片太慢的问题，Openlayers瓦片缓存实现和请求失败瓦片重试功能》，缺点是占用内存过多，那么如何再次优化呢，本章就通过使用浏览器IndexDB数据库来缓存地图瓦片，不仅同时优化了瓦片加载速度，从而在之前基础上优化占用内存过多的问题。为什么不使用LocalStorage？因为LocalStorage有存储限制，最大5M，而地图瓦片很多，LocalStorage是远远不够的。

本篇讲一下Openlayers获取浏览器当前用户的经纬度位置并定位到对应位置，会像高德地图一样触发浏览器左上角位置权限，确认后就可以获取位置并控制地图中心点到用户所在位置。适用于Edge、firefox和移动端浏览器，pc端的chrome即使允许获取位置也会显示超时无法获取到位置。

本章讲解OpenLayers如何获取移动端精确定位位置。不使用任何native本地方法，只使用纯js实现。本篇文章适用于App混合H5方式调用手机精确定位，打包时需要选择GPS位置权限，手机获取定位过程中会弹出是否允许定位的权限提示。

OpenLayers默认加载地图并不会预加载不同层级的瓦片，所以我们在进行地图缩放操作或者移动地图位置时会出现瓦片还没加载出来显示空白瓦片的问题，其实很简单，只需要设置图层的preload参数即可实现瓦片的预加载，解决没加载出来显示空白瓦片的问题。

本章作为OpenLayers入门文章《OpenLayers入门，OpenLayers动画效果实现，OpenLayers实现轨迹运动动画》的的增强进阶篇章，实现了入门教程中没有实现的小车车头方向根据运动方向自动转向的功能。本章代码不使用任何setTimeout和setInterval定时器。

本章在上一章基础上《OpenLayers实战，OpenLayers实现多个车辆运动轨迹动画和迁徙图效果，车头自动转向，方向根据轨迹方向自动转向，无需定时器》，新增各个轨迹使用不同的运动速度，允许每条轨迹都可以自定义运动速度，快慢任意调整。

Openlayers默认加载地图瓦片很慢，通过对比使用openlayers和leaflet加载速度，能够明显看到openlayers加载速度比leaflet要慢很多。看了Openlayers源码发现是因为Openlayers的瓦片加载机制是通过tileQueue瓦片加载队列来顺序加载瓦片，瓦片总是一个个顺序的加载，而不是同时加载。

本章使用OpenLayers实现画线测量距离和画多边形测量区域面积这两个功能。本章代码就是通过OpenLayers的图形绘制功能，通过监听绘制事件获取绘制的图形，并进行计算，就可以得到长度和面积。日常开发中比较常用，所以不废话，立刻开始实现。

gis主要用来展示数据，所以动态效果是最重要的，本章实现类似呼吸灯一样的点位圆形光晕闪烁动画效果，可以用于选中或者警示等特别提醒的效果，比较醒目。

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

本章使用OpenLayers实现气象中常用的台风或者飓风运动轨迹动画，支持调整台风图标旋转速度和运动速度。本章图片使用静态png图片，并非gif动态图。本章未使用任何第三方库，只依赖OpenLayers。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

上一章中，我们已经实现了单个轨迹运动动画效果。如果可以创建多个轨迹运动动画，那我们就可以使用OpenLayers实现类似echarts相同的迁徙图飞行效果。

1、什么是wmts（Web地图平铺服务）？定义一组接口，用于使用具有预定义内容、范围和分辨率的分幅图像对空间参考数据的地图分幅进行基于web的请求。本标准包括WMTS规范（“WMTS规范”）以及附带文档，如概要文件和XML文档。用于基于网络的地图分发。WMS注重客户端请求的灵活性，使客户端能够准确地获得他们想要的最终图像。

OpenLayer本身不支持gif图片作为图标要素显示，所以需要通过其他办法来实现支持gif图片。本章使用gifler库先生成canvas画板，然后通过canvas画板的重绘事件来重新渲染地图来达到实现OpenLayergif动态图的功能。

在此之前我们已经实现了WMTS服务的加载（可以参考:《Openlayers通过计算matrixIds和resolutions方式加载WMTS地图服务，不需要解析WMTSCapabilities文档方式加载WMTS地图服务》），本章写一下如何加载GeoServer发布的WMS地图瓦片到地图上作为底图的功能。

有时候截图只能截一部分地图，而我们想要整幅地图和上面叠加的所有图层内容全部导出来，本章就是结局的这个问题，简单写一下OpenLayers保存整幅地图为png图片并下载功能。

使用OpenLayers添加图标到地图上。首先要创建矢量图层，然后把点添加到矢量图层即可，图片则是通过style样式去设置，可以把style设置到矢量图层上，也可以设置style到Feature要素上，Feature要素的风格会覆盖图层。

本片文章详细讲解如何使用Openlayers调整地图可视范围到多个点组成的多边形边界。也即Openlayers根据多个点坐标生成一个矩形可视范围，并判断当前传入的矩形可视范围是否在当前可视范围内。如果在当前可视范围内，则调整地图中心点；如果不在，则调整地图可视区域到对应矩形可视范围。