前言
图层列表工具主要实现将不同类型的地图图层添加到地图上,目前已经实现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