arcgis js（二）显示三维地图

最新推荐文章于 2024-08-11 13:57:00 发布

之乎者也哦

最新推荐文章于 2024-08-11 13:57:00 发布

阅读量1k

点赞数 1

分类专栏： Web GIS 开发文章标签： web gis webgis

本文链接：https://blog.csdn.net/hb_programmer/article/details/119824236

版权

Web GIS 开发专栏收录该内容

12 篇文章 18 订阅

订阅专栏

1、上一节讲了arcgis js入门与提高（一）加载二维地图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、效果如下：