[发明专利]一种前端批量合成自定义地图标签的方法

说明书

本发明涉及一种前端批量合成自定义地图标签的方法，包括如下步骤：S1、设计好自定义地图标签图片的特征，规定好自定义的底图填充色区域和图标放置区域；S2、采用制图工具生成底图，记录图标的坐标位置；S3、配置入参运行转换函数；S4、在步骤S2中记录的坐标位置处绘制合成二进制图片，并将其渲染在地图上或者导出。本发明使得现在的用户较为方便的自定义和用户自由配置地图标签，以及避免用户现在自定义地图标签造成服务器运行性能浪费、地图标签合成效率低存在并发量以及储存空间浪费的问题。

技术领域

本发明涉及地图标签生成技术领域，尤其是涉及一种前端批量合成自定义地图标签的方法。

背景技术

现在在地图类的应用中标签图片经常用来代表地图上元素的位置和索引，因此，地图标签图片在GIS和地图应用中扮演着重要的角色；随着GIS和地图在各个领域的应用及其广泛，尤其是勘探和建筑规划领域，用户对地图自定义化的要求越来越高，传统的单色气泡形状的标签和不支持用户自由配置的缺陷日益突出，用户无法较为方便对不同的地点进行差别标识以及将标识地点进行直观展示。现在传统的技术方案是将所有用户设置的标签图片文件在服务端合成并进行存储或者用户自主上传等，容易造成服务器运行性能的浪费，地图标签合成效率低存在并发量以及存储空间浪费等问题，导致现在的用户自定义地图标签的效率低和资源消耗高。

发明内容

针对现有技术中的缺陷，本发明提供一种前端批量合成自定义地图标签的方法，解决了现在的用户无法较为方便的自定义和用户自由配置地图标签，以及现在自定义地图标签造成服务器运行性能浪费，地图标签合成效率低存在并发量和储存空间浪费等技术问题。

为了实现前述发明目的，一种前端批量合成自定义地图标签的方法，包括如下步骤：

S1、设计好自定义地图标签图片的特征，规定好自定义的底图填充色区域和图标放置区域；

S2、采用制图工具生成底图，记录图标的坐标位置；

S3、配置入参运行转换函数；

S4、在步骤S2中记录的坐标位置处绘制合成二进制图片，并将其渲染在地图上或者导出。

优选地，所述步骤S2中采用XD等制图工具生成一张svg底图，记录图标的坐标位置。

优选地，所述步骤S3中转换函数的执行步骤如下：

1)创建多个异步函数promise对象确保img能够异步加载；

2)深拷贝入参，获取svg的字符串，将其转换成dom结构，通过dom查找替换填充色；

3)将dom结构转换成字符串，创建对应的Blob对象；

4)使用img标签加载Blob生成的DOMRUL，此时生成了img底图；

5)使用canvas画布绘制生成的img底图，绘制放置步骤S2记录位置的图标；

6)采用canvas中toDataURL返回合成二进制图片，并将其渲染在地图上或者导出。

与现有技术相比，本发明的有益效果体现在：

1)本发明通过从设计上分离图层和图标，对底图进行自定义颜色，对图标定义更换和配置，因此，采用前端配置批量合成自定义地图标签图片，地图标签图片在前端复用涂层即时生成渲染，不需要预先将自定义图片储存在后台，有效的解决了单色气泡形的单一标签和不支持用户自由配置地图标签的问题，使得用户能够快速和方便对不同的地点进行差别标识以及能够将标识地点进行直观展示，能够有利于GIS和地图广泛应用中能够对具体的位置进行快速识别和分析，同时也为其他行业前端自定义图片图层提供了良好的思路。