使用ArcGIS JS API加载WMTS图层的两种方式

最新推荐文章于 2024-03-15 15:13:16 发布

wml00000

最新推荐文章于 2024-03-15 15:13:16 发布

阅读量6k

点赞数 3

分类专栏： ArcGIS 文章标签： ArcGIS JS API WMTS WMTSLayer TiledMapServiceLayer

本文链接：https://blog.csdn.net/wml00000/article/details/89061465

版权

ArcGIS 专栏收录该内容

35 篇文章 5 订阅

订阅专栏

文章目录

前言
方式一
方式二

前言

某些项目可能多方参与，每一方使用的GIS平台有时会有所不同，这时为了统一各方地图服务，通常会发布OGC标准的WMTS地图服务供各方使用。ArcGIS API for JavaScript提供了专门加载WMTS服务的类WMTSLayer,通过一些配置参数后即可以添加图层；另外ArcGIS API 还提供了类TiledMapServiceLayer,通过继承该类也可以自定义一个加载WMTS服务的类，这种方式和上篇基于ArcGIS API for JavaScript加载天地图相同。

方式一

直接使用WMTSLayer

API地址：https://developers.arcgis.com/javascript/3/jsapi/wmtslayer-amd.html

官方示例: https://developers.arcgis.com/javascript/3/jssamples/layers_wmtslayerresourceinfo.html

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ArcGIS JS API叠加WMTS图层(原生类WMTSLayer)</title>
</head>
<link rel="stylesheet" href="https://js.arcgis.com/3.27/esri/css/esri.css">
<style>
    html,
    body,
    #map {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
    }
</style>
<script src="https://js.arcgis.com/3.27/"></script>

<script>
    require([
        "esri/map",
        "esri/layers/WMTSLayer",
        "esri/layers/WMTSLayerInfo",
        "esri/geometry/Extent",
        "esri/layers/TileInfo",
        "esri/SpatialReference",
        "dojo/domReady!"
    ], function (
        Map, WMTSLayer, WMTSLayerInfo,
        Extent, TileInfo, SpatialReference
    ) {
            var map = new Map("map", {
                center: [86.9, 28],
                zoom: 3
            });

            var tileInfo = new TileInfo({
                "dpi": 96,//又称ppi:pixel per inch
                "format": "format/png",
                "compressionQuality": 0,
                "spatialReference": new SpatialReference({
                    "wkid": 4326
                }),
                "rows": 512,
                "cols": 512,
                "origin": {
                    "x": -180,
                    "y": 90
                },
                "lods": [{
                    "level": "0",
                    "scale": 236663484.36365247,
                    "resolution": 0.5624999999999999
                }, {
                    "level": "1",
                    "scale": 118331742.18182631,
                    "resolution": 0.28125000000000017
                }, {
                    "level": "2",
                    "scale": 59165871.090913124,
                    "resolution": 0.140625
                }, {
                    "level": "3",
                    "scale": 29582935.545456562,
                    "resolution": 0.0703125
                }, {
                    "level": "4",
                    "scale": 14791467.772728289,
                    "resolution": 0.03515625000000002
                }, {
                    "level": "5",
                    "scale": 395733.8863641415,
                    "resolution": 0.017578125000000003
                }, {
                    "level": "6",
                    "scale": 3697866.94318207,
                    "resolution": 0.008789062499999998
                }, {
                    "level": "7",
                    "scale": 1848933.471591035,
                    "resolution": 0.004394531249999999
                }, {
                    "level": "8",
                    "scale": 924466.7357955176,
                    "resolution": 0.002197265625
                }, {
                    "level": "9",
                    "scale": 462233.3678977588,
                    "resolution": 0.0010986328125
                }, {
                    "level": "10",
                    "scale": 231116.6839488794,
                    "resolution": 0.00054931640625
                }, {
                    "level": "11",
                    "scale": 115558.3419744397,
                    "resolution": 0.000274658203125
                }]
            });
            var tileExtent = new Extent(-180, -90, 180, 90, new SpatialReference({
                wkid: 4326
            }));

            var layerInfo = new WMTSLayerInfo({
                tileInfo: tileInfo,
                fullExtent: tileExtent,
                initialExtent: tileExtent,
                identifier: "SRTM_Color_Index",//通过元数据即XML文件可查看
                tileMatrixSet: "31.25m",
                format: "png",
                style: "default"
            });

            var resourceInfo = {
                version: "1.0.0",
                layerInfos: [layerInfo],
                copyright: "earthdata"
            };

            var options = {
                serviceMode: "KVP",
                resourceInfo: resourceInfo,
                layerInfo: layerInfo
            };

            wmtsLayer = new WMTSLayer("https://gibs.earthdata.nasa.gov/wmts/epsg4326/best", options);
            map.addLayer(wmtsLayer);
        });
</script>

<body>
    <div id="map"></div>
</body>

</html>