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. JavaScript 语言基础知识点总结（思维导图）

    JavaScript 数组 JavaScript 函数基础 Javascript 运算符 JavaScript 流程控制 JavaScript 正则表达式 JavaScript 字符串函数 JavaS ...

  2. redis集群部署之codis 维护脚本

    搞了几天redis cluster codis 的部署安装,测试,架构优化,配合研发应用整合,这里记一些心得! 背景需求: 之前多个业务都在应用到redis库,各业务独立占用主从两台服务器,硬件资源利 ...

  3. 实现WMSservice的时候，出现边缘的点或icon被切断的情况

    可以通过为实际查询的boundary加一个buffer,使查询的范围比指定的大一点点,这样就会使tile之间在查询的时候有一定的重叠. 如:Geometry queryBoundary = JTS.t ...

  4. SQL Server 2008连接字符串写法大全{转}

    一..NET Framework Data Provider for SQL Server 类型:.NET Framework类库使用:System.Data.SqlClient.SqlConnect ...

  5. C# 对委托的BeginInvoke,EndInvoke 及Control 的BeginInvoke,EndInvoke 的理解

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  6. Sqli-labs less 42

    Less-42 Update更新数据后,经过mysql_real_escape_string()处理后的数据,存入到数据库当中后不会发生变化.在select调用的时候才能发挥作用.所以不用考虑在更新密 ...

  7. codeforces 430A Points and Segments (easy)（理解能力有待提高……）

    题目 //终于看懂题目了,,,, //一条线段里面不是每个坐标上都有要染色的点,所以为了满足条件,只能考虑那些给出坐标的点 //所以就要排序一下了,不能直接根据坐标0 1 0 1…… #include ...

  8. CPLD VS FPGA

    FPGA(Field-Programmable Gate Array),即现场可编程门阵列,它是在PAL.GAL.CPLD等可编程器件的基础上进一步发展的产物.它是作为专用集成电路(ASIC)领域中的 ...

  9. C# 匿名方法 1027

    class Program { static void Main(string[] args) { SorAndShowFiles("Sorted by name", delega ...

  10. Jquery+Ajax+php学习笔记

    昨天研究ajax,想作个登陆框,无刷新就把用户名密码提交给后台php程序,验证后发回. 几经琢磨 总算出来前台代码: <script src="./javascript/jquery- ...