首页 > 编程语言> > ArcGIS API For Javascript 4.15 绘制地图：三维地图绘制 SceneView 和 ElevationLayer

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

2020-12-06 14:31:07 作者：互联网

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、实现效果

标签：layers,4.15,url,Javascript,rest,arcgis,new,var,绘制地图
来源： https://blog.csdn.net/gongxifacai_believe/article/details/110734232