使用“map.extent”实现书签功能

要实现"esri/dijit/Bookmarks"的书签功能，最关键的是获取到添加书签时的map.extent

效果图：

一、点击添加书签时，创建新的li标签

html

<body>
    <div id="map">
        <div id="bookmark">
            <ul>
                <li id="addbookmarks"><span>添加书签</span></li>
            </ul>
        </div>
    </div>
</body>

//存放对象的数组，对象中包括了id以及extent
var loc=[];
loc.push({ id: (new Date()).getTime(), extent: map.extent });
//只要id不重复就行，实验时我用的是时间
$("#bookmark>ul").append("<hr /><li><input  class=\"bookclass\" maxlength=\"10\" type=\"text\"  /><img id=\"" + (new Date()).getTime() + "\" class=\"loc\" src=\"img/location.png\" /><img class=\"alt\" src=\"img/alter.png\" /><img class=\"del\" src=\"img/delete.png\" /></li>");
//默认焦点会在新创建的这个li中的input
$("#bookmark>ul li:last input").focus();
//隐藏“定位”“修改”“删除”
$("#bookmark>ul li:last input").siblings("img.loc,img.alt,img.del").css("display", "none");

二、当新创建的这个书签li的input失去焦点时，自动在input后追加“修改”与“删除”按钮（img）

$("#bookmark>ul>li>input:focus").focusout(function () {
    //当点击定位的img时，如果当前的img的id等于loc数组中某个对象的id，则取出该对象的extent，赋给map.setExtent(extent)
    $("#bookmark>ul li img.loc").unbind("click").click(function () {
        for (var i = 0; i < loc.length; i++) {
            if ($(this).attr("id") == loc[i].id) {
            map.setExtent(loc[i].extent)
            }
        }
    })
    //如果用户没有填写，默认“无标题”
    if ($(this).val() == "") {
        $(this).val("无标题")
    }
    //失去焦点时，显示“定位”“修改”“删除”
    $(this).siblings("img.loc,img.alt,img.del").css("display", "inline-block")
    //将input设置为不可编辑，只有在点击“修改”的时候才恢复编辑
    $(this).css("cursor", "pointer").attr("disabled", "disabled")
})

三、修改书签

//修改书签（只改内容，不改书签代表的范围）
$(".alt").unbind("click").click(function () {
    //修改时，恢复input的编辑
    $(this).siblings("input").attr("disabled", false).focus().css("cursor", "auto");
    //修改书签时，隐藏“定位”“修改”“删除”
    $(this).css("display", "none").siblings("img.loc,img.del").css("display", "none");
})

四、删除标签

//删除书签（删除内容及代表的范围）
$(".del").unbind("click").click(function () {
    var value = $(this).siblings("input").val();
    var id = $(this).siblings("img.loc").attr("id");
    console.log(value,id);
    $(this).parent("li").prev("hr").slideUp("slow", function () {//slide up
        $(this).parent("li").prev("hr").remove();
    })
    $(this).parent("li").slideUp("slow", function () {//slide up
        $(this).parent("li").remove();//then remove from the DOM
    });
    for (var i = 0; i < loc.length; i++) {
        if (loc[i].id==$(this).siblings("img.loc").attr("id")) {
            loc.splice(i, 1);
        }
    }
    //console.log(loc)
    /*
    删除当前书签时，删除数据库中对应的书签
    */
})

五、点击enter键，完成添加书签，书签失去焦点

$("body").keydown(function (event) {
    if (event.keyCode == "13") {//keyCode=13是回车键
        $("#bookmark>ul>li>input:focus").focusout();
    }
});

