Vue+ArcGIS地图应用系列三：添加正则地图组件

.toolbar{position:absolute;顶部：80px；右：40px；高度：40px；宽度：自动；z-index:99;}为了页面美观，我们这里使用的UI库是：AntDesignVue项目源码仓库地址：https://github.com/LuckRain7/arcgis-api-for-javascript-vue1.首先创建工具菜单组件并创建文件srccomponentsToolBar.vue并通过组件通信编写相应的界面.toolbar{position:absolute;顶部：80px；右：40px；高度：40px；宽度：自动；z-index:99;}在srcApp.vue展示页面引入，提供组件通信接口效果图：1.底图切换在examplesrcmapinit.js文件中添加底图切换函数当约定Type=1时，使用addLayer方法添加矢量图层，移除图像层时约定Type=2，使用addLayer方法添加图像层，移除矢量图层ps:addLayer方法是对map.addLayer()baseMapChange(type)的二次封装{if(type===this.baseMap.类型）返回；//防止重复加载//添加图像if(type===2){this.addLayer([this.baseMap.rasterMap,this.baseMap.rasterMapAnnotation],[0,1]);this.removeLayer(this.baseMap.vectorMap);this.baseMap.type=2;}//添加向量else{this.addLayer(this.baseMap.vectorMap,0);this.removeLayer([this.baseMap.rasterMap,this.baseMap.rasterMapAnnotation,]);this.baseMap.type=1;}}在examplesrcApp.vue中应用/*mapswitch*/baseMapChange(type){Map.baseMapChange(type);}，效果图：2.测量组件这里需要在srcmapinit.js中加载ArcGIS的测量和单位模块("esri/dijit/Measurement","esri/units")ps:模块和下面导出的函数必须一一对应#example\src\map\init.jsloadModules(["esri/map","tdlib/SDTDTLayer","tdlib/SDRasterLayer","tdlib/SDRSAnnoLayer","esri/geometry/Extent","esri/SpatialReference",+"esri/dijit/Measurement",+"esri/units","dojo/parser",],config.loadConfig).then(([Map,//地图模块SDTDTLayer,//山东天图矢量图SDRasterLayer,//山东天图影像地图SDRSAnnoLayer,//山东天图影像地图标注Extent,//范围模块SpatialReference,//坐标系模块+Measurement,//测量模块+Units,//单位模块Parser,//样式分析模块])和Make相关配置示例rcmapinit.js（以下为增量代码，并非文件中的实际位置）//测量工具初始化this.measurement=newMeasurement({map:this.map,defaultLengthUnit:Units.KILOMETERS,defaultAreaUnit:Units.SQUARE_KILOMETERS,},document.getElementById("measurement"));this.measurement.startup();//关闭测量工具MeasurementClose(){this.measurement.clearResult();//清空地图模式//获取打开的工具名称关闭打开的工具this.measurement.getTool()&&this.measurement.setTool(this.mmeasurement.getTool().toolName,false);}创建测量组件srccomponentsMeasurement.vue引入srcApp.vuescript>methods:{//测量measurement(type){switch(type){case0:this.isShowMeasurement=false;Map.MeasurementClose();休息;案例1：this.isShowMeasurement=t后悔;}},}}},}}}效果图：3.比例尺组件这里需要在srcmapinit.js中加载ArcGIS比例尺模块（“esri/dijit/Scalebar”）ps：该模块和下面的导出函数必须是一个通过一个对应的loadModules([+"esri/dijit/Scalebar",],config.loadConfig).then(([+Scalebar,//scalemodule])初始化scaleScalebar({map:this.map,attachTo:"bottom-left",scalebarUnit:"metric",scalebarStyle:"line",});4.非常抱歉绘图组件，我写这个的时候重构了代码，你可以去代码仓库查看。重构的目的是为了模块化，这里需要加载ArcGIS的绘图模块、点样式模块、线样式模块、填充样式模块、图形模块和图形图层模块（“esri/toolbars/draw”、“esri/symbols/SimpleMarkerSymbol","esri/symbols/SimpleLineSymbol","esri/symbols/SimpleFillSymbol","esri/graphic","esri/layers/GraphicsLayer")/**描述：绘图工具*作者：LuckRain7*日期：2020-05-0717:05:55*/import{loadModules}from"esri-loader";importconfigfrom"../config";functiondrawInit(){loadModules(["esri/toolbars/draw",//绘制"esri/symbols/SimpleMarkerSymbol",//point"esri/symbols/SimpleLineSymbol",//line"esri/symbols/SimpleFillSymbol",//表面"esri/graphic",//图形模块"esri/layers/GraphicsLayer",//图形层模块],config.loadConfig).then(([Draw,SimpleMarkerSymbol,SimpleLineSymbol,SimpleFillSymbol,Graphic,GraphicsLayer,])=>{this.GraphicsLayer=GraphicsLayer;this.Graphic=Graphic;this.Draw=Draw;this.SimpleMarkerSymbol=SimpleMarkerSymbol;this.SimpleLineSymbol=SimpleLineSymbol;this.SimpleSimpleFillSymbol//Symbol=添加图形layerthis.DrawGraphics=newGraphicsLayer({id:"drawLayer"});//设置图层坐标系this.DrawGraphics.SpatialReference=newthis.SpatialReference({wkid:4490,});//绘制图形图层加载到地图上，图层设置为7this.map.addLayer(this.DrawGraphics,7);//实例化绘图this.draw=newDraw(this.map);//定义图形样式this.draw.markerSymbol=newSimpleMarkerSymbol();this.draw.lineSymbol=newSimpleLineSymbol();this.draw.fillSymbol=newSimpleFillSymbol();//添加绘制监听事件this.draw.on("draw-complete",drawEndEvent.bind(this));}).catch((err)=>{console.error(err);});}//内置函数绘制完成后，加载图形到图形层functiondrawEndEvent(evt){//添加图形到地图让符号；if(evt.geometry.type==="point"||evt.geometry.type==="multipoint"){symbol=this.draw.markerSymbol;}elseif(evt.geometry.type==="line"||evt.geometry.type==="polyline"){symbol=this.draw.lineSymbol;}else{symbol=this.draw.fillSymbol;}//获取图形样式lettx=this.Graphic(evt.geometry,symbol);//加载图形样式到地图this.DrawGraphics.add(tx);}//设置会说话的图形函数drawActive(type){lettool=null;开关（类型）{case"POINT":tool="POINT";休息;case"POLYLINE":工具="POLYLINE";休息;案例“多边形”：工具=“多边形”；工具=“圈子”；休息;案例“矩形”：工具=“矩形”；休息;案例“停止”：this.draw.deactivate();//停止绘制break;case“删除”：this.draw.deactivate();//停止绘制this.DrawGraphics.clear();//清除层中断；}if(tool!==null){this.draw.activate(this.Draw[tool]);//激活对应的绘图工具}}export{drawInit,drawActive};Introducesrcmapindex.jsimport{MeasurementClose}from"./modules/Measurement.js";//导入绘图函数ArcGIS.prototype.drawInit=drawInit;ArcGIS.prototype.drawActive=drawActive;组件中可以使用渲染图：推荐阅读vue+ArcGIS地图应用系列二：加载地图vue+ArcGIS地图应用系列一：arcgisapi本地部署（开发环境）跟我来！不要迷路