zoukankan      html  css  js  c++  java
  • 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/
  • 相关阅读:
    Computer Vision: Algorithms and ApplicationsのImage processing
    LOJ6079「2017 山东一轮集训 Day7」养猫
    网络七层协议及其作用
    观察者模式深度剖析
    NIO 中的读和写
    NIO的通道和缓冲区
    NIO简介
    使用OutputStream向屏幕上输出内容
    对象的序列化
    PushBackInputStream回退流
  • 原文地址:https://www.cnblogs.com/xuqw/p/11794656.html
Copyright © 2011-2022 走看看