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

天地图的切片地图能够通过esri.layers.TiledMapServiceLayer来载入。在此将之进行了一定的封装,例如以下:

1、切片线划图——TDTLayer.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";
}
});
});

2、切片标注——TDTAnnoLayer.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" + 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";
}
});
});

封装好之后就能够在页面调用了。调用的时候须要导入这些自己定义的图层。导入方式为:

    <script type="text/javascript">
dojoConfig = {
parseOnLoad: true,
packages: [{
name: 'tdlib',
location: this.location.pathname.replace(/\/[^/]+$/, "")+"/js/tdlib"
}]
};
</script>
<script src="http://localhost/arcgis_js_api/library/3.9/3.9/init.js"></script>
<script>
require(["tdlib/TDTLayer",
"tdlib/TDTAnnoLayer"],
function (TDTLayer,
TDTAnnoLayer
){
var basemap = new TDTLayer();
map.addLayer(basemap);
var annolayer = new TDTAnnoLayer();
map.addLayer(annolayer);
});
</script>

完整调用页面代码为:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TianDi Map</title>
<link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.9/3.9/js/dojo/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.9/3.9/js/esri/css/esri.css">
<style>
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript">
dojoConfig = {
parseOnLoad: true,
packages: [{
name: 'tdlib',
location: this.location.pathname.replace(/\/[^/]+$/, "")+"/js/tdlib"
}]
};
</script>
<script src="http://localhost/arcgis_js_api/library/3.9/3.9/init.js"></script>
<script>
var map;
require(["esri/map",
"tdlib/TDTLayer",
"tdlib/TDTAnnoLayer",
"esri/layers/FeatureLayer",
"esri/geometry/Point",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"dojo/_base/Color",
"dojo/domReady!"],
function (Map,
TDTLayer,
TDTAnnoLayer,
FeatureLayer,
Point,
SimpleFillSymbol,
SimpleLineSymbol,
Color
){
map = new Map("map", { logo: false });
var basemap = new TDTLayer();
map.addLayer(basemap);
var annolayer = new TDTAnnoLayer();
map.addLayer(annolayer); var pro = new FeatureLayer("http://localhost:6080/arcgis/rest/services/chinawgs84/MapServer/1");
map.addLayer(pro); var pt = new Point(103.847, 36.0473);
map.centerAndZoom(pt, 3);
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>

在图中,我还加入了一个我本机用Arcgis Server公布的特征层,完毕后效果例如以下:

本文抛砖引玉,很多其它的天地图如影像等请參照:http://www.tianditu.com/guide/index.html

Arcgis for js载入天地图的更多相关文章

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

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

  2. (转)Arcgis for js加载天地图

    http://blog.csdn.net/gisshixisheng/article/details/44494715 综述:本节讲述的是用Arcgis for js加载天地图的切片资源. 天地图的切 ...

  3. Openlayers离线载入天地图

    概述: 经过一个春节的休整,今天最终開始了! 任何时候.都不要忘记学习.学习是一辈子的事情!今天,我来说说怎样实现天地图的离线以及Openlayers载入离线数据实现天地图数据的展示. 实现: 1.获 ...

  4. Arcgis for Js之加载wms服务

    概述:本节讲述Arcgis for Js加载ArcgisServer和GeoServer发布的wms服务. 1.定义resourceInfo var resourceInfo = { extent: ...

  5. (转) Arcgis for js加载百度地图

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

  6. Arcgis for JS之Cluster聚类分析的实现(基于区域范围的)

    原文:Arcgis for JS之Cluster聚类分析的实现(基于区域范围的) 咱们书接上文,在上文,实现了基于距离的空间聚类的算法实现,在本文,将继续介绍空间聚类之基于区域范围的实现方式,好了,闲 ...

  7. Arcgis for JS之Cluster聚类分析的实现

    原文:Arcgis for JS之Cluster聚类分析的实现 在做项目的时候,碰见了这样一个问题:给地图上标注点对象,数据是从数据库来 的,包含XY坐标信息的,通过graphic和graphicla ...

  8. arcgis for js开发之路径分析

    arcgis for js开发之路径分析 //方法封装 function routeplan(x1, x2, y1, y2, barrierPathArray, isDraw, callback) { ...

  9. Arcgis for js开发之直线、圆、箭头、多边形、集结地等绘制方法

    p{ text-align:center; } blockquote > p > span{ text-align:center; font-size: 18px; color: #ff0 ...

随机推荐

  1. [Angular 2] @ViewChild to access Child component's method

    When you want to access child component's method, you can use @ViewChild in the parent: Parent Compo ...

  2. Android原理揭秘系列之一动态墙纸

    Livewallpaper,即动态墙纸,是Android的一大3D特色功能,用户可以在桌面选择加载动态墙纸,让自己的手机桌面背景旋动起来. 相对于静态桌面壁纸,动态墙纸可以展示各种动态变化的背景,而与 ...

  3. KindEditor简单的Demo使用

    一般的做网站后台都会用到富文本编辑器,网上也有很多优秀的富文本编辑器,这里是开源中国的富文本编辑器推荐:http://www.oschina.net/project/tag/172/wysiwyg 我 ...

  4. sun.misc.BASE64Encoder是内部专用 API, 可能会在未来发行版中删除

    简介 MEVAN打包遇到问题“sun.misc.BASE64Encoder是内部专用 API, 可能会在未来发行版中删除”,属于警告!项目虽然能正常运行,但是有警告就是一种隐患,要将隐患消灭在萌芽中. ...

  5. 运行第一个Hadoop程序,WordCount

    系统: Ubuntu14.04 Hadoop版本: 2.7.2 参照http://www.cnblogs.com/taichu/p/5264185.html中的分享,来学习运行第一个hadoop程序. ...

  6. linux一键安装vncserver脚本

    title: linux一键安装vncserver脚本 date: 2016-04-11 14:32:04 tags: --- linux多数情况下是作为服务器使用的,管理员一般也喜欢使用命令行来管理 ...

  7. 读取oracle页面或者进程卡住不动(死锁)

    oracle最坑爹的地方:你insert   update  delete之后  或者kill死锁的时候记得一定要提交事务不然就是死锁卡在那里了 记住  kill死锁也是要提交事务的 select * ...

  8. oracle 查询前一小时、一天、一个月、一年的数据

    查询一小时 select concat(to_char(sysdate,'yyyy-mm-dd ')||(to_char(sysdate,'hh24')-1),':00:00') start_time ...

  9. 获取GET/POST提交的数据,并处理中文问题

    1.获取input标签中的值,用request.getParameter("User")(User为input的name值) 2. 获取checkbox的值,由于是多选的,所以不能 ...

  10. 状态压缩dp zoj3802

    做这个题的时候看了看时间复杂度觉得应该是个贪心或者dp,然后贪心又很快被否定了,因为不具备贪心的一些特性,想了想觉得没什么思路.看了下网上的思路,真是让人拍案叫绝,算法的魅力就在于此啊.. 首先dp就 ...