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>

二、效果arcgis js 4.x加载SceneLayer并实现基于属性查询定位及高亮,arcgis,三维gis,scenelayer文章来源地址https://www.toymoban.com/news/detail-859727.html

到了这里,关于arcgis js 4.x加载SceneLayer并实现基于属性查询定位及高亮的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • arcgis js 4.x加载地图服务跨域配置(.Net方式)

    1.配置DotNet文件下的proxy文件 ?xml version=\\\"1.0\\\" encoding=\\\"utf-8\\\" ? ProxyConfig allowedReferers=\\\"*\\\"              mustMatch=\\\"true\\\" xmlns=\\\"proxy.xsd\\\"     serverUrls         serverUrl url=\\\"http://ip:port/arcgis/rest/services\\\"                    matchAll=\\\"true\\\"/     /serverUrls /ProxyConfig !-- See https://github.com/Esri/resourc

    2024年01月19日
    浏览(37)
  • ArcGIS Pro基础:【按顺序编号】工具实现属性字段的编号自动赋值

    本次介绍一个字段的自动排序编号赋值工具,基于arcgis 的字段计算器工具也可以实现类似功能,但是需要自己写一段代码实现, 相对而言不是很方便。 如下所示,该工具就是【编辑】下的【属性】下的【按顺序编号】工具。 其操作方法是: 点击该工具之后,先选中图斑,

    2024年02月13日
    浏览(202)
  • 基于arcgis js api 4.x开发点聚合效果

    一、代码   二、效果 1.开启聚合 2.取消聚合

    2024年01月19日
    浏览(38)
  • Leaflet实现要素点击查询弹窗展示属性

    leaflet是一个非常轻量的webgis框架,同时呢代码结构也比较简单。 如果项目上有需求需要大家实现对于个行政区点击查询相关属性并且展示,就像下图这样:  我们可以这样做。首先要清楚leaflet框架的构造,leaflet在加载图层的时候是对图层添加了事件监听的,也就是说用户对

    2024年02月09日
    浏览(44)
  • arcgis的属性显示bug

    arcgis中,右键图层属性可以查看图层的属性信息,比如坐标系、波段数、行列数等。 但是今天实验的时候发现,这个属性中显示的波段最大最小值并非真值。 该图层实际范围为:30~711。 在arcgis属性中,显示范围为0~651。 在python中的显示范围为:30~711,与实际相符。 不知为何

    2024年02月12日
    浏览(28)
  • 微信小程序:点击按钮实现数据加载(带模糊查询)

    wxml: 增加按钮 button class=\\\"last\\\" bindtap=\\\"bindMore\\\" wx:if=\\\"{{!allDataLoaded}}\\\"点击获取更多/button js: wxss: 后端thinkphp:

    2024年02月14日
    浏览(45)
  • 【JS】js数组分组,javascript实现数组的按属性分组

    项目代码中有很多时候需要按一定的条件实现按属性分组 你可以使用JavaScript的 Array.prototype.reduce() 方法来将数组分组。这是一种高级的方法,它可以将数组元素组合成一个单值。在这种情况下,你可以使用它来把数组元素放到一个对象中,其中对象的键是分组的条件,值是所

    2023年04月08日
    浏览(50)
  • ArcGIS和ArcGIS Pro快速加载ArcGIS历史影像World Imagery Wayback

    ArcGIS在线历史影像网站 World Imagery Wayback(网址:https://livingatlas.arcgis.com/wayback/)提供了数期历史影像在线浏览服务,之前不少自媒体作者在文中宣称其能代表Google Earth历史影像。 (1)同一级别下的版本覆盖面 以下述区域为例,自2014年2月20日至2022年5月18日期间,最高分辨率

    2024年04月12日
    浏览(45)
  • js实现img图片懒加载

    在前端中,可以使用 JavaScript 来实现图片的懒加载。下面是一种常见的实现方式: 在 HTML 文件中,将需要懒加载的图片的 src 属性替换为一个占位符,例如使用一个透明的空白图片或者是一个包含背景色的 div。 给这些图片添加一个自定义的属性,例如 data-src ,并将真实的图

    2024年02月11日
    浏览(37)
  • js实现滚轮滑动到底部自动加载

    这里我们用vue实现(原生js相似), 这里我们用一个div当作一个容器; css样式 给上面div添加一个高度 在methods中编写我们的滚动条方法 onScroll(){        // let innerHeight=document.querySelector(\\\"JL\\\").clientHeight //js中使用         //let scrollHeight=document.querySelector(\\\"JL\\\").scrollHeight       

    2024年02月12日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包