一、代码
<!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>二、效果