黄团团的个人博客

在对接一些第三方GIS地图的时候，需要携带请求头来验证身份，从而获取相应的瓦片数据，这时候我们需要改造一下WMTS服务的调用方式，主要通过tileLoadFunction这个函数来实现，它主要用于加载自定义地图瓦片，直接看代码吧，这里用的天地图做Demo演示。

之前都是基于EPSG:4236投影加载地图，有些场景需要改成EPSG:4490投影来加载地图，如果只改一个数字，则会报如下错误：index.js??clonedRule…e=script&lang=js:25 Uncaught TypeError: Cannot read properties of null (reading 'getExtent') at ./node_modules/babel-loader/lib/index.j，我们需要通过投影转换的方式来正确加载EPSG:4490投影的地图。 

动态绘制两个经纬度并计算它们之间的距离。

点击开始绘制功能后，依次在地图上点击三次，将生成三个经纬度点和两条直线，并自动计算出形成的夹角。

Vue2+OpenLayers实现右键菜单功能（提供Gitee源码）

Vue2+OpenLayers实现热力图

Vue2+OpenLayers初始化高德地图

Vue2+OpenLayers添加缩放、滑块缩放、拾取坐标、鹰眼、全屏控件

本篇博客列举了地图开发中常见的地图事件：缩放、单击、双击、拖动等事件。

博主亲自整理了一篇关于Vue2和OpenLayers整合地图常用功能的博客，考虑到这项技术是国外的开源技术，API文档都是英文的，要消化需要不少的精力，为此，博主将这些功能进行消化，并整理成一份类似中文的API文档。每个功能都是博主亲手编写并经过测试，均亲测无误，主打一个开源精神，博客会持续不断更新~。

Vue2+OpenLayers实现添加多边形覆盖物（提供Gitee源码）：代码相对来说可能会有点复杂，我已经把每行注释都写上了，这样方便大家更好去理解。

Vue2+OpenLayers实现点位拖拽功能

Vue2+OpenLayers实现车辆开始、暂停、重置行驶轨迹动画：根据经纬度信息绘制一个完整的行驶路线，车辆根据绘制好的路线从开始点位行驶到结束点位，可以通过开始、暂停、重置按钮控制车辆状态。

1、使用Feature类，LineString代表线段，传入经纬度集合创建线特征。2、VectorSource用于存储矢量特征的数据源，这里创建的矢量源存储刚刚创建的lineFeature。3、VectorLayer创建一个矢量层，在地图的不同z-index（层级）上显示特征。z-index设置为1，确保线条在其他图层之上绘制，将创建的矢量层添加到地图上，使得线条得以在地图上可视化。

Vue2+OpenLayers实现折线绘制、起始点标记和轨迹打点的完整功能（提供Gitee源码）

之前开发都是将所有的点位存放在一个图层上面，并统一赋予它们相同的点击事件，如果其中某些点的点击事件不一样呢，这种问题如何解决呢，本篇博客就是解决这个通点。

覆盖物（Overlay）是用于在地图上显示额外的HTML元素，如弹出窗口、信息框、控件等的层。与图层不同，覆盖物不直接渲染地理要素，而是用于展示与地图位置相关的HTML内容。

功能：通过将特征进行聚合，Cluster 可以减少地图上的标记数量，使得在高密度区域中更易于视觉分析。当多个特征在地图上相互接近（在distance指定的像素范围内）时，它们会被聚合成一个集群，从而提高地图的可读性和交互性。功能：它可以存储多个特征（如点、线、多边形），并提供相应的功能用于添加、移除或修改这些特征。在这种情况下，它是clusterSource，可以将地图上的点进行聚合，集中显示在一起，提高地图的可读性。在这里，样式是根据单个特征的聚合大小（集群中的特征数量）来进行配置的。

在OpenLayers中，Feature（要素）是地图上表示一个空间实体的对象，它包含的类型有： Point（点） LineString（线段） Polygon（多边形）。首先新增一个图层，我们所有的点信息都存放在这个图层上，你也可以添加一个点就新增一个图层，看各自需求，然后初始化经纬度变量。VectorLayer是一个用于在地图上渲染矢量数据的层，支持显示点、线和面等几何图形。可以新增/删除标记点，点击标记点可以获取到当前标记点的经纬度信息（绑定了点击事件）。

Vue2+OpenLayers接入天地图API实现搜索定位和点击获取经纬度及地址功能

覆盖物（Overlay） 是用于在地图上显示额外的HTML元素，如弹出窗口、信息框、控件等的层。与图层不同，叠加层不直接渲染地理要素，而是用于展示与地图位置相关的HTML内容。

天地图WMTS服务的XML配置文件详解：打开以后我们可以查找到标签，可看到里面一些关键属性，这边我用红框给框出来了；

WMTS（Web Map Tile Service）是一种标准的网络地图服务协议，用于提供基于瓦片的地图数据。它允许客户端请求地图的具体区域，并将相应的瓦片整合在一起。WMTS的主要优点在于其高效性，能够快速加载和显示地图。