Modificación y edición del front-end de ArcGIS del modelo de fotografía oblicua

1. Introducción al método

El blog anterior presentó cómo editar el modelo de fotografía oblicua en Pro, consulte la publicación del blog:

ArcGIS Pro 2.7 editar modelo de fotografía oblicua

Después de la versión 4.16 de JS, en realidad admite la edición en línea del servicio Scene Layer lanzado en la interfaz. Controlado por el atributo de modificaciones de IntegratedMeshLayer.
Inserte la descripción de la imagen aquí
Inserte la descripción de la imagen aquí

El ejemplo del sitio web oficial es dibujar de forma interactiva una capa gráfica para las operaciones de corte, enmascaramiento y aplanamiento. Para obtener más información, consulte el ejemplo de demostración del sitio web oficial:

https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-IntegratedMeshLayer.html#modifications

2. Edite el modelo según el servicio de elementos publicado.

Aquí para leer la información de la entidad poligonal de un servicio de entidades de la capa de entidades:

var polygonLayerUrl ='https://xxx.com/arcgisserver/rest/services/Hosted/polygon1/FeatureServer/0'; 
                    var queryTask = new QueryTask({
    
    
                        url: polygonLayerUrl,
                    });

Luego, modifique el atributo de modificación a través del atributo IntegratedMeshLayer para aumentar el efecto de edición del 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);
                    });

Efecto específico:
Inserte la descripción de la imagen aquí
código de muestra completo:

<!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>

Supongo que te gusta

Origin blog.csdn.net/suntongxue100/article/details/112767030
Recomendado
Clasificación