Closed laixiangran closed 8 years ago
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title></title> <link rel="stylesheet" `href="http://js.arcgis.com/3.15/dijit/themes/nihilo/nihilo.css">` <link rel="stylesheet" href="http://js.arcgis.com/3.15/esri/css/esri.css"> <style> html, body, #map { height: 100%; width: 100%; margin: 0; padding: 0; } body{ background-color: #fff; overflow:hidden; font-family: sans-serif; } #header { padding: 4px 15px 4px 0; background-color: #F2F2EC; color: #575757; font-size: 16pt; text-align: right; font-weight: bold; height:55px; } #subheader { color: #575757; font-size: small; padding: 5px 0 0 0; text-align: right; } #subheader a { color: #575757; } .ds { background: #000; overflow: hidden; position: absolute; z-index: 2; } #ds-h div { width: 100%; } #ds .o1 { filter: alpha(opacity=10); opacity: .1; } #ds .o2 { filter: alpha(opacity=8); opacity: .08; } #ds .o3 { filter: alpha(opacity=6); opacity: .06; } #ds .o4 { filter: alpha(opacity=4); opacity: .04; } #ds .o5 { filter: alpha(opacity=2); opacity: .02; } #ds .h1 { height: 1px; } #ds .h2 { height: 2px; } #ds .h3 { height: 3px; } #ds .h4 { height: 4px; } #ds .h5 { height: 5px; } </style> <script src="http://js.arcgis.com/3.15/"></script> <script> var map; require([ "esri/map", "esri/layers/WebTiledLayer","esri/geometry/Point", "esri/layers/TileInfo", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!" ], function( Map, WebTiledLayer,Point, TileInfo, parser ) { parser.parse(); //定义地图 map = new Map("map", { "spatialReference":{"wkid":4326}, center: [0.985, 29.822], zoom: 3 }); //定义瓦片结构 var tileInfo = new TileInfo({ "rows" : 256, "cols" : 256, "compressionQuality" : 0, "origin" : { "x" : -180, "y" : 90 }, "spatialReference" : { "wkid" : 4326 }, "lods" : [ {"level" : 2, "resolution" : 0.3515625, "scale" : 147748796.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.8915429693}, {"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" : 11, "resolution" : 0.0006866455078125, "scale" : 288571.86822143558}, {"level" : 12, "resolution" : 0.00034332275390625, "scale" : 144285.93411071779}, {"level" : 13, "resolution" : 0.000171661376953125, "scale" : 72142.967055358895}, {"level" : 14, "resolution" : 8.58306884765625e-005, "scale" : 36071.483527679447}, {"level" : 15, "resolution" : 4.291534423828125e-005, "scale" : 18035.741763839724}, {"level" : 16, "resolution" : 2.1457672119140625e-005, "scale" : 9017.8708819198619}, {"level" : 17, "resolution" : 1.0728836059570313e-005, "scale" : 4508.9354409599309}, {"level" : 18, "resolution" : 5.3644180297851563e-006, "scale" : 2254.4677204799655} ] }); //地图 var baseMap = new WebTiledLayer("http://${subDomain}.tianditu.com/DataServer?T=vec_c&X=${col}&Y=${row}&L=${level}", { "copyright": "Tianditu", "id": "Tianditu", "subDomains": ["t0", "t1", "t2"], "tileInfo":tileInfo }); //底图标注 var baseMapMarker = new WebTiledLayer("http://${subDomain}.tianditu.com/DataServer?T=cva_c&X=${col}&Y=${row}&L=${level}", { "copyright": "Tianditu", "id": "Tianditu2", "subDomains": ["t0", "t1", "t2"], "tileInfo":tileInfo }); map.addLayer(baseMap); map.addLayer(baseMapMarker); //定位到北京 map.centerAndZoom(new esri.geometry.Point({"x": 116.39, "y": 39.91, "spatialReference": {"wkid": 4326 } }),14); }); </script> </head> <body class="nihilo"> <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width: 100%; height: 100%; margin: 0;"> <div id="map" class="shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"> <!-- drop shadow divs --> <div id="ds"> <div id="ds-h"> <div class="ds h1 o1"></div> <div class="ds h2 o2"></div> <div class="ds h3 o3"></div> <div class="ds h4 o4"></div> <div class="ds h5 o5"></div> </div> </div> <!-- end drop shadow divs --> </div> </div> </body> </html>
When I created a JSFiddle with your code, it seemed to work. (I see tiles showing up.)
A better place to post such questions would be GeoNet. A lot more people will see it there.
Thank you for your suggestions.