arcgis加载json文件和gltf文件，并渲染出来

最新推荐文章于 2025-09-29 10:22:25 发布

原创最新推荐文章于 2025-09-29 10:22:25 发布 · 4.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#arcgis #json #gltf

学习同时被 2 个专栏收录

3 篇文章

订阅专栏

arcgis

1 篇文章

订阅专栏

这篇博客讲述了作者如何在ArcGIS中加载和渲染json及gltf文件。通过冷静思考和探索ArcGIS API，作者找到了直接使用的方法，成功实现了3D文件的加载，展示了加载后的效果，并分享了关键代码。

今天早上恰巧看到一个励志的鸡汤，瞬间随觉得2019年浑浑噩噩就溜走了，心中感慨万千，想写点什么。虽然一直想写点什么。

就从这两天同事弄arcgis做管理图标库功能中的预览开始。

老师说，遇到问题，要冷静，理智思考，从容应对。

1.想办法引入json文件，然后取json里面的信息，进行加载。

2.找arcgis 是否已有方法直接使用。

由于我也是菜鸟新手对arcgis API不熟，恰巧近期没那么忙，也为了熟悉arcgis API动手操作起来。一开始想着加载3d的文件，应该要使用Mesh什么的，遂看了半天，没弄好。在快要放弃时，无意发现arcgis已有方法。。。看到了希望的曙光，一顿操作。

加载后的样子：

上代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>arcgis加载json文件和gltf文件</title>

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

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

    <script>
        require([
            "esri/Map",
            "esri/views/SceneView",
            "esri/layers/GraphicsLayer",
            "esri/Graphic"
        ], function (Map, SceneView, GraphicsLayer, Graphic) {
            var map = new Map({
                basemap: ""
            });

            var view = new SceneView({
                container: "viewDiv",
                map: map,
                camera: {
                    // autocasts as new Camera()
                    position: {
                        // autocasts as new Point()
                        x: -0.17746710975334712,
                        y: 51.44543992422466,
                        z: 1266.7049653716385
                    },
                    heading: 0.34445102566290225,
                    tilt: 82.95536300536367
                }
            });

            /*********************
             * Add graphics layer
             *********************/

            var graphicsLayer = new GraphicsLayer();
            map.add(graphicsLayer);

            var point = {
                type: "point", // autocasts as new Point()
                x: -0.178,
                y: 51.48791,
                z: 1010
            };

            const treeSymbol = {
                type: "point-3d",
                symbolLayers: [{
                    type: "object",
                    resource: {
                        //gltf 文件同理，换上gltf url即可
                        // href: "http://localhost:8083/3d/json/Tram.json"
                        href: "https://jsapi.maps.arcgis.com/sharing/rest/content/items/4418035fa87d44f490d5bf27a579e118/resources/styles/web/resource/tree.json"
                    },
                    height: 200,
                    anchor: "bottom"
                }]
            };

            var treeGraphic = new Graphic({
                geometry: point,
                symbol: treeSymbol
            });
            graphicsLayer.add(treeGraphic);
        });
    </script>
</head>

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

</html>