ArcGis Javascript API (V3.6)加载天地图

Arcgis的Javascript api开发很活跃，不知不觉都发布了3.6的版本了。该版本基于dojo 1.8.3开发的。

从dojo 1.8开始，AMD机制用得越来越多了，而且require([""],...)成为了推荐的写法，原来的dojo.require已不推荐使用了。

但是当我用 define(["esri/layers/TiledServiceLayer",....)这种语法来修改之前网上放出的写法时，发现不行，于是有了下面折中的写法。下面贴代码

 

第一个文件 TDLayer.js ,是用来加载天地图的底图的。

 

 1 define(["dojo/_base/declare","esri/layers/tiled"], function(declare){
 2 return declare(esri.layers.TiledMapServiceLayer, {
 3         constructor: function() {
 4           this.spatialReference = new esri.SpatialReference({ wkid:4326 });
 5           this.initialExtent = (this.fullExtent = new esri.geometry.Extent(-180.0, -90.0, 180.0, 90.0, this.spatialReference));
 6  
 7           this.tileInfo = new esri.layers.TileInfo({
 8             "rows" : 256,
 9             "cols" : 256,
10             "compressionQuality" : 0,
11             "origin" : {
12               "x" : -180,
13               "y" : 90
14             },
15             "spatialReference" : {
16               "wkid" : 4326
17             },
18             "lods" : [
19               {"level" : 2, "resolution" : 0.3515625, "scale" : 147748796.52937502},
20               {"level" : 3, "resolution" : 0.17578125, "scale" : 73874398.264687508},
21               {"level" : 4, "resolution" : 0.087890625, "scale" : 36937199.132343754},
22               {"level" : 5, "resolution" : 0.0439453125, "scale" : 18468599.566171877},
23               {"level" : 6, "resolution" : 0.02197265625, "scale" : 9234299.7830859385},
24               {"level" : 7, "resolution" : 0.010986328125, "scale" : 4617149.8915429693},
25               {"level" : 8, "resolution" : 0.0054931640625, "scale" : 2308574.9457714846},
26               {"level" : 9, "resolution" : 0.00274658203125, "scale" : 1154287.4728857423},
27               {"level" : 10, "resolution" : 0.001373291015625, "scale" : 577143.73644287116},
28               {"level" : 11, "resolution" : 0.0006866455078125, "scale" : 288571.86822143558},
29               {"level" : 12, "resolution" : 0.00034332275390625, "scale" : 144285.93411071779},
30               {"level" : 13, "resolution" : 0.000171661376953125, "scale" : 72142.967055358895},
31               {"level" : 14, "resolution" : 8.58306884765625e-005, "scale" : 36071.483527679447},
32               {"level" : 15, "resolution" : 4.291534423828125e-005, "scale" : 18035.741763839724},
33               {"level" : 16, "resolution" : 2.1457672119140625e-005, "scale" : 9017.8708819198619},
34               {"level" : 17, "resolution" : 1.0728836059570313e-005, "scale" : 4508.9354409599309},
35               {"level" : 18, "resolution" : 5.3644180297851563e-006, "scale" : 2254.4677204799655}
36             ]
37           });
38  
39           this.loaded = true;
40           this.onLoad(this);
41         },
42  
43         getTileUrl: function(level, row, col) {
44         
45           return "http://t" + col%8 + ".tianditu.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&TILEMATRIX="+level+"&TILEROW="+row+"&TILECOL="+col+"&FORMAT=tiles";
46  
47         }
48       });
49       });


 第二个文件是  TDAnnoLayer.cs 只需要把第一个文件中的 getTileUrl方法修改下就可以了，比例尺什么的都是一样的，这个是注释图层

 

getTileUrl: function(level, row, col) {
          return "http://t" + row%8 + ".tianditu.cn/cva_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&TILEMATRIX="+level+"&TILEROW="+row+"&TILECOL="+col+"&FORMAT=tiles";
 
        }


上面的注释是中文的，也可以换用英文的注释，可以到天地图的网站上去查找。

 

将上面两个文件存放在 web根目录下的/js/tdlib 下面，然后我们写个示例来调用下看看

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>TianDi Map</title>
    
    <script type="text/javascript">
        dojoConfig = {
            parseOnLoad: true,
            packages: [{
                name: 'tdlib',
                location: "/js/tdlib"
            }]
        };
    </script>
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dijit/themes/tundra/tundra.css">
    
    <script src="http://js.arcgis.com/3.6/"></script>
    

    <script type="text/javascript">
    var map;
    require(["esri/map", "tdlib/TDTLayer","tdlib/TDTAnnoLayer","esri/geometry/Point","dijit/form/Button","dojo/domReady!"], 
    function(Map,TDTLayer,TDTAnnoLayer,Point,Button) {
        map=new Map("mapDiv",{ logo:false});
        var basemap = new TDTLayer();
        map.addLayer(basemap);
        var annolayer=  new TDTAnnoLayer();
        map.addLayer(annolayer);
        
        map.centerAndZoom(new Point({"x": 120.200018, "y": 30.209999, "spatialReference": {"wkid": 4326 } }),14);
        
        var button = new Button({
            label: "北京",
            onClick: function(){
                map.centerAt(new esri.geometry.Point(116.3,39.9, new esri.SpatialReference({ wkid: 4326 })));
                }}
            , "ToBeijing");
      
      });
    </script>
  </head>
  <body class="tundra">
    <button id="ToBeijing" type="button" ></button><br />
    <div id="mapDiv" style="width:1000px; height:500px; border:1px solid #000;"></div>
  </body>
</html>


好了，可以看到图了

posted @ 2013-08-28 15:37  两仪清风  阅读(7358)  评论(0)  编辑  收藏  举报