对于中国开发者在创建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. 使用SecureCRT在远程主机和本地之间传输文件

    终于弄明白怎样在SecureCRT的shell里用命令上传下载文件.SecureCRT记住密码的功能容易设置,于是偶这懒人,后来习惯了用 SecureCRT,但其上传文件功能偶一直没弄明白过.之前一直 ...

  2. Form authentication(表单认证)问题

    前言 最近在做ASP.NET MVC中表单认证时出了一些问题,特此记录. 问题 进行表单认证时,在 PostAuthenticateRequest 事件中从Cookie值中解密票据.如下: prote ...

  3. 制作动画或小游戏——CreateJS基础类(一)

    前面曾经记录过Canvas的基础知识<让自己也能使用Canvas>,在实际使用中,用封装好的库效率会高点. 使用成熟的库还能对基础知识有更深入的理解,CreateJS是基于HTML5开发的 ...

  4. table-cell实现宽度自适应布局

    利用table-cell可以实现宽度自适应布局. table-cell有一些比较好用的属性,比如垂直居中,自适应高度宽度等,为元素设置table-cell布局之后,元素的margin失效,paddin ...

  5. 1Z0-053 争议题目解析541

    1Z0-053 争议题目解析541 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 541.If you use ALTER DISKGROUP ... ADD DISK and s ...

  6. 重温Servlet学习笔记--response对象

    在用户浏览网页时,服务器对于客户端浏览器做出的响应被封装成一个HttpServletResponse对象,要对浏览器操作只需要操作这个response对象即可.response的功能分类及介绍: 响应 ...

  7. 将DataTable转换成CSV文件

    DataTable用于在.net项目中,用于缓存数据,DataTable表示内存中数据的一个表.CSV文件最早用在简单的数据库里,由于其格式简单,并具备很强的开放性,所以起初被扫图家用作自己图集的标记 ...

  8. 浅谈2D游戏设计模式3 - 冒险地图之美(1)

    冒险岛之所以能长久的存在,很大一部分原因是因为它的美工设计的非常的精细,以及独特,那么独特以及美究竟体现在哪些方面呢? 今天我就带大家来分析几幅地图吧. 好吧,我们就拿上面这幅美景来分析吧. 1.阳光 ...

  9. App Widget简单应用

    首先后台进程创建一个PendingIntent对象,其中PendingIntent中包含一个真正的Intent,创建完成后将此PendingIntent对象交给桌面控件所在的进程,当用户点击桌面控件或 ...

  10. iOS9的几个新关键字(nonnull、nullable、null_resettable、__null_unspecified)

    1.nonnull:字面意思就能知道:不能为空(用来修饰属性,或者方法的参数,方法的返回值) 代码: //三种使用方式都可以 @property (nonatomic, copy, nonnull) ...