GeoScene 图标字体(Calcite 主题)

GeoScene 图标字体是一个单色图标集,用于一致的 GeoScene 品牌主题。

图标字体有几个优点,例如能够快速更改其颜色,以及图标字体可以自行调整大小以使其与放置的文本成比例。

对于 2D MapViews,GeoScene 图标字体可用于 .pbf 格式的托管字体文件。这些字体可通过 https://static.geoscene.cn/fonts 获得。通过设置 geosceneConfig.fontsUrl 属性,可以将 URL 配置为指向您自己的字体资源。

有关 Web 开发和字体的更多信息,请参阅基本文本和字体样式以及 Web 字体 Mozilla 开发人员网络文章。

使用 GeoScene 图标字体作为图形符号

GeoScene 图标字体的一种潜在用途是将它们用作图形符号属性。在以下代码片段中,通过指定颜色文本字体来创建 TextSymbolfont 属性是通过自动转换 Font 类来创建的。

对于 2D MapViews3D SceneViews,GeoScene 图标字体的 Font.familyCalciteWebCoreIcons

有关详细信息,请参阅将 GeoScene 图标字体与地图图形一起使用的示例。有关 unicode 值的完整列表,请参阅本主题中的 CSS 类名称和 Unicode 值部分。

                 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const 2DtextSymbol = new TextSymbol({
  color: '#7A003C',
  text: '\ue61d',  // esri-icon-map-pin
  font: {  // autocast as new Font()
    size: 24,
    family: 'CalciteWebCoreIcons'
  }
});

const 3DtextSymbol = new TextSymbol({
  color: '#7A003C',
  text: '\ue61d',  // esri-icon-map-pin
  font: {  // autocast as new Font()
    size: 24,
    family: 'CalciteWebCoreIcons'
  }
});

使用 GeoScene 图标字体作为标注

GeoScene 图标字体的另一个潜在用途是将它们用作 Label 类font.family 属性。在以下代码片段中,通过将符号类型自动转换为text颜色字体来创建 LabelClass。最后,我们定义了 labelPlacementlabelExpressionInfo,因为我们将使用 FeatureLayer。如果我们使用 MapImageLayer,则也可以使用 labelExpression

              
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const labelClass = {  // autocasts as new LabelClass()
  symbol: {
    type: 'text',  // autocasts as new TextSymbol()
    color: 'green',
    font: {  // autocast as new Font()
      family: 'CalciteWebCoreIcons',
      size: 12
    }
  },
  labelPlacement: 'above-left',
  labelExpressionInfo: {
    expression: '"\ue61d"'  // esri-icon-map-pin
  }
};

CSS 类名和 Unicode 值

以下 GeoScene 图标字体列表显示字体预览、使用图标字体所需的 CSS 类名称,以及指定与 ::before::after 伪元素一起使用以在元素中生成内容的 content CSS 属性所需的 CSS unicode 值,或 TextSymbol.text 属性的值。

