解决arcgis javascript api加载天地图超过18级不显示的问题

12 篇文章 8 订阅

需求:

天地图只切到了18级,一般在前端三维项目中,超过了18级就显示空白了,可以考虑通过重采样来实现,超过18级也能显示切片。

效果图:

代码:

<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>tianditu | Sample | ArcGIS API for JavaScript 4.21</title>
 
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
      #controls {
        padding: 12px;
        color: #adadad;
        background-color: #242424;
        max-width: 240px;
      }
    </style>
 
    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.26/esri/themes/dark/main.css"
    />
    <script src="https://js.arcgis.com/4.26/"></script>
 
    <script>
      require([
        "esri/layers/WebTileLayer",
        "esri/layers/support/TileInfo",
        "esri/Basemap",
        "esri/Map",
        "esri/views/SceneView"       
      ], (
        WebTileLayer,
        TileInfo,
        Basemap,
        Map,
        SceneView        
      ) => {
        let tileInfo = new TileInfo({
          rows: 256,
          cols: 256,
          dpi: 96,
          origin: {
            x: -20037508.342787,
            y: 20037508.342787,
          },
          spatialReference: {
            wkid: 102100,
            latestWkid: 3857,
          },
          lods: [
            {
              level: 0,
              resolution: 156543.03392800014,
              scale: 591657527.591555,
            },
            {
              level: 1,
              resolution: 78271.51696399994,
              scale: 295828763.795777,
            },
            {
              level: 2,
              resolution: 39135.75848200009,
              scale: 147914381.897889,
            },
            {
              level: 3,
              resolution: 19567.87924099992,
              scale: 73957190.948944,
            },
            {
              level: 4,
              resolution: 9783.93962049996,
              scale: 36978595.474472,
            },
            {
              level: 5,
              resolution: 4891.96981024998,
              scale: 18489297.737236,
            },
            {
              level: 6,
              resolution: 2445.98490512499,
              scale: 9244648.868618,
            },
            {
              level: 7,
              resolution: 1222.992452562495,
              scale: 4622324.434309,
            },
            {
              level: 8,
              resolution: 611.4962262813797,
              scale: 2311162.217155,
            },
            {
              level: 9,
              resolution: 305.74811314055756,
              scale: 1155581.108577,
            },
            {
              level: 10,
              resolution: 152.87405657041106,
              scale: 577790.554289,
            },
            {
              level: 11,
              resolution: 76.43702828507324,
              scale: 288895.277144,
            },
            {
              level: 12,
              resolution: 38.21851414253662,
              scale: 144447.638572,
            },
            {
              level: 13,
              resolution: 19.10925707126831,
              scale: 72223.819286,
            },
            {
              level: 14,
              resolution: 9.554628535634155,
              scale: 36111.909643,
            },
            {
              level: 15,
              resolution: 4.77731426794937,
              scale: 18055.954822,
            },
            {
              level: 16,
              resolution: 2.388657133974685,
              scale: 9027.977411,
            },
            {
              level: 17,
              resolution: 1.1943285668550503,
              scale: 4513.988705,
            },
            {
              level: 18,
              resolution: 0.5971642835598172,
              scale: 2256.994353,
            },
          ],
        });
 
        /*天地图-矢量(球面墨卡托)*/
 
        var vec_tiandituLayer = new WebTileLayer(
          "https://{subDomain}.tianditu.gov.cn/DataServer?T=vec_w&x={col}&y={row}&l={level}&tk=ebe28b5d03f375ee3abafa7af9364270",
          {
            subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
            title: "天地图-矢量",
            tileInfo: tileInfo,
          }
        );
 
        var cva_tiandituLayer = new WebTileLayer(
          "https://{subDomain}.tianditu.gov.cn/DataServer?T=cva_w&x={col}&y={row}&l={level}&tk=ebe28b5d03f375ee3abafa7af9364270",
          {
            subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
            title: "天地图-矢量注记",
            tileInfo: tileInfo,
          }
        );
 
        let vec_basemap = new Basemap({
          baseLayers: [vec_tiandituLayer],
          referenceLayers: [cva_tiandituLayer],
 
          title: "天地图-矢量(球面墨卡托)",
        });
        let map = new Map({
          basemap: vec_basemap,
        });
        let view = new SceneView({
          container: "viewDiv",
          map: map,
          camera: {
            position: [105.61385215, 35.59714937, 25512547.96188],
            heading: 0.0,
            tilt: 0.1,
          },
        });
      });
    </script>
  </head>
 
  <body>
    <div id="viewDiv"></div>
  
  </body>
