1. Method introduction
The previous blog introduced how to edit the oblique photography model in Pro, refer to the blog post:
After JS version 4.16, it actually supports online editing of the released Scene Layer service on the front end. Controlled by the modifications attribute of IntegratedMeshLayer.
The official website example is to interactively draw a GraphicLayer for cutting, masking and flattening operations. For details, please refer to the official website DEMO example:
2. Edit the model based on the published element service
Here to read polygon feature information from a Feature Layer feature service:
var polygonLayerUrl ='https://xxx.com/arcgisserver/rest/services/Hosted/polygon1/FeatureServer/0';
var queryTask = new QueryTask({
url: polygonLayerUrl,
});
Then modify the modification attribute through the IntegratedMeshLayer attribute to increase the clip editing effect:
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);
});
Specific effect:
complete sample code:
<!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>