CN112783996A - 一种前端批量合成自定义地图标签的方法 - Google Patents

一种前端批量合成自定义地图标签的方法 Download PDF

Info

Publication number
CN112783996A
CN112783996A CN202110031893.6A CN202110031893A CN112783996A CN 112783996 A CN112783996 A CN 112783996A CN 202110031893 A CN202110031893 A CN 202110031893A CN 112783996 A CN112783996 A CN 112783996A
Authority
CN
China
Prior art keywords
map
custom
label
icon
picture
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN202110031893.6A
Other languages
English (en)
Other versions
CN112783996B (zh
Inventor
袁宇煌
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Chongqing Daohe Landscape Planning And Design Co ltd
Original Assignee
Chongqing Sudi Technology Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Chongqing Sudi Technology Co ltd filed Critical Chongqing Sudi Technology Co ltd
Priority to CN202110031893.6A priority Critical patent/CN112783996B/zh
Publication of CN112783996A publication Critical patent/CN112783996A/zh
Application granted granted Critical
Publication of CN112783996B publication Critical patent/CN112783996B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
    • G06F16/29—Geographical information databases
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T15/00—3D [Three Dimensional] image rendering
    • G06T15/005—General purpose rendering architectures

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Remote Sensing (AREA)
  • Data Mining & Analysis (AREA)
  • General Engineering & Computer Science (AREA)
  • Computer Graphics (AREA)
  • Processing Or Creating Images (AREA)

Abstract

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

Description

一种前端批量合成自定义地图标签的方法
技术领域
本发明涉及地图标签生成技术领域，尤其是涉及一种前端批量合成自定义地图标签的方法。
背景技术
现在在地图类的应用中标签图片经常用来代表地图上元素的位置和索引，因此，地图标签图片在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和地图广泛应用中能够对具体的位置进行快速识别和分析，同时也为其他行业前端自定义图片图层提供了良好的思路。
2)本发明中通过svg图层和canvas对地图标签图片的渲染，很好的保持了地图标签图片的矢量性质，能够在地图上很清晰的渲染不失帧，并且在满足用户高效自定义配置地图标签图片功能的同时，完全不需要依赖其他库文件，避免造成服务器运行性能的浪费，有效解决了地图标签合成效率低存在并发量的问题，避免了存储空间的浪费；使得大幅度用户自定义地图标签的效率，以及降低地图标签自定义的资源消耗。
3)本发明相比于后台生成图片或者用户上传自定义图片的方式，使得地图标签图片的生成过程更高效快捷，避免了服务端生成冗余的静态图片，由于储存方式是可以自由配置的方式，对于地图标签图片资源的升级改造提供了极大的便捷性，支持更多导出base64格式图片文件支持转换成png等。
附图说明
为了更清楚地说明本发明具体实施方式或现有技术中的技术方案，下面将对具体实施方式或现有技术描述中所需要使用的附图作简单地介绍。在所有附图中，类似的元件或部分一般由类似的附图标记标识。附图中，各元件或部分并不一定按照实际的比例绘制。
图1为本发明一种前端批量合成自定义地图标签的方法操作流程图；
图2为本发明一种前端批量合成自定义地图标签的方法程序执行图；
图3为本发明一种前端批量合成自定义地图标签的方法在地图上的渲染效果图。
具体实施方式
下面将结合附图对本发明技术方案的实施例进行详细的描述。以下实施例仅用于更加清楚地说明本发明的技术方案，因此只作为示例，而不能以此来限制本发明的保护范围。
需要注意的是，除非另有说明，本申请使用的技术术语或者科学术语应当为本发明所属领域技术人员所理解的通常意义。
在本文中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本发明的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域技术人员显式地和隐式地理解的是，本文所描述的实施例可以与其它实施例相结合。
本发明中最优实施例为一种前端批量合成自定义地图标签的方法，参照附图1、2、3，包括如下步骤：
S1、设计好自定义地图标签图片的特征，规定好自定义的底图填充色区域和图标放置区域；
S2、采用制图工具生成svg底图，记录图标的坐标位置(40,70)；
S3、配置入参运行转换函数，调用准备好的算法；"\n<svg xmlns＝\"http://www.w3.org/2000/svg\"width＝\"100\"height＝\"188.54\" viewBox＝\"0 0 100188.54\">\n<g id＝\"组_2442\"data-name＝\"组 2442\"transform＝\"translate(-1391-388)\">\n<g id＝\"组_1634\" data-name＝\"组1634\"transform＝\"translate(1381.37 378.105)\">\n<path class＝'fillarea'id＝\"路径_1041\" data-name＝\"路径1041\"d＝\"M0,120,.073,0\" transform＝\"translate(60.203 198.435)rotate(180)\"fill＝\"red\" stroke＝\"red\"stroke-width＝\"3.5\"/>\n<circle class＝'fillarea'id＝\"椭圆_256\"data-name＝\"椭圆256\"cx＝\"50\" cy＝\"50\"r＝\"50\"transform＝\"translate(9.639.896)\"fill＝\"red\" opacity＝\"0.4\"/>\n<circleclass＝'fillarea'id＝\"椭圆_252\" data-name＝\"椭圆252\"cx＝\"38\"cy＝\"38\"r＝\"38\" transform＝\"translate(21.63 21.896)\" fill＝\"red\"/>\n</g>\n</g>\n</svg>"
所述步骤S3中转换函数的执行步骤如下：
1)创建多个异步函数promise对象确保img能够异步加载，用于返回异步获取的图片结果；
2)深拷贝入参，防止异步导致的参数丢失；用传入的svg的字符串转换成 dom结构，通过dom的元素查找，找到对应的需要改变的填充区域的颜色，通过设置为传入的填充色，dom操作完成；
3)将dom结构转换成字符串对象，并且再创建对应的Blob对象；
4)使用img标签异步加载读取Blob生成的DOMRUL，此时生成了img底图，此时获得了地图的Blob对象；
5)使用canvas画布绘制，绘制好与地图大小一致宽高的画板，渲染img 底图；按照步骤S2记录位置渲染图标，生成需要图片的canvas对象；
6)采用canvas中toDataURL返回合成二进制图片，并将其渲染在地图上或者导出。
S4、在步骤S2中记录的坐标位置处绘制合成二进制图片，并将其渲染在地图上或者导出。
最后应说明的是：以上各实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述各实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围，其均应涵盖在本发明的权利要求和说明书的范围当中。

