Arcgis for JS load day map

Summary: This section is about using ArcGIS for JS to load a tiled resource for a world map.

A tiled map of the day map can be loaded via Esri.layers.TiledMapServiceLayer, where it is encapsulated in a certain package, as follows:

1. Slice line Drawing--tdtlayer.js

Define (["Dojo/_base/declare", "esri/layers/tiled"], function (DECLARE) {return declare (Esri.layers.TiledMapS Ervicelayer, {constructor:function () {this.spatialreference = new ESRI.                Spatialreference ({wkid:4326});                This.initialextent = (this.fullextent = new Esri.geometry.Extent ( -180.0, -90.0, 180.0, 90.0, this.spatialreference));                    This.tileinfo = new Esri.layers.TileInfo ({"Rows": "cols": 256,                        "CompressionQuality": 0, "origin": {"X":-180,                    "Y": "spatialreference": {"Wkid": 4326 }, "LODs": [{"Level": 2, "Resolution": 0.3515625, ' scale ': 14774879            6.52937502}, {"Level": 3, "Resolution": 0.17578125, "scale": 73874398.264687508},            {' Level ': 4, ' resolution ': 0.087890625, ' scale ': 36937199.132343754}, {' Level ': 5, ' Resolution ": 0.0439453125," scale ": 18468599.566171877}, {" Level ": 6," Resolution ": 0.02197265625 , ' scale ': 9234299.7830859385}, {' Level ': 7, ' resolution ': 0.010986328125, ' scale ': 4617149.89154                        29693}, {"Level": 8, "Resolution": 0.0054931640625, "scale": 2308574.9457714846}, {' Level ': 9, ' resolution ': 0.00274658203125, ' scale ': 1154287.4728857423}, {' Level ': 10 , "Resolution": 0.001373291015625, "scale": 577143.73644287116}, {"Level": one, "Resolution": 0.00 06866455078125, "scale": 288571.86822143558}, {"Level": "Resolution": 0.00034332275390625, "s Cale ": 144285.93411071779}, {" level ": +," Resolution ": 0.000171661376953125," scale ": 72142.9670             55358895},           {"Level": +, "Resolution": 8.58306884765625e-005, "scale": 36071.483527679447}, {"Le Vel ": Resolution": 4.291534423828125e-005, "scale": 18035.741763839724}, {"level": +, "Reso Lution ": 2.1457672119140625e-005," scale ": 9017.8708819198619}, {" level ": +," Resolution ": 1.072 8836059570313e-005, ' scale ': 4508.9354409599309}, {"Level": 5.3644180297851563e, "Resolution":                -006, "scale": 2254.4677204799655}]});                This.loaded = true;            This.onload (this); }, Gettileurl:function (level, row, col) {return "http://t" + col% 8 + ". Tianditu.cn/vec_c/wm Ts? service=wmts&request=gettile&version=1.0.0&layer=vec&style=default&tilematrixset=c&            Tilematrix= "+ level +" &tilerow= "+ row +" &tilecol= "+ col +" &format=tiles ";    }        }); });

2. Slice Callout--tdtannolayer.js

Define (["Dojo/_base/declare", "esri/layers/tiled"], function (DECLARE) {return declare (Esri.layers.TiledMapS Ervicelayer, {constructor:function () {this.spatialreference = new ESRI.                Spatialreference ({wkid:4326});                This.initialextent = (this.fullextent = new Esri.geometry.Extent ( -180.0, -90.0, 180.0, 90.0, this.spatialreference));                    This.tileinfo = new Esri.layers.TileInfo ({"Rows": "cols": 256,                        "CompressionQuality": 0, "origin": {"X":-180,                    "Y": "spatialreference": {"Wkid": 4326 }, "LODs": [{"Level": 2, "Resolution": 0.3515625, ' scale ': 14774879            6.52937502}, {"Level": 3, "Resolution": 0.17578125, "scale": 73874398.264687508},            {' Level ': 4, ' resolution ': 0.087890625, ' scale ': 36937199.132343754}, {' Level ': 5, ' Resolution ": 0.0439453125," scale ": 18468599.566171877}, {" Level ": 6," Resolution ": 0.02197265625 , ' scale ': 9234299.7830859385}, {' Level ': 7, ' resolution ': 0.010986328125, ' scale ': 4617149.89154                        29693}, {"Level": 8, "Resolution": 0.0054931640625, "scale": 2308574.9457714846}, {' Level ': 9, ' resolution ': 0.00274658203125, ' scale ': 1154287.4728857423}, {' Level ': 10 , "Resolution": 0.001373291015625, "scale": 577143.73644287116}, {"Level": one, "Resolution": 0.00 06866455078125, "scale": 288571.86822143558}, {"Level": "Resolution": 0.00034332275390625, "s Cale ": 144285.93411071779}, {" level ": +," Resolution ": 0.000171661376953125," scale ": 72142.9670             55358895},           {"Level": +, "Resolution": 8.58306884765625e-005, "scale": 36071.483527679447}, {"Le Vel ": Resolution": 4.291534423828125e-005, "scale": 18035.741763839724}, {"level": +, "Reso Lution ": 2.1457672119140625e-005," scale ": 9017.8708819198619}, {" level ": +," Resolution ": 1.072 8836059570313e-005, ' scale ': 4508.9354409599309}, {"Level": 5.3644180297851563e, "Resolution":                -006, "scale": 2254.4677204799655}]});                This.loaded = true;            This.onload (this); }, Gettileurl:function (level, row, col) {return "http://t" + row% 8 + ". Tianditu.cn/cva_c/wm Ts? service=wmts&request=gettile&version=1.0.0&layer=cva&style=default&tilematrixset=c&            Tilematrix= "+ level +" &tilerow= "+ row +" &tilecol= "+ col +" &format=tiles ";    }        }); });

After the package is ready to be called on the page, the call will need to import these custom layers, the import method is:

    <script type= "Text/javascript" >        dojoconfig = {            parseonload:true,            packages: [{                name: ' Tdlib ',                Location:this.location.pathname.replace (/\/[^/]+$/, "") + "/js/tdlib"            }]        };    </script>    <script src= "Http://localhost/arcgis_js_api/library/3.9/3.9/init.js" ></script>    <script>        require (["Tdlib/tdtlayer",            "Tdlib/tdtannolayer"],        function (Tdtlayer,             Tdtannolayer        ) {            var basemap = new Tdtlayer ();            Map.addlayer (basemap);            var annolayer = new Tdtannolayer ();            Map.addlayer (Annolayer);        });    </script>

The full invocation page code is:

<! DOCTYPE html>
In the diagram, I've also added a feature layer that I've published natively with ArcGIS server, which is done as follows:


In this paper, more world map, such as image, please refer to: http://www.tianditu.com/guide/index.html




Arcgis for JS load day map