完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; 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.24/esri/css/esri.css">
    <script src="https://js.arcgis.com/3.24/"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <style>
        html, body, #map {
            height: 100%;
            padding: 0;
            margin: 0;
        }

        #bookmark {
            position: absolute;
            left: 60px;
            top: 25px;
            z-index: 999;
            width: 230px;
            background-color: #fff;
            padding: 10px;
        }

        #addbookmarks span {
            cursor: pointer;
            width:230px;
            display:inline-block
        }

        #bookmark ul {
            list-style: none;
            padding-left: 0px;
            margin: 0;
        }

        #bookmark li {
            list-style: none;
            background-color: white;
            height: 20px;
            line-height: 20px;
            padding: 5px;
            font-size: 12px;
            position: relative;
        }

        .loc {
            position: absolute;
            right: 56px;
            cursor: pointer;
            margin: 4px;
        }

        .alt {
            position: absolute;
            right: 28px;
            cursor: pointer;
        }

        .del {
            position: absolute;
            right: 0;
            cursor: pointer;
        }

        #bookmark li input {
            border: 0;
            background-color: white;
            font-size: 12px;
            width: 140px;
        }

        hr {
            margin-top: 2px;
            margin-bottom: 2px;
            color: lightgray;
        }
    </style>
    <script>
        require(["esri/map",
            "dojo/domReady!"], function (Map) {
                map = new Map("map", {
                    basemap: "osm",
                    center: [118.779, 32.044],
                    zoom: 12
                });

                //存储书签定位信息
                var loc = [];
                $("#addbookmarks>span").click(function () {
                    loc.push({ id: (new Date()).getTime(), extent: map.extent })
                    $("#bookmark>ul").append("<hr /><li><input  class=\"bookclass\" maxlength=\"10\" type=\"text\"  /><img id=\"" + (new Date()).getTime() + "\" class=\"loc\" src=\"img/location.png\" /><img class=\"alt\" src=\"img/alter.png\" /><img class=\"del\" src=\"img/delete.png\" /></li>");
                    $("#bookmark>ul li:last input").focus();
                    //隐藏“定位”“修改”“删除”
                    $("#bookmark>ul li:last input").siblings("img.loc,img.alt,img.del").css("display", "none")
                    //console.log(loc)

                    //注意选择器添加:focus，只对当前焦点的input操作
                    $("#bookmark>ul>li>input:focus").focusout(function () {
                        $("#bookmark>ul li img.loc").unbind("click").click(function () {
                            for (var i = 0; i < loc.length; i++) {
                                if ($(this).attr("id") == loc[i].id) {
                                    map.setExtent(loc[i].extent)
                                }
                            }
                        })
                        //=======================================================================================================================
                        if ($(this).val() == "") {
                            $(this).val("无标题")
                        }
                        //失去焦点时，显示“定位”“修改”“删除”
                        $(this).siblings("img.loc,img.alt,img.del").css("display", "inline-block")
                        $(this).css("cursor", "pointer").attr("disabled", "disabled")
                        //获取书签内容


                        var value = $(this).val();
                        var id = $(this).siblings("img.loc").attr("id");
                        console.log(value,id);
                        /*
                        此处将会对失去焦点的书签进行数据库检测：
                        1、数据库中没有时，执行add操作
                        2、数据库中有时，执行alter操作
                        */

                        //=======================================================================================================================
                        //修改书签（只改内容，不改书签代表的范围）
                        $(".alt").unbind("click").click(function () {
                            $(this).siblings("input").attr("disabled", false).focus().css("cursor", "auto");
                            //修改书签时，隐藏“定位”“修改”“删除”
                            $(this).css("display", "none").siblings("img.loc,img.del").css("display", "none");
                        })
                        //=======================================================================================================================
                        //删除书签（删除内容及代表的范围）
                        $(".del").unbind("click").click(function () {
                            var value = $(this).siblings("input").val();
                            var id = $(this).siblings("img.loc").attr("id");
                            console.log(value,id);
                            $(this).parent("li").prev("hr").slideUp("slow", function () {//slide up
                                $(this).parent("li").prev("hr").remove();
                            })
                            $(this).parent("li").slideUp("slow", function () {//slide up
                                $(this).parent("li").remove();//then remove from the DOM
                            });
                            for (var i = 0; i < loc.length; i++) {
                                if (loc[i].id==$(this).siblings("img.loc").attr("id")) {
                                    loc.splice(i, 1);
                                }
                            }
                            //console.log(loc)
                            /*
                            删除当前书签时，删除数据库中对应的书签
                            */
                        })
                    });
                })
                $("body").keydown(function (event) {

                    if (event.keyCode == "13") {//keyCode=13是回车键

                        $("#bookmark>ul>li>input:focus").focusout();

                    }
                });
            })
    </script>
</head>
<body>
    <div id="map">
        <div id="bookmark">
            <ul>
                <li id="addbookmarks"><span>添加书签</span></li>
            </ul>
        </div>
    </div>
</body>
</html>

代码可直接复制运行，完整下载链接：实现书签功能

需要注意的点：

1、因为需要将书签写入数据库，存在的行为包括：①、根据id修改数据库中对应的记录，②、数据库中新创建带id的记录，③、根据id删除数据库中对应的记录，所以我把前两种行为放在了书签焦点失去的时候，这个时候获取到该书签的id 和内容，根据id来进行数据库中数据记录的添加或者修改，第三种行为放在操作行为里，根据id获取数据库中的记录并删除

2、由于全部的click事件写在了“添加标签”的click事件中，所以为了避免有些时候被重复绑定click事件，所以在“定位”、“修改”、“删除”click之前，添加一个unbind("click")避免这种重复绑定

3、基础太差，对于val()html()text()，prop()attr()等容易混淆，要经常练习记忆以区分各自的作用。另外jQuery的方法可以串起来使用（但必须在逻辑正确的情况下），还有就是选择器中可以多个选择多个id、类、标签，从而避免代码冗余

使用“map.extent”实现书签功能

猜你喜欢