require([ "esri/WebScene", "esri/views/SceneView", "esri/rest/support/Query", "esri/widgets/Legend", "esri/core/reactiveUtils", "esri/views/3d/webgl/RenderNode", "esri/layers/GraphicsLayer", "esri/widgets/Sketch/SketchViewModel", ], ( WebScene, SceneView, Query, Legend, reactiveUtils, RenderNode, GraphicsLayer, SketchViewModel, ) => { // 使用官方资源 const webscene = new WebScene({ portalItem: { // autocasts as new PortalItem() id: "fbbc829fa7d342e7ae8d18c54a5eab37" } }); // Create a view and set the highlight options const view = new SceneView({ container: "viewDiv", map: webscene, popup: { dockOptions: { buttonEnabled: false } }, qualityProfile: "high", environment: { lighting: { directShadowsEnabled: true } }, // 设置默认高亮参数 highlightOptions: { haloColor: [255, 38, 150], color: [255, 255, 255], fillOpacity: 0.3 } }); // This variable will store the highlight handle that is used to remove the highlight this.highlights = []; // 创建标绘图层 const polygonGraphicsLayer = new GraphicsLayer({ elevationInfo: { // 注意，这里设置相对于地形，否则会遮挡 mode: 'relative-to-ground' } }); view.map.add(polygonGraphicsLayer); // add the select by rectangle button the view view.ui.add("select-by-rectangle", "top-left"); const selectButton = document.getElementById("select-by-rectangle"); // 创建标绘工具 const sketchViewModel = new SketchViewModel({ view: view, layer: polygonGraphicsLayer }); // 监听矩形标绘事件 selectButton.addEventListener("click", () => { view.closePopup(); // 标绘矩形 sketchViewModel.create("rectangle"); // 移除上一次操作 polygonGraphicsLayer.removeAll(); // 移除上一次高亮对象 if(this.highlights){ this.highlights.forEach((highlight) => { highlight.remove(); }); this.highlights = []; } }); // 监听标绘完成事件 sketchViewModel.on("create", async (event) => { if (event.state === "complete") { const queryGeometry = event.graphic.geometry; if (this.campusLayerView) { // 获取矩形内几何对象 const results = await this.campusLayerView.queryFeatures({ geometry: queryGeometry, }); // 设置高亮 results.features.forEach((feature) => { this.highlights.push(this.campusLayerView.highlight([feature.attributes.OID])); }) } } }); view.when(() => { // Get layer from webScene const campusSceneLayer = webscene.allLayers.filter((elem) => { return elem.title === "Buildings"; }).items[0]; // Define the attributes which are used in the query campusSceneLayer.outFields = ["name"]; // Get DOM element where list items will be placed const container = document.getElementById("buildingsList"); const buildingCount = document.getElementById("buildingCount"); // Highlight is set on the layerView, so we need to detect when the layerView is ready view.whenLayerView(campusSceneLayer).then((campusLayerView) => { this.campusLayerView = campusLayerView; // Wait for the view to finish updating reactiveUtils.when(() => !view.updating, () => { // Query the features available for drawing and get the attributes const query = new Query(); campusLayerView.queryFeatures(query).then((result) => { // Empty the list DOM element container.innerHTML = ""; buildingCount.innerHTML = `Currently in view: ${result.features.length} buildings`; // For each returned feature create a list item and append it to the container result.features.forEach((feature) => { const attributes = feature.attributes; // Create list element const li = document.createElement("calcite-pick-list-item"); li.setAttribute("label", attributes.name); li.addEventListener("click", (event) => { const target = event.target; const objectId = feature.attributes.OID; // Create an extent query on the layer view that will return the 3D extent of the feature const queryExtent = new Query({ objectIds: [objectId] }); campusLayerView .queryExtent(queryExtent) .then((result) => { // Zoom to the extent of the feature // Use the expand method to prevent zooming in too close to the feature if (result.extent) { view .goTo(result.extent.expand(4), { speedFactor: 0.5 }) .catch((error) => { if (error.name != "AbortError") { console.error(error); } }); } }); // Remove the previous highlights if (highlight) { highlight.remove(); } // Highlight the feature passing the objectId to the method highlight = campusLayerView.highlight([objectId]); }); container.appendChild(li); }); }); }); }); }); });