# # 图标

> mapgis-ui-iconfont

## # 属性

### # `type`

- 类型: `String`
- 非侦听属性
- 描述: iconfont 官方网站上对应的图标名称
- 示例: "mapgis-jiamixian1"

    <mapgis-ui-iconfont type="mapgis-jiamixian1" />

## # 组合使用

    <template>
      <mapgis-web-map :accessToken="accessToken">
        <mapgis-igs-tdt-layer
          :token="token"
          :baseURL="baseURL"
          :crs="crs"
          :layerId="layerId"
          :sourceId="sourceId"
        >
        </mapgis-igs-tdt-layer>
        <mapgis-draw
          class="custom-draw-wrapper"
          position="bottom-left"
          @added="handleAdded"
          @drawCreate="handleCreate"
          ref="drawref"
        >
          <mapgis-ui-button-group class="mapgis-2d-draw-wrapper">
            <mapgis-ui-tooltip
              v-for="(item, i) in buttons"
              :key="i"
              placement="bottom"
            >
              <template slot="title">
                <span>{{ item.tip }}</span>
              </template>
              <mapgis-ui-button
                circle
                size="small"
                :type="item.type"
                @click="item.click"
              >
                <mapgis-ui-iconfont :type="item.icon" />
              </mapgis-ui-button>
            </mapgis-ui-tooltip>
          </mapgis-ui-button-group>
        </mapgis-draw>
      </mapgis-web-map>
    </template>
    <style>
    .custom-draw-wrapper {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 1000;
    }
    </style>
    <script>
    export default {
      name: "CustomDraw",
      props: {},
      data() {
        return {
          accessToken:
            "pk.eyJ1IjoibHZ4aW5nZGV0dXppIiwiYSI6ImNrcmJkb3dwMDIycnkycXIyYW96ejQ5czcifQ.RftxemAeBo-0pa-FZqm5vw",
          token: "3af3270f5f558ed33dcf9aacfb7a01b5",
          baseURL: "http://t0.tianditu.gov.cn/img_w/wmts",
          crs: "EPSG:3857",
          layerId: "tdt",
          sourceId: "tdt",
          buttons: [
            {
              icon: "mapgis-erweidian",
              type: "default",
              tip: "点选几何,按住shift可以框选",
              click: this.toggleSimple
            },
            {
              icon: "mapgis-erweidian",
              type: "primary",
              tip: "画点",
              click: this.togglePoint
            },
            {
              icon: "mapgis-erweixian",
              type: "primary",
              tip: "画线",
              click: this.togglePolyline
            },
            {
              icon: "mapgis-erweiqu",
              type: "primary",
              tip: "画矩形",
              click: this.toggleRect
            },
            {
              icon: "mapgis-erweiqu",
              type: "primary",
              tip: "画多边形",
              click: this.togglePolygon
            },
            {
              icon: "mapgis-yuan1",
              type: "primary",
              tip: "画圆",
              click: this.toggleCircle
            },
            {
              icon: "mapgis-yuanxinbanjingyuan1",
              type: "primary",
              tip: "画半径",
              click: this.toggleRadius
            },
            {
              icon: "mapgis-shanchudangqianziceng",
              type: "primary",
              tip: "删除选中图元",
              click: this.toggleDelete
            },
            {
              icon: "mapgis-shanchudangqianziceng",
              type: "primary",
              tip: "删除全部",
              click: this.toggleDeleteAll
            },
            {
              icon: "mapgis-juxing1",
              type: "default",
              tip: "矩形查询",
              click: this.toggleQueryByRect
            },
            {
              icon: "mapgis-pinghangsibianxing1",
              type: "default",
              tip: "多边形查询",
              click: this.toggleQueryByPolygon
            }
          ]
        };
      },
      methods: {
        enableDrawer() {
          const component = this.$refs.drawref;
          if (component) {
            component.enableDrawer();
          }
        },
        handleAdded(e, data) {
          let { drawer, map } = e;
          this.drawer = drawer;
        },
        handleCreate(e) {
          if (this.mode == "QueryByRect" || this.mode == "QueryByPolygon") {
            this.drawer.delete(e.features[0].id);
            // 执行查询操作
          }
        },
        toggleSimple(e) {
          this.enableDrawer();
          this.drawer && this.drawer.changeMode("simple_select");
        },
        toggleDirect(e) {
          this.drawer &&
            this.drawer.changeMode("direct_select", {
              featureId: "" // The id of the feature that will be directly selected (required)
            });
        },
        togglePoint(e) {
          this.enableDrawer();
          this.drawer && this.drawer.changeMode("draw_point");
        },
        togglePolyline() {
          this.enableDrawer();
          this.drawer && this.drawer.changeMode("draw_line_string");
        },
        toggleRect() {
          this.enableDrawer();
          this.drawer && this.drawer.changeMode("draw_rectangle");
        },
        togglePolygon() {
          this.enableDrawer();
          this.drawer && this.drawer.changeMode("draw_polygon");
        },
        toggleCircle() {
          this.enableDrawer();
          this.drawer && this.drawer.changeMode("draw_circle");
        },
        toggleRadius() {
          this.enableDrawer();
          this.drawer && this.drawer.changeMode("draw_radius");
        },
        toggleCombine() {},
        toggleUncombine() {},
        toggleDelete() {
          this.drawer && this.drawer.trash();
        },
        toggleDeleteAll() {
          this.drawer && this.drawer.deleteAll();
        },
        toggleQueryByRect(e) {
          this.enableDrawer();
          this.drawer && this.drawer.changeMode("draw_rectangle");
          this.mode = "QueryByRect";
        },
        toggleQueryByPolygon(e) {
          this.enableDrawer();
          this.drawer && this.drawer.changeMode("draw_polygon");
          this.mode = "QueryByPolygon";
        }
      }
    };
    </script>

