Samples_Event explorer_watch properties注释解读研究

最新推荐文章于 2023-07-21 07:15:00 发布
原创最新推荐文章于 2023-07-21 07:15:00 发布 · 157 阅读
0 ·
CC 4.0 BY-SA版权
ArcGIS 同时被 2 个专栏收录
31 篇文章
订阅专栏
Javascript
19 篇文章
订阅专栏
这篇博客介绍了如何利用ArcGIS API for JavaScript创建一个示例，动态展示SceneView的事件和属性。通过定义事件和属性数组，程序动态生成表格并监听事件变化，当事件触发或属性改变时，对应的表格项会高亮显示，过一秒后恢复正常。此示例有助于理解场景视图的交互和状态变化。
这个例子可以学习事件和属性，挺有意思的，故格了这个程序一个礼拜了，大概明白了一点，全端出来共享一下了
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Event explorer / watch properties | Sample | ArcGIS API for JavaScript 4.19</title>

    <link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.19/"></script>

    <script>
      require(["esri/Map", "esri/views/SceneView"], (Map, SceneView) => {
        const map = new Map({
          basemap: "topo-vector",
          ground: "world-elevation"
        });

        const view = new SceneView({
          container: "viewDiv",
          map: map,
          qualityMode: "high",
          camera: {
            position: [-101.17, 20.76793656, 12908164.47184],
            heading: 0.0,
            tilt: 0.5
          }
        });
        //此处添加了——arr表明这是个数组，下面的属性也是一样
        const events_arr = [
          "pointer-enter",
          "pointer-leave",
          "pointer-move",
          "pointer-down",
          "pointer-up",
          "immediate-click",
          "click",
          "immediate-double-click",
          "double-click",
          "mouse-wheel",
          "drag",
          "hold",
          "key-down",
          "key-up",
          "focus",
          "blur",
          "resize"
        ];
        // for the purpose of the sample, this is only a selection of properties,为了达到演示的目的，这只是属性的一小部分，
        // but any properties on the View can be watched for 但是任何View的属性均可以被观察被watch for 
        //个人添加了_arr表明这是个数组
        const properties_arr = [
          "focused",
          "interacting",
          "updating",
          "resolution",
          "scale",
          "zoom",
          "stationary",
          "camera.position.z",
          "camera.tilt",
          "camera.heading"
        ];

        // Dynamically create the table of events and properties from the defined array
        //从预定义好的数组中动态地创建事件表和属性表
        function createTables() {
          const eventsTable = document.getElementById("events");//得到右上角的events的元素
              console.log("get events_node:"+eventsTable);
          let content = eventsTable.innerHTML;//让内容等于元素的innerHTML
              console.log("get events_node_innerhtml :"+content);
          //循环events_arr这个数组，为这个content赋值，每一个事件条目都是div 记住这个。
          for (let i = 0; i < events_arr.length; i++) {
            //创建了一个div 元素，class 为 event，id依此为数组中的各个单个值，pointer-enter，pointer-leave......
            //用这种方式也创建了新的元素，创建了新的元素
            content += '<div class="event" id="' + events_arr[i] + '">' +"I am "+ events_arr[i];
            content += "</div>";
            console.log(i+"of"+events_arr.length+"event is created in the for loops:"+content);
          }
          eventsTable.innerHTML = content;//让events元素的innerHTML等于content，不懂为啥又来了这么一句，因为前面有content=eventsTable.innerHTML
            console.log("after eventTable_innerHTML equal console_content:"+content);
          //上面是event即事件的区域，下面的是properties即属性的区域
          const propertiesTable = document.getElementById("properties");
            console.log("after const propertyTable:"+propertiesTable);
            //这个content还是上面声明过的那个content
            content = propertiesTable.innerHTML;
            console.log("after let content equal propertiesTable_innerHTML:"+content);
          for (let i = 0; i < properties_arr.length; i++) {
            //创建了一个div 元素，class为property，id依此为属性数组中的各个单个值，如focused，interacting......
            //用这种方式也创建了新的元素，创建了新的元素
            content += '<div class="property" id="' + properties_arr[i] + '">' + "I am "+ properties_arr[i] + " = </div>";
            console.log(i+"of"+properties_arr.length+"properties is created in the for loops:"+content);
          }
          propertiesTable.innerHTML = content;
          console.log("after property_innerHTML equal console_content:"+content);

        }
        //函数:建立Event的监听器，name是某个元素的id，注意：同时它也是一个事件名哦，可以用于xxx.on(name,func)这种情况下的哦。
        function setupEventListener(view, name) {
          const eventRow = document.getElementById(name);
          console.log(eventRow);
          view.on(name, (value) => {
            eventRow.className = "event active";//元素的className为：event active ，active之后就变得是实心的字了，inactive的时候是灰色的
            console.log(name);//往控制台输出这个event
            if (eventRow.highlightTimeout) {
              clearTimeout(eventRow.highlightTimeout);
            }
            eventRow.highlightTimeout = setTimeout(() => {
              // after a timeout of one second disable the highlight
              //过了timeout的秒数了，就使得高亮不能用
              eventRow.className = "event inactive";
            }, 1000);
          });
        }

        function setupPropertiesListener(view, name) {
          const propertiesRow = document.getElementById(name);
          view.watch(name, (value) => {
            propertiesRow.className = "property active";
            propertiesRow.innerHTML = propertiesRow.innerHTML.substring(0, propertiesRow.innerHTML.indexOf(" = "));
            console.log(name);//往控制台输出这个property
            // set the text to the received value
            const formattedValue = typeof value === "number" ? value.toFixed(4) : value;
            propertiesRow.innerHTML += " = " + formattedValue.toString();
            if (propertiesRow.highlightTimeout) {
              clearTimeout(propertiesRow.highlightTimeout);
            }
            propertiesRow.highlightTimeout = setTimeout(() => {
              // after a timeout of one second disable the highlight
              propertiesRow.className = "property inactive";
            }, 1000);
          });
        }

        // create the tables for the events and properties
        //调用createTables()，创建eventtable和propertytable
        createTables();

        // Setup all view events defined in the array
        //为数组中的那些事件来分配响应函数
        for (let i = 0; i < events_arr.length; i++) {
          setupEventListener(view, events_arr[i]);
        }
        // Setup all watch properties defined in the array
        //为数组中的那些属性创建响应函数
        for (let i = 0; i < properties_arr.length; i++) {
          setupPropertiesListener(view, properties_arr[i]);
        }
      });
    </script>
    <style>
      html,
      body {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }

      #viewDiv {
        position: absolute;
        left: 0;
        right: 250px;
        top: 0;
        bottom: 0;
        height: 100%;
      }

      #panel {
        background-color: #f5f5f5;
        position: absolute;
        right: 0;
        height: 100%;
        width: 250px;
        font-size: 12px;
      }

      .title {
        font-weight: bold;
        color: #0079c1;
      }

      .container {
        background-color: white;
        color: #323232;
        margin: 10px;
        padding: 5px;
        border-bottom: 1px solid rgba(50, 50, 50, 0.25);
      }

      .event,
      .property {
        transition: background-color 0.5s ease-out;
        padding-bottom: 2px;
        opacity: 0.2;
      }

      .active {
        opacity: 1;
        background-color: #f30909;
      }

      .inactive {
        opacity: 1;
        background-color: white;
      }
    </style>
  </head>

  <body>
    <div id="main">
      <div id="viewDiv"></div>
      <div id="panel" class="esri-widget">
        <div id="events" class="container">
          <a
            class="title"
            href="https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View.html#events-summary"
            target="_blank"
            >Class View Events:</a
          >
        </div>
        <div id="properties" class="container">
          <a
            class="title"
            href="https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View.html#properties-summary"
            target="_blank"
            >Class View Properties:</a
          >
        </div>
      </div>
    </div>
  </body>
</html>