Skip to content

Commit ed63f95

Browse files
author
潘卓然Y7000P
committed
【站点】【新增】【增加Vue的长度/测量组件以及示例】
1 parent 5cd11fa commit ed63f95

7 files changed

Lines changed: 663 additions & 727 deletions

File tree

‎src/service/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@mapgis/webclient-es6-service",
3-
"version": "1.0.2",
3+
"version": "1.0.3",
44
"description": "中地数码基于ES6语法针对igserver的服务封装",
55
"main": "index.js",
66
"scripts": {

‎website/public/static/demo/config/config-mapboxgl.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -838,6 +838,14 @@
838838
"detail": "",
839839
"icon": "draw.png",
840840
"update": "最后更新时间：2020-10-26"
841+
},
842+
{
843+
"name": "测量组件",
844+
"file": "measure",
845+
"diffcult": "2",
846+
"detail": "",
847+
"icon": "measure.png",
848+
"update": "最后更新时间：2020-11-23"
841849
}
842850
]
843851
}

‎website/public/static/demo/mapboxgl/example/vue/control/draw.htm‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@
6565
position="top-left"
6666
v-bind:controls="controls"
6767
v-on:added="handleAdded1"
68-
v-on:draw-create="handleCreate1"
68+
v-on:drawcreate="handleCreate1"
6969
ref="drawref1"
7070
>
7171
<div id="toolbar-wrapper1">
@@ -80,7 +80,7 @@
8080
position="top-left"
8181
v-bind:controls="controls"
8282
v-on:added="handleAdded2"
83-
v-on:draw-create="handleCreate2"
83+
v-on:drawcreate="handleCreate2"
8484
ref="drawref2"
8585
>
8686
<div id="toolbar-wrapper2">
@@ -147,7 +147,7 @@
147147
},
148148
handleCreate1(e) {
149149
console.log('create', e);
150-
this.drawer1 && this.drawer1.deleteAll();
150+
// this.drawer1 && this.drawer1.deleteAll();
151151
},
152152
handleCreate2(e) {
153153
console.log('create', e);

‎website/public/static/demo/mapboxgl/example/vue/control/measure.htm‎

Lines changed: 30 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,11 @@
3535
height: 100vh;
3636
width: 100%;
3737
}
38+
.label{
39+
color: #3BB2D0;
40+
font-size: 16px;
41+
font-weight: bold;
42+
}
3843
</style>
3944
</head>
4045

@@ -56,17 +61,22 @@
5661
</mapbox-igs-tdt-layer>
5762
<mapbox-base-measure
5863
class="custom-measure-wrapper"
59-
position="top-left"
60-
v-bind:controls="controls"
64+
:measure-mode="measureMode"
6165
v-on:added="handleAdded"
62-
v-on:draw-create="handleCreate"
63-
v-bind:measureMode="measureMode"
66+
v-on:measurecreate="handleCreate"
67+
v-on:measureresult="handleMeasure"
6468
ref="measureref"
6569
>
6670
<div id="toolbar-wrapper">
6771
<div class="toolbar-item" v-on:click="toggleQueryLength">长度</div>
6872
<div class="toolbar-item" v-on:click="toggleQueryArea">面积</div>
6973
</div>
74+
<mapbox-marker color="#ff0000" :coordinates="coordinates" v-if="coordinates.length > 0">
75+
<div slot="marker" class="label">
76+
<div>面积：{{ area }}</div>
77+
<div>周长：{{ perimeter }}</div>
78+
</div>
79+
</mapbox-marker>
7080
</mapbox-base-draw>
7181
</mapbox-map>
7282
</div>
@@ -101,7 +111,10 @@
101111
combine_features: false,
102112
uncombine_features: false
103113
},
104-
measureMode: undefined
114+
measureMode: undefined,
115+
coordinates: [],
116+
area: 0,
117+
perimeter: 0
105118
};
106119
},
107120
methods: {
@@ -116,15 +129,26 @@
116129
this.measure = measure;
117130
},
118131
handleCreate(e) {
119-
this.measure && this.measure.deleteAll();
132+
// this.measure && this.measure.deleteAll();
133+
console.log('绘制结果', e);
134+
},
135+
handleMeasure(e) {
136+
console.log('测量结果', e);
137+
const {center, perimeter, area} = e;
138+
const coords = center.geometry.coordinates;
139+
this.coordinates = coords;
140+
this.area = area || '无';
141+
this.perimeter = perimeter;
120142
},
121143
toggleQueryLength(e) {
122144
this.enableMeasure();
145+
this.coordinates = [];
123146
this.measureMode = "measure-length";
124147
this.measure && this.measure.changeMode('draw_line_string');
125148
},
126149
toggleQueryArea(e) {
127150
this.enableMeasure();
151+
this.coordinates = [];
128152
this.measureMode = "measure-area";
129153
this.measure && this.measure.changeMode('draw_polygon');
130154
}

‎website/public/static/demo/mapboxgl/gallery/vue/control/measure.png‎

61.4 KB
Loading

‎website/src/views/layout/components/Header/Menu.vue‎

