strArr: [ "RoadLine@zjmap,RoadLine@zjmap#1,RoadLine@zjmap#2,RoadLine@zjmap#3,RoadLine@zjmap#4", "Qiaol_l@zjmap,Qiaol_l@zjmap#1,Qiaol_p@zjmap,Qiaol_p@zjmap#1", "Suid_l@zjmap#1,Suid_l@zjmap,Suid_p@zjmap#1,Suid_p@zjmap", "Guanggp_p@zjmap", "Hand_p@zjmap", "Licz@zjmap,Licz@zjmap#1,Licz@zjmap#2", "Guanlzx@zjmap,Guanlzx@zjmap#1", "Yanghgq@zjmap,Yanghgq@zjmap#1", "Hut_l@zjmap", "Fuwq_p@zjmap,Fuwq_p@zjmap#1", "Shoufz_p@zjmap,Shoufz_p@zjmap#1", ], strArr1: [ "RoadLine@zjmap,RoadLine@zjmap#1,RoadLine@zjmap#2,RoadLine@zjmap#3,RoadLine@zjmap#4", "Qiaol_l@zjmap,Qiaol_l@zjmap#1,Qiaol_p@zjmap,Qiaol_p@zjmap#1", "Suid_l@zjmap#1,Suid_l@zjmap,Suid_p@zjmap#1,Suid_p@zjmap", "Guanggp_p@zjmap", "Hand_p@zjmap", "Licz@zjmap,Licz@zjmap#1,Licz@zjmap#2", "Guanlzx@zjmap,Guanlzx@zjmap#1", "Yanghgq@zjmap,Yanghgq@zjmap#1", "Hut_l@zjmap", "Fuwq_p@zjmap,Fuwq_p@zjmap#1", "Shoufz_p@zjmap,Shoufz_p@zjmap#1", ], layerInfoService: null, list1: [], list2: [ new SuperMap.LayerStatus({ layerName: "RoadLine@zjmap", isVisible: "true", }), new SuperMap.LayerStatus({ layerName: "RoadLine@zjmap#1", isVisible: "true", }), new SuperMap.LayerStatus({ layerName: "RoadLine@zjmap#2", isVisible: "true", }), new SuperMap.LayerStatus({ layerName: "RoadLine@zjmap#3", isVisible: "true", }), new SuperMap.LayerStatus({ layerName: "RoadLine@zjmap#4", isVisible: "true", }), new SuperMap.LayerStatus({ layerName: "Qiaol_l@zjmap", isVisible: "true", }), new SuperMap.LayerStatus({ layerName: "Qiaol_l@zjmap#1", isVisible: "true", }), new SuperMap.LayerStatus({ layerName: "Qiaol_p@zjmap", isVisible: "true", }), new SuperMap.LayerStatus({ layerName: "Qiaol_p@zjmap#1", isVisible: "true", }), new SuperMap.LayerStatus({ layerName: "Suid_l@zjmap#1", isVisible: "true", }), new SuperMap.LayerStatus({ layerName: "Suid_l@zjmap", isVisible: "true", }), new SuperMap.LayerStatus({ layerName: "Suid_p@zjmap#1", isVisible: "true", }), new SuperMap.LayerStatus({ layerName: "Suid_p@zjmap", isVisible: "true", }), new SuperMap.LayerStatus({ layerName: "Guanggp_p@zjmap", isVisible: "true", }), new SuperMap.LayerStatus({ layerName: "Licz@zjmap", isVisible: "true", }), new SuperMap.LayerStatus({ layerName: "Licz@zjmap#1", isVisible: "true", }), new SuperMap.LayerStatus({ layerName: "Licz@zjmap#2", isVisible: "true", }), new SuperMap.LayerStatus({ layerName: "Guanlzx@zjmap", isVisible: "true", }), new SuperMap.LayerStatus({ layerName: "Guanlzx@zjmap#1", isVisible: "true", }), new SuperMap.LayerStatus({ layerName: "Yanghgq@zjmap", isVisible: "true", }), new SuperMap.LayerStatus({ layerName: "Yanghgq@zjmap#1", isVisible: "true", }), new SuperMap.LayerStatus({ layerName: "Hut_l@zjmap", isVisible: "true", }), new SuperMap.LayerStatus({ layerName: "Fuwq_p@zjmap", isVisible: "true", }), new SuperMap.LayerStatus({ layerName: "Fuwq_p@zjmap#1", isVisible: "true", }), new SuperMap.LayerStatus({ layerName: "Shoufz_p@zjmap", isVisible: "true", }), new SuperMap.LayerStatus({ layerName: "Shoufz_p@zjmap#1", isVisible: "true", }) ], arr: [ { value: "RoadLine@zjmap,RoadLine@zjmap#1,RoadLine@zjmap#2,RoadLine@zjmap#3,RoadLine@zjmap#4", lable: "路线", }, { value: "Qiaol_l@zjmap,Qiaol_l@zjmap#1,Qiaol_p@zjmap,Qiaol_p@zjmap#1", lable: "桥梁", }, { value: "Suid_l@zjmap#1,Suid_l@zjmap,Suid_p@zjmap#1,Suid_p@zjmap", lable: "隧道", }, { value: "Guanggp_p@zjmap", lable: "广告牌", }, { value: "Hand_p@zjmap", lable: "涵洞", }, { value: "Licz@zjmap,Licz@zjmap#1,Licz@zjmap#2", lable: "桩号", }, { value: "Guanlzx@zjmap,Guanlzx@zjmap#1", lable: "管理中心", }, { value: "Yanghgq@zjmap,Yanghgq@zjmap#1", lable: "养护工区", }, { value: "Hut_l@zjmap", lable: "枢纽互通", }, { value: "Fuwq_p@zjmap,Fuwq_p@zjmap#1", lable: "服务区", }, { value: "Shoufz_p@zjmap,Shoufz_p@zjmap#1", lable: "收费站", } ], let url = "http://10.64.101.123/iserver/services/map-zjroadmap/rest/maps/zjroadmap" this.layerInfoService = new mapboxgl.supermap.LayerInfoService(url); this.layerInfoService.getLayersInfo((result) => { if (result.result.subLayers.layers) { var layers1 = result.result.subLayers.layers; for (var i = 0; i < layers1.length; i++) { this.list1.push(layers1[i].name); } } }); var p = new SuperMap.SetLayerStatusParameters({ layerStatusList: this.list2, }); this.layerInfoService.setLayerStatus(p, (e) => { if (e.result) { var t1 = e.result.newResourceID; if (this.map.getLayer("simple-tiles")) { this.map.removeLayer("simple-tiles"); this.map.removeSource("firstLayer"); } this.map.addSource("firstLayer", { type: "raster", tiles: [ "http://10.64.101.123/iserver/services/map-zjroadmap/rest/maps/zjroadmap/zxyTileImage.png?prjCoordSys=" + encodeURIComponent('{"epsgCode":3857}') + "&z={z}&x={x}&y={y}&noWrap=true&transparent=true&cacheEnabled=false&layersID=" + t1, ], tileSize: 256, }); this.map.addLayer({ id: "simple-tiles", type: "raster", source: "firstLayer", minzoom: 0, maxzoom: 22, }); } }); this.arrMap = []; this.strArr.forEach((item) => { item.split(",").forEach((itm, index) => { if (index == "0") { this.arrMap.push("zjmap:" + itm.split("@")[0]); } }); }); statusChange(vals) { this.list2 = [] var index = this.strArr.indexOf(vals); if (index > -1) { this.strArr.splice(index, 1); //存在就删除//删除 } else { this.strArr.push(vals); } let newArr = this.resArr(this.strArr1, this.strArr)//(全部,删除) // console.log(this.strArr,"新增的true"); // console.log(newArr,"剩余的false"); // console.log(this.strArr1,"总共的"); this.strArr.toString().split(",").forEach((item) => { if (item != '') { this.list2.push( new SuperMap.LayerStatus({ layerName: item, isVisible: "true", }) ); } }); newArr.toString().split(",").forEach((item) => { if (item != '') { this.list2.push( new SuperMap.LayerStatus({ layerName: item, isVisible: "false", }) ); } }); var p = new SuperMap.SetLayerStatusParameters({ layerStatusList: this.list2, }); this.layerInfoService.setLayerStatus(p, (e) => { if (e.result) { var t1 = e.result.newResourceID; if (this.map.getLayer("simple-tiles")) { this.map.removeLayer("simple-tiles"); this.map.removeSource("firstLayer"); } this.map.addSource("firstLayer", { type: "raster", tiles: [ "http://10.64.101.123/iserver/services/map-zjroadmap/rest/maps/zjroadmap/zxyTileImage.png?prjCoordSys=" + encodeURIComponent('{"epsgCode":3857}') + "&z={z}&x={x}&y={y}&noWrap=true&transparent=true&cacheEnabled=false&layersID=" + t1, ], tileSize: 256, }); this.map.addLayer({ id: "simple-tiles", type: "raster", source: "firstLayer", minzoom: 0, maxzoom: 22, }); } }); this.arrMap = []; this.strArr.forEach((item) => { item.split(",").forEach((itm, index) => { if (index == "0") { this.arrMap.push("zjmap:" + itm.split("@")[0]); } }); }); console.log(this.list2, "展示"); }, resArr(arr1, arr2) { return arr1.filter((v) => arr2.every((val) => val != v)); },