(转)Arcgis for js加载天地图
http://blog.csdn.net/gisshixisheng/article/details/44494715
综述:本节讲述的是用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
转载于:https://www.cnblogs.com/telwanggs/p/6972736.html
(转)Arcgis for js加载天地图相关推荐
- (转) Arcgis for js加载百度地图
http://blog.csdn.net/gisshixisheng/article/details/44853709 概述: 在前面的文章里提到了Arcgis for js加载天地图,在本节,继续讲 ...
- GIS开发之二维地下管线综合管理系统(Arcgis)第四节 使用arcgis api for js 加载天地图
GIS开发之二维地下管线综合管理系统(Arcgis)第四节 使用arcgis api for js 加载天地图 核心js文件 调用方式 调用结果 核心js文件 #通过定义加载天地图js文件,引用并组织 ...
- Arcgis For Android 加载天地图(拥有缓存功能)
天地图做为国家发布的地理信息公共服务平台,"天地图"网站装载了覆盖全球的地理信息数据,这些数据以矢量.影像.三维3种模式全方位.多角度展现,可漫游.能缩放,具有多类型全面的地理信息 ...
- (转载)arcgis for js - 解决加载天地图和WMTS服务,WMTS服务不显示的问题,以及wmts服务密钥。...
1 arcgis加载天地图和wmts服务 arcgis for js加载天地图的例子网上有很多,这里先不写了,后期有空再贴代码,这里主要分析下WMTS服务为什么不显示,怎么解决. 条件:这里的WMTS ...
- (转)Openlayers 2.X加载天地图
http://blog.csdn.net/gisshixisheng/article/details/44621923 概述: 在前面的章节,讲到了Arcgis for js加载天地图,在本节讲述如何 ...
- ArcGIS中加载天地图省级遥感影像服务
天地图遥感影像的分辨率一般都是米级别的,而且更新的速度也是越来越快.质量也越来越好,那我们如何使用这方面的资源呢,本期我就给大家梳理一下,如何在ArcGIS软件中加载天地图省级遥感影像服务WMTS. ...
- 基于ArcGIS API for JavaScript加载天地图
文章目录 前言 效果图 详细代码 总结 参考链接 前言 该篇主要介绍如何用ArcGIS JS API加载天地图,具体应用场景以及需求分析等,在上篇基于ArcGIS API for JavaScript ...
- 【ArcGis for javascript从零开始】之一 ArcGis加载天地图
最近做项目需要用到ArcGis来进行数据展示和数据分析.以前从来没有接触过与Gis有关的东西,一切需要从头开始学.没有时间从头系统地学习了,只能用到哪个学习哪里了,本系列只是对学习的路径进行记录.Ar ...
- 填坑 ---- arcgis api for javascript 加载天地图
写在前面 首先要感谢 arcgis api for javascript 加载天地图 这篇文章,帮助我完成了在网页中加载天地图. 在此就不再描述加载天地图的方法与过程,只记录我遇到的一个坑与填坑方法. ...
最新文章
- 简单是可靠的先决条件
- python 输出大文本文件
- python语音在线编辑-Python实时语音识别控制
- js删除两个集合中共同元素_多个集合中的共同和独特元素
- Spark入门:也可以用Java创建轻量级的RESTful应用程序
- java mysql查询语句_Mysql查询语句执行过程
- 第7章[7.18] Ext JS组件嵌入HTML页面
- 面试数据分析岗,怎么提升一倍成功率?让过来人给你支支招
- SSH学习(一)—— 基础概念篇
- java 输出二进制文件_Java输出小端二进制文件
- 怎么判断日出时间早晚_怎样判断一个地方的日出或日落时间
- PDF查看器Spire.PDFViewer 教程:如何在一个网页中查看多个PDF文件
- Maya粒子消散特效制作(二)
- 【c语言】【inline】鸡肋关键字?inline-函数调用的加速器
- (statistic)你所不知道的P值--对统计学的批判
- 输入数字转换成英文输出
- 【跟我一起学Unity3D】做一个2D的90坦克大战之地图编辑器
- 手机照片丢失怎么才能恢复
- Linux(centos7.9)常用命令大全及基础知识
- 知物由学 | iOS AssetBundle资源保护
热门文章
- 编译器前端概述与可信编译器
- JDK1.8 IdentityHashMap
- java 图文生成图片_java生成图片
- 云服务器磁盘挂载_实战记录阿里云服务器不关机扩展系统盘容量/磁盘扩容
- (13)ISE14.7bit文件生成mcs文件(FPGA不积跬步101)
- (08)System Verilog 类继承
- 小型空仓库图片_大中型的食品企业为何都青睐自动化立体仓库?
- python预测药_python 最麻烦的时间有药了
- case when 子查询_标准SQL——子查询、分组查询、多表联查
- Windows核心编程条件变量