本篇文章給大家分享的是有關(guān)mapbox-gl中精靈圖的使用是怎么樣的，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

站在用戶的角度思考問題，與客戶深入溝通，找到陽城網(wǎng)站設(shè)計(jì)與陽城網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名注冊(cè)、虛擬空間、企業(yè)郵箱。業(yè)務(wù)覆蓋陽城地區(qū)。

CSS精靈是將一個(gè)網(wǎng)頁中涉及到的所有零星背景圖像都集中到一張大圖中去，將大圖應(yīng)用于網(wǎng)頁，根據(jù)圖標(biāo)的位置和大小，定位顯示圖標(biāo)，當(dāng)用戶訪問該頁面時(shí)，只需向服務(wù)發(fā)送一次請(qǐng)求即可請(qǐng)求到批量的圖標(biāo)，而不用多次請(qǐng)求單個(gè)圖標(biāo)，減少了網(wǎng)絡(luò)的請(qǐng)求量，雖然需要將圖標(biāo)編輯在一張網(wǎng)頁上，但是現(xiàn)在各種工具也多了，工作量也可以控制了。

mapbox-gl中的精靈圖配置包括了2個(gè)文件，一個(gè)是圖標(biāo)的png圖片，另一個(gè)是每個(gè)圖標(biāo)名稱、位置和尺寸的json文件。

mapbox-gl官網(wǎng)的圖片：

同步的json內(nèi)容信息：

在開發(fā)中，在添加注記圖層時(shí)，根據(jù)json文件中的圖標(biāo)名稱，就能夠在mapbox-gl加載對(duì)應(yīng)的圖標(biāo)了。

    map.addLayer({

        'id': 'points',

        'type': 'symbol',

       'source': 'points',

       'layout': { 

       'icon-image': 'convenience-15', 

        }

   });

map.loadImage('圖標(biāo)地址', function(error, image) {
 if (error) throw error;
 map.addImage('kitten', image);
});

有多個(gè)圖標(biāo)的情況，加載過程就需要執(zhí)行很多次了，而且要等圖標(biāo)加載完成，才能夠進(jìn)行使用，所以，使用mapbox-gl自帶的精靈圖方式，還是很方便的。

以上就是mapbox-gl中精靈圖的使用是怎么樣的，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。