一、方法介绍
之前的博客介绍了如何在Pro中编辑倾斜摄影模型，参考博文：
在JS版本4.16版本之后，其实也支持在前端对发布的Scene Layer服务进行在线的编辑。通过 IntegratedMeshLayer 的modifications属性进行控制。
官网示例为交互式绘制GraphicLayer进行剪裁、掩膜及压平操作，具体可以参考官网DEMO示例：
二、根据发布的要素服务编辑模型
这里从一个Feature Layer要素服务读取面要素信息：
var polygonLayerUrl ='https://xxx.com/arcgisserver/rest/services/Hosted/polygon1/FeatureServer/0';
var queryTask = new QueryTask({
url: polygonLayerUrl,
});
然后通过 IntegratedMeshLayer属性修改modification属性，增加clip编辑效果：
queryTask.execute(query).then(function (results) {
const geometry = results.features[0].geometry;
console.log(geometry);
const modificaiton = new SceneModification({
geometry,
type: 'clip',
});
const modificaitons = new SceneModifications([modificaiton]);
debugger;
const sr1 = new SpatialReference({
wkid: 4326 });
const meshLayer = new IntegratedMeshLayer({
url: 'https://xxx.com/arcgisserver/rest/services/Hosted/Scenetest_WSL1/SceneServer',
spatialReference: sr1
});
meshLayer.modifications = modificaitons;
map.add(meshLayer);
});
具体效果：
完整示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Sameple</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.18/"></script>
<script>
require([
'esri/tasks/QueryTask',
'esri/tasks/support/Query',
'esri/layers/IntegratedMeshLayer',
'esri/Map',
'esri/views/SceneView',
'esri/layers/SceneLayer',
'esri/config',
'esri/layers/support/SceneModifications',
'esri/layers/support/SceneModification',
'esri/geometry/Polygon',
'esri/geometry/SpatialReference',
], function (
QueryTask,
Query,
IntegratedMeshLayer,
Map,
SceneView,
SceneLayer,
esriConfig,
SceneModifications,
SceneModification,
Polygon,
SpatialReference,
) {
esriConfig.portalUrl = 'https://xxx.com/arcgisportal/';
// Create Map
var map = new Map({
ground: 'world-elevation'
});
// Create the SceneView
var view = new SceneView({
container: 'viewDiv',
map: map,
camera: {
position: [106.9289321, 29.7183102, 800],
tilt: 81,
heading: 50,
},
});
view.when(function () {
var polygonLayerUrl =
' https://xxx.com/arcgisserver/rest/services/Hosted/polygon1/FeatureServer/0';
var queryTask = new QueryTask({
url: polygonLayerUrl,
});
var query = new Query();
query.returnGeometry = true;
query.outFields = ['*'];
query.where = 'OBJECTID= 1';
queryTask.execute(query).then(function (results) {
const geometry = results.features[0].geometry;
console.log(geometry);
const modificaiton = new SceneModification({
geometry,
type: 'clip',
});
const modificaitons = new SceneModifications([modificaiton]);
debugger;
const sr1 = new SpatialReference({
wkid: 4326 });
const meshLayer = new IntegratedMeshLayer({
url: 'https://xxx.com/arcgisserver/rest/services/Hosted/Scenetest_WSL1/SceneServer',
spatialReference: sr1
});
meshLayer.modifications = modificaitons;
map.add(meshLayer);
});
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>