geoscene-icon-close
geoscene-icon-drag-horizontal
geoscene-icon-drag-vertical
geoscene-icon-handle-horizontal
geoscene-icon-handle-vertical
geoscene-icon-check-mark
geoscene-icon-left-triangle-arrow
geoscene-icon-right-triangle-arrow
geoscene-icon-down-arrow
geoscene-icon-up-arrow
geoscene-icon-overview-arrow-bottom-left
geoscene-icon-overview-arrow-bottom-right
geoscene-icon-overview-arrow-top-left
geoscene-icon-overview-arrow-top-right
geoscene-icon-maximize
geoscene-icon-minimize
geoscene-icon-checkbox-unchecked
geoscene-icon-checkbox-checked
geoscene-icon-radio-unchecked
geoscene-icon-radio-checked
geoscene-icon-up-arrow-circled
geoscene-icon-down-arrow-circled
geoscene-icon-left-arrow-circled
geoscene-icon-right-arrow-circled
geoscene-icon-zoom-out-fixed
geoscene-icon-zoom-in-fixed
geoscene-icon-refresh
geoscene-icon-edit
geoscene-icon-authorize
geoscene-icon-map-pin
geoscene-icon-blank-map-pin
geoscene-icon-table
geoscene-icon-plus
geoscene-icon-minus
geoscene-icon-beginning
geoscene-icon-reverse
geoscene-icon-pause
geoscene-icon-play
geoscene-icon-forward
geoscene-icon-end
geoscene-icon-erase
geoscene-icon-up-down-arrows
geoscene-icon-left
geoscene-icon-right
geoscene-icon-announcement
geoscene-icon-notice-round
geoscene-icon-notice-triangle
geoscene-icon-home
geoscene-icon-locate
geoscene-icon-expand
geoscene-icon-collapse
geoscene-icon-layer-list
geoscene-icon-basemap
geoscene-icon-globe
geoscene-icon-applications
geoscene-icon-arrow-up-circled
geoscene-icon-arrow-down-circled
geoscene-icon-arrow-left-circled
geoscene-icon-arrow-right-circled
geoscene-icon-minus-circled
geoscene-icon-plus-circled
geoscene-icon-add-attachment
geoscene-icon-attachment
geoscene-icon-calendar
geoscene-icon-close-circled
geoscene-icon-browser
geoscene-icon-collection
geoscene-icon-comment
geoscene-icon-configure-popup
geoscene-icon-contact
geoscene-icon-dashboard
geoscene-icon-deny
geoscene-icon-description
geoscene-icon-directions
geoscene-icon-directions2
geoscene-icon-documentation
geoscene-icon-duplicate
geoscene-icon-review
geoscene-icon-environment-settings
geoscene-icon-error
geoscene-icon-error2
geoscene-icon-experimental
geoscene-icon-feature-layer
geoscene-icon-filter
geoscene-icon-grant
geoscene-icon-group
geoscene-icon-key
geoscene-icon-labels
geoscene-icon-tag
geoscene-icon-layers
geoscene-icon-left-arrow
geoscene-icon-right-arrow
geoscene-icon-link-external
geoscene-icon-link
geoscene-icon-loading-indicator
geoscene-icon-maps
geoscene-icon-marketplace
geoscene-icon-media
geoscene-icon-media2
geoscene-icon-menu
geoscene-icon-mobile
geoscene-icon-phone
geoscene-icon-navigation
geoscene-icon-pan
geoscene-icon-printer
geoscene-icon-pie-chart
geoscene-icon-chart
geoscene-icon-line-chart
geoscene-icon-question
geoscene-icon-resend-invitation
geoscene-icon-rotate
geoscene-icon-save
geoscene-icon-settings
geoscene-icon-settings2
geoscene-icon-share
geoscene-icon-sign-out
geoscene-icon-support
geoscene-icon-user
geoscene-icon-time-clock
geoscene-icon-trash
geoscene-icon-upload
geoscene-icon-download
geoscene-icon-zoom-in-magnifying-glass
geoscene-icon-search
geoscene-icon-zoom-out-magnifying-glass
geoscene-icon-locked
geoscene-icon-unlocked
geoscene-icon-favorites
geoscene-icon-compass
geoscene-icon-down
geoscene-icon-up
geoscene-icon-chat
geoscene-icon-dock-bottom
geoscene-icon-dock-left
geoscene-icon-dock-right
geoscene-icon-organization
geoscene-icon-north-navigation
geoscene-icon-locate-circled
geoscene-icon-dial
geoscene-icon-polygon
geoscene-icon-polyline
geoscene-icon-visible
geoscene-icon-non-visible
geoscene-icon-link-vertical
geoscene-icon-unlocked-link-vertical
geoscene-icon-link-horizontal
geoscene-icon-unlocked-link-horizontal
geoscene-icon-swap
geoscene-icon-cta-link-external
geoscene-icon-reply
geoscene-icon-public
geoscene-icon-share2
geoscene-icon-launch-link-external
geoscene-icon-rotate-back
geoscene-icon-pan2
geoscene-icon-tracking
geoscene-icon-expand2
geoscene-icon-arrow-down
geoscene-icon-arrow-up
geoscene-icon-hollow-eye
geoscene-icon-play-circled
geoscene-icon-volume-off
geoscene-icon-volume-on
geoscene-icon-bookmark
geoscene-icon-lightbulb
geoscene-icon-sketch-rectangle
geoscene-icon-north-navigation-filled
geoscene-icon-default-action
geoscene-icon-undo
geoscene-icon-redo
geoscene-icon-cursor
geoscene-icon-cursor-filled
geoscene-icon-measure-line
geoscene-icon-measure
geoscene-icon-measure-area
geoscene-icon-legend
geoscene-icon-sliders
geoscene-icon-sliders-horizontal
geoscene-icon-cursor-marquee
geoscene-icon-lasso
geoscene-icon-elevation-profile
geoscene-icon-line-of-sight
geoscene-icon-slice
geoscene-icon-zoom-to-object
geoscene-icon-urban-model
geoscene-icon-measure-building-height-shadow

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.