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

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

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

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

 define(["dojo/_base/declare","esri/layers/tiled"], function(declare){

 return declare(esri.layers.TiledMapServiceLayer, {

         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" : 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}

             ]

           });

           this.loaded = true;

           this.onLoad(this);

         },

         getTileUrl: function(level, row, col) {

           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";

         }

       });

       });

第二个文件是  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>

好了，可以看到图了

ArcGis Javascript API (V3.6)加载天地图的更多相关文章

  1. 使用ArcGIS JavaScript API 3.18 加载天地图

    对于中国开发者在创建GIS应用的时候,往往比较头疼的是底图资源的缺乏.其实国家测绘地信局就提供一个很好的免费资源:天地图.使用ArcGIS API的开发人员可以直接利用该资源作为地图应用的底图. Ar ...

  2. arcgis api for javascipt 加载天地图、百度地图

    写在前面的话: 1.百度地图是自己定义的坐标系统,wkid=102100.百度地图数据是加密的产物.下文将附上百度坐标与WGS84,谷歌等坐标系统转换方法(地理-地理),此方法并未亲测,据说准 2.百 ...

  3. ArcGIS API for Javascript 加载天地图（经纬度投影）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. ArcGIS API for Javascript 加载天地图（墨卡托投影）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 【ArcGis for javascript从零开始】之一 ArcGis加载天地图

    最近做项目需要用到ArcGis来进行数据展示和数据分析.以前从来没有接触过与Gis有关的东西,一切需要从头开始学.没有时间从头系统地学习了,只能用到哪个学习哪里了,本系列只是对学习的路径进行记录.Ar ...

  6. ArcGIS Javascript API 加载高德在线地图扩展

    利用ArcGIS JavaScript API加载高德在线地图的扩展 /** * Created by WanderGIS on 2015/7/15. */ define(["dojo/_b ...

  7. arcgis api 4.x for js 结合 react 入门开发系列react全家桶实现加载天地图（附源码下载）

    基于两篇react+arcgis的文章介绍,相信大家也能体会两者的开发区别了.在“初探篇”中作者也讲述了自己的选择,故废话不多说,本篇带大家体验在@arcgis/webpack-plugin环境下,使 ...

  8. 18 ArcGIS API for JavaScript4.X 系列加载天地图（经纬度）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. （转）Arcgis for js加载天地图

    http://blog.csdn.net/gisshixisheng/article/details/44494715 综述:本节讲述的是用Arcgis for js加载天地图的切片资源. 天地图的切 ...

随机推荐

  1. KMP_Best Reward

    大意:把一个字符串分成两串,假如一个字符串是回文串就可以加上它的VALUE,否则它的VALUE为0: KMP的特点是可以求出前缀与后面的字符串是否匹配, 注意回文串的特点,所以当我们把回文串反转的时候 ...

  2. eclipse 自动 注释

    在使用Eclipse 编写Java代码时,自动生成的注释信息都是按照预先设置好的格式生成的. 修改作者.日期注释格式:打开Windows->Preferences->Java->Co ...

  3. Unity bundle的制作和使用

    原地址:http://unity3d.9ria.com/?p=2863 Unity有个很好的功能,大致是很多专注于PC的engine没有提供的(因为没有必要),就是能加载主包外的资源,这个主包外的资源 ...

  4. POJ 2752 Seek the Name, Seek the Fame （KMP的next函数，求前缀和后缀的匹配长度）

    给一个字符串S,求出所有前缀,使得这个前缀也正好是S的后缀.升序输出所有情况前缀的长度.KMP中的next[i]的意义就是:前面长度为i的子串的前缀和后缀的最大匹配长度.明白了next[i],那么这道 ...

  5. H5+ and mui学习记录

    基础 1.H5+ 定义实现了一些调用原生方法的对象 2.其他的原生方法可以通过Native.js调用 webview 3.webview是调用原生界面的H5+对象 4.单个webview只承载单个页面 ...

  6. mysql之触发器

    触发器     MySQL语句在需要时被执行,存储过程也是如此.但是,如果你想要某条语句(或某些语句)在事件发生时自动执行,怎么办呢?例如:每当增加一个顾客到某个数据库表时,都检查其电话号码格式是否正 ...

  7. Spring中RedirectAttributes对象重定向传参

    Spring3中的FlashAttribute 为 了防止用户刷新重复提交,save操作之后一般会redirect到另一个页面,同时带点操作成功的提示信息.因为是Redirect,Request里 的 ...

  8. 创建DB2数据库时报错--SQL1052N 数据库路径不存在(Windows)(转载)

    用DB2 v9.7新建数据库的时候,默认路径为:D:\ 把缺省路径“写的是D:\XXX(此目录存在),新建时提示如下:SQL1052N 数据库路径 "D:\XXX" 不存在.如下: ...

  9. 当C++学到第20天的时候我崩溃了（找回刚开始的激情）

    首先声明,我是个使用多语言(ASM/C/C++/Java/Perl)的人,主要使用C++和Java所以我认为我的意见还算中肯.那些否定C++的人,你们是否了解————Borland鼓吹Delphi如何 ...

  10. Spring框架学习之第9节

    aop编程 aop(aspect oriented programming)面向切面(方面)编程,是所有对象或者是一类对象编程,核心是(在不增加代码的基础上,还增加新功能) 汇编(伪机器指令 mov ...