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. Maven学习总结（7）——eclipse中使用Maven创建Web项目

    Maven学习总结(七)--eclipse中使用Maven创建Web项目 一.创建Web项目 1.1 选择建立Maven Project 选择File -> New ->Project,如 ...

  2. poj 3621最优比例生成环（01分数规划问题）

    /* 和求最小生成树差不多 转载思路:http://www.cnblogs.com/wally/p/3228171.html 思路:之前做过最小比率生成树,也是属于0/1整数划分问题,这次碰到这道最优 ...

  3. hdu_1039_Easier Done Than Said_201311051511

    Easier Done Than Said? Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/O ...

  4. MVC.Net：添加第三方类库的bundles引用

    以jQuery Mobile为例.当我们用nuget添加jQuery Mobile的package后,需要在项目中引用jQuery Mobile.传统的做法是在html页面上添加 <link h ...

  5. Equals和==的差别

    java中的数据类型.可分为两类:  1.基本数据类型 包含:byte,short,char,int,long,float,double,boolean .基础数据类型比較大小的时候使用的是双等号(= ...

  6. linux 搭建https server （apache）

    一.  安装准备 1.    安装Openssl  要使Apache支持SSL,须要首先安装Openssl支持.这里使用的是openssl-0.9.8k.tar.gz    下载Openssl:htt ...

  7. VC UI界面库大集合

    Guitoolkit http://www.beyondata.com/pwc.html The Ultimate Toolbox http://www.codeproject.com/KB/MFC/ ...

  8. CF799B T-shirt buying

    题目大意 有一些衣服,它们有价格.正面的颜色和反面的颜色.现有一群顾客按顺序来买存在某颜色且价格最低的衣服(不存在则不会买),求每个顾客花了多少钱. 思路 #include <cstdio> ...

  9. C++虚函数默认实参的注意事项

    我们都知道当成员函数是虚函数的时候,函数调用取决于调用函数的对象的类型而不是指针或者应用的类型.这就是C++中的多态. 那么一个虚函数的实参的缺省值是什么呢?例如如下代码: #include < ...

  10. hdu4738Caocao's Bridges

    什么?有人要炸我的桥?!D飞他(心疼周瑜大都督) 这个就是求割边/桥了. #include<cstdio> #include<iostream> #include<cst ...