ArcGIS API For Javascript 4.15 绘制地图：三维地图绘制 SceneView 和 ElevationLayer

阳光穿透心脏的1/2处 2022-12-26 15:28 172阅读 0赞

## 1、HMTL 页面 ##

## index.html
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>第八讲-SceneView</title>
        <link rel="stylesheet" href="http://127.0.0.1/arcgis_js_api/4.15/esri/css/main.css">
        <link rel="stylesheet" href="css/index.css">
        <script src="http://127.0.0.1/arcgis_js_api/4.15/init.js"></script>
        <script src="js/index.js"></script>
    </head>
    
    <body>
        <div id="viewDiv"></div>
    </body>
    </html>

## 2、样式设置 ##

## index.css html, body { 
        height: 100%;
        width: 100%;
        padding: 0;
        margin: 0;
    }
    
    #viewDiv { 
        height: 100%;
        width: 100%;
    }
    
    .tool-btn { 
        position: absolute;
        top: 20px;
        right: 20px;
    }

## 3、Javascript API 实现地图绘制 ##

## index.js
    
    require([
        "esri/Map",
        "esri/views/SceneView",
        "esri/layers/MapImageLayer",
        "esri/layers/TileLayer",
        "esri/layers/ElevationLayer"
    ], function(Map, SceneView, MapImageLayer, TileLayer, ElevationLayer) { 
    
        var worldCities = new MapImageLayer({ 
            url: "http://127.0.0.1:6080/arcgis/rest/services//SampleWorldCities/MapServer"
        });
    
        var nmgXzqhTileLayer = new TileLayer({ 
            url: "http://127.0.0.1:6080/arcgis/rest/services/NMGXZQH/MapServer"
        });
    
        var worldCitiesTileLayer = new TileLayer({ 
            url: "http://127.0.0.1:6080/arcgis/rest/services//SampleWorldCities/MapServer"
        });
    
        var nmgXzqhTileLayer = new TileLayer({ 
            url: "http://127.0.0.1:6080/arcgis/rest/services/NMGXZQH/MapServer"
        });
    
        var nmg30dem = new ElevationLayer({ 
            url: "http://127.0.0.1:6080/arcgis/rest/services/nm_dem_30m_w/ImageServer"
        });
    
        var map = new Map({ 
            // basemap: "satellite"
            // basemap: "osm"
            // basemap: "streets"
            basemap: "hybrid",
            // ground: "world-elevation",
            // layers: [nmgXzqhTileLayer]
    
            ground: { 
                layers: [nmg30dem]
            },
            layers: []
        });
    
        // map.ground.layers.add(nmg30dem);
    
        var view = new SceneView({ 
            container: "viewDiv",
            map: map,
            center: [111.43, 40.85],
            zoom: 10
        });
    
    });

## 4、实现效果 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/43014ab3a88f4511bd6e2d1128e82056.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20201206142119625.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU=,size_16,color_FFFFFF,t_70#pic_center