arcgis js（二）显示三维地图

- 日理万妓 2022-09-06 11:29 231阅读 0赞

1、上一节讲了arcgis js入门与提高（一）加载二维地图[arcgis js（一）显示二维地图\_郝大大的博客-CSDN博客][arcgis js_-CSDN]，本节继续讲如何加载三维地图，与3.x版本不同，ArcGIS API for JavaScript 3.x版本地图都是显示在map中，从4.x版本之后地图的显示全部放在view上，二维的叫mapview，三维的叫sceneview，因此三维场景加载方式如下：

<html>
    
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <title>
            3D map
        </title>
        <style>
            html,
            body,
            #viewDiv {
                padding: 0;
                margin: 0;
                height: 100%;
                width: 100%;
            }
        </style>
    
        <link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css" />
        <script src="https://js.arcgis.com/4.20/"></script>
    
        <script>
            require(["esri/Map", "esri/views/SceneView"], (Map, SceneView) => {
                const map = new Map({
                    basemap: "topo-vector",
                    ground: "world-elevation"
                });
    
                const view = new SceneView({
                    container: "viewDiv",
                    map: map,
                    scale: 50000000,
                    center: [-101.17, 21.78]
                });
            });
        </script>
    </head>
    
    <body>
        <div id="viewDiv"></div>
    </body>
    
    </html>

2、效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hCX1Byb2dyYW1tZXI_size_16_color_FFFFFF_t_70][]

[arcgis js_-CSDN]: https://blog.csdn.net/HB_Programmer/article/details/119817430
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hCX1Byb2dyYW1tZXI_size_16_color_FFFFFF_t_70]: /images/20220829/7927117a8c764036967804d3032700af.png