ArcGIS JSAPI 学习教程 - ArcGIS Maps SDK for JavaScript - 框选显示高亮对象

在研究 ArcGIS JSAPI RenderNode 高亮(highlights)FBO 的时候,实现了一下框选高亮几何对象,这里分享一下。

本文包括核心代码、完整代码以及在线示例。


核心代码

实际上,就是通过标绘工具,创建矩形标绘,在判断矩形相交,然后高亮相交的几何对象。


// 监听标绘完成事件
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]));
            })
        }
    }
});


完整代码:


<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>框选显示高亮对象 | Sample | ArcGIS Maps SDK for JavaScript 4.29</title>
    <script type="module" src="/arcgis_api/calcite-components/2.8.1/calcite.esm.js"></script>
    <link rel="stylesheet" type="text/css" href="/arcgis_api/calcite-components/2.8.1/calcite.css" />
    <link rel="stylesheet" href="/arcgis_api/4.29/esri/themes/light/main.css" />
    <script src="/arcgis_api/4.29/init.js"></script>
    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?f80a36f14f8a73bb0f82e0fdbcee3058";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
    <script>
        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);
                                });
                            });
                        });
                    });
                });

            });
    </script>
    <style>
        html,
        body,
        #viewDiv {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }

        .panel-side {
            width: 250px;
            position: absolute;
            top: 14px;
            right: 14px;
            bottom: 28px;
            color: #323232;
            background-color: rgb(255, 255, 255);
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
            overflow: auto;
            z-index: 60;
            font-size: 12px;
            text-align: center;
        }

        .panel-side h2 {
            padding: 0 20px;
            margin: 20px 0;
            font-size: 14px;
            font-weight: 600;
        }

        #buildingCount,
        h2 {
            text-align: center;
        }
    </style>
</head>

<body>
<div class="panel-side esri-widget">
    <h2>Campus buildings</h2>
    <p id="buildingCount">Currently in view: 0 buildings</p>
    <calcite-panel id="buildingsList">
    </calcite-panel>
</div>
<div id="viewDiv"></div>
<div
        id="select-by-rectangle"
        class="esri-widget esri-widget--button esri-widget esri-interactive"
        title="Select features by rectangle"
>
    <span class="esri-icon-checkbox-unchecked"></span>
</div>
</body>

</html>


在这里插入图片描述


在线示例

ArcGIS Maps SDK for JavaScript 在线示例:框选显示高亮对象

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部