使用Javascript API for ArcGIS 4.X实现二三维一体化

最新推荐文章于 2022-05-06 11:02:41 发布

Cenergy

最新推荐文章于 2022-05-06 11:02:41 发布

阅读量3k

点赞数 3

分类专栏： arcgis javascript 文章标签： javascript api arcgis 三维地图

本文链接：https://blog.csdn.net/qq_36264495/article/details/78032997

版权

javascript 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

arcgis

1 篇文章 0 订阅

订阅专栏

使用Javascript API for ArcGIS 4.X实现二三维一体化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <title>地图</title>
    <link rel="stylesheet" href="http://localhost/webgis/ArcGIS/arcgis_js_v44/arcgis_js_v44_api/arcgis_js_api/library/4.4/dijit/themes/claro/claro.css"/>
    <link rel="stylesheet" href="http://localhost/webgis/ArcGIS/arcgis_js_v44/arcgis_js_v44_api/arcgis_js_api/library/4.4/esri/css/main.css"/>
    <script src="http://localhost/webgis/ArcGIS/arcgis_js_v44/arcgis_js_v44_api/arcgis_js_api/library/4.4/dojo/dojo.js"></script>
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://localhost/webgis/ArcGIS/arcgis_js_v44/arcgis_js_v44_api/arcgis_js_api/library/4.4/init.js"></script>
    <style>
    *{
      margin: 0;
      padding: 0;
      font-size: SimSun "微软雅黑";
    }
     html, body{
        width: 100%;
        height: 100%;
      }
      #viewDiv{
        width: 100%;
        height: 100%;
      }
    #infoDiv{
      position: absolute;
      top:15px;
      left: 60px;
    }
    </style>
    <script>
      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/views/SceneView",
        "dojo/domReady!"
      ], function (Map, MapView, SceneView){
        var swapButton=document.getElementById("swap-btn");
        var appConfig={
          mapView:null,
          sceneView:null,
          activeView:null,
          container:"viewDiv"
        }
        var map=new Map({
          basemap:"streets",
          ground:"world-elevation"
        })
        var initialViewParams={
          map:map,
          zoom:4,
          center:[121,26],
          container:appConfig.container
        }
        appConfig.mapView=createView(initialViewParams,"2d");
        appConfig.activeView=appConfig.mapView;

        initialViewParams.container=null;
        appConfig.sceneView=createView(initialViewParams,"3d");
        swapButton.addEventListener('click',function(){
          swapView();
        })
         function swapView(){
          var is3D=appConfig.activeView.type==="3d";
          appConfig.activeView.container=null;
          if(is3D){
            appConfig.mapView.viewpoint=appConfig.activeView.viewpoint.clone();
            appConfig.mapView.container=appConfig.container;
            appConfig.activeView=appConfig.mapView;
            swapButton.value="3D";
          }
          else{
            appConfig.sceneView.viewpoint=appConfig.activeView.viewpoint.clone();
            appConfig.sceneView.container=appConfig.container;
            appConfig.activeView=appConfig.sceneView;
            swapButton.value="2D";
          }
         }
         function createView(params,type){
          var view;
          var is2D=type==="2d";
          if(is2D){
            view=new MapView(params);
            return view;
          }else{
            view=new SceneView(params);
          }
          return view;
         }});
    </script>
  </head>
  <body>
    <div id="viewDiv"></div>
    <div id="infoDiv">
      <input type="button" class="esri-component esri-widget-button seri-widget esri-interactive" id="swap-btn" value="3D">
    </div>
  </body>
</html>

结果如图所示：

Cenergy

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
使用Javascript API for ArcGIS 4.X实现二三维一体化

使用Javascript API for ArcGIS 4.X实现二三维一体化<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"/> <meta http-equiv="Access-Control-Allow-Origin" content="*"> <title>地图</title> <l
复制链接

扫一扫

专栏目录