Cesium DC-SDK集成iconfont阿里矢量图标

Cesium DC-SDK集成iconfont阿里矢量图标

Cesium通过集成iconfont阿里矢量图标，实现自定义图标颜色设置，具体操作如下：

一、引入阿里图标库

1、 通过链接的方式引入到项目中

在项目中引入方式

@import url("//at.alicdn.com/t/c/font_xxxx.css");

2、把css下载到本地引入

点击下载按钮，把下载完成的.zip解压缩引入到项目中
注：为了出现其他错误，建议把解压后的文件夹拷贝到项目中使用，我这里拷贝到了assets下。

在项目中引入方式

@import "@/assets/iconfont/iconfont.css";

二、具体使用方法

1、打开iconfont.css，在里面复制你要在地图上面显示的图标，如图：

注意这里的content，这个就是咱们要往地图上面加载的图标

复制content的内容“\e67c”

2、创建点标注，这里以文本的方式在地图上面加载

 const label = new DC.Label(position, eval(`"\\ue67c"`))
 label.setStyle({
      font: "18px iconfont",
      fillColor: DC.Color.fromCssColorString("#ff0000")
  })

重要的事情说三遍哦，注意、注意、注意，往下看

1、 复制content的内容“\e67c”需要改成\ue67c

\e67c 修改为 \\ue67c

2、使用的时候必须把字符串的unCode使用eval转换才可以显示

eval(`"\\ue67c"`)

3、在设置样式的时候font必须指定字体为iconfont

 font: "18px iconfont",

地图上面显示的效果如下：

完结、撒花✿✿ヽ(°▽°)ノ✿