arcgis vue 添加图层优化_vue + ArcGIS 地图应用系列三：添加常规的地图组件

1. 首先创建工具菜单组件

创建文件 srccomponentsToolBar.vue

并通过组件通信写好对应接口

矢量

影像

底图

开始测量

取消测量

测量

点

线

面

圆形

长方形

停止标绘

清除标绘

标绘

图例

图层

export default {

name: "ToolBar",

methods: {

// 开启测量

measurement(type) {

this.$emit("measurement", type);

},

// 底图切换

baseMapChange(type) {

this.$emit("baseMapChange", type);

},

// 标绘

draw(type) {

this.$emit("draw", type);

},

// 显示图例

showLegend() {

this.$emit("showLegend");

},

// 显示图层

showLayerList() {

this.$emit("showLayerList");

},

},

};

.toolbar {

position: absolute;

top: 80px;

right: 40px;

height: 40px;

width: auto;

z-index: 99;

}

在 srcApp.vue 显示页面引入，并提供组件通讯接口

@measurement="measurement"

@baseMapChange="baseMapChange"

@draw="draw"

@showLegend="showLegend"

@showLayerList="showLayerList"

>

:show="isShowMeasurement"

@closMmeasurement="measurement"

>

import ToolBar from "./components/ToolBar.vue";

components: {

ToolBar

},

methods: {

// 测量

measurement(type) {

switch (type) {

case 0:

this.isShowMeasurement = false;

Map.MeasurementClose();

break;

case 1:

this.isShowMeasurement = true;

}

},

/* 地图切换 */

baseMapChange(type) {

Map.baseMapChang