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>

二、效果

相关推荐
GIS思维9 小时前
ArcGIS定义投影与投影的区别(数据和底图不套合的原因和解决办法)
arcgis·gis·地理信息·arcgis坐标系·动态投影
阮少年、12 小时前
ArcGIS Pro的arpx项目在ArcGIS Server中发布要素服务(FeatureServer)
arcgis·arcgis server·gis服务发布·要素服务
圆弧YH1 天前
Arcgis 地图制作
arcgis
sinat_384241091 天前
使用 cnpm 安装 Electron,才是正确快速的方法
arcgis
中科GIS地理信息培训1 天前
ArcGIS Pro 3.4新功能1:唯一值符号化增加复选框,可在内容窗格和布局视图中控制类别的可见性。
arcgis·arcgis pro
黄鹂绿柳1 天前
学了Arcgis的水文分析——捕捉倾泻点,河流提取与河网分级,3D图层转要素失败的解决方法,测量学综合实习网站存着
arcgis
科研online1 天前
ArcGIS计算水库库容量
arcgis·学习方法
WineMonk2 天前
ArcGIS Pro ADGeoProcessing DAML
arcgis·gis·arcgis pro sdk·daml
踏实探索2 天前
OpenLayers教程12_WebGL自定义着色器:实现高级渲染效果
前端·arcgis·vue·webgl·着色器
weixin_贾2 天前
【学习教程】如何利用有限数据发表更多SCI论文?利用ArcGIS探究环境和生态因子对水体、土壤和大气污染物
arcgis·景观格局·土地利用·矢量数据·栅格数据·景观生态学·空间统计分析