arcgis api for 4.x 学习笔记-在Vue 2.X项目中部署arcgis api for javascript 4.x（三）

一、介绍

 

ArcGIS API for JavaScript 的 4.x 版几乎包含了 3.x 的所有功能以及许多 4.x 独有的新创新；例如 3D 可视化、地图旋转以及更深入的 ArcGIS Enterprise 和 ArcGIS Online 集成。虽然并非所有 3.x 功能都包含在 4.x 中，但每个版本都会增加更多功能，直到它不仅与 3.x 匹配，而且远远超过它。

之所以选用arcgis api4.x就是可以进行三维场景的展示，现在我们就做一个二维和三维场景的切换widget。

二、二三维场景切换的实现

要进行二维和三维之间场景的切换，我们就需要添加一个切换的开关，arcgis api 中有有默认的widget（小工具），比如Home、compass（一般这个在3D场景下使用）、zoom...

1. 初始化需要的widget

地图加载后会有默认的widget,但是很多情况下我们并不希望使用这些widget,所以我们要初始化选择arcgis api4.x为我们提供的widget

//初始化widget小工具
initWidgets(view: MapView | SceneView) {
        if (view) {
            //清空所有的widget
            view.ui.components = [];

            // 指南针(3d状态下)
            if (this.mapViewType === MapViewTypeEnum['3D']) {
                const compassWidget = new Compass({
                    view,
                });
                view.ui.add(compassWidget, 'bottom-right');
            }

            const homeWidget = new Home({
                view,
            });

            const zoomWidget = new Zoom({
                view,
            });

            // 添加2d/3d切换按钮(自定义widget)
            const { switchViewWidget } = this.$refs;
            if (switchViewWidget) {
                (switchViewWidget as any).init(view);
            }

            view.ui.add([homeWidget, zoomWidget], 'bottom-right');
        }
    }

上面的switchViewWidget就是自定义的场景切换开关
注意：我这样加载的widget会变成横向排列，但是我需要他竖直排列，我没有找到更好的解决方法，所以只能直接修改样式

/*widget样式调整*/
.esri-ui-corner {
  display: unset;

  .esri-component {
    margin-top: 10px;
  }
}

2.制作自定义切换场景的SwitchViewWidget

<template>
  <div v-show="visible"
       class="esri-component esri-home esri-widget--button esri-widget"
       role="button"
       tabindex="0"
       aria-label="2d/3d切换"
       title="2d/3d切换"
       @click="handleClick">
    <span v-if="loading"
          aria-hidden="true"
          class="esri-icon"
          :class="{'esri-icon-loading-indicator esri-rotating':loading}"></span>
    <span v-else
          aria-hidden="true"
          class="esri-icon">{{ value === MapViewTypeEnum["2D"] ? MapViewTypeEnum["3D"] : MapViewTypeEnum["2D"] }}</span>
  </div>
</template>

注意：必须在div中添加 class="esri-component esri-home esri-widget--button esri-widget" ，这个是widget需要的样式

<script lang="ts">
import {
  Component, Emit, Model, Prop, Vue,
} from 'vue-property-decorator';
import { MapViewTypeEnum } from '@/views/map/mixins/mapEnums';

@Component({ name: 'SwitchViewWidget' })
export default class SwitchViewWidget extends Vue {
  @Model('change', { default: () => MapViewTypeEnum['2D'] }) value: MapViewTypeEnum | undefined;

  // @Prop({ type: String, default: '' }) title: string | undefined;

  @Prop({ type: Boolean, default: false }) loading: boolean | undefined;

  /* 放置的位置 */
  @Prop({ type: String, default: 'bottom-right' }) position: string | undefined;

  MapViewTypeEnum = MapViewTypeEnum;

  visible = false;

  init(activeView: any) {
    if (activeView) {
      activeView.ui.add(this.$el, this.position);
      this.visible = true;
    }
  }

  handleClick(...e) {
    if (!this.loading) {
      const val = this.value === MapViewTypeEnum['2D'] ? MapViewTypeEnum['3D'] : MapViewTypeEnum['2D'];
      this.emitChange(val);
      this.emitClick(e);
    }
  }

  @Emit('click')
  emitClick(...e) {
    return e;
  }

  @Emit('change')
  emitChange(value) {
    debugger;
    return value;
  }
}
</script>

// 地图类型（2d/3d）
export enum MapViewTypeEnum {
    '2D' = '2D',
    '3D' = '3D'
}

3.地图中使用自定义的SwitchViewWidget

<template>
  <div id="viewDiv">
    <!--2d/3d切换按钮-->
    <switch-view-widget ref="switchViewWidget" v-model="mapViewType"></switch-view-widget>
  </div>
</template>

直接像添加组件一样使用SwitchViewWidget

 @Watch('mapViewType')
  handleMapViewTypeChange(newVal, oldVal) {
    if (newVal !== oldVal) {
      this.initMap();
    }
  }

监听当前场景是3D还是2D，然后重现加载地图

三、效果

二维场景下（2D）

三维场景下（3D）

四、需要掌握的知识点

1. view.ui 对于widget的操作
2. 二维和三维场景切换后对地图的操作

上一篇：arcgis api for 4.x 学习笔记-在Vue 2.X项目中部署arcgis api for javascript 4.x（二）_u012917880的博客-CSDN博客