ArcGIS API for JS shared dry Series bis custom navigation control style style

ArcGIS API for JS default navigation control style style such as:

Such a style can not be said bad, each has a hobby, aesthetic, here is not the focus, here is the focus is how to customize a set of their own style of liking it; customize a Navigationcontrol control class to achieve the results such as:

Ideas are as follows: In fact, in the online reference world map or Google Maps navigation style style, download their picture template, and then create their own div to achieve the zoom translation of the image, full map, left and right to pan and so on map navigation function;

The navigation images are as follows:

Call Function:

    Show Map navigation bar showslider:function (fullextent, config) {config.targetid = This.mapdivid;        var toolBar = new Dcimapnavigationtoolbar (config);        var _map = This.esrimap;        /* Map up */toolbar.onmoveup = function () {_map.panup ();};        /* Map Move Down */Toolbar.onmovedown = function () {_map.pandown ();};        /* Map Left Shift */toolbar.onmoveleft = function () {_map.panleft ();};        /* Map Right Shift */toolbar.onmoveright = function () {_map.panright ();};        /* Map Full image */Toolbar.onfullmap = function () {_map.setextent (fullextent);};        /* Map magnification */toolbar.onzoomin = function () {_map.setlevel (Toolbar.getvalue ());};        /* Map Zoom Out */toolbar.onzoomout = function () {_map.setlevel (Toolbar.getvalue ());};        /* Slide Bar sliding end */toolbar.onsliderend = function () {_map.setlevel (Toolbar.getvalue ());}; /* Map level marker-street */toolbar.onmark_street = function () {_map.setlevel (config.marksShow.streetLevel);        };        /* Map level marker-City */toolbar.onmark_city = function () {_map.setlevel (config.marksShow.cityLevel);};        /* Map level marker-Provincial */toolbar.onmark_province = function () {_map.setlevel (config.marksShow.provinceLevel);};        /* Map level Flag-country */toolbar.onmark_country = function () {_map.setlevel (config.marksShow.countryLevel);};        Toolbar.create ();        Dojo.connect (_map, "Onzoomend", zoomend);        Function Zoomend (extent, zoomfactor, anchor, level) {Toolbar.setvalue (level);    } return ToolBar; },

Parametersfullextent, config represents the full extent of the map and the map configuration parameters respectively,Dcimapnavigationtoolbar is a custom navigation control class

Config specific value:

/*--------------------------------Map Initial information configuration--------------------------------*/function Dcimapconfig () {}        Dcimapconfig.mapinitparams = {fullextent: {//full extent xmin:370108.658079872, ymin:2500959.4242701,  xmax:461986.148263811, ymax:2550949.3398943}, Extent: {//Initialize range xmin:395735.547992658, ymin: 2507003.85390929, xmax:439075.764838622, ymax:2548492.68036878}, Spatialreference: {wkid: 2435}, LODs: [{' Level ': 0, ' resolution ': 76.4371798535264, ' scale ': 288895.85}, {' Level ': 1, ' res Olution ": 38.2185912496825," scale ": 144447.93}, {' Level ': 2, ' resolution ': 19.1092943019219, ' scale ': 72223.96} , {"Level": 3, "Resolution": 9.55464715096097, ' scale ': 36111.98}, {"Level": 4, "Resolution": 4.777323575 48048, "scale": 18055.99}, {' Level ': 5, ' resolution ': 2.38866311065955, ' scale ': 9028}]}/* navigation bar configuration Parameters */dcimapcon Fig.sliderconfig = {targetid: "Mapdiv", minvalue:0,//1 maxvalue:5,//20 startvalue:0,//12 toolbarcss: [" ToolBar "," Toolbar_button "," t Oolbar_slider "," Toolbar_mark "], Marksshow: {countrylevel:null, provincelevel:null, Citylevel: NULL, Streetlevel:null}};/* map call, type for map types, 0 for wmts,1 for mapserver slice */dcimapconfig.eagle = {Url: "http://localhost /tileservice/sdmap ", Labelurl:" ", type:0};D cimapconfig.vecmap = {Url:" Http://localhost/TileService/SDMap ", Labelurl : "", type:0};D cimapconfig.imgmap = {Url: "Http://172.26.99.180:6080/arcgis/rest/services/XZQJ/MapServer", Labelurl: "", type:1};D cimapconfig.termap = {Url: "http://172.26.99.161/TileService/Raster2008", Labelurl: "/http/ 172.26.99.161/tileservice/ztmaprasterlable ", type:0};

Specific tonavigation control class Download: Control.js
Style CSS Download: mapcss

GIS Works show Address: Baidu Search: The home of GIS (https://shop116521643.taobao.com/shop/view_shop.htm);

GIS Baidu Paste: GIS Development Alliance;

GIS Graduation Design & Project Undertaking group: 238339408

ArcGIS API for JS shared dry Series bis custom navigation control style style