arcgis for javascript 示例（五）如何使用3D测量微件？

最新推荐文章于 2023-05-31 10:36:43 发布

渊博苑

最新推荐文章于 2023-05-31 10:36:43 发布

阅读量495

点赞数

分类专栏： ArcGIS web开发 ArcGIS for javascript

本文链接：https://blog.csdn.net/ucs426/article/details/106124444

版权

ArcGIS 同时被 3 个专栏收录

66 篇文章 22 订阅

订阅专栏

ArcGIS for javascript

15 篇文章 1 订阅

订阅专栏

web开发

6 篇文章 0 订阅

订阅专栏

上本地数据的效果图

上代码：有个很简单的方法，只需要把自己的ID加进去

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Measurement in 3D - 4.15</title>

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

        #topbar {
            background: #fff;
            padding: 10px;
        }

        .action-button {
            font-size: 16px;
            background-color: transparent;
            border: 1px solid #d3d3d3;
            color: #6e6e6e;
            height: 32px;
            width: 32px;
            text-align: center;
            box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
        }

        .action-button:hover,
        .action-button:focus {
            background: #0079c1;
            color: #e4e4e4;
        }

        .active {
            background: #0079c1;
            color: #e4e4e4;
        }
    </style>

    <link rel="stylesheet" href="https://esriwh.giscloud.com/arcgis_js_api/library/4.15/esri/themes/light/main.css" />
    <script src="https://esriwh.giscloud.com/arcgis_js_api/library/4.15/init.js"></script>

    <script>
        require([
            "esri/WebScene",
            "esri/views/SceneView",
            "esri/widgets/DirectLineMeasurement3D",
            "esri/widgets/AreaMeasurement3D"
        ], function (
            WebScene,
            SceneView,
            DirectLineMeasurement3D,
            AreaMeasurement3D
        ) {
            var activeWidget = null;

            // 加载本地webscene
            var webscene = new WebScene({
                portalItem: {
                    id: "ca8ec44c45564d6d9fa7a1209cc66b7e"
                }
            });

            // 创建三维场景视图 scene view
            var view = new SceneView({
                container: "viewDiv",
                map: webscene
            });

            // 为测量微件添加 toolbar 
            view.ui.add("topbar", "top-right");
            //测量距离
            document
                .getElementById("distanceButton")
                .addEventListener("click", function () {
                    setActiveWidget(null);
                    if (!this.classList.contains("active")) {
                        setActiveWidget("distance");
                    } else {
                        setActiveButton(null);
                    }
                });
           //测量面积
            document
                .getElementById("areaButton")
                .addEventListener("click", function () {
                    setActiveWidget(null);
                    if (!this.classList.contains("active")) {
                        setActiveWidget("area");
                    } else {
                        setActiveButton(null);
                    }
                });

            function setActiveWidget(type) {
                switch (type) {
                    case "distance":
                        activeWidget = new DirectLineMeasurement3D({
                            view: view
                        });

                        // skip the initial 'new measurement' button
                        activeWidget.viewModel.newMeasurement();

                        view.ui.add(activeWidget, "top-right");
                        setActiveButton(document.getElementById("distanceButton"));
                        break;
                    case "area":
                        activeWidget = new AreaMeasurement3D({
                            view: view
                        });

                        // 新测量按钮
                        activeWidget.viewModel.newMeasurement();

                        view.ui.add(activeWidget, "top-right");
                        setActiveButton(document.getElementById("areaButton"));
                        break;
                    case null:
                        if (activeWidget) {
                            view.ui.remove(activeWidget);
                            activeWidget.destroy();
                            activeWidget = null;
                        }
                        break;
                }
            }

            function setActiveButton(selectedButton) {
                // focus the view to activate keyboard shortcuts for sketching
                view.focus();
                var elements = document.getElementsByClassName("active");
                for (var i = 0; i < elements.length; i++) {
                    elements[i].classList.remove("active");
                }
                if (selectedButton) {
                    selectedButton.classList.add("active");
                }
            }
        });
    </script>
</head>

<body>
    <div id="viewDiv"></div>
    <div id="topbar">
        <button class="action-button esri-icon-measure-line" id="distanceButton" type="button"
            title="测长度"></button>
        <button class="action-button esri-icon-measure-area" id="areaButton" type="button"
            title="测面积"></button>
    </div>
</body>

</html>

渊博苑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
arcgis for javascript 示例（五）如何使用3D测量微件？

上本地数据的效果图上代码：有个很简单的方法，只需要把自己的ID加进去<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>Measurement in 3D -.
复制链接

扫一扫