Claims (3)

1.一种前端批量合成自定义地图标签的方法，其特征在于，包括如下步骤：
S1、设计好自定义地图标签图片的特征，规定好自定义的底图填充色区域和图标放置区域；
S2、采用制图工具生成底图，记录图标的坐标位置；
S3、配置入参运行转换函数；
S4、在步骤S2中记录的坐标位置处绘制合成二进制图片，并将其渲染在地图上或者导出。
2.根据权利要求1所述的前端批量合成自定义地图标签的方法，其特征在于，所述步骤S2中采用XD等制图工具生成一张svg底图，记录图标的坐标位置。
3.根据权利要求2所述的前端批量合成自定义地图标签的方法，其特征在于，所述步骤S3中转换函数的执行步骤如下：
1)创建多个异步函数promise对象确保img能够异步加载；
2)深拷贝入参，获取svg的字符串，将其转换成dom结构，通过dom查找替换填充色；
3)将dom结构转换成字符串，创建对应的Blob对象；
4)使用img标签加载Blob生成的DOMRUL，此时生成了img底图；
5)使用canvas画布绘制生成的img底图，绘制放置步骤S2记录位置的图标；
6)采用canvas中toDataURL返回合成二进制图片，并将其渲染在地图上或者导出。
CN202110031893.6A 2021-01-11 2021-01-11 一种前端批量合成自定义地图标签的方法 Active CN112783996B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110031893.6A CN112783996B (zh) 2021-01-11 2021-01-11 一种前端批量合成自定义地图标签的方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110031893.6A CN112783996B (zh) 2021-01-11 2021-01-11 一种前端批量合成自定义地图标签的方法

Publications (2)

