ArcGIS JS API 4.27通过加载超图发布的REST地图服务实现瓦片请求

原创于 2025-11-12 00:19:19 发布 · 210 阅读
本内容遵循CC 4.0 BY-SA版权协议
标签
#arcgis #supermap #wmts
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport"
          content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>
        Synchronize MapView and SceneView | Sample | ArcGIS Maps SDK for
        JavaScript 4.26
    </title>

    <style>
        html,
        body {
            padding: 0;
            margin: 0;
            height: 100%;
        }

        #hiddenBtn {
            position: absolute;
            right: 10px;
            top: 10px;
            z-index: 100;
            padding: 8px 12px;
            cursor: pointer;
        }
    </style>

    <link rel="stylesheet"
          href="https://js.arcgis.com/4.27/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.27/"></script>

    <script>
        // 全局变量
        let titilerLayer = null;

        // 在页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function () {
            require(["esri/Map", "esri/views/MapView", "esri/layers/WebTileLayer",
                "esri/geometry/SpatialReference","esri/layers/BaseTileLayer",], (
                Map, MapView, WebTileLayer, SpatialReference,BaseTileLayer
                ) => {
                const map = new Map({});

                // 天地图底图
                var tdtVecLayer = new WebTileLayer({
                    urlTemplate: 'http://{subDomain}.tianditu.gov.cn/DataServer?T=img_w&x={col}&y={row}&l={level}&tk=22cf8525db5d2a1d0d5533798645b867',
                    subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
                });

                var tdtPoiLayer = new WebTileLayer({
                    urlTemplate: 'http://{subDomain}.tianditu.gov.cn/DataServer?T=cva_w&x={col}&y={row}&l={level}&tk=22cf8525db5d2a1d0d5533798645b867',
                    subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
                });

                map.add(tdtVecLayer);
                map.add(tdtPoiLayer);

                // 地图视图
                var view = new MapView({
                    map: map,
                    container: "viewDiv",
                    spatialReference: new SpatialReference({ wkid: 3857 }),
                    center: [107.53, 23.30], 
                    zoom: 14
                });

                // 1. 创建自定义超图瓦片图层
                const SuperMapTileLayer = BaseTileLayer.createSubclass({
                    properties: {
                        // 服务基础URL
                        baseUrl: "http://localhost:8090/iserver/services/map-ugcv5-GuanWang/rest/maps/管网",
                        // 瓦片原点（从服务URL中获取）
                        tileOrigin: "{ \"x\": -20037508.3427892, \"y\": 20037508.3427892 }",
                        // 空间参考
                        spatialReference: { wkid: 3857 }, 
                        // 瓦片大小
                        tileSize: 256
                    },

                    // 获取瓦片URL
                    getTileUrl: function (level, row, col) {
                        // 确保级别在比例尺范围内
                        const scale = 3.380327143205318e-9 * Math.pow(2,level-1);
                        console.log(scale)
                        // 构建超图服务URL
                        const url = `${this.baseUrl}/tileImage.png` +
                            `?redirect=false` +
                            `&transparent=true` +
                            `&cacheEnabled=true` +
                            `&_cache=true` +
                            `&origin=${this.tileOrigin}` +
                            `&overlapDisplayed=false` +
                            `&x=${col}` +
                            `&y=${row}` +
                            `&width=${this.tileSize}` +
                            `&height=${this.tileSize}` +
                            `&scale=${scale}`;

                        return url;
                    }
                });
                const superMapLayer = new SuperMapTileLayer({
                    title: "管网超图服务",
                });
                map.add(superMapLayer);

                
            });
        });

       
        
    </script>
</head>
<body>
    <div id="viewDiv" style="float: left; width: 100%; height: 100%">
    </div>
</body>
</html>