### # 显示效果:

;

;

## # IconFont 网站定制

> 使用 iconfont.cn

TIP

对于使用 iconfont.cn
(opens new window) 的用户，通过设置 createFromIconfontCN 方法参数对象中的 scriptUrl 字段， 即可轻松地使用已有项目中的图标。

### # 全局引入

    import MapgisUi, { MapgisUiIconFont } from "@mapgis/webclient-vue-ui";

    MapgisUiIconFont.createFromIconfontCN({
      scriptUrl: "./icon/studio.js", // 支持js文件或iconfont.cn在线地址
    });

若希望修改名称，可仿照以下示例：

    import MapgisUi, { MapgisUiIconFont } from "@mapgis/webclient-vue-ui";

    const IconFont = MapgisUiIconFont.createFromIconfontCN({
      scriptUrl: "./icon/studio.js",
    });
    Vue.component("mapgis-ui-iconfont-NewName", IconFont);

### # 更新图标文件方式（针对开发人员）

#### # 1.storybook更新

TIP

假如开发人员最近添加了若干个图标到"WebClient-Vue-Icon"图标库，可通过以下方式在ui.js文件（路径：`.storybook\components\ui.js`）中注入：

    import MapgisUiIconFont from "../../ui/src/components/iconfont/Icon.vue";

    MapgisUiIconFont.createFromIconfontCN({
      scriptUrl: "//at.alicdn.com/t/font_2749943_69c9cshqtiv.js", // 从iconfont.cn网站复制最新的在线地址（需联网）
    });

> 注 ：下方截图为iconfont.cn网站的图标地址获取方式

#### # 2.mapgis-ui本地js文件替换

TIP

若开发人员需要替换本地的图标js文件，可从iconfont.cn网站下载图标文件并替换iconfont.js文件，文件路径为：ui\src\components\iconfont\iconfont.js

### # 单个引入

    <template>
      <div class="icons-list">
        <icon-font type="icon-tuichu" />
        <icon-font type="icon-facebook" />
        <icon-font type="icon-twitter" />
      </div>
    </template>
    <script>
    import { MapgisUiIconFont } from "@mapgis/webclient-vue-ui";

    const IconFont = MapgisUiIconFont.createFromIconfontCN({
      scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
    });
    export default {
      components: {
        IconFont,
      },
    };
    </script>
    <style scoped>
    .icons-list >>> .anticon {
      margin-right: 6px;
      font-size: 24px;
    }
    </style>