vue中利用el-tree/arcgis api for js实现图层控制_vue 图层

 利用el-tree的多选框控制图层的显示隐藏，并且同时可以添加多个图层

 

<template>

    <div class="maptree-pannel" v-show="this.$store.getters._getDefaultMapTreeVisible">

        <div class="maptree-header">

            <span id="kongge" style="font-size: 16px; text-indent: 8px"> 图层管理</span>

            <i class="el-icon-close" @click="closeMapTreePannel"></i>

        </div>

        <el-tree

            :data="data"

            :show-checkbox="true"

            node-key="id"

            :props="defaultProps"

            @check-change="handleCheckChange"

        >

        </el-tree>

    </div>

</template>

<script>

import { loadModules } from 'esri-loader';

import config from './config';

export default {

    name: 'MapTree',

    components: {},

    data() {

        return {

            data: [

                {

                    label: '底图数据',

                    showCheckbox: false,

                    hasChildren: true,

                    children: [

                        {

                            label: '暖色系图层',

                            id: 1,

                            layerid: 'layerid1',

                            layerurl: 'http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetWarm/MapServer',

                            visible: false,

                        },

                        {

                            label: '灰色系图层',

                            id: 2,

                            layerid: 'layerid2',

                            layerurl: 'http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetGray/MapServer',

                            visible: false,