本發(fā)明屬于地理信息的，涉及一種點(diǎn)符號(hào)化精靈圖(sprite圖)批量更新方法，具體涉及電子地圖制作配圖過程中對(duì)于點(diǎn)數(shù)據(jù)符號(hào)化所使用到的精靈圖(sprite圖)，對(duì)其中符號(hào)圖標(biāo)動(dòng)態(tài)更新的技術(shù)方法。

背景技術(shù)：

1、精靈圖(sprite圖)是將多個(gè)小圖片拼接在一個(gè)圖片中，所有小圖標(biāo)或圖形元素被合并成一個(gè)大圖像文件。這個(gè)大圖像文件通常是一個(gè)矩形，其中包含所有的小圖標(biāo)，它們排列在一行或一列上，不同的小圖標(biāo)之間通過適當(dāng)?shù)拈g隔或邊距分隔。其工作原理是通過css的背景圖像(background-image)屬性，將這個(gè)大圖像文件設(shè)置為一個(gè)元素的背景。使用時(shí)，利用css的背景位置(background-position)屬性來(lái)指定在元素內(nèi)顯示哪個(gè)小圖標(biāo)，以及它們?cè)诖髨D像文件中的位置。

2、被廣泛使用到互聯(lián)網(wǎng)圖標(biāo)展示功能，在地理信息領(lǐng)域，通常運(yùn)用于suppermap、mapbox等軟件電子地圖制作過程中的點(diǎn)狀數(shù)據(jù)符號(hào)化展示，其優(yōu)點(diǎn)主要包括：

3、1、減少了http請(qǐng)求：合并多個(gè)圖像元素為一個(gè)文件，減少了每個(gè)圖像的http請(qǐng)求，從而減少了頁(yè)面加載時(shí)間。

4、2、提高性能：一次加載一個(gè)大圖像文件比多次加載小圖像文件更有效率，尤其在移動(dòng)設(shè)備上或具有較慢網(wǎng)絡(luò)連接的情況下。

5、3、節(jié)省帶寬：減少了不必要的網(wǎng)絡(luò)流量，有助于降低帶寬成本。

6、4、簡(jiǎn)化css：通過使用單一的背景圖像和背景位置屬性，可以減少css代碼的復(fù)雜性。

7、5、方便管理：所有圖標(biāo)都包含在一個(gè)文件中，更容易管理和維護(hù)。

8、但現(xiàn)有技術(shù)中，精靈圖的缺點(diǎn)是修改或添加新的圖標(biāo)可能需要編輯整個(gè)精靈圖，并且要小心處理圖標(biāo)之間的間距和位置，人為處理起來(lái)會(huì)較為復(fù)雜，且如果更新圖標(biāo)較多情況下，人工處理復(fù)雜，并生成的的精靈圖美觀實(shí)用程度較差。

技術(shù)實(shí)現(xiàn)思路

1、為了克服上述現(xiàn)有技術(shù)的不足，本發(fā)明的目的是提供一種點(diǎn)符號(hào)化精靈圖(sprite圖)批量更新方法，實(shí)現(xiàn)了精靈圖需要更新時(shí)，無(wú)需人工處理，直接執(zhí)行算法，實(shí)現(xiàn)精靈圖的動(dòng)態(tài)批量快速更新，并可生成美觀得體的新的精靈圖。

2、為了實(shí)現(xiàn)上述目的，本發(fā)明采用的技術(shù)方案是：

3、一種點(diǎn)符號(hào)化精靈圖(sprite圖)批量更新方法，其特征在于，

4、步驟1、準(zhǔn)備待更新的精靈圖及其對(duì)應(yīng)的json文件、需要更新的圖標(biāo)文件；

5、步驟2、sprite圖的json文件包含圖片的大小以及二維坐標(biāo)信息，對(duì)其進(jìn)行解析，將原sprite圖包含的所有圖標(biāo)按照坐標(biāo)和寬高分割成單個(gè)圖標(biāo)，存放至指定目錄下；

6、步驟3、將需要更新的圖標(biāo)放在步驟2分割后圖標(biāo)的同一目錄下，對(duì)目錄下的圖標(biāo)文件逐個(gè)遍歷，計(jì)算得到新的精靈圖的初始寬度和根據(jù)圖標(biāo)高度的權(quán)重系數(shù)從小到大排序標(biāo)識(shí)的的png_map集合；