Publication Number Publication Date
CN112783996A true CN112783996A (zh) 2021-05-11
CN112783996B CN112783996B (zh) 2022-11-29

Family

ID=75756499

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110031893.6A Active CN112783996B (zh) 2021-01-11 2021-01-11 一种前端批量合成自定义地图标签的方法

Country Status (1)

Country Link
CN (1) CN112783996B (zh)

Citations (15)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20130321442A1 (en) * 2012-06-05 2013-12-05 Apple Inc. Method, system and apparatus for dynamically generating map textures
US20140143252A1 (en) * 2011-07-08 2014-05-22 Steamfunk Labs, Inc. Automated presentation of information using infographics
US20150095421A1 (en) * 2013-09-30 2015-04-02 Elwha Llc Mobile device sharing facilitation methods and systems featuring a recipient-selective default address determination
US20150185994A1 (en) * 2013-12-30 2015-07-02 Adobe Systems Incorporated Local Rendering of an Object as an Image
CN104881425A (zh) * 2014-11-13 2015-09-02 安徽四创电子股份有限公司 一种WebGIS地图优化分级加载数万级摄像头的方法
CN106898248A (zh) * 2017-02-24 2017-06-27 济南浪潮高新科技投资发展有限公司 一种基于FusionMap组件的自定义地图呈现方法
CN107239287A (zh) * 2017-06-07 2017-10-10 福建中金在线信息科技有限公司 一种网页显示方法、装置、电子设备及存储介质
CN107644067A (zh) * 2017-09-04 2018-01-30 深圳市易景空间智能科技有限公司 一种二三维一体化的跨平台室内地图显示方法
EP3418919A1 (en) * 2017-06-23 2018-12-26 Palantir Technologies Inc. User interface for managing synchronization between data sources and cache databases
CN109542987A (zh) * 2018-10-09 2019-03-29 中国电子科技集团公司第二十八研究所 一种基于Canvas的在线地图保存方法
CN109960478A (zh) * 2019-04-02 2019-07-02 武大吉奥信息技术有限公司 一种Web地图打印预览方法及装置
CN110851118A (zh) * 2019-10-21 2020-02-28 中国地质大学（武汉） 一种面向三维场景的矢量图标绘制方法及装置
CN110888891A (zh) * 2019-11-01 2020-03-17 深圳市普天宜通技术股份有限公司 一种空间数据的提供方法、系统及存储介质
CN110928972A (zh) * 2019-11-22 2020-03-27 珠海格力电器股份有限公司 一种语义地图构建方法、系统、装置、存储介质及机器人
CN112085818A (zh) * 2019-06-14 2020-12-15 腾讯数码（天津）有限公司 一种图片处理方法以及装置

Patent Citations (15)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20140143252A1 (en) * 2011-07-08 2014-05-22 Steamfunk Labs, Inc. Automated presentation of information using infographics
US20130321442A1 (en) * 2012-06-05 2013-12-05 Apple Inc. Method, system and apparatus for dynamically generating map textures
US20150095421A1 (en) * 2013-09-30 2015-04-02 Elwha Llc Mobile device sharing facilitation methods and systems featuring a recipient-selective default address determination
US20150185994A1 (en) * 2013-12-30 2015-07-02 Adobe Systems Incorporated Local Rendering of an Object as an Image
CN104881425A (zh) * 2014-11-13 2015-09-02 安徽四创电子股份有限公司 一种WebGIS地图优化分级加载数万级摄像头的方法
CN106898248A (zh) * 2017-02-24 2017-06-27 济南浪潮高新科技投资发展有限公司 一种基于FusionMap组件的自定义地图呈现方法
CN107239287A (zh) * 2017-06-07 2017-10-10 福建中金在线信息科技有限公司 一种网页显示方法、装置、电子设备及存储介质
EP3418919A1 (en) * 2017-06-23 2018-12-26 Palantir Technologies Inc. User interface for managing synchronization between data sources and cache databases
CN107644067A (zh) * 2017-09-04 2018-01-30 深圳市易景空间智能科技有限公司 一种二三维一体化的跨平台室内地图显示方法
CN109542987A (zh) * 2018-10-09 2019-03-29 中国电子科技集团公司第二十八研究所 一种基于Canvas的在线地图保存方法
CN109960478A (zh) * 2019-04-02 2019-07-02 武大吉奥信息技术有限公司 一种Web地图打印预览方法及装置
CN112085818A (zh) * 2019-06-14 2020-12-15 腾讯数码（天津）有限公司 一种图片处理方法以及装置
CN110851118A (zh) * 2019-10-21 2020-02-28 中国地质大学（武汉） 一种面向三维场景的矢量图标绘制方法及装置
CN110888891A (zh) * 2019-11-01 2020-03-17 深圳市普天宜通技术股份有限公司 一种空间数据的提供方法、系统及存储介质
CN110928972A (zh) * 2019-11-22 2020-03-27 珠海格力电器股份有限公司 一种语义地图构建方法、系统、装置、存储介质及机器人

