从零开始的VUE+ArcGIS API for JS项目——图层管理

原创

于 2024-08-05 15:45:04 发布 · 699 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #arcgis

前言

图层列表工具主要实现将不同类型的地图图层添加到地图上，目前已经实现featurelayer，imagelaye添加到地图，其他类型的地图可以参考官方的api接口，同时能够通过图层树控制图层的显示隐藏，支持缩放到图层。

快速链接
arpgis api地址
 初始化地图应用
 底图切换

创建图层管理工具

继续之前的工程，在toolbox文件夹下新建 Layertree.vue，文件，对于图层控制的相关操作都在这个文件中实现。主要包含三个方法：initLayers初始化图层树，根据数据源（可以从后端传入）自动初始化图层树组件并将图层添加到地图。handleCheckChange监听树列表checkbox事件，选中则显示图层，未选中则隐藏图层。zoomLayer缩放到选中图层。
完整代码如下：

<template>
    <el-tree
      ref="treeRef"
      style="max-width: 600px"
      :data="data"
      show-checkbox
      default-expand-all
      :default-checked-keys="defaultCheckedKeys"
      node-key="id"
      highlight-current
      :props="defaultProps"
      @check-change="handleCheckChange"
      >
      <template #default="{ node, data }">
        <span class="custom-tree-node">{
   
   {
   
    node.label }}</span>
        <el-button size="small" v-if="!data.children"  @click="zoomLayer(data)">
          <el-icon><Position /></el-icon>
        </el-button>
      </template>
    </el-tree>
  </template>
  
  <script lang="ts" setup>
  import {
   
    ref,onBeforeMount,onMounted,reactive} from 'vue'
  import {
   
    ElTree } from 'element-plus'
  import FeatureLayer from "@arcgis/core/layers/FeatureLayer.js"
  import ImageLayer from "@arcgis/core/layers/ImageryLayer"
  import WMTSLayer from "@arcgis/core/layers/WMTSLayer"

  //接收主地图的视图view对象
  const props = defineProps({
   
   
    viewObj: Object,
  });

  interface Tree {
   
   
    id: number
    label: string
    children?: Tree[]
    url:string
    type:string
    visible:boolean
  }