vue + ArcGIS 地图应用系列三：添加常规的地图组件

最新推荐文章于 2025-11-13 10:13:42 发布

原创

最新推荐文章于 2025-11-13 10:13:42 发布 · 2.5k 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#vue #arcgis

为了页面的美观，这里我们使用的UI库为： Ant Design Vue

项目源码仓库地址：https://github.com/LuckRain7/arcgis-api-for-javascript-vue

1. 首先创建工具菜单组件

创建文件 src\components\ToolBar.vue

并通过组件通信写好对应接口

<template>
  <div class="toolbar">
    <!-- 使用按钮组 -->
    <a-button-group>
      <!-- 地图切换按钮 -->
      <a-dropdown>
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="baseMapChange(1)">
            矢量
          </a-menu-item>
          <a-menu-item key="2" @click="baseMapChange(2)">
            影像
          </a-menu-item>
        </a-menu>
        <a-button type="primary">
          <a-icon type="global" />底图 <a-icon type="down" />
        </a-button>
      </a-dropdown>
      <!-- 地图切换按钮 END-->

      <a-dropdown>
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="measurement(1)">
            开始测量
          </a-menu-item>
          <a-menu-item key="2" @click="measurement(0)">
            取消测量
          </a-menu-item>
        </a-menu>
        <a-button type="primary">
          <a-icon type="tool" />测量 <a-icon type="down" />
        </a-button>
      </a-dropdown>

      <!-- 标绘 GO-->
      <a-dropdown>
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="draw('POINT')">
            点
          </a-menu-item>
          <a-menu-item key="2" @click="draw('POLYLINE')">
            线
          </a-menu-item>
          <a-menu-item key="3" @click="draw('POLYGON')">
            面
          </a-menu-item>
          <a-menu-item key="4" @click="draw('CIRCLE')">
            圆形
          </a-menu-item>
          <a-menu-item key="5" @click="draw('RECTANGLE')">
            长方形
          </a-menu-item>
          <a-menu-item key="6" @click="draw('st