7、步驟4、根據(jù)步驟3得到的png_map集合，按照鍵值順序遍歷其中鍵值對(duì)應(yīng)的列表中的圖片信息，若其當(dāng)前拼接位置的寬度加上當(dāng)前圖片寬度小于initial_width，直接拼接到結(jié)果精靈圖中，若當(dāng)前拼接位置的寬度加上當(dāng)前圖片寬度大于initial_width，拼接到結(jié)果精靈圖中并設(shè)置initial_width為拼接位置寬度加上當(dāng)前拼接圖標(biāo)的寬度，之后拼接位置歸零，并將拼接位置高度加上當(dāng)前拼接圖片的高度。

8、步驟5、記錄每次拼接圖片大小、拼接位置，并組織成對(duì)應(yīng)的結(jié)構(gòu)，輸出成json格式數(shù)據(jù)，最終在指定目錄下輸出新的精靈圖和json文件。

9、所述的步驟3中計(jì)算得到新的精靈圖的初始寬度和根據(jù)圖標(biāo)高度的權(quán)重系數(shù)從小到大排序標(biāo)識(shí)的的png_map集合，計(jì)算步驟如下：

10、3-1、根據(jù)寬和高的乘積并累加計(jì)算所有圖標(biāo)的面積總和total_area，并對(duì)total_area開平方并向上取整得到初始的總寬度initial_width；

11、3-2、對(duì)圖標(biāo)的高度從小到大進(jìn)行排序，并分組得到鍵為高度，值為對(duì)應(yīng)鍵值高度的圖像信息列表的集合png_map。

12、本發(fā)明的有益效果是：

13、1、精靈圖在web應(yīng)用中被廣泛使用，其有效的網(wǎng)頁(yè)優(yōu)化技術(shù)，通過減少http請(qǐng)求和優(yōu)化圖片加載，可以提高網(wǎng)頁(yè)的性能和用戶體驗(yàn)。但其本身的原理導(dǎo)致其需要添加單個(gè)圖標(biāo)時(shí)較為困難，本發(fā)明針對(duì)雪碧圖大批量更新不同大小的圖標(biāo)時(shí)，快速進(jìn)行更新生成新的精靈圖，減少了人工處理的時(shí)間。

14、2、本發(fā)明提供的一種算法對(duì)編程語(yǔ)言依賴性不強(qiáng)，可以適配于各種編程語(yǔ)言，并且不依賴于其他第三方平臺(tái)工具包。

15、3、本發(fā)明提供一種圖形合并思路，針對(duì)批量圖片合并成一幅圖片時(shí)，能夠合并生成寬高較為得體且相對(duì)美觀的圖片。

技術(shù)特征：

1.一種點(diǎn)符號(hào)化精靈圖（?sprite圖）批量更新方法，其特征在于，

2.根據(jù)權(quán)利要求1所述的一種點(diǎn)符號(hào)化精靈圖（?sprite圖）批量更新方法，其特征在于，所述的步驟3中計(jì)算得到新的精靈圖的初始寬度和根據(jù)圖標(biāo)高度的權(quán)重系數(shù)從小到大排序標(biāo)識(shí)的的png_map集合，計(jì)算步驟如下：

技術(shù)總結(jié)
一種點(diǎn)符號(hào)化精靈圖（?Sprite圖）批量更新方法，準(zhǔn)備待更新的精靈圖及其對(duì)應(yīng)json文件、需要更新到精靈圖的圖標(biāo)文件；對(duì)json文件進(jìn)行解析，將原精靈圖包含的所有圖標(biāo)分割成單個(gè)圖與更新的圖標(biāo)放在同一目錄下，對(duì)圖標(biāo)文件逐個(gè)遍歷，獲取其長(zhǎng)和高；根據(jù)長(zhǎng)和寬計(jì)算所有圖標(biāo)的面積總和，通過對(duì)面積總和開平方得出初始總寬度；按照高度從小到大進(jìn)行分類分組得到標(biāo)識(shí)集合png_map；遍歷完成后生成新的精靈圖與其對(duì)應(yīng)的json文件。應(yīng)用本方法實(shí)現(xiàn)了在web應(yīng)用程序使用點(diǎn)符號(hào)圖標(biāo)使用的精靈圖的過程中，可以根據(jù)實(shí)際使用需求動(dòng)態(tài)快速增加并更新圖標(biāo)的功能。

技術(shù)研發(fā)人員：王樂,陳明杰,趙雅鵬,師建偉,陳星,鄭文青,陳子申
受保護(hù)的技術(shù)使用者：中煤（西安）地下空間科技發(fā)展有限公司
技術(shù)研發(fā)日：
技術(shù)公布日：2024/12/23