ArcGIS API for js 之图层控制

前言

关于图层控制的例子网上已经比较多了，但是时间比较久，而且大多不能满足任务需求，刚好最近做了一个项目用到这个功能，所以我把我的例子写出来供大家分享。

一、地图模块

目录

前言

一、地图模块

二、页面展示

三、Final

1.引入ztree文件：注意版本，core.js文件是必须的，如果之前已经引入了jquery文件，则会造成冲突，可选择其中一个引入。

ArcGIS API版本为4.15

官网地址：ztree地址

<link rel="stylesheet" href="./libs/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="./libs/zTree/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="./libs/zTree/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="./libs/zTree/js/jquery.ztree.excheck.js"></script>

2.html与数据配置：其中id为ztree的唯一标识，ul元素必须加上。

 <div class="layertree">
     <ul id="treeDemo" class="ztree"></ul>
 </div>

var zNodes = [
    { id: 1, pId: 0, name: "基础地理信息", checked: false, iconOpen: "./libs/zTree/css/zTreeStyle/img/diy/1_open.png", iconClose: "./libs/zTree/css/zTreeStyle/img/diy/1_close.png" },
    { id: 11, pId: 1, name: "矿产资源", layerUrl: "http://localhost:6080/arcgis/rest/services/MyServer/Test/MapServer/0", layerid: "layer0", checked: false, icon: "img/kuangchan.png" },
    { id: 12, pId: 1, name: "县级行政区", layerUrl: "http://localhost:6080/arcgis/rest/services/MyServer/Test/MapServer/1", layerid: "layer1", checked: false, icon: "img/xian.png" },
    { id: 13, pId: 1, name: "市级行政区", layerUrl: "http://localhost:6080/arcgis/rest/services/MyServer/Test/MapServer/2", layerid: "layer2", checked: false, icon: "img/shi.png" },
    { id: 2, pId: 0, name: "遥感影像", checked: false, iconOpen: "./libs/zTree/css/zTreeStyle/img/diy/1_open.png", iconClose: "./libs/zTree/css/zTreeStyle/img/diy/1_close.png" },
    { id: 21, pId: 2, name: "矿产资源", layerUrl: "http://localhost:6080/arcgis/rest/services/MyServer/Test/MapServer/0", layerid: "layer0", checked: false, icon: "img/kuangchan.png" },
    { id: 22, pId: 2, name: "县级行政区", layerUrl: "http://localhost:6080/arcgis/rest/services/MyServer/Test/MapServer/1", layerid: "layer1", checked: false, icon: "img/xian.png" },
    { id: 23, pId: 2, name: "市级行政区", layerUrl: "http://localhost:6080/arcgis/rest/services/MyServer/Test/MapServer/2", layerid: "layer2", checked: false, icon: "img/shi.png" },
];

//通过复选框是否勾选来控制图层的打开与关闭，要开启复选框以及复选框事件，则check属性为true。并且回调函数为onCheck。
var setting = {
    check: {
        enable: true
    },
    data: {
        simpleData: {
            enable: true
        }
    },
    callback: {
        onCheck: zTreeOnCheck
    }
};

3.js功能实现

定义zTreeOnCheck、 addLayer、removeLayer函数

//回调函数有三个参数，其中e为复选框事件，treeid为节点id，treeNode为节点数据，这里主要用到treeNode。
function zTreeOnCheck(e, treeId, treeNode) {
    if (treeNode.checked) {
        if (treeNode.children) {//父节点
            treeNode.children.forEach(function (child) {
                addLayer(child.layerUrl, child.layerid)
            })
        } else {//子节点
            addLayer(treeNode.layerUrl, treeNode.layerid)
        }
    } else {
        if (treeNode.children) {//父节点
            treeNode.children.forEach(function (child) {
                removeLayer(child.layerid)
            })
        } else {//子节点
            removeLayer(treeNode.layerid)
        }
    }
};

function addLayer(url, layerid) {
    const labelClass = {
        symbol: {
            type: "text",
            color: "white",
            haloColor: "blue",
            haloSize: 1,
            //font: {  // autocast as new Font()
            //    family: "iconfont",
            //    size: 10,
            //    weight: "bold"
            //},
        },
        //labelPlacement: "above-right",
        labelExpressionInfo: {
            expression: "$feature.XJ"
        },

    }
    var renderer1 = {
        type: "simple",
        symbol: {
            type: "simple-fill",
            color: [154, 127, 184, 0.81],
            outline: {
                type: "simple-line",
                color: [138, 43, 226],
                width: "0.25px",

            }
        }

    }
    var renderer2 = {
        type: "simple",
        symbol: {
            type: "simple-fill",
            color: [70, 130, 180, 0],
            outline: {
                color: [70, 130, 180],
                width: "1px"
            }
        }

    };
    var renderer3 = {
        type: "simple",
        symbol: {
            type: "simple-line",
            color: [255, 105, 180, 0.6],
            width: "5px"
        }

    }
    var featLayer = new FeatureLayer({
        url: url,
    });
    featLayer.id = layerid;
    if (featLayer) {
        if (featLayer.id == "layer0") {
            featLayer.renderer = renderer1;
            featLayer.popupTemplate = popupData;
            map.add(featLayer)
        } else if (featLayer.id == "layer1") {
            featLayer.renderer = renderer2;
            featLayer.labelingInfo = [labelClass];
            featLayer.outFields = ["*"];
            map.add(featLayer)
        } else {
            featLayer.renderer = renderer3;
            map.add(featLayer)
        }

    }
    //添加图例
    var legend = new Legend({
        view: view,
        //basemapLegendVisible: true,
        container: "legendwidget",
        style: {
            type: "classic",
            //layout:""
        },
        //activeLayerInfos: [featLayer],
        layerInfos: [{
            title: "基础地理信息",
            layer: featLayer,
        }
        ]
    })
    view.ui.add(legend);
}

function removeLayer(layerid) {
    var layer = map.findLayerById(layerid);
    if (layer) {
        map.remove(layer);
    }
}

//启动生成树
$(document).ready(function () {
    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
});

二、页面展示

欢迎大家关注我的公众号，我也会在公众号同步更新。

若大家对进阶打怪有兴趣的话，欢迎订阅以下专栏

地址：WebGIS入门和进阶实战