Lines changed: 98 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -26,31 +26,50 @@
2626
class="header-menu-link-text"
2727
v-if="isLink(menu.routes[i][j])"
2828
>
29-
<a
30-
class="header-menu-link-text"
31-
:href="menu.routes[i][j]"
32-
target="_blank"
29+
<el-badge
30+
type="success"
31+
:value="menu.hightlights[i][j] ? hint : ''"
32+
class="menu-badge"
3333
>
34-
<span :class="{'light-subtitle': light}">{{l}}</span>
35-
</a>
34+
<a
35+
class="header-menu-link-text"
36+
:href="menu.routes[i][j]"
37+
target="_blank"
38+
>
39+
<span :class="{'light-subtitle': light}">{{l}}</span>
40+
</a>
41+
</el-badge>
3642
</div>
3743
<div
3844
class="header-menu-link-text"
3945
v-else-if="isDocs(menu.routes[i][j])"
4046
>
41-
<a
42-
class="header-menu-link-text"
43-
:href="menu.routes[i][j]"
47+
<el-badge
48+
type="success"
49+
:value="menu.hightlights[i][j] ? hint : ''"
50+
class="menu-badge"
4451
>
45-
<span :class="{'light-subtitle': light}">{{l}}</span>
46-
</a>
52+
<a
53+
class="header-menu-link-text"
54+
:href="menu.routes[i][j]"
55+
>
56+
<span :class="{'light-subtitle': light}">{{l}}</span>
57+
</a>
58+
</el-badge>
4759
</div>
4860
<router-link
4961
v-else
5062
:to="menu.routes[i][j]"
5163
>
5264
<div class="header-menu-link-text">
53-
<span :class="{'light-subtitle': light}">{{l}}</span>
65+
<el-badge
66+
type="success"
67+
:value="menu.hightlights[i][j] ? hint : ''"
68+
class="menu-badge"
69+
>
70+
71+
<span :class="{'light-subtitle': light}">{{l}}</span>
72+
</el-badge>
5473
</div>
5574
</router-link>
5675
</div>
@@ -90,6 +109,7 @@ export default {
90109
data () {
91110
return {
92111
mobile: isMobile(),
112+
hint: '新'
93113
};
94114
},
95115
methods: {
@@ -111,77 +131,77 @@ export default {
111131

112132
<style lang="scss">
113133
.header-menu-wrapper {
114-
display: flex;
115-
width: fit-content;
116-
117-
.el-divider--horizontal {
118-
display: block;
119-
height: 1px;
120-
width: 100%;
121-
margin: 16px 0;
122-
}
123-
.header-menu-col {
124-
margin: 19px 30px;
134+
display: flex;
125135
width: fit-content;
126-
height: fit-content;
127-
span {
128-
margin-left: 10px;
129-
width: 60px;
130-
height: 14px;
131-
font-size: 14px;
132-
font-family: Microsoft YaHei;
133-
font-weight: 400;
134-
color: rgba(102, 102, 102, 1);
135-
line-height: 30px;
136+
.menu-badge {
137+
/* padding-top: -30px !important;
138+
padding-right: -30px !important;
139+
margin-right: -30px !important; */
140+
}
141+
.el-divider--horizontal {
142+
display: block;
143+
height: 1px;
144+
width: 100%;
145+
margin: 16px 0;
146+
}
147+
.header-menu-col {
148+
margin: 19px 30px;
149+
width: fit-content;
150+
height: fit-content;
151+
span {
152+
margin-left: 10px;
153+
width: 60px;
154+
height: 14px;
155+
font-size: 14px;
156+
font-family: Microsoft YaHei;
157+
font-weight: 400;
158+
color: rgba(102, 102, 102, 1);
159+
line-height: 30px;
160+
}
161+
}
162+
.strong {
163+
font-weight: bold !important;
164+
}
165+
.light-title {
166+
color: #ffffff !important;
136167
}
137-
}
138-
.strong {
139-
font-weight: bold !important;
140-
}
141-
.light-title {
142-
color: #ffffff !important;
143-
}
144-
.light-subtitle {
145-
color: #ffffff88 !important;
146-
}
147-
.header-menu-links {
148-
display: inherit;
149-
float: left;
150-
height: fit-content;
151-
}
152-
.header-menu-link {
153-
width: 160px;
154-
height: 30px;
155-
span {
156-
margin-left: 10px;
157-
width: 61px;
158-
font-size: 14px;
159-
font-family: Microsoft YaHei;
160-
font-weight: 500;
161-
color: rgba(0, 0, 0, 1);
162-
line-height: 30px;
168+
.light-subtitle {
169+
color: #ffffff88 !important;
170+
}
171+
.header-menu-links {
172+
display: inherit;
173+
float: left;
174+
height: fit-content;
175+
}
176+
.header-menu-link {
177+
width: 160px;
178+
height: 30px;
179+
span {
180+
margin-left: 10px;
181+
width: 61px;
182+
font-size: 14px;
183+
font-family: Microsoft YaHei;
184+
font-weight: 500;
185+
color: rgba(0, 0, 0, 1);
186+
line-height: 30px;
187+
}
188+
}
189+
.header-menu-link:hover {
190+
width: 160px;
191+
height: 30px;
192+
// border-radius: 4px;
193+
background: linear-gradient(90deg, rgba(71, 148, 250, 1), rgba(49, 225, 230, 1));
194+
}
195+
.header-menu-link-text {
196+
width: 160px;
197+
height: 30px;
198+
display: block;
163199
}
164-
}
165-
.header-menu-link:hover {
166-
width: 160px;
167-
height: 30px;
168-
// border-radius: 4px;
169-
background: linear-gradient(
170-
90deg,
171-
rgba(71, 148, 250, 1),
172-
rgba(49, 225, 230, 1)
173-
);
174-
}
175-
.header-menu-link-text {
176-
width: 160px;
177-
height: 30px;
178-
display: block;
179-
}
180200
}
181201
182202
.header-menu-wrapper-mobile {
183-
.header-menu-link {
184-
width: 120px !important;
185-
}
203+
.header-menu-link {
204+
width: 120px !important;
205+
}
186206
}
187207
</style>

0 commit comments

Comments
 (0)