当前位置：服务支持 > 软件文章 > ArcGIS JS API 4.15实现二维矢量与倾斜摄影完美贴合效果

ArcGIS JS API 4.15实现二维矢量与倾斜摄影完美贴合效果

阅读数 14

遇到一个需求，实现矢量和倾斜摄影的叠加，但是当时采取的土办法，手动给矢量一个z值，然后通过手动去调整z值，实现矢量和倾斜摄影的叠加，如果是在倾斜摄影比较平整的区域，这个叠加还能接受，但是对于倾斜摄影起伏较多的区域，就束手无策了，所以其实这个问题一直没有个好的解决办法。

前不久arcgis js api4.15发布，解决了这个，可以实现矢量和倾斜摄影的完美叠加，参考：https://developers.arcgis.com/javascript/latest/sample-code/layers-integratedmeshlayer/index.html。可以看看效果

本篇博客就是在离线状态下实现整个过程：

（1）高程地形服务发布

（2）倾斜摄影模型及要素服务发布

（3）通过 arcgis js api 去调用，前端实现叠加

一、高程地形服务发布

在线环境中，可以调用自带的地形服务，实现起伏的效果，但是离线环境需要自己去发布相应的高程地形服务，不然是没有三维效果的，可以参考

https://blog.csdn.net/u012599377/article/details/105527909

二、倾斜摄影服务及二维要素服务发布

倾斜摄影模型发布服务，必须要求有ArcGIS Enterprise环境，即Portal+Server+Datastore+ Web adaptor

1. 二维要素服务发布

可以直接通过portal上传shp的zip压缩包，实现二维要素服务的发布

2. 倾斜摄影模型发布

（1）如果是osgb格式，通过ArcGIS Pro自带的osgb转slpk工具转换成slpk，之后通过portal上传发布，Pro2.5中支持地方 坐标系 ，也支持2000坐标系

（2）如果是cc等模型处理软件，也可以直接导出为slpk，通过portal上传发布

三、arcgis js api 调用

核心就是将要素服务的elevationInfo属性设置为on-the-ground模式，代码如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">    <title>倾斜摄影叠加要素服务</title>    <style>        html, body, #viewDiv{            padding: 0;            margin: 0;            height: 100%;            width: 100%;        }    </style>    <link rel="stylesheet" href="https://xxx/4.15/esri/themes/light/main.css">    <script src = "https://xxx/4.15/dojo/dojo.js"></script>    <script>        require([            "esri/Map",            "esri/views/SceneView",            "esri/WebScene",            "esri/layers/IntegratedMeshLayer",            "esri/layers/FeatureLayer",        ], function(Map, SceneView,  WebScene, IntegratedMeshLayer, FeatureLayer){             var mesh = new IntegratedMeshLayer({                url: "倾斜摄影模型服务地址"            });             var featurelayer = new FeatureLayer({               url: "要素服务地址"            });             featurelayer.elevationInfo = {                mode: "on-the-ground"            }              var map = new Map({                basemap: "topo-vector",                ground: "world-elevation"     //可以设置为自己的地形服务            });             var view = new SceneView({                container: "viewDiv",                map: map,                camera: {                    x: 106.984,                    y: 29.07,                    z: 5000,                    spatialReference: {                        wkid: 4326                    },                },            });              map.add(mesh);            map.add(featurelayer);           })     </script> </head><body><div id="viewDiv"></div></body></html>