• 02 创建一个三维地图


          三维地图的创建跟上文中的创建二维地图差不太多,只是所使用的地图视角不同而已,下面是最终效果图:

    接下来我们看看具体的实现过程:

    1 创建基本的HTML页面结构,创建div,然后设置基本样式,如下:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
            <title>Intro to SceneView - Create a 3D map</title>
            <style>
                html, body, #viewDiv {
                    padding: 0;
                    margin: 0;
                    height: 100%;
                     100%;
                }
            </style>
        </head>
        <body>
            <div id="viewDiv"></div>
        </body>
    </html>

    2 引入所需的开发包,在此处也只是需要一个样式文件和基础的js文件,如下:

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

    3 加载所需的模块,然后实例化地图:

    <script>
        require([
            "esri/Map",
            "esri/views/SceneView"
        ], function(Map, SceneView){
            var map = new Map({
                basemap: "osm",
                ground: "world-elevation"
            });
        });
    </script>

    4 创建地图视角,注意,在此处的地图视角不再是MapView,而是SceneView,所以大家一定要注意:

    var view = new SceneView({
        container: "viewDiv",
        map: map, // 绑定地图
        scale: 30000000, // 设定比例尺 1:30,000,000
        center: [104.071469,30.662036] // 视角中心
    });

    5 至此,一个三维地图创建完成,完整代码如下:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
            <title>Intro to SceneView - Create a 3D map</title>
            <style>
                html, body, #viewDiv {
                    padding: 0;
                    margin: 0;
                    height: 100%;
                     100%;
                }
            </style>
            <link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css">
            <script src="https://js.arcgis.com/4.9/"></script>
            <script>
                require([
                    "esri/Map",
                    "esri/views/SceneView"
                ], function(Map, SceneView){
                    var map = new Map({
                        basemap: "osm",
                        ground: "world-elevation"
                    });
                    var view = new SceneView({
                        container: "viewDiv",
                        map: map, // 绑定地图
                        scale: 30000000, // 设定比例尺 1:30,000,000
                        center: [104.071469,30.662036] // 视角中心
                    });
                });
            </script>
        </head>
        <body>
            <div id="viewDiv"></div>
        </body>
    </html>

    X北辰北的博客,想看更多内容,请移步我的个人博客:http://www.xbeichenbei.com/
  • 相关阅读:
    Nginx知识总结 当幸福来敲门
    JVM 当幸福来敲门
    Redis锁异步线程中使用问题
    使用Mybatis批量插入大量数据的实践
    JdbcType
    Vue和Springboot实现SM4加密和解密(前端可加密,后端可加解密,MD5同理)
    springboot2.x+quartz 实现分布式任务调度
    mpvue 入坑指南
    Vue中使用jssdk
    datax数据迁移所支持的类型及其配置(demo)[txtfilereader]
  • 原文地址:https://www.cnblogs.com/xuqw/p/11794656.html
Copyright © 2020-2023  润新知