cesiumlab切片通过arcgisjs加载

cesiumlab切片通过arcgisjs加载

需要注意2个地方,一个是tileInfo,一个是getTileUrl,

在tileInfo中定义好cesiumlab切片的相关信息。

getTileUrl 格式化url的格式。

注意设置编辑,避免超出范围报404。

html 复制代码
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>WebTileLayer</title>

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

  <link rel="stylesheet" href="http://localhost:8093/arcgis/4.28/esri/themes/light/main.css" />
  <script src="http://localhost:8093/arcgis/4.28/init.js"></script>

  <script>
    var bashUrl = "http://localhost:8093/cesiumKlmy"
    var url = "/{z}/{x}/{y}.png";
    require(["esri/Map", "esri/views/SceneView", "esri/layers/WebTileLayer", "esri/geometry/SpatialReference", 'esri/layers/support/TileInfo'],
      (Map, SceneView, WebTileLayer, SpatialReference, TileInfo) => {

        const tileInfo = new TileInfo({
          dpi: 90.71428571428571,
          format: "image/png",
          spatialReference: new SpatialReference({
            wkid: 4326,
          }),
          origin: {
            x: -180,
            y: 90
          },
          lods:
            [{
              level: 0,
              levelValue: 1,
              resolution: 0.703125,
              scale: 295497593.05875003
            },
            {
              level: 1,
              levelValue: 2,
              resolution: 0.3515625,
              scale: 147748796.52937502
            },
            {
              level: 2,
              levelValue: 3,
              resolution: 0.17578125,
              scale: 73874398.264687508
            },
            {
              level: 3,
              levelValue: 4,
              resolution: 0.087890625,
              scale: 36937199.132343754
            },
            {
              level: 4,
              levelValue: 5,
              resolution: 0.0439453125,
              scale: 18468599.566171877
            },
            {
              level: 5,
              levelValue: 6,
              resolution: 0.02197265625,
              scale: 9234299.7830859385
            },
            {
              level: 6,
              levelValue: 7,
              resolution: 0.010986328125,
              scale: 4617149.8915429693
            },
            {
              level: 7,
              levelValue: 8,
              resolution: 0.0054931640625,
              scale: 2308574.9457714846
            },
            {
              level: 8,
              levelValue: 9,
              resolution: 0.00274658203125,
              scale: 1154287.4728857423
            },
            {
              level: 9,
              levelValue: 10,
              resolution: 0.001373291015625,
              scale: 577143.73644287116
            },
            {
              level: 10,
              levelValue: 11,
              resolution: 0.0006866455078125,
              scale: 288571.86822143558
            },
            {
              level: 11,
              levelValue: 12,
              resolution: 0.00034332275390625,
              scale: 144285.93411071779
            },
            {
              level: 12,
              levelValue: 13,
              resolution: 0.000171661376953125,
              scale: 72142.967055358895
            },
            {
              level: 13,
              levelValue: 14,
              resolution: 8.58306884765625e-005,
              scale: 36071.483527679447
            },
            {
              level: 14,
              levelValue: 15,
              resolution: 4.291534423828125e-005,
              scale: 18035.741763839724
            },
            {
              level: 15,
              levelValue: 16,
              resolution: 2.1457672119140625e-005,
              scale: 9017.8708819198619
            },
            {
              level: 16,
              levelValue: 17,
              resolution: 1.0728836059570313e-005,
              scale: 4508.9354409599309
            },
            {
              level: 17,
              levelValue: 18,
              resolution: 5.3644180297851563e-006,
              scale: 2254.4677204799655
            },
            {
              level: 18,
              levelValue: 19,
              resolution: 2.68220901489257815e-006,
              scale: 1127.23386023998275
            },
            {
              level: 19,
              levelValue: 20,
              resolution: 1.341104507446289075e-006,
              scale: 563.616930119991375
            },
            {
              level: 20,
              levelValue: 21,
              resolution: 6.705522537231445375e-7,
              scale: 281.8084650599956875
            },
            {
              level: 21,
              levelValue: 22,
              resolution: 3.3527612686157226875e-7,
              scale: 140.90423252999784375
            }
            ]

        })

        // 创建WebTileLayer实例
        const mylayer = new WebTileLayer({
          urlTemplate: bashUrl + url,
          tileInfo: tileInfo,
          spatialReference: {
            wkid: 4326
          },
          // 设置边界,避免超出范围了请求后台报404
          fullExtent:new Extent({
            xmin:84.96650291898627,
            ymin:45.53639816676759,
            xmax:85.03257700820414,
            ymax:45.600000206741775,
          })
        });
        // 格式化url
        mylayer.getTileUrl = function (level, row, col) {
          return this.urlTemplate
            .replace("{z}", level)
            .replace("{x}", col)
            .replace("{y}", row);
        }

        // 创建地图实例
        const map = new Map();
        // 创建视图实例
        const view = new SceneView({
          container: "viewDiv",
          map: map,
          // 中心点位置
          center: [85.03257700820414, 45.53639816676759],
          zoom: 10,
          spatialReference: new SpatialReference({
            wkid: 4326,
          })
        });
        map.add(mylayer, 0);
      })

  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>
相关推荐
百度网站快速收录5 小时前
网站快速收录:如何优化网站头部与底部信息?
前端·html·百度快速收录·网站快速收录
大模型铲屎官7 小时前
HTML从入门到精通:链接与图像标签全解析
开发语言·前端·javascript·html·编程·链接标签·图像标签
大模型铲屎官7 小时前
HTML 列表标签全解析:无序与有序列表的深度应用
前端·javascript·html·有序列表·列表标签·无序列表
engchina7 小时前
深入解析:一个简单的浮动布局 HTML 示例
前端·css·html
萌小丹Fighting8 小时前
【ArcGIS_Python】使用arcpy脚本将shape数据转换为三维白膜数据
开发语言·python·arcgis
大模型铲屎官14 小时前
HTML常见文本标签解析:从基础到进阶的全面指南
前端·css·html·编程·html5·文本标签
爱掉发的小李16 小时前
JavaScript网页设计案例(任务管理器)
前端·javascript·css·html·css3
LCG元2 天前
Vue.js组件开发-实现HTML内容打印
前端·vue.js·html
山禾女鬼0012 天前
深入探索 HTML5 拖拽效果 API:打造流畅交互体验
前端·html·html5
我命由我123452 天前
前端性能优化指标 - DCL(触发时机、脚本对 DCL 的影响、CSS 对 DCL 的影响)
开发语言·前端·javascript·css·性能优化·html·js