需求:
天地图只切到了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>