arcgis 加载天地图WMTS服务

其他 2018-09-18 08:04:47 阅读次数: 0
版权声明：如果转载，请注明出处！谢谢合作！ https://blog.csdn.net/u012320231/article/details/81952955

arcgis加载天地图的WMTS服务网络上教程也有很多，并且很多GIS开发人员都将其进行了相应的封装，但是大部分对于初学者而言，存在代码不全的情况，因此，这里将真个天地图的WMTS服务地图的加载的代码全部展现出来，方便初学者进行天地图的服务调用。并且在本文中，实现了一个模块对天地图所有MWTS服务调用的封装，具体的代码源代码请见码云（https://gitee.com/MrHuanLiu/TDTLib），本文只对重点进行详解。

对于Dojo 中类的定义及其使用的相关方法请查看(https://dojotoolkit.org/documentation/tutorials/1.10/declare/index.html),

对于矢量图层与影像图层（包括各自注记图层的加载），存在大量代码重复的代码，且不同图层的加载主要是由于天地图服务地址的差异，其余的基本一样，这也是对WMTS服务进行再次封装的基础。下面我将封装模块中的getTileUrl方法返回的天地图服务地址单独摘取出来，你们可以仔细对比一下各自的区别。

  • 矢量图层
"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";
  • 矢量注记图层
"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";
  • 影像图层
"http://t0.tianditu.com/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&TILEMATRIX=" + level + "&TILEROW=" + row + "&TILECOL="+ col + "&FORMAT=tiles" ;
  • 影像注记图层
"http://t0.tianditu.com/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&TILEMATRIX=" + level + "&TILEROW=" + row + "&TILECOL=" + col + "&FORMAT=tiles";

1.加载所有WMTS服务模块的封装

 这个模块的封装和以下的2-5 一样具有共同点，只不过现在我们的一个模块需要完成对矢量图层、矢量注记图层、影像图层、影像注记图层、地形图层、地形注记图层等加载，其中不同注记图层可以有（中文、英文、蒙古文、维吾尔文）等四种注记图层的选择，并且可以选择 坐标 是投影坐标还是地理坐标。（该类源代码及相关说明见 https://gitee.com/MrHuanLiu/TDTLib），这里仅提供一个示例：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Search widget tutorial</title>
    <link rel="stylesheet" href="../lib/3.25/esri/css/esri.css">
    <style>
        html,
        body,#map {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <script src="../lib/jquery/jquery-3.3.1.js"></script>
    <script>
        var package_path = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/'));
        console.log(package_path);
        var dojoConfig = {
            baseUrl: "../lib/3.25/dojo",
            packages:[
                {name:'lib',location:'/arcgisDemo/lib/TDTLib'}
            ],
            async: true,
            locale: 'zh-cn'
        }
    </script>
    <script src="../lib/3.25/init.js"></script>
    <script>
        require([
            "lib/TDTMapLayer",
            "esri/map",
            "dojo/domReady!"
        ], function (TDTMapLayer, Map) {
            const map = new Map('map', {
                logo: false
            });
            /**
             * TDTMapLayer 中包含四个参数，分别为
             * 1.mapType：该值的默认值为vec,代表矢量图层，可供选择的值有vec|img|ter，分别代表矢量、影像、地形
             * 2.mapCoordinate：该值的默认值为w,代表投影坐标，可供选择的值有c|w分比为：地理坐标，投影坐标
             * 3.isAnnoLayer：默认值为"",可供选择的值为""|"ano",分别代表非注记图层，注记图层
             * 4.mapAnnotation：默认值为cva,不同注记类型的默认值分别为cva,cia,cta,代表矢量中文注记图层，不同底图的矢量注记可选项有：
             *   vec(矢量):cva(中文)、eva(英文)、mva(蒙古文)、wva(维吾尔文)
             *   img(影像):cia(中文)、eia(英文)、mia(蒙古文)、wia(维吾尔文)
             *   ter(地形图):cta(中文)、eta(英文)、mta(蒙古文)、wta(维吾尔文)
             */
            //1.加载矢量图层（默认投影web墨卡托）
            let verLayer = new TDTMapLayer();
            //2.加载矢量注记图层
            let verAnnoLayer = new TDTMapLayer("ano");
            //3.加载影像图层
            let imgLayer = new TDTMapLayer("img","w");
            //4.加载影像注记图层
            let imgAnnoLayer = new TDTMapLayer("img","w","ano");
            //5.当我们需要加载不同语言的注记的时候，无论是矢量、影像、还是地形，我们都需要同时传入4个参数，如：
            let imgAnnoLayerM = new TDTMapLayer("img","w","ano","mia");//加载蒙古语矢量图层
            map.addLayer(imgAnnoLayerM);
        });
    </script>
</head>
<body>
<div id="map"></div>
</body>
</html>

2.天地图矢量图层的加载

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";
            }
        });
    });

3.天地图矢量注记图层的加载

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";
            }
        });
    });

4.天地图影像图层的加载

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://t0.tianditu.com/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&TILEMATRIX=" + level + "&TILEROW=" + row + "&TILECOL="+ col + "&FORMAT=tiles" ;
            }
        });
    });

5.天地图影像注记图层的加载

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://t0.tianditu.com/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&TILEMATRIX=" + level + "&TILEROW=" + row + "&TILECOL=" + col + "&FORMAT=tiles";
            }
        });
    });

猜你喜欢

转载自blog.csdn.net/u012320231/article/details/81952955
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022