Custom mouse styles in different states of Arcgis for JavaScript

As the saying goes: the heart of beauty, people have it. Yes, yes, even if I was just a map, I wanted my map to look good. In this article, let's talk about how to customize the mouse style under ArcGIS for JavaScript.

First, say a few states. 1. Move the mouse over the map, 2, hold down the left mouse button to drag and drop the mouse, 3, pull the box to enlarge the map; 4, pull the box to reduce the map.

When the mouse is above the map;

Drag and drop the map while holding the mouse;

To enlarge the map when the frame is;

When the drop-box shrinks the map.

Next, talk about my idea of realization.

The first state, which appears when the map load is complete, is code:

Map.on ("Load", function () {     map.setmapcursor ("url (cursor/default.cur), Auto");});

The second state, when the map is dragged, you need to listen to map Mouse-drag-start and Mouse-drag-end events separately, the code is as follows:

Map.on ("Mouse-drag-start", function () {    map.setmapcursor ("url (cursor/pointer.cur), Auto");}); Map.on ("Mouse-drag-end", function () {    map.setmapcursor ("url (cursor/default.cur), Auto");});

In the third and fourth States, you need to define navigation, as follows:

var navtoolbar = new Esri.toolbars.Navigation (map);

These two states are triggered when the button is clicked and the code is as follows:

            On (Dom.byid ("zoom_in"), "click", Function (event) {//Pull box to enlarge                map.setmapcursor ("url (cursor/zoom-in.cur), Auto");                Map.on ("Mouse-drag-start", function () {                    map.setmapcursor ("url (cursor/zoom-in.cur), Auto");                });                Navtoolbar.activate (Esri.toolbars.Navigation.ZOOM_IN);            });            On (Dom.byid ("Zoom_out"), "click", Function (event) {//Pull box to zoom                out map.setmapcursor ("url (cursor/zoom-out.cur), Auto");                Map.on ("Mouse-drag-start", function () {                    map.setmapcursor ("url (cursor/zoom-out.cur), Auto");                });                Navtoolbar.activate (Esri.toolbars.Navigation.ZOOM_OUT);            });

Description:When both states are triggered, you also set the state at which the Mouse-drag-start is triggered.

Finally, everything returns to its original state after the operation, and the code is as follows:

            Navtoolbar.on ("Extent-history-change", function () {                navtoolbar.deactivate ();                Map.on ("Mouse-drag-start", function () {                    map.setmapcursor ("url (cursor/pointer.cur), Auto");                });            

Thus, in the above four states of the mouse State is controlled by our own style, the following is the complete code:

<! DOCTYPE html>
Source Download





Custom mouse styles in different states of Arcgis for JavaScript