arcgis for js 4.x wmts切片图层服务加载 

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
        <title>切片地图加载</title>
        <style>
            html,
            body,
            #viewDiv {
                padding: 0;
                margin: 0;
                height: 800px;
                width: 800px;
                overflow: hidden;
            }
        </style>
        <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css" />
        <script src="https://js.arcgis.com/4.11/init.js"></script>
        <script>
            require(["esri/Map",
                "esri/views/MapView",
                "esri/layers/WebTileLayer",
                "../MyCustomTileLayer.js",
                '../4490.js',
            ], function(
                Map,
                MapView,
                WebTileLayer,
                MyCustomTileLayer,
                epsg4490
            ) {

                var tileInfo = epsg4490.tileInfo
                var map = new Map({
                    // basemap: 'osm'
                });


                var view = new MapView({
                    container: "viewDiv",
                    map: map,
                    spatialReference: {
                        wkid: 4490
                    },

                });

                //4.9以上
                function createWMTSlyr1(option) {
                    var webLayer = new MyCustomTileLayer({
                        urlTemplate: createUrlTemplate(option),
                        subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
                        tileInfo: tileInfo
                    })
                    return webLayer
                }


                //4.2-4.11版本
                function createWMTSlyr(option) {
                    let _this = this
                    var webLayer = new WebTileLayer({
                        urlTemplate: createUrlTemplate(option),
                        subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
                        tileInfo: tileInfo
                    })
                    return webLayer
                }

                function createUrlTemplate(option) {
                    let urlTemplate
                    if (option.url) {
                        if (!urlTemplate) {
                            let myUrl = option.url
                            if (myUrl.indexOf('/wmts') === -1) {
                                myUrl += '/wmts'
                            }
                            const index0 = myUrl.indexOf('services')
                            const index1 = myUrl.indexOf('MapServer')
                            const tempStr = myUrl.substring(index0 + 9, index1 - 1).replace(/\//g, '_')
                            // eslint-disable-next-line new-cap
                            const tempUrl = new this.gisConstructor.url(myUrl)
                            // eslint-disable-next-line no-unused-vars
                            const splits = tempUrl.path.split('/')
                            const layer = option.layer ? option.layer : tempStr
                            const style = option.style ? option.style : 'default'
                            const matrixid = option.matrixid ? option.matrixid : 'default028mm'
                            urlTemplate = myUrl + '?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=' + layer +
                                '&STYLE=' + style +
                                '&FORMAT=image/tile&TILEMATRIXSET=' + matrixid +
                                '&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}'
                        }
                    } else {
                        urlTemplate = 'http://t0.tianditu.gov.cn/' +
                            option.layer + '/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=' +
                            option.layer.substring(0, option.layer.indexOf('_')) + '&STYLE=default&TILEMATRIXSET=' +
                            option.layer.substring(option.layer.indexOf('_') + 1, option.layer.length) +
                            '&FORMAT=tiles&TileMatrix={level}&TileCol={col}&TileRow={row}&tk=' +
                            (option.key || 'fb1bfb9e06cd7681813a42f4c934e1ea')

                        // urlTemplate =
                        //   'http://{subDomain}.tianditu.gov.cn/DataServer?T=' +
                        //   option.layer +
                        //   '&x={col}&y={row}&l={level}&tk=' +
                        //   (option.key || 'fb1bfb9e06cd7681813a42f4c934e1ea')
                    }
                    return urlTemplate
                }
                var option = {
                    id: '界线',
                    type: 'wmts',
                    listMode: 'hide',
                    url: 'http://19.15.73.111/arcgisserver12/rest/services/SPJ_YGA/界线0602/MapServer'
                }
                var lyr = createWMTSlyr(option)
                map.add(lyr);


            });
        </script>
    </head>

    <body class="calcite">
        <div id="viewDiv"></div>
    </body>
</html>

 

posted @ 2022-03-28 17:00  小鱼写代码的过往  阅读(585)  评论(0)    收藏  举报