在mapbox-gl中能够使用精灵图，参见公众号文章​​mapbox-gl中精灵图的使用​​。

在Cesium的开发中，也能够使用精灵图，需要自己加载图片，写方法，获取精灵图中的图标信息。

参照mapbox-gl中的精灵图和json配置文件，按照此格式进行其中图标提取方法的实现。

1、借助html5的canvas元素，Cesium的图标文件能够支持加载canvas导出的图片格式；

2、预先加载精灵图图片文件和配置的json文件；

3、为了不用每次加载图片，可以把图片使用new Image()进行预先加载；

4、选取图标时，根据图标的配置文件中的尺寸设置canvas的长和宽；

5、使用canvas的drawImage方法，将图片画在canvas上，图片的偏移量根据配置文件的偏移设置；

6、使用canvas的toDataURL方法，将加载的图标进行导出；

7、将图标作用到Cesium的图标样式上。

关键的实现代码：

//根据图片路径，加载图片文件
        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('图片数据', -xoffset, -yoffset);
      //Cesium加载图标文件
     viewer.entities.add({
      name: 'testmarker',
      position: Cesium.Cartesian3.fromDegrees(116.1705217, 39.921786),
       billboard: {
       image:
      _iconcanvas.toDataURL(),
       verticalOrigin: Cesium.VerticalOrigin.BOTTOM}
      });
   end

简单加载效果图：

Cesium开发：精灵图的使用_ico

中关村软件园