• circle
    
  • 视角书签
    
  • 方量分析
    
  • 工具栏
    
  • _高度差
    
  • 空间距离
    
  • 面积
    
  • 角度测量
    
  • 
  • 模型剖切
    
  • 模型压平
    
  • 全屏
    
  • 剖面
    
  • 模型裁剪
    
  • 日照分析
    
  • 日期
    
  • 分享
    
  • 素材库
    
  • 三角测量
    
  • _mars_text
    
  • 一键关闭
    
  • 比例尺
    
  • 坐标测量
    
  • 贴地距离
    
  • 地形展示
    
  • 叠加
    
  • poi搜索
    
  • 通视分析
    
  • 导航球
    
  • 快捷键
    
  • 二三位切换
    
  • 坐标定位
    
  • 地图纠错
    
  • 底图
    
  • 飞行漫游
    
  • 定位
    
  • 点标记
    
  • 贴地矩形
    
  • 地图输出
    
  • 贴地面
    
  • 线
    
  • 
  • 图上量算
    
  • 图层
    
  • 上下
    
  • 图上标绘
    
  • 批量单体化
    
  • 分析工具
    
  • 规划方案比选
    
  • 全景数据分析
    
  • 模型新增
    
  • 扩散模型
    
  • 连通性分析
    
  • 数据转换
    
  • 缓冲分析
    
  • 叠置分析
    
  • 分屏对比
    
  • 空间分析
    
  • 可视域
    
  • 模型开挖
    

Unicode 引用


Unicode 是字体在网页端最原始的应用方式,特点是:

  • 兼容性最好,支持 IE6+,及所有现代浏览器。
  • 支持按字体的方式去动态调整图标大小,颜色等等。
  • 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。

注意:新版 iconfont 支持多色图标,这些多色图标在 Unicode 模式下将不能使用,如果有需求建议使用symbol 的引用方式

Unicode 使用步骤如下:

第一步:拷贝项目下面生成的 @font-face

@font-face {
  font-family: 'marsgis';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#marsgis') format('svg');
}

第二步:定义使用 iconfont 的样式

