这个例子可以学习事件和属性，挺有意思的，故格了这个程序一个礼拜了，大概明白了一点，全端出来共享一下了
<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>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
