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

最新推荐文章于 2025-03-31 15:10:06 发布

gislaozhang

最新推荐文章于 2025-03-31 15:10:06 发布

阅读量795

点赞数 6

分类专栏：三维 JS 文章标签： arcgis javascript 前端

本文链接：https://blog.csdn.net/gislaozhang/article/details/139965589

版权

需求：

天地图只切到了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",

最低0.47元/天解锁文章