Writing in the front

In map services, bookmarks are often used to record and locate points or areas of interest. The ArcGIS API for javascript provides a bookmark widget called esri.dijit.bookmarks. In the process of use, it is found that this bookmark function only achieves the function of adding, deleting and modifying interest points or interest ranges of page cache. However, when applied in projects, it is often necessary to connect to the database to exchange the function of adding, deleting, modifying and searching interest points or interest ranges in the foreground with background data. Along the way, you learned how to use define/ Declare in a wave of Dojo. For this article, I have read the official documentation for dojo definition and Declare.

Use dojo define/declare

  • Define is used to define a module that can be referenced by require, equivalent to a custom component. The first parameter to define introduces any additional modules that need to be used, using array objects. The second parameter describes the specific functions of the currently customized module, and gives each module referenced in the first parameter a name, using a function object.
  • Declare, as a return object in the define second parameter function, contains three parts:
    • The first parameter is a custom class name, which is not defined in use.
    • The second argument is superclasses, which can be null, a single superclass, or an array object. When there are multiple superclasses, the first superclass to be inherited defaults to the base prototype of the DECLARE class. Other classes consider mixins, perhaps the first superclass to be used, the most important meaning;
    • The third parameter is the method object, which has three important concepts:
      • 1) Constructor method
      • 2, the idea of inheritance
      • 3. This. Inherited: This. Calls a method of the same name from the first superclass directly from a declare method, but cannot be used from constructor.

The above is a purely personal understanding, there may be some inaccuracies, mainly to read the official Dojo documentation, in the future study, may need to be corrected

A simple rewrite of esri.dijit.bookmarks

  • 0. Background preparation

    • A table of data
    • Interface: add, delete, change, search

  • 1. Js file body

define(["dojo/_base/declare"."esri/map"."dojo/dom". ] .function (declare, Map, dom,... , template) {return declare([_BaseWidget, _WidgetsInTemplateMixin], {templateString: template,// use custom content startup:function () {
                console.log("BookMarkWidget::startup"); this.inherited(arguments); } / /... Custom methods}); });Copy the code
  • 2. Bookmark data query method
getBookmarkInfo: function () {
    var bookmarkInfo = null;
    xhr(getBookmarkUrl , {
        handleAs: "json"// Return data method in json format:"get",
        timeout: 3000,
        sync: true,
        headers: {
            'Content-Type': 'application/json'
        }
    }).then(function(data){
        if(data.success === 1) { bookmarkInfo = data.data; }},function(err){
    }, function(evt){
    });
    return bookmarkInfo;
}
Copy the code
  • 3. Bookmark deletion method
deleteBookmarkHandler: function (event) {
    if(! window.confirm("Are you sure?")) {
        return; } var _self = this; XHR (deleteBookmarkUrl, {data: dojo.tojson (queryData), method:"post",
        timeout: 3000,
        handleAs: "json",
        headers: {
            'Content-Type': 'application/json'
        }
    }).then(function(data){
        if(data. Success = = = 1) {/ / delete Bookmarks in memory - esri. Dijit. Bookmarks with method of love. The Bookmarks. RemoveBookmark (name); / /... Set a container, bookmarkData, to maintain data}},function(err){
    }, function(evt){
    });     
}
Copy the code
  • 4. Bookmark addition/editing method
editBookmarkHandler: function(event) { var _self = this; // Edit the bookmarks sectionif(bookmarksLenght == _self.bookmarkData.length) { // ... XHR (alterBookmarkUrl, {data: dojo.toJson(queryData), handleAs:"json",
            method: "post",
            timeout: 3000,
            headers: {
                'Content-Type': 'application/json'
            }
        }).then(function(data){
            if(data.success === 1) {// Maintain bookmarkData}},function(err){
        }, function(evt){ }); } // Add bookmarks sectionelse if(bookmarksLenght > _self.bookmarkdata.length) {// When adding a bookmark with the same name, block bookmarks and delete bookmarks added in memoryfor (var i = 0; i < _self.bookmarkData.length; i++) {                    
            if (currentName == _self.bookmarkData[i].name ) {
                messageAlert(0, "Cannot bookmark with the same name!");
                var equalNodeId = "dojoUnique" + bookmarksLenght;
                domConstruct.destroy(equalNodeId);
                return;
            }
        }
        xhr(addBookmarkUrl, {
            data: dojo.toJson(queryData),
            handleAs: "json",
            method: "post",
            timeout: 3000,
            headers: {
                'Content-Type': 'application/json'
            }
        }).then(function(data){
            ifVar image_bookmarkRemove = query(data.success === 1) {var image_bookmarkRemove = query(".esriBookmarkRemoveImage")[bookmarksLenght - 1];
                var removeButton = domConstruct.toDom("");
                domConstruct.place(removeButton, image_bookmarkRemove, "after"); 
                query(".esriBookmarkRemoveImage").style({display: "none"}); // Delete bookmark on(query(".btn_bookmarkRemove")[bookmarksLenght - 1], "click", lang.hitch(_self, _self.deleteBookmarkHandler)); // Maintain bookmarkData _self.bookmarkData = data.data; }},function(err){
            _self.bookmarks.removeBookmark(currentName);
        }, function(evt){
        });
    }
Copy the code
  • 5. Bookmark instantiation: The above three methods are used in bookmark instantiation or are called after listening for related operations
setbookmark: function (url) {
    if(this.bookmarks ! ="YES") {
        return; } // Instantiate bookmark this.bookmarks = new bookmarks ({map: this.map, bookmarks: [], editable:true
        },
        document.getElementById("bookmarks_div")); this.rootUrl = url; // Get all bookmarks data that exists in the database,forLoop to construct bookmarkItem and addBookmark this.bookMarkData = this.getBookMarkInfo ();for (var i = 0; i < this.bookmarkData.length; i++) {
        var bookmarkItem = {
            "extent": {
                "spatialReference": {
                    "wkid": this.bookmarkData[i].wkid
                },
                "xmin": this.bookmarkData[i].xmin,
                "ymin": this.bookmarkData[i].ymin,
                "xmax": this.bookmarkData[i].xmax,
                "ymax": this.bookmarkData[i].ymax
            },
            "name": this.bookmarkData[i].name,
            "bookmarkItemId": this.bookmarkData[i].id }; this.bookmarks.addBookmark(bookmarkItem); Var image_bookmarkRemove = query(".esriBookmarkRemoveImage")[i];
        var removeButton = domConstruct.toDom("");
        domConstruct.place(removeButton, image_bookmarkRemove, "after"); 
        query(".esriBookmarkRemoveImage").style({display: "none"}); } // On (this.bookmarks,"edit", lang.hitch(this, this.editBookmarkHandler));
    query(".btn_bookmarkRemove").on("click", lang.hitch(this, this.deleteBookmarkHandler));
}
Copy the code

conclusion

  • 1. Dojo DEFINE/Declare is not very familiar and needs to be studied
  • 2. It is necessary to understand the context reference of this in javascript
  • Dojo’s built-in data request method: XHR ()
  • The simple usage of lang.hitch() in Dojo
  • 5. Distinguish between DOM objects and jquery objects http://www.jquerycn.cn/a_4561
  • Dojo.on (
  • Dojo.query () usage