arcgis js api 4.15实现二维矢量和倾斜摄影完美贴合效果

本文链接：https://blog.csdn.net/u012599377/article/details/105723036

早在2018年的时候，就遇到一个需求，实现矢量和倾斜摄影的叠加，但是当时采取的土办法，手动给矢量一个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>