使用cesium给地图实例添加精灵图图标

前置条件:
1,将精灵图存放在本地文件中;

2,拿到对应的声明文件(该文件中存放了每一个类型的地图实例对应的图标在精灵图中的位置),我这里是json文件

这是某一个实例模型对应的数据;

我的做法是,系统登录之后,就掉接口获取到该json文件,并存储在本地存储中,然后需要用到的时候,直接从localstorage中去拿;

将精灵图存储在本地:

准备完成,接下来需要在数据来的时候进行渲染即可;
这里用的方法是,将拿到的每一个模型数据处理成cesium所使用的czml格式数据:

绘制图标关键代码:

drawPoint(itemParam) {
    let svgUrl = ''  //存储图标路径
    // 存在阵营信息及存在精灵图json数据
    if (!library.isNull(itemParam.BasicInfo.CS_ForceSide) && !library.isNull(library.getData('modelTypeAndImageContent'))) {
      var modelTypeJson = JSON.parse(library.getData('modelTypeAndImageContent'))
      Object.keys(modelTypeJson).forEach(key => { //key为json文件中的键名
        // console.log('key',key);
        if (key.includes(itemParam.BasicInfo.modelUUID) && key.includes(itemParam.BasicInfo.CS_ForceSide)) {  //匹配键名及阵营信息(1红/2蓝)
          let canvas = document.createElement('canvas'); //创建canvas,
          canvas.width = 120;
          canvas.height = 120;
          let canvastext = canvas.getContext('2d') //获取上下文
          canvastext.drawImage(imageSprite, -modelTypeJson[key].x, -modelTypeJson[key].y); //将精灵图中对应位置的图标在canvas中绘制
          svgUrl = canvas.toDataURL() 
          //toDataURL()是canvas对象的一种方法，用于将canvas对象转换为base64位编码；
          //将图片转换为base64位编码后，图片会跟随代码（html、css、js）一起请求加载，不会再单独进行请		求加载；可以防止由于图片路径错误导致图片加载失败的问题
        }
      })
    }
    let czml = [{
      id: 'document',
      version: '1.0'
    }, {
      id: itemParam.BasicInfo.id,
      name: itemParam.BasicInfo.CS_EntityName,
      label: {
        fillColor: {
          rgba: [255, 255, 255, 255]
        },
        font: '24px Helvetica',
        scale: 0.75,
        horizontalOrigin: 'LEFT',
        outlineColor: {
          rgba: [100, 0, 100, 200]
        },
        outlineWidth: 2,
        pixelOffset: {/* 实体名称-在现有位置向右移动20 */
          cartesian2: [20, 0]
        },
        style: 'FILL_AND_OUTLINE',
        text: itemParam.BasicInfo.CS_EntityName + ''// 字符串类型
      },
      billboard: {
        image: svgUrl, //使用路径
        scale: 0.3
      },
      position: {
        cartographicDegrees: [itemParam.Position.Longitude, itemParam.Position.Latitude, itemParam.Position.Altitude]
      }
    }]
    return czml
  },

每次数据来到之后,
调用该方法,然后将实例添加到数据源中,即可完成渲染

  		  let czml = RealTimeMode.drawPoint(item); // 实时绘制-实体图标元素
          var DataSource = new Cesium.CzmlDataSource();
          window.viewer.dataSources.add(DataSource.load(czml));//viewer实例在其他地方已创建

效果:

封装后的方法:

// 精灵图位置
const imageSprite = new Image();
imageSprite.src = '../../static/images/sprite.png'


// 精灵图图标绘制
  drawIcon(modelId,side){
    const modelTypeJson = JSON.parse(
      library.getData("modelTypeAndImageContent")
    );
    let svgUrl = "";
    Object.keys(modelTypeJson).forEach((key) => {
      //key为json文件中的键名
      if (
        key.includes(modelId) &&
        key.includes(side) 
      ) {
        //匹配键名及阵营信息(1红/2蓝)
        let canvas = document.createElement("canvas"); //创建canvas,
        canvas.width = 120;
        canvas.height = 120;
        let canvastext = canvas.getContext("2d"); //获取上下文
        canvastext.drawImage(
          imageSprite,
          -modelTypeJson[key].x,
          -modelTypeJson[key].y
        ); //将精灵图中对应位置的图标在canvas中绘制
        svgUrl = canvas.toDataURL();
      }
    });
    return svgUrl;
  }

直接调用这个方法,传入json文件中的id和对应的阵营信息即可渲染对应颜色的图标