http://blog.csdn.net/gisshixisheng/article/details/44494715

综述：本节讲述的是用Arcgis for js加载天地图的切片资源。

天地图的切片地图可以通过esri.layers.TiledMapServiceLayer来加载，在此将之进行了一定的封装，如下：

1、切片线划图——TDTLayer.js

  1. define(["dojo/_base/declare",
  2. "esri/layers/tiled"],
  3. function (declare) {
  4. return declare(esri.layers.TiledMapServiceLayer, {
  5. constructor: function () {
  6. this.spatialReference = new esri.SpatialReference({ wkid: 4326 });
  7. this.initialExtent = (this.fullExtent = new esri.geometry.Extent(-180.0, -90.0, 180.0, 90.0, this.spatialReference));
  8. this.tileInfo = new esri.layers.TileInfo({
  9. "rows": 256,
  10. "cols": 256,
  11. "compressionQuality": 0,
  12. "origin": {
  13. "x": -180,
  14. "y": 90
  15. },
  16. "spatialReference": {
  17. "wkid": 4326
  18. },
  19. "lods": [
  20. { "level": 2, "resolution": 0.3515625, "scale": 147748796.52937502 },
  21. { "level": 3, "resolution": 0.17578125, "scale": 73874398.264687508 },
  22. { "level": 4, "resolution": 0.087890625, "scale": 36937199.132343754 },
  23. { "level": 5, "resolution": 0.0439453125, "scale": 18468599.566171877 },
  24. { "level": 6, "resolution": 0.02197265625, "scale": 9234299.7830859385 },
  25. { "level": 7, "resolution": 0.010986328125, "scale": 4617149.8915429693 },
  26. { "level": 8, "resolution": 0.0054931640625, "scale": 2308574.9457714846 },
  27. { "level": 9, "resolution": 0.00274658203125, "scale": 1154287.4728857423 },
  28. { "level": 10, "resolution": 0.001373291015625, "scale": 577143.73644287116 },
  29. { "level": 11, "resolution": 0.0006866455078125, "scale": 288571.86822143558 },
  30. { "level": 12, "resolution": 0.00034332275390625, "scale": 144285.93411071779 },
  31. { "level": 13, "resolution": 0.000171661376953125, "scale": 72142.967055358895 },
  32. { "level": 14, "resolution": 8.58306884765625e-005, "scale": 36071.483527679447 },
  33. { "level": 15, "resolution": 4.291534423828125e-005, "scale": 18035.741763839724 },
  34. { "level": 16, "resolution": 2.1457672119140625e-005, "scale": 9017.8708819198619 },
  35. { "level": 17, "resolution": 1.0728836059570313e-005, "scale": 4508.9354409599309 },
  36. { "level": 18, "resolution": 5.3644180297851563e-006, "scale": 2254.4677204799655 }
  37. ]
  38. });
  39. this.loaded = true;
  40. this.onLoad(this);
  41. },
  42. getTileUrl: function (level, row, col) {
  43. 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";
  44. }
  45. });
  46. });

