Skip to content

Commit 4ec5d07

Browse files
LuckRain7LuckRain7
committed
README:update
1 parent 10abdc4 commit 4ec5d07

File tree

2 files changed

+71
-102
lines changed

2 files changed

+71
-102
lines changed

‎Demo-3/README.md

+69-100
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
# vue + ArcGIS 地图应用系列三：添加常规的地图组件
22

3-
> 为了页面的美观，这里我们使用的UI库为： Ant Design Vue
3+
> 为了页面的美观，这里我们使用的 UI 库为： Ant Design Vue
44
>
5-
> 项目源码仓库地址：[https://github.com/LuckRain7/arcgis-api-for-javascript-vue ]( https://github.com/LuckRain7/arcgis-api-for-javascript-vue )
5+
> 项目源码仓库地址：[https://github.com/LuckRain7/arcgis-api-for-javascript-vue ](https://github.com/LuckRain7/arcgis-api-for-javascript-vue)
66
77
## 1. 首先创建工具菜单组件
88

@@ -18,12 +18,8 @@
1818
<!-- 地图切换按钮 -->
1919
<a-dropdown>
2020
<a-menu slot="overlay">
21-
<a-menu-item key="1" @click="baseMapChange(1)">
22-
矢量
23-
</a-menu-item>
24-
<a-menu-item key="2" @click="baseMapChange(2)">
25-
影像
26-
</a-menu-item>
21+
<a-menu-item key="1" @click="baseMapChange(1)"> 矢量 </a-menu-item>
22+
<a-menu-item key="2" @click="baseMapChange(2)"> 影像 </a-menu-item>
2723
</a-menu>
2824
<a-button type="primary">
2925
<a-icon type="global" />底图 <a-icon type="down" />
@@ -33,12 +29,8 @@
3329
3430
<a-dropdown>
3531
<a-menu slot="overlay">
36-
<a-menu-item key="1" @click="measurement(1)">
37-
开始测量
38-
</a-menu-item>
39-
<a-menu-item key="2" @click="measurement(0)">
40-
取消测量
41-
</a-menu-item>
32+
<a-menu-item key="1" @click="measurement(1)"> 开始测量 </a-menu-item>
33+
<a-menu-item key="2" @click="measurement(0)"> 取消测量 </a-menu-item>
4234
</a-menu>
4335
<a-button type="primary">
4436
<a-icon type="tool" />测量 <a-icon type="down" />
@@ -48,27 +40,13 @@
4840
<!-- 标绘 GO-->
4941
<a-dropdown>
5042
<a-menu slot="overlay">
51-
<a-menu-item key="1" @click="draw('POINT')">
52-
点
53-
</a-menu-item>
54-
<a-menu-item key="2" @click="draw('POLYLINE')">
55-
线
56-
</a-menu-item>
57-
<a-menu-item key="3" @click="draw('POLYGON')">
58-
面
59-
</a-menu-item>
60-
<a-menu-item key="4" @click="draw('CIRCLE')">
61-
圆形
62-
</a-menu-item>
63-
<a-menu-item key="5" @click="draw('RECTANGLE')">
64-
长方形
65-
</a-menu-item>
66-
<a-menu-item key="6" @click="draw('stop')">
67-
停止标绘
68-
</a-menu-item>
69-
<a-menu-item key="7" @click="draw('delete')">
70-
清除标绘
71-
</a-menu-item>
43+
<a-menu-item key="1" @click="draw('POINT')"> 点 </a-menu-item>
44+
<a-menu-item key="2" @click="draw('POLYLINE')"> 线 </a-menu-item>
45+
<a-menu-item key="3" @click="draw('POLYGON')"> 面 </a-menu-item>
46+
<a-menu-item key="4" @click="draw('CIRCLE')"> 圆形 </a-menu-item>
47+
<a-menu-item key="5" @click="draw('RECTANGLE')"> 长方形 </a-menu-item>
48+
<a-menu-item key="6" @click="draw('stop')"> 停止标绘 </a-menu-item>
49+
<a-menu-item key="7" @click="draw('delete')"> 清除标绘 </a-menu-item>
7250
</a-menu>
7351
<a-button type="primary">
7452
<a-icon type="highlight" />标绘 <a-icon type="down" />
@@ -144,20 +122,20 @@ export default {
144122
import ToolBar from "@/components/ToolBar.vue";
145123
export default {
146124
components: {
147-
ToolBar
125+
ToolBar,
148126
},
149127
methods: {
150128
// 测量
151129
measurement(type) {
152-
console.log("测量",type);
130+
console.log("测量", type);
153131
},
154132
// 地图切换
155133
baseMapChange(type) {
156-
console.log("地图切换",type);
134+
console.log("地图切换", type);
157135
},
158136
// 标绘
159137
draw(type) {
160-
console.log("标绘",type);
138+
console.log("标绘", type);
161139
},
162140
// 显示图例
163141
showLegend() {
@@ -176,9 +154,7 @@ export default {
176154

177155
![](./toolbar.png)
178156

179-
180-
181-
## 1. 底图切换
157+
## 1. 底图切换
182158

183159
新建文件 src/map/modules/BaseMap.js ，添加底图切换函数
184160

@@ -230,11 +206,7 @@ baseMapChange(type) {
230206

231207
![](./basemapchange.gif)
232208

233-
234-
235-
236-
237-
## 2. 测量组件
209+
## 2. 测量组件
238210

239211
这里需要在 src\map\init.js 中加载 ArcGIS 的测量和单位模块(`"esri/dijit/Measurement"`、` "esri/units"`)
240212

@@ -331,41 +303,39 @@ export default {
331303

332304
```vue
333305
<template>
334-
<!-- 测量组件 -->
335-
<measurement
336-
:show="isShowMeasurement"
337-
@closMmeasurement="measurement"
338-
></measurement>
306+
<!-- 测量组件 -->
307+
<measurement
308+
:show="isShowMeasurement"
309+
@closMmeasurement="measurement"
310+
></measurement>
339311
</template>
340312
<script>
341-
data() {
342-
return {
343-
isShowMeasurement: false,
344-
};
313+
data() {
314+
return {
315+
isShowMeasurement: false,
316+
};
317+
},
318+
methods: {
319+
// 测量
320+
measurement(type) {
321+
switch (type) {
322+
case 0:
323+
this.isShowMeasurement = false;
324+
Map.MeasurementClose();
325+
break;
326+
case 1:
327+
this.isShowMeasurement = true;
328+
}
345329
},
346-
methods: {
347-
// 测量
348-
measurement(type) {
349-
switch (type) {
350-
case 0:
351-
this.isShowMeasurement = false;
352-
Map.MeasurementClose();
353-
break;
354-
case 1:
355-
this.isShowMeasurement = true;
356-
}
357-
},
358-
}
330+
}
359331
</script>
360332
```
361333

362334
效果图：
363335

364336
![](./measurement .gif)
365337

366-
367-
368-
## 3. 比例尺组件
338+
## 3. 比例尺组件
369339

370340
这里需要在 example/src/map/init.js 中加载 ArcGIS 的比例尺模块(`"esri/dijit/Scalebar"`)
371341

@@ -395,8 +365,6 @@ Scalebar({
395365
});
396366
```
397367

398-
399-
400368
## 4. 标绘组件
401369

402370
非常抱歉，写到这里时我重构了代码，大家可以去代码仓库进行查看，重构的目的是为了更加的模块化。
@@ -415,23 +383,23 @@ loadModules(
415383
"esri/layers/GraphicsLayer", // 图形图层模块
416384
],
417385
config.loadConfig
418-
)
419-
.then(
420-
([
421-
Draw, // 画图
422-
SimpleMarkerSymbol, // 点
423-
SimpleLineSymbol, // 线
424-
SimpleFillSymbol, // 面
425-
Graphic, // 图形模块
426-
GraphicsLayer, // 图形图层模块
427-
]) => {
428-
this.GraphicsLayer = GraphicsLayer;
429-
this.Graphic = Graphic;
430-
this.Draw = Draw;
431-
this.SimpleMarkerSymbol = SimpleMarkerSymbol;
432-
this.SimpleLineSymbol = SimpleLineSymbol;
433-
this.SimpleFillSymbol = SimpleFillSymbol;
434-
})
386+
).then(
387+
([
388+
Draw, // 画图
389+
SimpleMarkerSymbol, // 点
390+
SimpleLineSymbol, // 线
391+
SimpleFillSymbol, // 面
392+
Graphic, // 图形模块
393+
GraphicsLayer, // 图形图层模块
394+
]) => {
395+
this.GraphicsLayer = GraphicsLayer;
396+
this.Graphic = Graphic;
397+
this.Draw = Draw;
398+
this.SimpleMarkerSymbol = SimpleMarkerSymbol;
399+
this.SimpleLineSymbol = SimpleLineSymbol;
400+
this.SimpleFillSymbol = SimpleFillSymbol;
401+
}
402+
);
435403
```
436404

437405
example/src/map/modules/Draw.js 编写对应代码
@@ -459,7 +427,7 @@ function drawInit() {
459427

460428
// 添加画图的监听事件
461429
this.draw.on("draw-complete", drawEndEvent.bind(this));
462-
};
430+
}
463431

464432
// 内置函数 画完后将图形加载到图形图层
465433
function drawEndEvent(evt) {
@@ -511,7 +479,6 @@ function drawActive(type) {
511479
}
512480

513481
export { drawInit, drawActive };
514-
515482
```
516483

517484
在 导出文件中引入 src\map\index.js
@@ -527,8 +494,8 @@ ArcGIS.prototype.drawActive = drawActive;
527494
在 src/map/init.js 初始化标绘工具
528495

529496
```javascript
530-
// 初始化标绘工具
531-
this.drawInit();
497+
// 初始化标绘工具
498+
this.drawInit();
532499
```
533500

534501
在 src/App.vue 中 设置标绘按钮函数
@@ -542,18 +509,20 @@ ArcGIS.prototype.drawActive = drawActive;
542509
},
543510
```
544511

545-
546-
547512
效果图：
548513

549514
![](./draw.gif)
550515

551-
## 推荐阅读
516+
## 源码地址
517+
518+
[Demo-3/example](https://github.com/LuckRain7/arcgis-api-for-javascript-vue/tree/master/Demo-3/example)
519+
520+
## 推荐阅读
552521

553522
- [vue + ArcGIS 地图应用系列二：加载地图](https://mp.weixin.qq.com/s/KkTU1Y1GHLmsslTlwxGeIw)
554523

555-
- [vue + ArcGIS 地图应用系列一：arcgis api本地部署(开发环境)](https://mp.weixin.qq.com/s/F2eseCDNGBjoTS52UsY9MA)
524+
- [vue + ArcGIS 地图应用系列一：arcgis api 本地部署(开发环境)](https://mp.weixin.qq.com/s/F2eseCDNGBjoTS52UsY9MA)
556525

557526
## 关注我！ 不迷路
558527

559-
![](./wx.png)
528+
![](./wx.png)

‎README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,9 @@ PS: 代码在边写过程中，不断的改进，可能 example 中的代码与
1818

1919
[（2）创建项目并加载地图](https://github.com/LuckRain7/arcgis-api-for-javascript-vue/tree/master/Demo-2)
2020

21-
---
21+
[（3）添加常规的地图组件(底图切换、测量工具、比例尺、标绘工具)](https://github.com/LuckRain7/arcgis-api-for-javascript-vue/tree/master/Demo-3)
2222

23-
[（3）添加常规的地图组件(底图切换、测量工具、比例尺、标绘工具)](https://luckrain7.github.io/arcgis-api-for-javascript-vue/Demo-3/)
23+
---
2424

2525
[（4）加载 ArcGIS Server 地图服务](https://github.com/LuckRain7/arcgis-api-for-javascript-vue/tree/master/Demo-4)（复杂服务引入暂时停滞，防止影响整体进度）
2626

0 commit comments

Comments
 (0)