arcgis4x版本加载supermap的WMTS服务

最新推荐文章于 2023-12-22 16:17:10 发布

我有柚子茶噢

最新推荐文章于 2023-12-22 16:17:10 发布

阅读量341

点赞数 1

文章标签： arcgis

本文链接：https://blog.csdn.net/qq_46160082/article/details/129561936

版权

网上全是arcgis3x的版本，而且鱼龙混杂，没能用的，自己去研究了一下wmts元数据xml文件然后结合瓦片分层算出来的，所有瓦片都能检索到，没有任何瓦片死角，大家自取，直接拿就能跑起来，不要白嫖了，观众老爷们点个赞。

有需要vue版本的可以留言或者私信，因为考虑到环境问题，就没有把vue版本的贴出来，弄了一套全在线的资源可以直接跑。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Map with WMTS</title>
    <link rel="stylesheet" href="https://js.arcgis.com/4.26/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.26/"></script>
    <style>
        html,
        body,
        #viewDiv {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="viewDiv"> </div>
    <script>
        require([
            "esri/views/MapView",
            "esri/Basemap",
            "esri/Map",
            "esri/layers/WebTileLayer",
            "esri/layers/support/TileInfo",
            "esri/geometry/SpatialReference"
        ], function (MapView, Basemap, Map, WebTileLayer) {
            const layerInst = new WebTileLayer({
                urlTemplate: `https://iserver.supermap.io/iserver/services/map-china400/wmts100/China/default/Custom_China/{level}/{row}/{col}.png`,
                tileInfo: {
                    dpi: 96,
                    format: "image/png",
                    compressionQuality: 0,
                    spatialReference: {
                        wkid: 3857
                    },
                    rows: 256,
                    cols: 256,
                    origin: {
                        x: -2.0037508342789248e7,
                        y: 2.0037508342789087e7
                    },
                    lods: [
                        {
                            level: "0",
                            scale: 5.590822640287178e8,
                            resolution: 156543.033928041
                        },
                        {
                            level: "1",
                            scale: 2.795411320143589e8,
                            resolution: 78271.5169640205
                        },
                        {
                            level: "2",
                            scale: 1.3977056600717944e8,
                            resolution: 39135.75848201025
                        },
                        {
                            level: "3",
                            scale: 6.988528300358972e7,
                            resolution: 19567.879241005125
                        },
                        {
                            level: "4",
                            scale: 3.494264150179486e7,
                            resolution: 9783.939620502562
                        },
                        {
                            level: "5",
                            scale: 1.747132075089743e7,
                            resolution: 4891.969810251281
                        },
                        {
                            level: "6",
                            scale: 8735660.375448715,
                            resolution: 2445.9849051256406
                        },
                        {
                            level: "7",
                            scale: 4367830.1877243575,
                            resolution: 1222.9924525628203
                        },
                        {
                            level: "8",
                            scale: 2183915.0938621787,
                            resolution: 611.4962262814101
                        },
                        {
                            level: "9",
                            scale: 1091957.5469310894,
                            resolution: 305.7481131407051
                        },
                        {
                            level: "10",
                            scale: 545978.7734655447,
                            resolution: 152.87405657035254
                        },
                        {
                            level: "11",
                            scale: 272989.38673277234,
                            resolution: 76.43702828517627
                        },
                        {
                            level: "12",
                            scale: 136494.69336638617,
                            resolution: 38.218514142588134
                        },
                        {
                            level: "13",
                            scale: 68247.34668319309,
                            resolution: 19.109257071294067
                        },
                        {
                            level: "14",
                            scale: 34123.67334159654,
                            resolution: 9.554628535647034
                        },
                        {
                            level: "15",
                            scale: 17061.83667079827,
                            resolution: 4.777314267823517
                        },
                        {
                            level: "16",
                            scale: 8530.918335399136,
                            resolution: 2.3886571339117584
                        },
                        {
                            level: "17",
                            scale: 4265.459167699568,
                            resolution: 1.1943285669558792
                        },
                        {
                            level: "18",
                            scale: 2132.729583849784,
                            resolution: 0.5971642834779396
                        }
                    ]
                },
                spatialReference: { wkid: 3857 }
            });
            const basemap = new Basemap({
                baseLayers: [layerInst]
            });
            const map = new Map({
                basemap
            });
            const view = new MapView({
                map,
                container: "viewDiv",
                center: [114, 25],
                zoom: 8,
            });
        });
    </script>
</body>

</html>