完成 管卡 显隐

index.html

@@ -62,6 +62,53 @@
             value="设置地图中心点和级别"
           />
         </div>
+        <div>
+          <input
+            type="button"
+            id="controlLayer1"
+            data="L_Foliage"
+            value="显示/隐藏(植被关卡)"
+          />
+          <input
+            type="button"
+            id="controlLayer2"
+            data="L_StaticMesh"
+            value="显示/隐藏(建筑关卡)"
+          />
+          <input
+            type="button"
+            id="controlLayer3"
+            data="Devices"
+            value="显示/隐藏(设备关卡)"
+          />
+          <input
+            type="button"
+            id="controlLayer4"
+            data="TrafficLight"
+            value="显示/隐藏(交通灯关卡)"
+          />
+        </div>
+
+        <div>
+          <input
+            type="button"
+            id="AesLayer1"
+            data="terrain"
+            value="显示/隐藏(地形)"
+          />
+          <input
+            type="button"
+            id="AesLayer2"
+            data="building"
+            value="显示/隐藏(建筑)"
+          />
+          <input
+            type="button"
+            id="AesLayer3"
+            data="road"
+            value="显示/隐藏(路网)"
+          />
+        </div>
         <div>
           <input type="button" id="lockMap" value="限制地图显示范围和级别" />
           <input type="button" id="unlockMap" value="解锁地图显示范围和级别" />
@@ -302,6 +349,13 @@
     var layer;
     var road;
     var camera; // 相机
+    var showLayer1 = true;
+    var showLayer2 = true;
+    var showLayer3 = true;
+    var showLayer4 = true;
+    var showAesLayer1 = true;
+    var showAesLayer2 = true;
+    var showAesLayer3 = true;
     var rsuArr = [];
     var drawControl; // 量算
     var measureControl; // 量算
@@ -345,6 +399,7 @@
       config.gis_sdk = gis_sdk;
 
       map = await CMapLoader.loadMap("main-container", config, url, secretKey);
+      console.log("map", map);
       window.map = map;
       await map.initMap(); //地图加载
 
@@ -357,6 +412,7 @@
       });
     }
 
+    //
     // 获取地图中心点和级别
     document.getElementById("getZoomAndCenter").onclick = getZoomAndCenter;
     async function getZoomAndCenter() {
@@ -377,6 +433,62 @@
       map.setZoomAndCenter(options);
     }
 
+    // 控制图层展示/隐藏  //植被关卡：L_Foliage，建筑关卡：L_StaticMesh，设备关卡：Devices，交通灯关卡：TrafficLight -->
+    var showLayer = false;
+    document.getElementById("controlLayer1").onclick = () => {
+      showLayer1 = !showLayer1;
+      controlLayer("L_Foliage", showLayer1);
+    };
+    document.getElementById("controlLayer2").onclick = () => {
+      showLayer2 = !showLayer2;
+      controlLayer("L_StaticMesh", showLayer2);
+    };
+    document.getElementById("controlLayer3").onclick = () => {
+      showLayer3 = !showLayer3;
+      controlLayer("Devices", showLayer3);
+    };
+    document.getElementById("controlLayer4").onclick = () => {
+      showLayer4 = !showLayer4;
+      controlLayer("TrafficLight", showLayer4);
+    };
+    function controlLayer(name, showLayer) {
+      console.log("name:", name, showLayer);
+      let option = {
+        Type: "Level", //"Level"
+        Name: name, // "L_Foliage", //植被关卡：L_Foliage，建筑关卡：L_StaticMesh，设备关卡：Devices，交通灯关卡：TrafficLight
+        Visible: showLayer, // 隐藏：false，显示：true
+      };
+      map.setLayer(option);
+    }
+
+    // AesLayer1
+    document.getElementById("AesLayer1").onclick = () => {
+      showAesLayer1 = !showAesLayer1;
+      setAESLayer("terrain", showAesLayer1);
+    };
+
+    // AesLayer2
+    document.getElementById("AesLayer2").onclick = () => {
+      showAesLayer2 = !showAesLayer2;
+      setAESLayer("building", showAesLayer2);
+    };
+
+    // AesLayer3
+    document.getElementById("AesLayer3").onclick = () => {
+      showAesLayer3 = !showAesLayer3;
+      setAESLayer("road", showAesLayer3);
+    };
+
+    function setAESLayer(name, showLayer) {
+      console.log("setAESLayer:", map._map.eid, name, showLayer);
+      let option = {
+        layers: [name], // ['terrain','building','road'] // 地形 建筑 路网
+        bVisible: showLayer, // 隐藏：false，显示：true
+        aesTilesEid: map._map.eid, // 点击地图 可以看下"type"是不是 "AesTilesEntity" 的 eid
+      };
+      map.setAESLayer(option);
+    }
+
     // 限制地图显示范围和级别
     document.getElementById("lockMap").onclick = lockMap;
     function lockMap() {