2、切片标注——TDTAnnoLayer.js

  1. define(["dojo/_base/declare",
  2. "esri/layers/tiled"],
  3. function (declare) {
  4. return declare(esri.layers.TiledMapServiceLayer, {
  5. constructor: function () {
  6. this.spatialReference = new esri.SpatialReference({ wkid: 4326 });
  7. this.initialExtent = (this.fullExtent = new esri.geometry.Extent(-180.0, -90.0, 180.0, 90.0, this.spatialReference));
  8. this.tileInfo = new esri.layers.TileInfo({
  9. "rows": 256,
  10. "cols": 256,
  11. "compressionQuality": 0,
  12. "origin": {
  13. "x": -180,
  14. "y": 90
  15. },
  16. "spatialReference": {
  17. "wkid": 4326
  18. },
  19. "lods": [
  20. { "level": 2, "resolution": 0.3515625, "scale": 147748796.52937502 },
  21. { "level": 3, "resolution": 0.17578125, "scale": 73874398.264687508 },
  22. { "level": 4, "resolution": 0.087890625, "scale": 36937199.132343754 },
  23. { "level": 5, "resolution": 0.0439453125, "scale": 18468599.566171877 },
  24. { "level": 6, "resolution": 0.02197265625, "scale": 9234299.7830859385 },
  25. { "level": 7, "resolution": 0.010986328125, "scale": 4617149.8915429693 },
  26. { "level": 8, "resolution": 0.0054931640625, "scale": 2308574.9457714846 },
  27. { "level": 9, "resolution": 0.00274658203125, "scale": 1154287.4728857423 },
  28. { "level": 10, "resolution": 0.001373291015625, "scale": 577143.73644287116 },
  29. { "level": 11, "resolution": 0.0006866455078125, "scale": 288571.86822143558 },
  30. { "level": 12, "resolution": 0.00034332275390625, "scale": 144285.93411071779 },
  31. { "level": 13, "resolution": 0.000171661376953125, "scale": 72142.967055358895 },
  32. { "level": 14, "resolution": 8.58306884765625e-005, "scale": 36071.483527679447 },
  33. { "level": 15, "resolution": 4.291534423828125e-005, "scale": 18035.741763839724 },
  34. { "level": 16, "resolution": 2.1457672119140625e-005, "scale": 9017.8708819198619 },
  35. { "level": 17, "resolution": 1.0728836059570313e-005, "scale": 4508.9354409599309 },
  36. { "level": 18, "resolution": 5.3644180297851563e-006, "scale": 2254.4677204799655 }
  37. ]
  38. });
  39. this.loaded = true;
  40. this.onLoad(this);
  41. },
  42. getTileUrl: function (level, row, col) {
  43. 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";
  44. }
  45. });
  46. });

封装好之后就可以在页面调用了，调用的时候需要导入这些自定义的图层，导入方式为：

  1. <script type="text/javascript">
  2. dojoConfig = {
  3. parseOnLoad: true,
  4. packages: [{
  5. name: 'tdlib',
  6. location: this.location.pathname.replace(/\/[^/]+$/, "")+"/js/tdlib"
  7. }]
  8. };
  9. </script>
  10. <script src="http://localhost/arcgis_js_api/library/3.9/3.9/init.js"></script>
  11. <script>
  12. require(["tdlib/TDTLayer",
  13. "tdlib/TDTAnnoLayer"],
  14. function (TDTLayer,
  15. TDTAnnoLayer
  16. ){
  17. var basemap = new TDTLayer();
  18. map.addLayer(basemap);
  19. var annolayer = new TDTAnnoLayer();
  20. map.addLayer(annolayer);
  21. });
  22. </script>

完整调用页面代码为：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>TianDi Map</title>
  6. <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.9/3.9/js/dojo/dijit/themes/tundra/tundra.css">
  7. <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.9/3.9/js/esri/css/esri.css">
  8. <style>
  9. html, body, #map {
  10. height: 100%;
  11. margin: 0;
  12. padding: 0;
  13. }
  14. </style>
  15. <script type="text/javascript">
  16. dojoConfig = {
  17. parseOnLoad: true,
  18. packages: [{
  19. name: 'tdlib',
  20. location: this.location.pathname.replace(/\/[^/]+$/, "")+"/js/tdlib"
  21. }]
  22. };
  23. </script>
  24. <script src="http://localhost/arcgis_js_api/library/3.9/3.9/init.js"></script>
  25. <script>
  26. var map;
  27. require(["esri/map",
  28. "tdlib/TDTLayer",
  29. "tdlib/TDTAnnoLayer",
  30. "esri/layers/FeatureLayer",
  31. "esri/geometry/Point",
  32. "esri/symbols/SimpleFillSymbol",
  33. "esri/symbols/SimpleLineSymbol",
  34. "dojo/_base/Color",
  35. "dojo/domReady!"],
  36. function (Map,
  37. TDTLayer,
  38. TDTAnnoLayer,
  39. FeatureLayer,
  40. Point,
  41. SimpleFillSymbol,
  42. SimpleLineSymbol,
  43. Color
  44. ){
  45. map = new Map("map", { logo: false });
  46. var basemap = new TDTLayer();
  47. map.addLayer(basemap);
  48. var annolayer = new TDTAnnoLayer();
  49. map.addLayer(annolayer);
  50. var pro = new FeatureLayer("http://localhost:6080/arcgis/rest/services/chinawgs84/MapServer/1");
  51. map.addLayer(pro);
  52. var pt = new Point(103.847, 36.0473);
  53. map.centerAndZoom(pt, 3);
  54. });
  55. </script>
  56. </head>
  57. <body>
  58. <div id="map"></div>
  59. </body>
  60. </html>

