ArcGIS API for JavaScript 加载天地图WMTS图层

最新推荐文章于 2020-10-30 14:06:38 发布

chiba8477996

最新推荐文章于 2020-10-30 14:06:38 发布

阅读量1k

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/huanglii/blog/884284

版权

欢迎访问我的博客GISer空间。

0. 预览

http://huanglii.github.io/TianDiTu/index.html
在GitHub上查看

1. index.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>ArcGIS API for JavaScript 加载天地图WMTS图层</title>

    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.18/3.18/esri/css/esri.css">
</head>

<body>
<div id="map"></div>
<div>
    <select id="selectBasemap">
        <option value="vec">矢量</option>
        <option value="img">影像</option>
        <option value="ter">地形</option>
    </select>

    <select id="selectCood">
        <option value="c">地理坐标系</option>
        <option value="w">投影坐标系</option>
    </select>
</div>

<script>
    var selfUrl = document.location.href.substring(0, document.location.href.lastIndexOf("/"));
    var dojoConfig = {
        modulePaths: {"TDT": selfUrl + "/js/TDT"}
    };
</script>
<script src="https://js.arcgis.com/3.18/"></script>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>

2. main.js

var map;
var baseTypeName = "vec"; //底图
var baseAnnoName = "cva"; //注记
var typeMatrixSet = "c";  //"c"-地理坐标系，"w"-投影坐标系为
require([
    "TDT/TianDiTuLayer",
    "esri/map",
    "esri/geometry/Extent",
    "dojo/domReady!"
], function (TianDiTuLayer, Map, Extent) {

    map = new Map("map", {
        extent: new Extent({
            "xmin": 72,
            "ymin": 20,
            "xmax": 138,
            "ymax": 50,
            "spatialReference": {"wkid": 4326}
        })
    });

    // 初始化底图和注记图层
    var baseLayer = new TianDiTuLayer();
    baseLayer.id = "BASE_LYR";
    var annolayer = new TianDiTuLayer("ano");
    annolayer.id = "ANNO_LYR";
    map.addLayer(baseLayer);
    map.addLayer(annolayer);

    // 底图和注记图层切换
    $("#selectBasemap").on("change", function (e) {
        var type = e.target.options[e.target.selectedIndex].value;
        baseTypeName = type;
        switch (type) {
            case "vec":
                baseAnnoName = "cva";
                break;
            case "img":
                baseAnnoName = "cia";
                break;
            case "ter":
                baseAnnoName = "cta";
                break;
        }
        // 刷新图层
        baseLayer.refresh();
        annolayer.refresh();
    });

    // 坐标系切换
    $("#selectCood").on("change", function (e) {
        var type = e.target.options[e.target.selectedIndex].value;
        typeMatrixSet = type;
        // 刷新图层
        baseLayer.refresh();
        annolayer.refresh();
    });

    /**
     * 天地图类型
     * vec: 矢量底图
     * cva: 矢量注记图层
     * eva: 矢量注记图层-英文注记
     *
     * img: 影像底图
     * cia: 影像注记图层
     * eia: 影像注记图层 -英文注记
     *
     * ter: 地形底图
     * cta: 地形注记图层
     *
     **/
});

3. TianDiTuLayer.js

