Cesium开发：精灵图的使用

在mapbox-gl中能够使用精灵图，参见https://mp.weixin.qq.com/s?__biz=MzU2ODYzNzc4OQ==&mid=2247485280&idx=1&sn=7b4166948daf1e895c0fb6166bfa9739&chksm=fc8ba752cbfc2e44ee4fd11494ee54fc098f407bd38a0857ff563a751802f9633f8d94d732de&scene=21#wechat_redirect。

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

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}

      });

简单加载效果图：