vue 调用arcgis pro 实现地图的实现

vue 调用arcgis pro 实现地图的实现

<template>  
	<div>    
		<!-- 地图主题组件 -->   
		 <div class="main">      
		 	<div id="viewDiv"></div>    
		 </div>     	
	</div>
 </template>

<script>
//引用esri-loader
import { loadModules } from 'esri-loader';
import ToolBar from "@/components/ToolBar.vue";
import Measurement from "@/components/Measurement.vue";
export default {  
name: 'web-map',  
data() {   
 return { };  
        
   }, 
 components: {    
 ToolBar,   
  Measurement, 
   }, 
 mounted() {     
   //延迟加载JavaScript模块和CSS所需的ArcGIS API   
    //使用Dojo的加载器要求类  
      loadModules([     
         'esri/Map',//加载特定于创建地图的代码     
            'esri/views/MapView',//2D地图引入      
              'esri/WebScene',      
                'esri/views/SceneView',//3D地图引入，加载允许以3D模式查看地图的代码 
                       "dojo/domReady!",    
                    ], { css: true })  
                      .then(    
                        ([     
                         ArcGISMap, MapView,     
                          WebScene,SceneView,  
                              ]) => {    
                                  var scene = new WebScene({      
                                        portalItem: {//发布服务的portal  
                                                      id:
                                                       "d30a699e1d0a4f0780bc80373911e86e"        

    },                
        });        
        //创建地图       
         this.view = new SceneView({      
             container: "viewDiv",//视图的容器      
                 map: scene,//引用创建的映射对象,实例放入视图中   
                      });     
                       }  
                         )  
                           .catch(err => { 
                                // handle any script or module loading errors    
                                  console.error(err); 
                                   });
                                   ; 
                                    }, 
};

<style lang="less" scoped>// html,// body {//   padding: 0;//   margin: 0;//   width: 80%;//   height: 100%;// }
.main { position: absolute;  top: 90px;  bottom: 0;  width: 87%;  #viewDiv {    width: 100%;    height: 95%;  }}</style>