项目中加载了小范围的房屋倾斜摄影，同时为了查看相应的房屋属性信息，添加了2.5维的房屋白膜信息，用于响应鼠标点击。遇到问题是白膜添加后有一定高度，与倾斜摄影数据不能完全重合。所以采用设置倾斜摄影数据绝对高度的方式解决该问题。
问题截图如下
漂浮在空中的2.5维白膜
最终设置高度后的效果
设置高度代码
integratedMeshLayer.elevationInfo={
mode:"absolute-height",
offset:10,
}
完整示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>IntegratedMeshLayer - 4.12</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.12/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.12/"></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/SceneLayer"
], function(Map, SceneView, IntegratedMeshLayer,SceneLayer) {
var integratedMeshLayer = new IntegratedMeshLayer({
url: "http://online.deqing.gov.cn/integratedmeshlayer/wusicun3d-20190715-integratedmeshlayer/bfba6bb4-f61c-47ba-9d04-751399cd18ca/layers/0",
id: '22222',
});
integratedMeshLayer.elevationInfo={
mode:"absolute-height",
offset:10,
}
var building = new SceneLayer({
url: "http://online.deqing.gov.cn/scenelayer/dq_wsc_bm02-20190801-scenelayer/bfba6bb4-f61c-47ba-9d04-751399cd18ca/layers/0",
opacity: .6
});
var sceneLayersymbol = {
type: "mesh-3d", // autocasts as new MeshSymbol3D()
symbolLayers: [
{
type: "fill", // autocasts as new FillSymbol3DLayer()
// If the value of material is not assigned, the default color will be grey
material: {
color: [255, 247, 134]
}
}
]
};
building.renderer = {
type: "simple", // autocasts as new SimpleRenderer()
symbol: sceneLayersymbol
};
var map = new Map({
basemap: "satellite",
layers: [integratedMeshLayer,building],
ground: "world-elevation"
});
var view = new SceneView({
container: "viewDiv",
map: map,
camera: {
position: {
x: 119.92490106782304,
y: 30.57309273625568,
z: 231.56820025108755
},
heading: 354.6954944510733,
tilt: 57.14524690696458
}
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
网友评论