书签小部件(可编辑).html

最新推荐文章于 2023-02-27 17:12:37 发布

学无止境慢慢来

最新推荐文章于 2023-02-27 17:12:37 发布

阅读量536

点赞数

分类专栏： arcgis_js_api_demo3.27

arcgis_js_api_demo3.27 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>书签小部件(可编辑)</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.27/esri/themes/calcite/dijit/calcite.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.27/esri/themes/calcite/esri/esri.css">
    <script src="https://js.arcgis.com/3.27/"></script>
    <style>
        html, body, #map {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .bookmark-container {
            position: absolute;
            top: 100px;
            left: 15px;
            padding: 1rem;
            background: #ffffff;
            border-radius: 4px;
            border: 1px solid #eeeeee;
        }
    </style>
    <script>
        require([
                "esri/map",
                "esri/dijit/Bookmarks",
                "dojo/domReady!"
            ],
            function (Map, Bookmarks){
                var map = new Map("map", {
                    basemap: "topo",
                    center: [-100, 40],
                    zoom: 4
                });
                // 创建书签小部件
                // 指定“可编辑”为true以启用编辑
                var bookmarks = new Bookmarks({
                    map: map,
                    bookmarks: [],
                    editable: true
                }, "bookmarks");
                // 书签数据对象
                var bookmarkJSON = {
                    first: {
                        "extent": {
                            "xmin": -12975100,
                            "ymin": 3993900,
                            "xmax": -12964100,
                            "ymax": 4019500,
                            "spatialReference": {
                                "wkid": 102100,
                                "latestWkid": 3857
                            }
                        },
                        "name": "Palm Springs, CA"
                    },
                    second: {
                        "extent": {
                            "xmin": -13052100,
                            "ymin": 4024900,
                            "xmax": -13041100,
                            "ymax": 4050500,
                            "spatialReference": {
                                "wkid": 102100,
                                "latestWkid": 3857
                            }
                        },
                        "name": "Redlands, California"
                    },
                    third: {
                        "extent": {
                            "xmin": -13048800,
                            "ymin": 3844800,
                            "xmax": -13037800,
                            "ymax": 3870400,
                            "spatialReference": {
                                "wkid": 102100,
                                "latestWkid": 3857
                            }
                        },
                        "name": "San Diego, CA"
                    },
                };

                // 向小部件添加书签
                Object.keys(bookmarkJSON).forEach(function (bookmark){
                    bookmarks.addBookmark(bookmarkJSON[bookmark]);
                });
            });
    </script>
</head>

<body class="calcite">
    <div id="map"></div>
    <div class="bookmark-container">
        <div id="bookmarks"></div>
    </div>
</body>
</html>

学无止境慢慢来

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
书签小部件(可编辑).html

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"&gt; &lt
复制链接

扫一扫