本文主要是介绍Samples_Event explorer_watch properties注释解读研究，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
这个例子可以学习事件和属性，挺有意思的，故格了这个程序一个礼拜了，大概明白了一点，全端出来共享一下了
<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;//让内容等于元素的innerHTMLconsole.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.innerHTMLconsole.log("after eventTable_innerHTML equal console_content:"+content);//上面是event即事件的区域，下面的是properties即属性的区域const propertiesTable = document.getElementById("properties");console.log("after const propertyTable:"+propertiesTable);//这个content还是上面声明过的那个contentcontent = 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);//往控制台输出这个eventif (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 valueconst 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 highlightpropertiesRow.className = "property inactive";}, 1000);});}// create the tables for the events and properties//调用createTables()，创建eventtable和propertytablecreateTables();// 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"><aclass="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"><aclass="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>
这篇关于Samples_Event explorer_watch properties注释解读研究的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
