Cesium开发：精灵图的使用

在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 

更多文章请关注公众号查看！