在图中，我还添加了一个我本机用Arcgis Server发布的特征层，完成后效果如下：

本文抛砖引玉，更多的天地图如影像等请参照：http://www.tianditu.com/guide/index.html

（转）Arcgis for js加载天地图的更多相关文章

  1. （转） Arcgis for js加载百度地图

    http://blog.csdn.net/gisshixisheng/article/details/44853709 概述: 在前面的文章里提到了Arcgis for js加载天地图,在本节,继续讲 ...

  2. Arcgis for js加载百度地图

    看转:https://blog.csdn.net/qq_41046162/article/details/80248281 通过学习了一段时间的arcgis for js,让我来讲一下如何在arcgi ...

  3. (转载）arcgis for js - 解决加载天地图和WMTS服务,WMTS服务不显示的问题,以及wmts服务密钥。

    1 arcgis加载天地图和wmts服务 arcgis for js加载天地图的例子网上有很多,这里先不写了,后期有空再贴代码,这里主要分析下WMTS服务为什么不显示,怎么解决. 条件:这里的WMTS ...

  4. （转）Openlayers 2.X加载天地图

    http://blog.csdn.net/gisshixisheng/article/details/44621923 概述: 在前面的章节,讲到了Arcgis for js加载天地图,在本节讲述如何 ...

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

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

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

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

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

    Arcgis的Javascript api开发很活跃,不知不觉都发布了3.6的版本了.该版本基于dojo 1.8.3开发的. 从dojo 1.8开始,AMD机制用得越来越多了,而且require([& ...

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

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

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

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

随机推荐

  1. 【BestCoder Round #93 1001】MG loves gold

    [题目链接]:http://acm.hdu.edu.cn/showproblem.php?pid=6019 [题意] 每次选择一段连续的段,使得这一段里面没有重复的元素; 问你最少选多少次; [题解] ...

  2. E. Rusty String

    E. Rusty String time limit per test 3 seconds memory limit per test 512 megabytes input standard inp ...

  3. springCloud学习-消息总线(Spring Cloud Bus)

    1.简介 Spring Cloud Bus 将分布式的节点用轻量的消息代理连接起来.它可以用于广播配置文件的更改或者服务之间的通讯,也可以用于监控.本文要讲述的是用Spring Cloud Bus实现 ...

  4. hdu_1213_How Many Tables_201403091126

    How Many Tables Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)T ...

  5. Qt移动应用开发（一）：适配不同的屏幕

    Qt移动应用开发(一):适配不同的屏幕 到眼下为止.Qt5.3已经出现非常长一段时间了.而且已经有一些应用使用Qt进行构建了.我自己也完毕了第一款使用Qt构建的手机游戏<吃药了>.那么接下 ...

  6. VMware Workstation 集群仲裁磁盘和数据共享磁盘的创建

    近期项目须要对SQL Server建立集群服务,多个SQL Server数据库建立集群服务,对外提供唯一的URL訪问地址.当主节点断电.断网后,通过心跳线将消息传递到备用节点.备用节点在3秒内接管数据 ...

  7. C# Path 有关于文件路径获取的问题 的方法

    string Current = Directory.GetCurrentDirectory();//获取当前根目录 //private string strFilePath = Applicatio ...

  8. poj 1840(五元三次方程组）

    Description Consider equations having the following form: a1x1 3+ a2x2 3+ a3x3 3+ a4x4 3+ a5x5 3=0 T ...

  9. UESTC--1253--阿里巴巴和n个大盗 (博弈)

     阿里巴巴和n个大盗 Time Limit: 1000MS   Memory Limit: 65535KB   64bit IO Format: %lld & %llu Submit St ...

  10. poj3041——最小点覆盖

    Bessie wants to navigate her spaceship through a dangerous asteroid field in the shape of an N x N g ...