使用ArcGIS JS加载CesiumLab切片
最编程
2024-01-21 10:24:09
...
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);
})
推荐阅读
-
嵌入式预览 pdf_前端实现高性能在线 PDF 预览,您将始终使用!-程序构思 - 在切片中加载 PDF 内容
-
如何使用Vue.js实现页面加载结束后的自动倒计时跳转功能
-
如何使用JS和CSS在网页加载过程中制作动态loading效果
-
在Vue中使用three.js加载各种3D模型文件(包括glb、gltf、FBX和json)
-
使用ArcGIS JS加载CesiumLab切片
-
使用Mapbox JS API加载ArcGIS切片服务的步骤
-
使用ArcGIS JavaScript API 4.x通过BaseTileLayer加载天地图Web墨卡托(WKID:3857)坐标系的方法
-
MapTalks.js 使用小结(三): 各类地图加载
-
使用Three.js加载glTF文件