Non-Patent Citations (3)

* Cited by examiner, † Cited by third party
Title
SIMON HOLM JENSEN等: "Modeling the HTML DOM and browser API in static analysis of JavaScript web applications", 《PROCEEDINGS OF THE 19TH ACM SIGSOFT SYMPOSIUM AND THE 13TH EUROPEAN CONFERENCE ON FOUNDATIONS OF SOFTWARE ENGINEERING》 *
编程工具: "Echarts3.0 地图自定义图标", 《HTTPS://WWW.CODERCTO.COM/A/86684.HTML》 *
龙云: "基于HTML5的WebGIS研究", 《中国优秀硕士学位论文全文数据库 基础科学辑》 *

Also Published As

Publication number Publication date
CN112783996B (zh) 2022-11-29

Similar Documents

Publication Publication Date Title
CN102663119B (zh) 一种渲染海量矢量数据的方法
Rasure et al. Open environment for image processing and software development
CN102999537A (zh) 一种数据迁移系统和方法
CN104216691A (zh) 一种创建应用的方法及装置
CN110908712A (zh) 移动端跨平台的数据处理方法和设备
CN105760534A (zh) 自定义的可序列化的数据结构、hadoop集群、服务器及其应用方法
CN103092612A (zh) 实现安卓操作系统3d桌面贴图的方法及电子装置
CN104915201A (zh) 一种界面生成方法和装置
CN109992266A (zh) 一种界面元素的处理方法和装置
CN102200914A (zh) 在移动终端上实现用户界面的方法和设备
CN106210724A (zh) 图片解码方法及装置
CN111190519A (zh) 一种文件及其控件的处理方法、装置、设备和存储介质
CN116974620A (zh) 应用程序的生成方法、运行方法以及相应的装置
CN108415697A (zh) 一种可视化组件的配置方法及装置
CN107423291A (zh) 一种数据翻译方法以及客户端设备
CN112783996B (zh) 一种前端批量合成自定义地图标签的方法
CN101595470A (zh) 用于管理系统规范的方法和装置
CN104516734A (zh) 业务流程配置方法及装置
CN116010736A (zh) 矢量图标的处理方法、装置、设备以及存储介质
CN114722112A (zh) 一种可视化列表数据展示方法及其装置
CN102630317A (zh) 用于快速配置交互式应用程序的框架、系统和方法
CN112417818A (zh) 文档目录生成方法和装置、存储介质及电子设备
CN115770394B (zh) 基于hapi实现的蓝图化插件应用方法
CN116595284B (zh) 网页系统运行方法、装置、设备、存储介质和程序
CN109062571A (zh) 用于用户界面动态配置的方法和装置

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant
TR01 Transfer of patent right

Effective date of registration: 20230731

Address after: Room 1-2, Building 24, No. 7 Jinchang Road, North New Area, Yubei District, Chongqing, 401121

Patentee after: Chongqing Daohe Landscape Planning and Design Co.,Ltd.

Address before: 400000 1-2, building 24, No.7, Jinchang Road, North New District, Yubei District, Chongqing

Patentee before: Chongqing SUDI Technology Co.,Ltd.

TR01 Transfer of patent right