html,body{margin:0;填充：0；宽度：100%；高度：100%；}.main{位置：绝对；顶部：70px；底部：0；宽度：100%；#map{宽度：100%；高度：100%；}}1.创建Vue项目我们使用Vue-CLI工具快速创建下载Vue-CLI工具yarnaddglobal@vue/cli#或者：npmi@vue/cli-g创建一个Vue项目，根据自己的项目进行配置要求，这里就不赘述了。vuecreateexample#example是项目的名字，我这里以example为例启动项目，启动测试cdexamplearnserve访问http://localhost:8080，会出现vue界面提示项目创建成功。2、引入ArcGISAPI由于历史原因，ArcGISAPI采用的AMD模块化思想与Vue的模块化思想相冲突。ArcGIS官方提供了esri-loader解决方案。我们使用这个包来异步加载和下载ArcGISAPI。中提到的ArcGISAPIforJavaScript本地部署（开发环境）就派上用场了。新建配置文件src/map/config.js，配置托管API地址exportdefault{//加载配置loadConfig:{url:'http://localhost:3000/arcgis-3.32/init.js',//hostedAPIAddress},//初始化位置startExtent:[118.54805985687483,36.48416358185947,120.25643388031263,35.52697974396869,],}在src/map/init.js新建ArcGIS加载类代码如下/*lint-var-disable-us描述：arcgis地图部分*作者：LuckRain7*日期：2020-04-2820:44:49*/import{loadModules,loadCss}from"esri-loader";//异步加载模块importconfigfrom"./config";//配置项import{DataType}from"../utils/index";//效用函数类ArcGIS{constructor(){this.map=null;//映射this.baseMap=null;//mapbaseFigure}init($el){//为地图加载必要的样式文件loadCss("http://localhost:3000/arcgis-3.32/esri/css/esri.css");loadCss("http://localhost:3000/arcgis-3.32/dijit/themes/claro/claro.css");loadModules(["esri/map","tdlib/SDTDTLayer","tdlib/SDRasterLayer","tdlib/SDRSAnnoLayer","esri/geometry/Extent","esri/SpatialReference","dojo/parser",],config.loadConfig).then(([Map,//地图模块SDTDTLayer,//山东天图矢量地图SDRasterLayer,//SDRSAnnoLayer,山东天图影像地图,//山东天图影像地图标注Extent,//范围模块SpatialReference,//坐标系模块Parser,//样式解析模块])=>{this.baseMap={vectorMap:newSDTDTLayer(),//矢量图rasterMap:newSDRasterLayer(),//图像贴图rasterMapAnnotation:newSDRSAnnoLayer(),//图像标注类型:1,//1是矢量|2:image};Parser.parse();//解析//设置初始地图位置conststartExtent=newExtent(...config.startExtent,newSpatialReference({wkid:4490}));//加载地图this.map=newMap($el,{extent:startExtent,//初始位置zoom:10,//缩放级别logo:false,//esrilogomaxZoom:18,//最大缩放级别sliderPosition:"bottom-right",//放大按钮位置});this.map.addLayer(this.baseMap.vectorMap,0);})//结束.catch((err)=>{console.error(err);});}/**description:Addlayer*param{Layer,Array}layer要添加的layer*param{number,Array}lever要添加的层数*/addLayer(layer,lever){//判断是否为数组if(DataType(layer,"array")){layer.forEach((item,index)=>{lever?this.map.addLayer(item,lever[index]):this.map.addLayer(item);});}else{杠杆？this.map.addLayer(layer,lever):this.map.addLayer(layer);}}}导出默认ArcGIS；3.创建地图组件并加载地图。导入我们上面创建的模块，实例化并执行里面的init方法并传入对应dom的ID
