1.メソッドの紹介
以前のブログでは、Proで斜め写真モデルを編集する方法を紹介しました。ブログ投稿を参照してください。
JSバージョン4.16以降、フロントエンドでリリースされたSceneLayerサービスのオンライン編集を実際にサポートしています。IntegratedMeshLayerのmodifications属性によって制御されます。
公式ウェブサイトの例は、カット、マスキング、フラット化操作のためにGraphicLayerをインタラクティブに描画することです。詳細については、公式ウェブサイトのデモの例を参照してください。
2.公開された要素サービスに基づいてモデルを編集します
フィーチャレイヤーフィーチャサービスからポリゴンフィーチャ情報を読み取るには、次のようにします。
var polygonLayerUrl ='https://xxx.com/arcgisserver/rest/services/Hosted/polygon1/FeatureServer/0';
var queryTask = new QueryTask({
url: polygonLayerUrl,
});
次に、IntegratedMeshLayer属性を使用して変更属性を変更し、クリップ編集効果を高めます。
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>