【二】arcgis JavaScript api 实现加载不同坐标系的底图和三维服务
提示：如果是天地图底图参考这篇文章
【一】arcgis JavaScript api 实现加载不同坐标系的底图和三维服务_arcgis js api 调用三维地图服务-CSDN博客
需求：
前端开发实现底图（wkid：3857，web墨卡托），高程服务（wkid：3857，web墨卡托）和不同坐标系的三维服务（wkid：4490，cgcs2000）套合
二三维地图服务现状：
栅格切片服务：3857
影像切片服务：3857
高程服务：3857
三维服务：4490
思路：
- 原有栅格切片服务，可以发布一个空的3857的影像切片服务，然后复用切片；
- 影像切片服务都在新环境下采用imagetilelayer的方式，可以直接支持3857的栅格切片服务和影像切片服务与4490的三维服务套合，在global和local场景下都能加载，
- 高程服务由于是dem数据发布的，需要重新将dem转成4490坐标系重切。
最终效果：
实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>IntegratedMeshLayer - 4.27</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.26/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.26/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/Map",
"esri/views/SceneView",
"esri/layers/IntegratedMeshLayer",
"esri/layers/ImageryTileLayer",
"esri/Basemap",
"esri/Ground",
"esri/layers/ElevationLayer",
"esri/geometry/SpatialReference",
], function (
Map,
SceneView,
IntegratedMeshLayer,
ImageryTileLayer,
Basemap,
Ground,
ElevationLayer,
SpatialReference
) {
const spatialReference = new SpatialReference({
wkid: 4490
});
//定义业务图层，例如：倾斜模型服务
var layer = new IntegratedMeshLayer({
url: "https://ncportal.geoscene.cn/server/rest/services/Hosted/nanning4490/SceneServer",
});
const tilelayer = new ImageryTileLayer({
url: "https://ncportal.geoscene.cn/server/rest/services/nanning3857image/ImageServer",
});
//定义高程表面
var customElevation = new ElevationLayer({
url: "https://ncportal.geoscene.cn/server/rest/services/nanningelevation4490/ImageServer",
});
var customeGround = new Ground({
layers: [customElevation],
});
//定义底图
let basemap = new Basemap({
baseLayers: tilelayer,
});
var map = new Map({
layers: [layer], //业务图层
basemap: basemap, //底图
ground: customeGround, //高程表面
});
var view = new SceneView({
container: "viewDiv",
map: map,
qualityProfile: "high",
spatialReference:spatialReference
});
view.when(function () {
view.qualitySettings.memoryLimit = 4096; //20190722 修改内存大小。
view.goTo(tilelayer.fullExtent);
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>