arcgis js 4.x加载SceneLayer并实现基于属性查询定位及高亮-编程知识

arcgis js 4.x加载SceneLayer并实现基于属性查询定位及高亮

一、代码

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"><title></title><link rel="stylesheet" href="https://js.arcgis.com/4.24/esri/themes/light/main.css" /><script src="https://js.arcgis.com/4.24/"></script><style>html,body,#viewDiv {padding: 0;margin: 0;height: 100%;width: 100%;position: absolute;}</style></head><body><div id="viewDiv"><div style="position:absolute;right:10px;top:10px">请输入<input type="text" id="myInput" /><button onclick="search()">查询</button></div></div><script>var view, sceneLayer;var Map, Graphic, MapView, MapImageLayer, GraphicsLayer, SpatialReference, Extent, Point, WMTSLayer, esriConfig,TileLayer, Polygon;var trajectoryData = [];require(["esri/Map", "esri/Graphic","esri/views/SceneView", "esri/layers/MapImageLayer", "esri/layers/GraphicsLayer","esri/geometry/SpatialReference", "esri/geometry/Extent", "esri/geometry/Point","esri/layers/WMTSLayer", "esri/config", "esri/layers/TileLayer", "esri/geometry/Polygon", "esri/layers/WMSLayer","esri/core/urlUtils", "esri/layers/VectorTileLayer", "esri/WebScene", "esri/layers/SceneLayer","esri/portal/Portal", "esri/portal/PortalItem", "esri/views/layers/SceneLayerView"], function (Map, Graphic,SceneView,MapImageLayer, GraphicsLayer,SpatialReference,Extent,Point,WMTSLayer, esriConfig, TileLayer, Polygon, WMSLayer, urlUtils, VectorTileLayer, WebScene, SceneLayer,Portal, PortalItem, SceneLayerView, Query) {Map = Map;Graphic = Graphic;MapView = MapView;MapImageLayer = MapImageLayer;GraphicsLayer = GraphicsLayer;SpatialReference = SpatialReference;Extent = Extent;Point = Point;WMTSLayer = WMTSLayer;esriConfig = esriConfig;TileLayer = TileLayer;Polygon = Polygon;const map = new Map();sceneLayer = new SceneLayer({url: "https://edutrial.geoscene.cn/geoscene/rest/services/Hosted/test_WSL1/SceneServer/layers/0",//outFields: ["*"]//最好不要把SceneLayer的outFields设置为"*"，这个图层中要素的字段很多，如果把所有字段信息都传输到客户端，网络传输的压力会比较大，您可以观察此前network中请求数量是100多，设置为"*"后，请求数量变成800多了});view = new SceneView({container: "viewDiv",map: map,});map.add(sceneLayer);});let highlight;function search() {var inputElement = document.getElementById('myInput');// 获取input的值var inputValue = inputElement.value;view.whenLayerView(sceneLayer).then(function (layerView) {let query = sceneLayer.createQuery();query.where = "OBJECTID =" + inputValue;//场景图层使用的OBJECTID字段是OBJECTID_1，在查询返回的字段中，要包含OBJECTID_1字段信息（通过设置outFields信息），这样才可以高亮这个要素。//可以设置returnGeometry，返回该要素对应的footprint，然后定位过去query.multipatchOption = "xyFootprint";query.outFields = ["objectid_1"];query.returnGeometry = true;sceneLayer.queryFeatures(query).then(function (result) {console.log(result)if (result.features.length > 0) {view.goTo(result.features)}if (highlight) {highlight.remove();}highlight = layerView.highlight(result.features);})});}</script></body>
</html>

二、效果