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",

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

在这里插入图片描述
完结、撒花✿✿ヽ(°▽°)ノ✿

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/252039.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ONLYOFFICE:一站式办公,探索高效办公新境界

写在前面ONLYOFFICE 介绍ONLYOFFICE 有哪些优势ONLYOFFICE 文档 8.0 发布如何体验 ONLYOFFICEONLYOFFICE 文档部分页面截图 写在前面 在当今这样一个数字化时代,办公软件已经成为我们日常工作中不可或缺的一部分,熟练使用 Office、WPS、腾讯文档、金山文…

前端学习第4天

一、复合选择器 1.后代选择器 2.子代选择器 3.并集选择器 4.交集选择器 5.伪类选择器 1.伪类-超链接(拓展) 二、CSS特性 1.继承性 body放在style中 2.层叠性 3.优先级 属性 !important;(最高优先级) 1.优先级-叠加计算规则 2.em…

深度学习介绍

对于具备完善业务逻辑的任务,大多数情况下,正常的人都可以给出一个符合业务逻辑的应用程序。但是对于一些包含超过人类所能考虑到的逻辑的任务,例如面对如下任务: 编写一个应用程序,接受地理信息、卫星图像和一些历史…

利用视图实现复杂查询

💗wei_shuo的个人主页 💫wei_shuo的学习社区 🌐Hello World ! 利用视图实现复杂查询 需求:需要对Excel表中导入的四列进行,精准查询(搜索符合这四列的数据),并提供预览后…

springboot154基于Spring Boot智能无人仓库管理

简介 【毕设源码推荐 javaweb 项目】基于springbootvue 的 适用于计算机类毕业设计,课程设计参考与学习用途。仅供学习参考, 不得用于商业或者非法用途,否则,一切后果请用户自负。 看运行截图看 第五章 第四章 获取资料方式 **项…

Vue3.0(二):Vue组件化基础 - 脚手架

Vue组件化基础 - 脚手架 Vue的组件化 我们在处理一些任务量比较庞大的工作时候,会将工作内容进行拆分,分步骤完成 而组件化的思想正式如此,对于一个庞大的项目,我们可以将其拆分成一个个的小功能,分步骤进行实现 组…

Intellij IDEA各种调试+开发中常见bug

Intellij IDEA中使用好Debug,主要包括如下内容: 一、Debug开篇 ①、以Debug模式启动服务,左边的一个按钮则是以Run模式启动。在开发中,我一般会直接启动Debug模式,方便随时调试代码。 ②、断点:在左边行…

docker重建镜像

DockerFile如下: FROM k8s-registry.qhtx.local/base/centos7-jdk8-haitong0704RUN yum -y update && yum install -y python3-devel && yum install -y python36 RUN mv /usr/bin/python /usr/bin/python_old RUN ln -s /usr/bin/python3 /usr/bi…

windows安装Visual Studio Code,配置C/C++运行环境(亲测可行)

一.下载 Visual Studio Code https://code.visualstudio.com/ 二.安装 选择想要安装的位置: 后面的点击下一步即可。 三.下载编译器MinGW vscode只是写代码的工具,使用编译器才能编译写的C/C程序,将它转为可执行文件。 MinGW下载链接:…

Linux(一)

介绍 常见的操作系统(windows、IOS、Android、MacOS, Linux, Unix); Linux是一个开源、免费的操作系统,其稳定性、安全性、处理多并发已经得到业界的认可;【免费只是说linux的内核免费】 目前很多企业级的项目(c/c/php/python/java/go)都会…

免费的hyper-v虚机添加U盘的二种方法

windows集成了hyper-v,hyper-v可以安装linux,windows等虚机,基本可以满足工作,实验之需。但是不少人反映hyper-v不方便连接U盘,这样子文件传输不是很方便。 网上有方法说在虚机设置中添加磁盘,首先到物理机…

图数据库(neo4j)在工业控制中的应用

最近看到国外发表的一篇文章,提到将OPC UA 模型映射到neo4j图模型数据库中,通过GraphQL 访问效率很高,顿时感觉自己眼睛一亮,这是一个好主意。 图模型 事物的模型中,除了它自身的某些特征之外,还包括它与其…

kubectl命令

kubenetes部署服务的流程 以部署一个nginx服务来说明kubernetes系统各个组件调用关系: 1. 首先要明确,一旦kubernetes环境启动之后,master和node都会将自身的信息存储到etcd数据库中 2. 一个nginx服务的安装请求会首先被发送到master节点的ap…

世界各国都在追求“主权人工智能能力”,国家级人工智能硬件需求将剧增

NVIDIA的CEO黄仁勋最近在接受媒体采访时指出,世界各国都打算在本国内建立和运行自主的人工智能基础设施,这将全面带动NVIDIA硬件产品需求的飙升。黄仁勋表示,包括印度、日本、法国和加拿大在内的国家政府都在讨论投资“国家主权人工智能能力”…

利用jmeter完成简单的压力测试

Jmeter是一个非常好用的压力测试工具。Jmeter用来做轻量级的压力测试,非常合适,只需要十几分钟,就能把压力测试需要的脚本写好。 1、什么是压力测试 顾名思义:压力测试,就是 被测试的系统,在一定的访问压…

从小白到入门webrtc音视频通话

0. 写在前面 先会骑车,再研究为什么这么骑,才是我认为学习技术的思路,底部付了demo例子,根据例子上面的介绍即可运行。 1. 音视频通话要用到的技术简介 websocket 介绍:1. 服务器可以向浏览器推送信息;2…

Java SWT Composite 绘画

Java SWT Composite 绘画 1 Java SWT2 Java 图形框架 AWT、Swing、SWT、JavaFX2.1 Java AWT (Abstract Window Toolkit)2.2 Java Swing2.3 Java SWT (Standard Widget Toolkit)2.4 Java JavaFX 3 比较和总结 1 Java SWT Java SWT(Standard Widget Toolkit&#xff…

Yarn常见问题处理

任务出现container OOM异常导致作业失败 原因 Container内存不足或者作业数据倾斜 解决方案 检查Container相关参数,判断是否设置过小(低于4GB)。如果Container小于4GB,优先考虑调大当前作业container大小,如果是Tez任务,还需要同步调整以下参数 # tez container size…

STM32--SPI通信协议(1)SPI基础知识总结

前言 I2C (Inter-Integrated Circuit)和SPI (Serial Peripheral Interface)是两种常见的串行通信协议,用于连接集成电路芯片之间的通信,选择I2C或SPI取决于具体的应用需求。如果需要较高的传输速度和简单的接口,可以选择SPI。如果需要连接多…

探索设计模式的魅力:从单一继承到组合模式-软件设计的演变与未来

设计模式专栏:http://t.csdnimg.cn/nolNS 在面对层次结构和树状数据结构的软件设计任务时,我们如何优雅地处理单个对象与组合对象的一致性问题?组合模式(Composite Pattern)为此提供了一种简洁高效的解决方案。通过本…