Arcgis API for javascript 4.x 3D开发笔记（二）

自定义widget的创建<template><div v-show="visible"class="esri-component esri-home esri-widget--button esri-widget"role="button"tabindex="0":aria-label="t...

花姐夫Jun

636人浏览 · 2021-03-24 17:38:03

花姐夫Jun · 2021-03-24 17:38:03 发布

自定义widget的创建

<template>
    <div v-show="visible"
         class="esri-component esri-home esri-widget--button esri-widget"
         role="button"
         tabindex="0"
         :aria-label="title"
         :title="title"
         @click="handleClick">
        <span aria-hidden="true" class="esri-icon"
              :class="loading?'esri-icon-loading-indicator esri-rotating':'esri-icon-organization'"></span>
    </div>
</template>

arcgis api for javascript的自定义widget和vue的组件创建差不多，只是如果要和原生的widget样式一直，需要加入esri-icon、esri-icon-organization、esri-icon-loading-indicator 、esri-rotating等等这些class，要获取这些样式只用右键点击“检查”进入开发者模式粘贴这些需要的样式（esri-icon-loading-indicator esri-rotating这两个需要一起使用，这样才会有动态的loading效果）

<script lang="ts">
    import {
        Component, Emit, Prop, Vue, Watch,
    } from 'vue-property-decorator';

    @Component({ name: 'SwitchExtrudeQydkWidget' })
    export default class SwitchExtrudeQydkWidget extends Vue {
        @Prop({ type: String, default: '' }) title: string | undefined;

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

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

        visible = false;

        init(activeView: any) {
            if (activeView) {
                activeView.ui.add(this.$el, 'bottom-right');
            }
        }

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

        @Watch('isVisible', { immediate: true })
        handleVisibleChange(newVal, oldVal) {
            this.visible = newVal;
        }
    }
</script>

activeView.ui.add(this.$el, 'bottom-right'); （就是将当前自定义的vue组件，作为arcgis的widget添加到当前view的操作）

自定义widget的使用

    <!--企业地块拉伸/隐藏-->JavaScrhtmlipt
        <switch-extrude-qydk-widget ref="switchExtrudeQydkWidget"
                                    @click="handleExtrudeChange"
                                    :is-visible="mapViewType === mapViewTypeEnum['3D']"
                                    :loading="isLoadingMap"
                                    title="企业地块拉伸/隐藏"></switch-extrude-qydk-widget>

       const { switchExtrudeQydkWidget } = this.$refs;
            if (switchExtrudeQydkWidget) {
                (switchExtrudeQydkWidget as any).init(view);
            }

初始化自定义的widget,将widget真正添加到view中（init函数中传入的就是当前的view）