</html>

其它类似的天地图底图加载效果:

直接用webtilelayer,tileinfo就写到实际的切片级别就可以,把urltemplate改成需要的格式就可以用了,其中天地图都是没有偏移的效果,而地形图ter只切到了14级因此其tileinfo为14.

<html>
<head>
    <meta charset="utf-8" />
    <meta
            name="viewport"
            content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>tianditu | Sample | ArcGIS API for JavaScript 4.21</title>
 
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
        #controls {
            padding: 12px;
            color: #adadad;
            background-color: #242424;
            max-width: 240px;
        }
    </style>
 
    <link
            rel="stylesheet"
            href="https://js.arcgis.com/4.21/esri/themes/dark/main.css"
    />
    <script src="https://js.arcgis.com/4.21/"></script>
 
    <script>
        require([
            "esri/layers/WebTileLayer",
            "esri/layers/support/TileInfo",
            "esri/Basemap",
            "esri/Map",
            "esri/views/SceneView",
            "esri/widgets/BasemapLayerList"
        ], (WebTileLayer, TileInfo, Basemap, Map, SceneView, BasemapLayerList) => {
 
            let tileInfo = new TileInfo({
                rows: 256,
                cols: 256,
                dpi: 96,
                origin: {
                    "x": -20037508.342787,
                    "y": 20037508.342787
                },
                spatialReference: {
                    "wkid": 102100,
                    "latestWkid": 3857
                },
                lods: [
                    {
                        "level": 0,
                        "resolution": 156543.03392800014,
                        "scale": 591657527.591555
                    },
                    {
                        "level": 1,
                        "resolution": 78271.51696399994,
                        "scale": 295828763.795777
                    },
                    {
                        "level": 2,
                        "resolution": 39135.75848200009,
                        "scale": 147914381.897889
                    },
                    {
                        "level": 3,
                        "resolution": 19567.87924099992,
                        "scale": 73957190.948944
                    },
                    {
                        "level": 4,
                        "resolution": 9783.93962049996,
                        "scale": 36978595.474472
                    },
                    {
                        "level": 5,
                        "resolution": 4891.96981024998,
                        "scale": 18489297.737236
                    },
                    {
                        "level": 6,
                        "resolution": 2445.98490512499,
                        "scale": 9244648.868618
                    },
                    {
                        "level": 7,
                        "resolution": 1222.992452562495,
                        "scale": 4622324.434309
                    },
                    {
                        "level": 8,
                        "resolution": 611.4962262813797,
                        "scale": 2311162.217155
                    },
                    {
                        "level": 9,
                        "resolution": 305.74811314055756,
                        "scale": 1155581.108577
                    },
                    {
                        "level": 10,
                        "resolution": 152.87405657041106,
                        "scale": 577790.554289
                    },
                    {
                        "level": 11,
                        "resolution": 76.43702828507324,
                        "scale": 288895.277144
                    },
                    {
                        "level": 12,
                        "resolution": 38.21851414253662,
                        "scale": 144447.638572
                    },
                    {
                        "level": 13,
                        "resolution": 19.10925707126831,
                        "scale": 72223.819286
                    },
                    {
                        "level": 14,
                        "resolution": 9.554628535634155,
                        "scale": 36111.909643
                    },
                    {
                        "level": 15,
                        "resolution": 4.77731426794937,
                        "scale": 18055.954822
                    },
                    {
                        "level": 16,
                        "resolution": 2.388657133974685,
                        "scale": 9027.977411
                    },
                    {
                        "level": 17,
                        "resolution": 1.1943285668550503,
                        "scale": 4513.988705
                    },
                    {
                        "level": 18,
                        "resolution": 0.5971642835598172,
                        "scale": 2256.994353
                    }
                ]
            });
 
            let ter_tileInfo = new TileInfo({
                rows: 256,
                cols: 256,
                dpi: 96,
                origin: {
                    "x": -20037508.342787,
                    "y": 20037508.342787
                },
                spatialReference: {
                    "wkid": 102100,
                    "latestWkid": 3857
                },
                lods: [
                    {
                        "level": 0,
                        "resolution": 156543.03392800014,
                        "scale": 591657527.591555
                    },
                    {
                        "level": 1,
                        "resolution": 78271.51696399994,
                        "scale": 295828763.795777
                    },
                    {
                        "level": 2,
                        "resolution": 39135.75848200009,
                        "scale": 147914381.897889
                    },
                    {
                        "level": 3,
                        "resolution": 19567.87924099992,
                        "scale": 73957190.948944
                    },
                    {
                        "level": 4,
                        "resolution": 9783.93962049996,
                        "scale": 36978595.474472
                    },
                    {
                        "level": 5,
                        "resolution": 4891.96981024998,
                        "scale": 18489297.737236
                    },
                    {
                        "level": 6,
                        "resolution": 2445.98490512499,
                        "scale": 9244648.868618
                    },
                    {
                        "level": 7,
                        "resolution": 1222.992452562495,
                        "scale": 4622324.434309
                    },
                    {
                        "level": 8,
                        "resolution": 611.4962262813797,
                        "scale": 2311162.217155
                    },
                    {
                        "level": 9,
                        "resolution": 305.74811314055756,
                        "scale": 1155581.108577
                    },
                    {
                        "level": 10,
                        "resolution": 152.87405657041106,
                        "scale": 577790.554289
                    },
                    {
                        "level": 11,
                        "resolution": 76.43702828507324,
                        "scale": 288895.277144
                    },
                    {
                        "level": 12,
                        "resolution": 38.21851414253662,
                        "scale": 144447.638572
                    },
                    {
                        "level": 13,
                        "resolution": 19.10925707126831,
                        "scale": 72223.819286
                    },
                    {
                        "level": 14,
                        "resolution": 9.554628535634155,
                        "scale": 36111.909643
                    }
                ]
            });
 
 
            /*天地图-矢量(球面墨卡托)*/
 
            var vec_tiandituLayer = new WebTileLayer("http://{subDomain}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=vec&STYLE=default&FORMAT=tiles&TILEMATRIXSET=w&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=ac0daf56728bbb77d9514ba3df69bcd3", {
                subDomains: ["t0","t1","t2","t3","t4","t5","t6","t7"],
                title: "天地图-矢量",
                tileInfo: tileInfo
            });
 
            var cva_tiandituLayer = new WebTileLayer("http://{subDomain}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=cva&STYLE=default&FORMAT=tiles&TILEMATRIXSET=w&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=ac0daf56728bbb77d9514ba3df69bcd3", {
                subDomains: ["t0","t1","t2","t3","t4","t5","t6","t7"],
                title: "天地图-矢量注记",
                tileInfo: tileInfo
            });
 
            let vec_basemap = new Basemap({
                baseLayers: [
                    vec_tiandituLayer
                ],
                referenceLayers: [
                    cva_tiandituLayer
                ],
                thumbnailUrl:"https://www.arcgis.com/sharing/rest/content/items/0fa6d020c45342eabd89954344a739ba/info/thumbnail/thumbnail1629181199303.png",
                title: "天地图-矢量(球面墨卡托)"
            });
 
            /*天地图-影像(球面墨卡托)*/
 
            var img_tiandituLayer = new WebTileLayer("http://{subDomain}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=img&STYLE=default&FORMAT=tiles&TILEMATRIXSET=w&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=ac0daf56728bbb77d9514ba3df69bcd3", {
                subDomains: ["t0","t1","t2","t3","t4","t5","t6","t7"],
                title: "天地图-影像",
                tileInfo: tileInfo
            });
 
            var cia_tiandituLayer = new WebTileLayer("http://{subDomain}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=cia&STYLE=default&FORMAT=tiles&TILEMATRIXSET=w&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=ac0daf56728bbb77d9514ba3df69bcd3", {
                subDomains: ["t0","t1","t2","t3","t4","t5","t6","t7"],
                title: "天地图-影像注记",
                tileInfo: tileInfo
            });
 
            let img_basemap = new Basemap({
                baseLayers: [
                    img_tiandituLayer
                ],
                referenceLayers: [
                    cia_tiandituLayer
                ],
                thumbnailUrl:"https://www.arcgis.com/sharing/rest/content/items/f2ce4422faa24f3c93b3135807e3b60e/info/thumbnail/thumbnail1629180632982.png",
                title: "天地图-影像(球面墨卡托)"
            });
 
            /*天地图-地形(球面墨卡托)*/
 
            var ter_tiandituLayer = new WebTileLayer("http://{subDomain}.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=ter&STYLE=default&FORMAT=tiles&TILEMATRIXSET=w&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=ac0daf56728bbb77d9514ba3df69bcd3", {
                subDomains: ["t0","t1","t2","t3","t4","t5","t6","t7"],
                title: "天地图-地形",
                tileInfo: ter_tileInfo
            });
 
            var cta_tiandituLayer = new WebTileLayer("http://{subDomain}.tianditu.gov.cn/cta_w/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=cta&STYLE=default&FORMAT=tiles&TILEMATRIXSET=w&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=ac0daf56728bbb77d9514ba3df69bcd3", {
                subDomains: ["t0","t1","t2","t3","t4","t5","t6","t7"],
                title: "天地图-地形注记",
                tileInfo: ter_tileInfo
            });
 
            let ter_basemap = new Basemap({
                baseLayers: [
                    ter_tiandituLayer
                ],
                referenceLayers: [
                    cta_tiandituLayer
                ],
                thumbnailUrl:"https://www.arcgis.com/sharing/rest/content/items/4dc6011d7dae4be9855738b366287f85/info/thumbnail/thumbnail1629181479311.png",
                title: "天地图-地形(球面墨卡托)"
            });
 
 
            let map = new Map({
                basemap: vec_basemap
            });
 
            let view = new SceneView({
                container: "viewDiv",
                map: map,
                camera:{
                    position: [
                        105.61385215,
                        35.59714937,
                        25512547.96188
                    ],
                    heading: 0.00,
                    tilt: 0.10
                }
            });
 
            let basemapLayerList = new BasemapLayerList({
                view: view
            });
            // Adds the widget below other elements in the top left corner of the view
            view.ui.add(basemapLayerList, {
                position: "top-right"
            });
 
            // Add a toggle button for the basemap
            document
                .getElementById("controls")
                .addEventListener("click", (event) => {
 
 
                    if (event.target.id === "vec") {
                        map.basemap = vec_basemap
                    } else if (event.target.id === "img") {
                        map.basemap = img_basemap
                    }else if (event.target.id === "ter") {
                        map.basemap = ter_basemap
                    }
                });
 
            view.ui.add(document.getElementById("controls"), "top-right");
 
        });
    </script>
</head>
 
<body>
<div id="viewDiv"></div>
<div id="controls" class="esri-widget">
    <input type="radio" id="vec" name="basemap" checked />
    <label for="vec">天地图-矢量(球面墨卡托)</label>
    <input type="radio" id="img" name="basemap" />
    <label for="img">天地图-影像(球面墨卡托)</label>
    <input type="radio" id="ter" name="basemap" />
    <label for="ter">天地图-地形(球面墨卡托)</label
    >
</div>
</body>
</html>

  • 5
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值