ArcGIS API for JavaScript三维管网之三维模型制作（无插件）

本文链接：https://blog.youkuaiyun.com/Yuanben_wuxin/article/details/80293240

arcgis三维处理方案很多，以前经常使用第三方的三维模型插件类似threejs，但是这类插件虽说能在地图上显示，作为要素图层在地图上显示时点击效果等想要和arcgis完全兼容掉很难，后来使用arcgis pro发布三维模型，然后发布符合i3s标准的json模型，这个解决方案是最完美的，但是现在arcgis pro试用期时间太短，几天就不让用了，再后来就选择用ArcGIS API for JavaScript4.7版本的mesh绘制，featurelayer本来就完全继承自Graghicslayer所以界面看起来毫无违和感（*注：在4.7版本中贴图路径必须是服务器路径，相对路径和绝对路径都不行，下面代码中没贴代码，感兴趣的可以自己去查下）

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>Working with 3D mesh primitives - 4.7</title>

    <link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css">
    <script src="https://js.arcgis.com/4.7/"></script>

    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>

    <script>
        require([
            "esri/Map",
            "esri/Graphic",
            "esri/views/SceneView",
            "esri/geometry/Mesh",
            "esri/geometry/Point",
            "esri/geometry/SpatialReference",
            "esri/geometry/support/meshUtils",
            "esri/geometry/support/ImageMeshColor",
            "dojo/domReady!"
        ],
            function (
                Map, Graphic,
                SceneView,
                Mesh, Point, SpatialReference,
                meshUtils, ImageMeshColor
            ) {

                var map = new Map({
                    basemap: "satellite",
                    ground: "world-elevation"
                });

                var view = new SceneView({
                    container: "viewDiv",
                    map: map,
                    environment: {
                        atmosphere: {
                            quality: "high"
                        },
                        lighting: {
                            directShadowsEnabled: true,
                            ambientOcclusionEnabled: true
                        }
                    },
                    camera: {
                        position: [7.8233347, 46.3409284, 2032.93599],
                        heading: 19.72,
                        tilt: 86.007
                    }
                });


                function createSnowManGeometry(pt) {
                    var blackMaterial = {
                        color: "black"
                    };
                    var orangeMaterial = {
                        color: "orange"
                    };
                    var redMaterial = {
                        color: "red"
                    };

                    // 消防栓底部圆柱
                    var lowerBody = Mesh.createCylinder(pt, {
                        size: {
                            width: 4,
                            depth: 4,
                            height: 0.5
                        },
                        material: redMaterial
                    });
                    //消防栓粗枝杆
                    var upperBody2 = Mesh.createCylinder(pt, {
                        size: {
                            width: 3,
                            depth: 3,
                            height: 4
                        },
                        material: redMaterial
                    });
                    //消防栓细枝杆
                    var upperBody3 = Mesh.createCylinder(pt, {
                        size: {
                            width: 0.6,
                            depth: 0.6,
                            height: 6
                        },
                        material: redMaterial
                    });
                    //消防栓中间横杆
                    var hengBody3 = Mesh.createCylinder(pt, {
                        size: {
                            width: 1.7,
                            depth: 1.7,
                            height: 4
                        },
                        material: redMaterial
                    });
                    var hengBody2 = Mesh.createCylinder(pt, {
                        size: {
                            width: 0.7,
                            depth: 0.7,
                            height: 5
                        },
                        material: redMaterial
                    });
                    //消防栓中间横杆两端办圆球
                    var hengBodyphere = Mesh.createSphere(pt, {
                        size: 1.7,
                        material: redMaterial
                    });
                    var hengBodyphere2 = Mesh.createSphere(pt, {
                        size: 1.7,
                        material: redMaterial
                    });
                    // var head = Mesh.createBox(pt, {
                    //     size: {
                    //         width: 3.9,
                    //         height: 0.3,
                    //         depth: 0.5
                    //     },
                    //     material: redMaterial
                    // });
                    // var head2 = Mesh.createBox(pt, {
                    //     size: {
                    //         width: 3.9,
                    //         height: 0.3,
                    //         depth: 0.5
                    //     },
                    //     material: redMaterial
                    // });
                    var nose = Mesh.createCylinder(pt, {
                        size: {
                            width: 3.5,
                            depth: 3.5,
                            height: 0.5
                        },
                        material: redMaterial
                    });
                    //消防栓顶部半圆球
                    var topSphereBody = Mesh.createSphere(pt, {
                        size: 3,
                        material: redMaterial
                    });
                    // Place individual parts to make up the snow man
                    //upperBody.offset(0, 0, 2.5);
                    upperBody2.offset(0, 0, 0.5);
                    upperBody3.offset(0, 0, 0.5);
                    // head.offset(0, 0, 4.5);
                    // head2.offset(0, 0, 4.5).rotate(0, 0, -90);
                    topSphereBody.offset(0, 0, 3);
                    nose.offset(0, 0, 4.5);
                    hengBody2.offset(0, 0, 0.5).rotate(90, 0, 0);
                    hengBody3.offset(0, 0, 1.1).rotate(90, 0, 0);
                    hengBodyphere.offset(0,1.5, 2.1).rotate(0, 0, 0);
                    hengBodyphere2.offset(0, -1.5, 2.1).rotate(0, 0, 0);

                    // Finally, merge the separate parts into a single mesh geometry
                    return meshUtils.merge([lowerBody, upperBody2, upperBody3, nose, topSphereBody, hengBody2,hengBody3,hengBodyphere,hengBodyphere2
                    ]);
                }

                // A basic 3d fill symbol. Here we will use the material colors that are set
                // on the geometries. We use a white fill symbology (the symbology color
                // is mixed into the intrinsic geometry materials and pure white will have no effect).
                var symbol = {
                    type: "mesh-3d",
                    symbolLayers: [{
                        type: "fill"
                    }]
                };

                // One snow man
                var snowManLocation = new Point({
                    x: 870934.67356809,
                    y: 5835285.101616,
                    z: 2013.60,
                    spatialReference: SpatialReference.WebMercator
                });

                // Create and add the snowman geometry
                var snowManGeometry = createSnowManGeometry(snowManLocation);
                view.graphics.add(new Graphic(snowManGeometry, symbol));
            });
    </script>
</head>

<body>
    <div id="viewDiv"></div>
</body>

</html>