ArcGIS前端修改编辑倾斜摄影模型

最新推荐文章于 2023-09-16 17:55:27 发布

孙同学的一个笔记本

最新推荐文章于 2023-09-16 17:55:27 发布

阅读量1.1k

点赞数

分类专栏： ArcGIS JS API笔记文章标签： arcgis

本文链接：https://blog.csdn.net/suntongxue100/article/details/112767030

版权

ArcGIS JS API笔记专栏收录该内容

10 篇文章 2 订阅

订阅专栏

一、方法介绍

之前的博客介绍了如何在Pro中编辑倾斜摄影模型，参考博文：

ArcGIS Pro 2.7编辑倾斜摄影模型

在JS版本4.16版本之后，其实也支持在前端对发布的Scene Layer服务进行在线的编辑。通过 IntegratedMeshLayer 的modifications属性进行控制。
在这里插入图片描述

官网示例为交互式绘制GraphicLayer进行剪裁、掩膜及压平操作，具体可以参考官网DEMO示例：

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

二、根据发布的要素服务编辑模型

这里从一个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);
                    });

具体效果：
（这里使用的模型数据和面数据都是WGS1984坐标系）
在这里插入图片描述
完整示例代码：

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

孙同学的一个笔记本

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
2
评论
ArcGIS前端修改编辑倾斜摄影模型

一、方法介绍之前的博客介绍了如何在Pro中编辑倾斜摄影模型，参考博文：ArcGIS Pro 2.7编辑倾斜摄影模型在JS版本4.16版本之后，其实也支持在前端对发布的Scene Layer服务进行在线的编辑。通过 IntegratedMeshLayer 的modifications属性进行控制。官网示例为交互式绘制GraphicLayer进行剪裁、掩膜及压平操作，具体可以参考官网DEMO示例：https://developers.arcgis.com/javascript/latest/
复制链接

扫一扫