define("TDT/TianDiTuLayer", [
    'dojo/_base/declare',
    "esri/layers/TiledMapServiceLayer"
], function (declare, TiledMapServiceLayer) {
    d = declare(TiledMapServiceLayer, {
        declaredClass: "TianDiTuLayer",
        _type: "",
        constructor: function (type) {
            // type为null, 则返回底图图层
            // type为"ano",则返回注记图层
            this._type = type;
            var cornerCoordinate = 20037508.3427892;
            this.baseUrl = 'http://t0.tianditu.com/';
            this.spatialReference = typeMatrixSet == 'w' ? new esri.SpatialReference({wkid: 102100}) : new esri.SpatialReference({wkid: 4326});
            var extent = typeMatrixSet == 'w' ? new esri.geometry.Extent(-cornerCoordinate, -cornerCoordinate, cornerCoordinate, cornerCoordinate, this.spatialReference) : new esri.geometry.Extent(-180, -90, 180, 90, this.spatialReference);
            this.initialExtent = (this.fullExtent = extent);

            this.tileInfo = new esri.layers.TileInfo({
                "rows": 256,
                "cols": 256,
                "compressionQuality": 0,
                "origin": typeMatrixSet == 'w' ? {
                    "x": -20037508.342787,
                    "y": 20037508.342787
                } : {
                    "x": -180,
                    "y": 90
                },
                "spatialReference": typeMatrixSet == 'w' ? {
                    "wkid": 102100
                } : {
                    "wkid": 4326
                },
                "lods": typeMatrixSet == 'w' ? [
                    {"level": 1, "resolution": 78271.51696402048, "scale": 2.958293554545656E8},
                    {"level": 2, "resolution": 39135.75848201024, "scale": 1.479146777272828E8},
                    {"level": 3, "resolution": 19567.87924100512, "scale": 7.39573388636414E7},
                    {"level": 4, "resolution": 9783.93962050256, "scale": 3.69786694318207E7},
                    {"level": 5, "resolution": 4891.96981025128, "scale": 1.848933471591035E7},
                    {"level": 6, "resolution": 2445.98490512564, "scale": 9244667.357955175},
                    {"level": 7, "resolution": 1222.99245256282, "scale": 4622333.678977588},
                    {"level": 8, "resolution": 611.49622628141, "scale": 2311166.839488794},
                    {"level": 9, "resolution": 305.748113140705, "scale": 1155583.419744397},
                    {"level": 10, "resolution": 152.8740565703525, "scale": 577791.7098721985},
                    {"level": 11, "resolution": 76.43702828517625, "scale": 288895.85493609926},
                    {"level": 12, "resolution": 38.21851414258813, "scale": 144447.92746804963},
                    {"level": 13, "resolution": 19.109257071294063, "scale": 72223.96373402482},
                    {"level": 14, "resolution": 9.554628535647032, "scale": 36111.98186701241},
                    {"level": 15, "resolution": 4.777314267823516, "scale": 18055.990933506204},
                    {"level": 16, "resolution": 2.388657133911758, "scale": 9027.995466753102},
                    {"level": 17, "resolution": 1.194328566955879, "scale": 4513.997733376551},
                    {"level": 18, "resolution": 0.5971642834779395, "scale": 2256.998866688275},
                    {"level": 19, "resolution": 0.2985821417389698, "scale": 1128.499433344138},
                    {"level": 20, "resolution": 0.1492910708694849, "scale": 564.2497166720688}
                ] : [
                    {"level": 1, "resolution": 0.7031249999891485, "scale": 2.958293554545656E8},
                    {"level": 2, "resolution": 0.35156249999999994, "scale": 1.479146777272828E8},
                    {"level": 3, "resolution": 0.17578124999999997, "scale": 7.39573388636414E7},
                    {"level": 4, "resolution": 0.08789062500000014, "scale": 3.69786694318207E7},
                    {"level": 5, "resolution": 0.04394531250000007, "scale": 1.848933471591035E7},
                    {"level": 6, "resolution": 0.021972656250000007, "scale": 9244667.357955175},
                    {"level": 7, "resolution": 0.01098632812500002, "scale": 4622333.678977588},
                    {"level": 8, "resolution": 0.00549316406250001, "scale": 2311166.839488794},
                    {"level": 9, "resolution": 0.0027465820312500017, "scale": 1155583.419744397},
                    {"level": 10, "resolution": 0.0013732910156250009, "scale": 577791.7098721985},
                    {"level": 11, "resolution": 0.000686645507812499, "scale": 288895.85493609926},
                    {"level": 12, "resolution": 0.0003433227539062495, "scale": 144447.92746804963},
                    {"level": 13, "resolution": 0.00017166137695312503, "scale": 72223.96373402482},
                    {"level": 14, "resolution": 0.00008583068847656251, "scale": 36111.98186701241},
                    {"level": 15, "resolution": 0.000042915344238281406, "scale": 18055.990933506204},
                    {"level": 16, "resolution": 0.000021457672119140645, "scale": 9027.995466753102},
                    {"level": 17, "resolution": 0.000010728836059570307, "scale": 4513.997733376551},
                    {"level": 18, "resolution": 0.000005364418029785169, "scale": 2256.998866688275},
                    {"level": 19, "resolution": 2.68220901485e-6, "scale": 1128.499433344138},
                    {"level": 20, "resolution": 1.341104507425e-6, "scale": 564.2497166720688}
                ]
            });
            this.loaded = true;
            this.onLoad(this);
        },

        getTileUrl: function (level, row, col) {
            var tileUrl;

            // 地图和注记图层的tileUrl分别用变量来设置，
            // 是为了在切换地图的时候，正常显示底图和注记
            if (this._type == "ano") {
                tileUrl = "http://t0.tianditu.com/" + baseAnnoName + "_" + typeMatrixSet + "/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=" + baseAnnoName + "&STYLE=default&TILEMATRIXSET=" + typeMatrixSet + "&TILEMATRIX=" + level + "&TILEROW=" + row + "&TILECOL=" + col + "&FORMAT=tiles";
            } else {
                tileUrl = "http://t0.tianditu.com/" + baseTypeName + "_" + typeMatrixSet + "/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=" + baseTypeName + "&STYLE=default&TILEMATRIXSET=" + typeMatrixSet + "&TILEMATRIX=" + level + "&TILEROW=" + row + "&TILECOL=" + col + "&FORMAT=tiles";
            }
            return tileUrl;
        }
    });
    return d;
});

转载于:https://my.oschina.net/huanglii/blog/884284