在mapbox-gl中能夠使用精靈圖，參見https://mp.weixin.qq.com/s?__biz=MzU2ODYzNzc4OQ==&mid=2247485280&idx=1&sn=7b4166948daf1e895c0fb6166bfa9739&chksm=fc8ba752cbfc2e44ee4fd11494ee54fc098f407bd38a0857ff563a751802f9633f8d94d732de&scene=21#wechat_redirect。

在Cesium的開發(fā)中，也能夠使用精靈圖，需要自己加載圖片，寫方法，獲取精靈圖中的圖標信息。

1、借助html5的canvas元素，Cesium的圖標文件能夠支持加載canvas導出的圖片格式；\

2、預先加載精靈圖圖片文件和配置的json文件；

3、為了不用每次加載圖片，可以把圖片使用new?Image()進行預先加載；

4、選取圖標時，根據(jù)圖標的配置文件中的尺寸設置canvas的長和寬；

5、使用canvas的drawImage方法，將圖片畫在canvas上，圖片的偏移量根據(jù)配置文件的偏移設置；

6、使用canvas的toDataURL方法，將加載的圖標進行導出；

7、將圖標作用到Cesium的圖標樣式上。

關鍵的實現(xiàn)代碼：

//根據(jù)圖片路徑，加載圖片文件

? ? ? ? let?_image =?new?Image();?

? ? ? ?_image.src = '圖片路徑';

? ? ? ?_image.onload =?function?() {

? ? ?? ? console.log(_image);

? ?? ? };

//加載json配置文件，這里使用axios

? ? ? axios.get('配置文件路徑', {

? ? ? ?}).then(function?(response) {?

? ? ? ?console.log(response.data);

? ? ? ? }).catch(function?(error) {

? ? ? ? console.log(error);

? ? ? ?});

//canvas加載圖片設置

? ? ? ?_iconcanvas.width = _testiconinfo.width;

? ? ? _iconcanvas.height = _testiconinfo.height;

? ? ? ?let?_context = _iconcanvas.getContext("2d");

? ? ?_context.drawImage('圖片數(shù)據(jù)', -xoffset, -yoffset);

//Cesium加載圖標文件

? ? ?viewer.entities.add({

? ? ? name:?'testmarker',

? ? ? position: Cesium.Cartesian3.fromDegrees(116.1705217,?39.921786),

? ? ? ?billboard: {

? ? ? ?image:

? ? ? _iconcanvas.toDataURL(),

? ? ? ?verticalOrigin: Cesium.VerticalOrigin.BOTTOM}

? ? ? });

簡單加載效果圖：