.marsgis {
  font-family: "marsgis" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

第三步:挑选相应图标并获取字体编码,应用于页面

<span class="marsgis">&#x33;</span>

"marsgis" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。

  • circle
    .marsgis-circle1
  • 视角书签
    .marsgis-sjsq
  • 方量分析
    .marsgis-flfx
  • 工具栏
    .marsgis-gjl
  • _高度差
    .marsgis-gdc
  • 空间距离
    .marsgis-kjjl
  • 面积
    .marsgis-area
  • 角度测量
    .marsgis-jdcl
  • .marsgis-mian
  • 模型剖切
    .marsgis-mxpq
  • 模型压平
    .marsgis-mxyp
  • 全屏
    .marsgis-qp
  • 剖面
    .marsgis-pm
  • 模型裁剪
    .marsgis-mxcj
  • 日照分析
    .marsgis-rzfx
  • 日期
    .marsgis-riqi
  • 分享
    .marsgis-share
  • 素材库
    .marsgis-sck
  • 三角测量
    .marsgis-sanjiao
  • _mars_text
    .marsgis-text
  • 一键关闭
    .marsgis-yjgb
  • 比例尺
    .marsgis-bilic
  • 坐标测量
    .marsgis-zbcl
  • 贴地距离
    .marsgis-_mars_dtjl
  • 地形展示
    .marsgis-dxzs
  • 叠加
    .marsgis-diejia
  • poi搜索
    .marsgis-ss
  • 通视分析
    .marsgis-tshifx
  • 导航球
    .marsgis-dhq
  • 快捷键
    .marsgis-kjj
  • 二三位切换
    .marsgis-eswqh
  • 坐标定位
    .marsgis-zbdw
  • 地图纠错
    .marsgis-edit
  • 底图
    .marsgis-map
  • 飞行漫游
    .marsgis-fxmy
  • 定位
    .marsgis-dingwei
  • 点标记
    .marsgis-marker
  • 贴地矩形
    .marsgis-extent
  • 地图输出
    .marsgis-print
  • 贴地面
    .marsgis-polygon
  • 线
    .marsgis-polyline
  • .marsgis-circle
  • 图上量算
    .marsgis-tsls
  • 图层
    .marsgis-tc
  • 上下
    .marsgis-updown
  • 图上标绘
    .marsgis-tsbh
  • 批量单体化
    .marsgis-dth
  • 分析工具
    .marsgis-fxgj
  • 规划方案比选
    .marsgis-ghfadb
  • 全景数据分析
    .marsgis-qjsjdb
  • 模型新增
    .marsgis-mxxz
  • 扩散模型
    .marsgis-ksmx
  • 连通性分析
    .marsgis-ltxfx
  • 数据转换
    .marsgis-sjzh
  • 缓冲分析
    .marsgis-hcfx
  • 叠置分析
    .marsgis-dzfx
  • 分屏对比
    .marsgis-jldb
  • 空间分析
    .marsgis-kjfx
  • 可视域
    .marsgis-keshiyu
  • 模型开挖
    .marsgis-moxingkaiwa

font-class 引用


font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。

与 Unicode 使用方式相比,具有如下特点:

  • 兼容性良好,支持 IE8+,及所有现代浏览器。
  • 相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
  • 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。
  • 不过因为本质上还是使用的字体,所以多色图标还是不支持的。

使用步骤如下:

第一步:引入项目下面生成的 fontclass 代码:

<link rel="stylesheet" href="./iconfont.css">

第二步:挑选相应图标并获取类名,应用于页面:

<span class="marsgis marsgis-xxx"></span>

" marsgis" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。

  • circle
    #marsgis-circle1
  • 视角书签
    #marsgis-sjsq
  • 方量分析
    #marsgis-flfx
  • 工具栏
    #marsgis-gjl
  • _高度差
    #marsgis-gdc
  • 空间距离
    #marsgis-kjjl
  • 面积
    #marsgis-area
  • 角度测量
    #marsgis-jdcl
  • #marsgis-mian
  • 模型剖切
    #marsgis-mxpq
  • 模型压平
    #marsgis-mxyp
  • 全屏
    #marsgis-qp
  • 剖面
    #marsgis-pm
  • 模型裁剪
    #marsgis-mxcj
  • 日照分析
    #marsgis-rzfx
  • 日期
    #marsgis-riqi
  • 分享
    #marsgis-share
  • 素材库
    #marsgis-sck
  • 三角测量
    #marsgis-sanjiao
  • _mars_text
    #marsgis-text
  • 一键关闭
    #marsgis-yjgb
  • 比例尺
    #marsgis-bilic
  • 坐标测量
    #marsgis-zbcl
  • 贴地距离
    #marsgis-_mars_dtjl
  • 地形展示
    #marsgis-dxzs
  • 叠加
    #marsgis-diejia
  • poi搜索
    #marsgis-ss
  • 通视分析
    #marsgis-tshifx
  • 导航球
    #marsgis-dhq
  • 快捷键
    #marsgis-kjj
  • 二三位切换
    #marsgis-eswqh
  • 坐标定位
    #marsgis-zbdw
  • 地图纠错
    #marsgis-edit
  • 底图
    #marsgis-map
  • 飞行漫游
    #marsgis-fxmy
  • 定位
    #marsgis-dingwei
  • 点标记
    #marsgis-marker
  • 贴地矩形
    #marsgis-extent
  • 地图输出
    #marsgis-print
  • 贴地面
    #marsgis-polygon
  • 线
    #marsgis-polyline
  • #marsgis-circle
  • 图上量算
    #marsgis-tsls
  • 图层
    #marsgis-tc
  • 上下
    #marsgis-updown
  • 图上标绘
    #marsgis-tsbh
  • 批量单体化
    #marsgis-dth
  • 分析工具
    #marsgis-fxgj
  • 规划方案比选
    #marsgis-ghfadb
  • 全景数据分析
    #marsgis-qjsjdb
  • 模型新增
    #marsgis-mxxz
  • 扩散模型
    #marsgis-ksmx
  • 连通性分析
    #marsgis-ltxfx
  • 数据转换
    #marsgis-sjzh
  • 缓冲分析
    #marsgis-hcfx
  • 叠置分析
    #marsgis-dzfx
  • 分屏对比
    #marsgis-jldb
  • 空间分析
    #marsgis-kjfx
  • 可视域
    #marsgis-keshiyu
  • 模型开挖
    #marsgis-moxingkaiwa

Symbol 引用


这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:

  • 支持多色图标了,不再受单色限制。
  • 通过一些技巧,支持像字体那样,通过 font-size, color 来调整样式。
  • 兼容性较差,支持 IE9+,及现代浏览器。
  • 浏览器渲染 SVG 的性能一般,还不如 png。

使用步骤如下:

第一步:引入项目下面生成的 symbol 代码:

<script src="./iconfont.js"></script>

第二步:加入通用 CSS 代码(引入一次就行):

<style>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

第三步:挑选相应图标并获取类名,应用于页面:

<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-xxx"></use>
</svg>