Arcgis for js加载天地图

综述:本节讲述的是用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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

go语言实现通过FTP库自动上传web日志

因为平时管理的web服务器都是VM服务器,为节省硬盘空间,一般给虚拟机分配的硬盘空间都比较小,只有8G,因为,保存不了多少日志,所以每天都需要把每台WEB日志转...

4393
来自专栏张高兴的博客

张高兴的 UWP 开发笔记:手机状态栏 StatusBar

3515
来自专栏IT派

Javascript 将 HTML 页面生成 PDF 并下载

最近碰到个需求,需要把当前页面生成 pdf,并下载。弄了几天,自己整理整理,记录下来,我觉得应该会有人需要 :)

3161
来自专栏MasiMaro 的技术博文

菜单的使用

2)弹出式菜单:一般在顶级菜单上都有很多菜单项,单击这些菜单项时会弹出一个下拉式的菜单项,我们点击的这个菜单称为弹出式菜单

1214
来自专栏数说工作室

【SAS Says】基础篇:4. ODS的使用

你不可能总是在SAS上查看结果,如果结果很多你要一一的讲结果复制到word中去,有ODS就好啦!它可以把SAS的结果直接输出到word、PDF等文件中。 并且,...

51910
来自专栏一个爱瞎折腾的程序猿

asp.net mvc项目自定义区域

2.Code:在Global.asax中添加注册区域-->AreaRegistration.RegisterAllAreas();

1661
来自专栏布尔

ExtJS4预览:渲染过程重构和标准化

在过去的四年,ExtJs代码库已经进化了,新组件被加进来,编码标准也改进了。在这个过程中,为了重构旧组件有必要经常追溯回去以保证他们也被改进。 在ExtJS4...

21610
来自专栏程序员宝库

Javascript 将 HTML 页面生成 PDF 并下载

最近碰到个需求,需要把当前页面生成 pdf,并下载。弄了几天,自己整理整理,记录下来,我觉得应该会有人需要 :)

1543
来自专栏从流域到海域

eclipse 常用快捷键

快捷方式 0. Ctrl + 1 (快速修复) 1. Ctrl + D (删除当前行) 2. Ctrl + Alt + ↓(复制当前行到下一行)...

1775
来自专栏Windows Community

New UWP Community Toolkit - RadialGauge

概述 New UWP Community Toolkit  V2.2.0 的版本发布日志中提到了 RadialGauge 的调整,本篇我们结合代码详细讲解  R...

43215

扫码关注云+社区

领取腾讯云代金券