书签+图层列表+测量工具+图例+鹰眼+地图切换

效果图

1. 书签

		// 书签
          var bookmarksList = [
            { extent: { xmin: 106, ymin: 39, xmax: 112, ymax: 32 }, name: '陕西' },
            { extent: { xmin: 111, ymin: 31, xmax: 117, ymax: 35 }, name: '河南' },
            { extent: { xmin: 109, ymin: 35, xmax: 121, ymax: 42 }, name: '河北' },
            { extent: { xmin: 115, ymin: 31, xmax: 121, ymax: 34 }, name: '江苏' },
            { extent: { xmin: 90, ymin: 22, xmax: 114, ymax: 36 }, name: '四川' }
          ]
          const bookmarks = new Bookmarks({
            map: map,
            bookmarks: bookmarksList,
            editable: true
          }, 'bookmarks')
          bookmarks.startup()

2. 图层列表

		// 图层列表
          var myWidget = new LayerList({
            map: map,
            layers: donglayer
          }, 'layerList')
          myWidget.startup()

3. 测量工具

		// 测量工具
          var measurement = new Measurement({
            map: map
          }, 'measurementDiv')
          measurement.startup()

4. 图例

		// 图例
          var legend = new Legend({
            map: map
          }, 'legendDiv')
          legend.startup()

5. 鹰眼

		// 鹰眼
          var overviewMapDijit = new OverviewMap({
            map: map,
            visible: true
          }, 'overview')
          overviewMapDijit.startup()

6. 地图切换

		// 地图切换
          var basemapToggle = new BasemapToggle({
            map: map,
            visible: true
          }, 'basemapToggle')
          basemapToggle.startup()

完整代码：

<template>
  <div>
   
    <div id="home">
      <el-row>
        <el-col :span="19">
          <div class="grid-content bg-purple">
            <div id="overview" style="height: 100px; width: 150px; float:left;"></div>
            <div id="map"></div>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content bg-purple-light">
            <el-card id="mapOut" style="overflow-y: scroll;">
              <!-- 书签-->
              <el-card style=" padding: 5px;">
                <div id="bookmarks"></div>
              </el-card>
              <!-- 图层列表-->
              <el-card>
                <div id="layerListPane" data-dojo-type="dijit/layout/ContentPane">
                  <div id="layerList"></div>
                </div>
              </el-card>

              <el-card>
                <div id="titlePane" class="esriLayerList" data-dojo-type="dijit/TitlePane">
                  <div id="measurementDiv"></div>
                </div>
              </el-card>
              <!-- 图例-->
              <el-card shadow="always" class="box-card" style="width: 100%">
                <div slot="header" class="clearfix">
                  <span>Lendge</span>
                  <el-button style="float: right; padding: 3px 0" type="text"
                             @click="lendgeVisible ? hideLendge() : showLendge()">{{this.lendgeVisible}}
                  </el-button>
                </div>
                <div id="legendDiv"></div>
              </el-card>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>

    <div style="position: absolute; bottom: 20px; z-Index:999;">
      <div id="basemapToggle"></div>
    </div>
  </div>
</template>

<script>
import * as esriLoader from 'esri-loader'
import $ from 'jquery'

export default {
  data() {
    return {
      lendgeVisible: true
    }
  },
  // 我们需要在该组件装载之后做的事情都放在该方法里
  mounted() {
    esriLoader.setDefaultOptions({
      version: '3.28'
    })
    this.createMap()
  },
  // 我们需要执行的方法都定义在该属性里
  methods: {
    createMap: function () {
      esriLoader.loadModules(['esri/map',
        'dojo/dom', 'dojo/on',
        'esri/layers/ArcGISDynamicMapServiceLayer',
        'esri/dijit/Scalebar',
        'esri/dijit/OverviewMap',
        'esri/dijit/BasemapToggle',
        'esri/dijit/BasemapGallery',
        'esri/dijit/Bookmarks',
        'esri/dijit/Measurement',
        'esri/dijit/Legend',
        'esri/dijit/LayerList',
        'esri/tasks/PrintTask',
        'esri/tasks/PrintTemplate',
        'esri/tasks/PrintParameters',
        'dojo/domReady!'], {
        css: true
      })
        .then(([Map, dom, on, ArcGISDynamicMapServiceLayer, Scalebar, OverviewMap, BasemapToggle, BasemapGallery, Bookmarks, Measurement, Legend, LayerList, PrintTask, PrintTemplate, PrintParameters]) => {
          var dongURL = 'http://localhost:6080/arcgis/rest/services/webgis/China_POI/MapServer'
          var donglayer = new ArcGISDynamicMapServiceLayer(dongURL)
          // 初始化容器
          const map = new Map('map', {
            center: [108.934518, 34.35333],
            zoom: 7,
            logo: false,
            basemap: 'oceans'
          })
          map.addLayer(donglayer)
          // 鹰眼
          var overviewMapDijit = new OverviewMap({
            map: map,
            visible: true
          }, 'overview')
          overviewMapDijit.startup()
          // 地图切换
          var basemapToggle = new BasemapToggle({
            map: map,
            visible: true
          }, 'basemapToggle')
          basemapToggle.startup()
          // 书签
          var bookmarksList = [
            { extent: { xmin: 106, ymin: 39, xmax: 112, ymax: 32 }, name: '陕西' },
            { extent: { xmin: 111, ymin: 31, xmax: 117, ymax: 35 }, name: '河南' },
            { extent: { xmin: 109, ymin: 35, xmax: 121, ymax: 42 }, name: '河北' },
            { extent: { xmin: 115, ymin: 31, xmax: 121, ymax: 34 }, name: '江苏' },
            { extent: { xmin: 90, ymin: 22, xmax: 114, ymax: 36 }, name: '四川' }
          ]
          const bookmarks = new Bookmarks({
            map: map,
            bookmarks: bookmarksList,
            editable: true
          }, 'bookmarks')
          bookmarks.startup()
          // 测量工具
          var measurement = new Measurement({
            map: map
          }, 'measurementDiv')
          measurement.startup()
          // 图层列表
          var myWidget = new LayerList({
            map: map,
            layers: donglayer
          }, 'layerList')
          myWidget.startup()
          // 图例
          var legend = new Legend({
            map: map
          }, 'legendDiv')
          legend.startup()
        })
    },
    hideLendge() {
      this.lendgeVisible = !this.lendgeVisible
      $('#legendDiv').hide()
    },
    showLendge() {
      this.lendgeVisible = !this.lendgeVisible
      $('#legendDiv').show()
    },
    opensuccess() {
      this.$message({
        message: 'success',
        type: 'success'
      })
    },
    openWarning() {
      this.$message({
        message: '非地理坐标系',
        type: 'warning'
      })
    }

  }
}
</script>