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

ArcGIS JavaScript API最近新推出了3.18版本。所以下面示例代码将基于该版本。

<html>

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />

	<title>Test Map</title>

	<link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.18/3.18/dijit/themes/claro/claro.css" />

	<link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.18/3.18/esri/css/esri.css" />

	<style>

		html,

		body,

		#ui-map-view {

			margin: 0;

			padding: 0;

			width: 100%;

			height: 100%;

		}

	</style>

	<script src="http://localhost/arcgis_js_api/library/3.18/3.18/init.js"></script>

	<script>

var myMap

require([

  'dojo/_base/declare',

  'esri/layers/ArcGISTiledMapServiceLayer',

  'esri/layers/TiledMapServiceLayer',

  'esri/map',

  'esri/layers/TileInfo',

  'esri/layers/LOD',

  'esri/SpatialReference',

  'dojo/domReady!'

], function (declare, TileLayer, TiledMapServiceLayer, Map, TileInfo, LOD, SpatialReference) {

  declare('TDTLayer', TiledMapServiceLayer, {

    constructor: function () {

      this.spatialReference = new esri.SpatialReference({ wkid: 4490 })

      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': 4490

        },

        '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://t0.tianditu.com/DataServer?T=vec_c&X=' + col + '&Y=' + row + '&L=' + level

    }

  })

  myMap = new Map('ui-map-view', {

    center: [111.87, 23.57]

  })

  var tdt = new TDTLayer()

  myMap.addLayer(tdt)

})

    </script>

</head>

<body class="claro">

	<div id="ui-map-view"></div>

</body>

</html>

　　

　　

使用ArcGIS JavaScript API 3.18 加载天地图的更多相关文章

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  8. ArcGIS API for Silverlight 加载google地图

    原文:ArcGIS API for Silverlight 加载google地图 using System; using System.Net; using System.Windows; using ...

  9. ArcGIS API for Silverlight加载google地图（后续篇）

    原文:ArcGIS API for Silverlight加载google地图(后续篇) 之前在博客中(http://blog.csdn.net/taomanman/article/details/8 ...

随机推荐

  1. 实战MEF（3）：只导出类的成员

    通过前面两篇文章的介绍,相信各位会明白MEF中有不少实用价值.上一文中我们也讨论了导入与导出,对于导出导入,今天我们再深入一点点,嗯,只是深入一点点而已,不会很难的,请大家务必放心,如果大家觉得看文章 ...

  2. 数据结构与算法JavaScript (三) 链表

    我们可以看到在javascript概念中的队列与栈都是一种特殊的线性表的结构,也是一种比较简单的基于数组的顺序存储结构.由于javascript的解释器针对数组都做了直接的优化,不会存在在很多编程语言 ...

  3. WPF 后台读取样式文件

    ResourceDictionary dic = new ResourceDictionary { Source = new Uri("Styles.xaml",UriKind.R ...

  4. AOE网的关键路径的计算

    求关键路径,只需理解顶点(事件)和边(活动)各自的两个特征属性以及求法即可: Ø  先根据首结点的Ve(j)=0由前向后(正拓扑序列)计算各顶点的最早发生时间 Ø  再根据终结点的Vl(j)等于它的V ...

  5. Dijkstra算法优先队列实现与Bellman_Ford队列实现的理解

    /* Dijkstra算法用优先队列来实现,实现了每一条边最多遍历一次. 要知道,我们从队列头部找到的都是到 已经"建好树"的最短距离以及该节点编号, 并由该节点去更新 树根 到其 ...

  6. Bootstrap Metronic 学习记录（二）菜单栏

    1.简介 1)  .环境配置 2)  .提取页面 2).动态生成菜单(无限级别树) 2.系统环境配置 项目需要程序数据支撑,这里选择MVC5.0+EF6.0[SQLSERVER](不对MVC架构和SQ ...

  7. 【原创】开源Math.NET基础数学类库使用(02)矩阵向量计算

                   本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新  开源Math.NET基础数学类库使用总目录:[目录]开源Math.NET基础数学类库使用总目录 前言 ...

  8. 使用Ubuntu 12.04作为日常电脑环境

    搜狗输入法出来之后,我觉得有必要写一篇博客说明一下,如何使用Ubuntu作为日常的电脑系统.我使用的Ubuntu版本是12.04,没有使用Ubuntukylin,因为的电脑比较老,使用那个版本,电脑有 ...

  9. Android随笔之——模拟按键操作的几种方式

    前几天转过一篇Android上模拟按键操作.触屏事件的博客,昨天又去找了百度.谷歌了一下,写了一点简单的测试代码,留待不时之需.有需要看之前转载的那篇博客的请看这里→_→转:Android随笔之——使 ...

  10. ASP.NET MVC Application_Error 无效不执行

    我们一般在开发 ASP.NET MVC 应用程序的时候,会在 Application_Error 中添加异常日志记录,一般会记录 500 的错误信息,但如果应用程序在出错的时候,Application ...