当前位置：文江博客话题详情

我可以在 ArcGIS javascript 地图的展开小部件中添加信息框吗？

发布于 2025-01-13 17:52:22 字数 125 浏览 2 评论 0原文

我确信有办法做到这一点，但我在任何地方都找不到它。

我想要一个可以从 ArcGIS javascript 地图中的展开小部件访问的文本框。我没有太多的脚本编写经验，所以我可能会遗漏一些明显的东西！

谢谢内特

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

亂 2025-01-20 17:52:22

您只需使用 Expand 小部件的 content 属性 (ArcGIS API - Expand.content）。它接受 Widget、string 或 html 节点。

这是您为您提供的一个简单示例，

<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>ArcGIS API for JavaScript Hello World App</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
        #infoDiv {
            width: 300px;
            background-color: white;
            padding: 10px;
        }
        #infoDiv h1 {
            font-size: 16px;
        }
        #infoDiv p {
            font-style: italic;
        }

    </style>

    <link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/css/main.css">
    <script src="https://js.arcgis.com/4.21/"></script>

    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/widgets/Expand"
        ], function (Map, MapView, Expand) {

            const map = new Map({
                basemap: "topo-vector"
            });

            const view = new MapView({
                container: "viewDiv",
                map: map,
                center: [-118.71511, 34.09042],
                zoom: 11
            });

            const expand = new Expand({
                expandIconClass: "esri-icon-comment",
                expandTooltip: "Expand Lorem Ipsum",
                collapseTooltip: "Collapse Lorem Ipsum",
                view: view,
                content: document.getElementById("infoDiv")
            });
            view.ui.add(expand, "bottom-left");

        });
    </script>
</head>

<body>
    <div id="viewDiv">
        <div id="infoDiv">
            <h1>The standard Lorem Ipsum passage, used since the 1500s</h1>
            <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
        </div>
    </div>
</body>

</html>

You just need to use the content property of Expand widget (ArcGIS API - Expand.content). It accepts, Widget, string, or a html node.

Here is a simple example U put for you,

<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>ArcGIS API for JavaScript Hello World App</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
        #infoDiv {
            width: 300px;
            background-color: white;
            padding: 10px;
        }
        #infoDiv h1 {
            font-size: 16px;
        }
        #infoDiv p {
            font-style: italic;
        }

    </style>

    <link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/css/main.css">
    <script src="https://js.arcgis.com/4.21/"></script>

    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/widgets/Expand"
        ], function (Map, MapView, Expand) {

            const map = new Map({
                basemap: "topo-vector"
            });

            const view = new MapView({
                container: "viewDiv",
                map: map,
                center: [-118.71511, 34.09042],
                zoom: 11
            });

            const expand = new Expand({
                expandIconClass: "esri-icon-comment",
                expandTooltip: "Expand Lorem Ipsum",
                collapseTooltip: "Collapse Lorem Ipsum",
                view: view,
                content: document.getElementById("infoDiv")
            });
            view.ui.add(expand, "bottom-left");

        });
    </script>
</head>

<body>
    <div id="viewDiv">
        <div id="infoDiv">
            <h1>The standard Lorem Ipsum passage, used since the 1500s</h1>
            <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
        </div>
    </div>
</body>

</html>

回复收藏 0 原文

~没有更多了~