Skip to content

Commit 0ef02dd

Browse files
deyihudeyihu
committed
update demos
1 parent dcde5a0 commit 0ef02dd

File tree

6 files changed

+97
-173
lines changed

6 files changed

+97
-173
lines changed

‎demo/base-spatial.html

Lines changed: 4 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -3,42 +3,7 @@
33
<meta charset="UTF-8">
44
<meta name="viewport" content="width=device-width, initial-scale=1">
55
<title>maps sync control</title>
6-
<style type="text/css">
7-
html,
8-
body {
9-
margin: 0px;
10-
height: 100%;
11-
width: 100%
12-
}
13-
14-
.container {
15-
width: 100%;
16-
height: 100%;
17-
18-
/* display: flex;
19-
flex-direction: row; */
20-
21-
}
22-
23-
.flex {
24-
display: flex;
25-
}
26-
27-
.map {
28-
width: 50%;
29-
height: 100%;
30-
}
31-
32-
.panel {
33-
width: 400px;
34-
height: 100%;
35-
36-
}
37-
38-
.map-container {
39-
width: calc(100% - 400px);
40-
}
41-
</style>
6+
<link rel="stylesheet" href="./style.css">
427
<link rel="stylesheet" href="https://unpkg.com/maptalks/dist/maptalks.css">
438
<script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>
449
<script src="../dist/maptalks.query.js"></script>
@@ -56,6 +21,9 @@
5621
<!-- <input type="text" v-model="keywords" /><button @click="search">search</button><button
5722
@click="clear">clear</button> -->
5823
</div>
24+
<div>
25+
<div v-for="item in queryResult">{{item.name}}</div>
26+
</div>
5927
</div>
6028
<div class="map-container flex">
6129
<div class="map" id="map1"></div>

‎demo/base.html

Lines changed: 4 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -3,42 +3,7 @@
33
<meta charset="UTF-8">
44
<meta name="viewport" content="width=device-width, initial-scale=1">
55
<title>maps sync control</title>
6-
<style type="text/css">
7-
html,
8-
body {
9-
margin: 0px;
10-
height: 100%;
11-
width: 100%
12-
}
13-
14-
.container {
15-
width: 100%;
16-
height: 100%;
17-
18-
/* display: flex;
19-
flex-direction: row; */
20-
21-
}
22-
23-
.flex {
24-
display: flex;
25-
}
26-
27-
.map {
28-
width: 50%;
29-
height: 100%;
30-
}
31-
32-
.panel {
33-
width: 400px;
34-
height: 100%;
35-
36-
}
37-
38-
.map-container {
39-
width: calc(100% - 400px);
40-
}
41-
</style>
6+
<link rel="stylesheet" href="./style.css">
427
<link rel="stylesheet" href="https://unpkg.com/maptalks/dist/maptalks.css">
438
<script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>
449
<script src="../dist/maptalks.query.js"></script>
@@ -55,6 +20,9 @@
5520
<input type="text" v-model="keywords" /><button @click="search">search</button><button
5621
@click="clear">clear</button>
5722
</div>
23+
<div>
24+
<div v-for="item in queryResult">{{item.name}}</div>
25+
</div>
5826
</div>
5927
<div class="map-container flex">
6028
<div class="map" id="map1"></div>

‎demo/base.js

Lines changed: 45 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,39 @@ function parseGeo(geo) {
2020
cloneGeo = geo.copy();
2121
} else {
2222
cloneGeo = maptalks.GeoJSON.toGeometry(geo.geometry);
23+
const properties = geo.properties || {};
24+
cloneGeo.setProperties({ name: properties.name });
2325
}
2426
cloneGeo.setSymbol(symbol1);
2527
return cloneGeo;
2628
}
2729

30+
function getPropties(geo) {
31+
let properties = geo.getPropties ? geo.getPropties() : geo.properties;
32+
properties = properties || {};
33+
return properties;
34+
}
35+
36+
function simleFilter() {
37+
query.query({
38+
filter: (geo, layer) => {
39+
const properties = getPropties(geo);
40+
const name = properties.name;
41+
return name && name.includes(vm.keywords);
42+
},
43+
layers: [layer]
44+
}).then(showQueryResult);
45+
}
46+
47+
function spatialQuery(geometry) {
48+
query.spatialQuery({
49+
geometry,
50+
layers: [layer]
51+
}).then(showQueryResult).catch(error => {
52+
console.error(error);
53+
});
54+
}
55+
2856
function showQueryResult(result) {
2957
console.log(result);
3058
resultLayer.clear();
@@ -39,39 +67,42 @@ function showQueryResult(result) {
3967
return g1;
4068
});
4169
resultLayer.addGeometry(geos);
70+
vm.queryResult = geos.map(g => {
71+
const properties = getPropties(g);
72+
return properties;
73+
});
4274
});
4375
}
4476

4577
// eslint-disable-next-line prefer-const
4678
let resultLayer, layer, debugLayer, drawTool, map1, map2, query;
4779

80+
function clearQuery() {
81+
debugLayer.clear();
82+
resultLayer.clear();
83+
vm.queryResult = [];
84+
}
85+
4886
// eslint-disable-next-line no-var
4987
var vm = new window.Vue({
5088
el: '#app',
5189
data: {
52-
keywords: '肯德基'
90+
keywords: '肯德基',
91+
queryResult: []
5392
},
5493
watch: {
5594

5695
},
5796
methods: {
5897
clear() {
59-
this.keywords = '';
60-
resultLayer.clear();
98+
// this.keywords = '';
99+
clearQuery();
61100
},
62101
search() {
63102
if (!this.keywords) {
64103
return;
65104
}
66-
query.query({
67-
filter: (geo, layer) => {
68-
let properties = geo.getPropties ? geo.getPropties() : geo.properties;
69-
properties = properties || {};
70-
const name = properties.name;
71-
return name && name.includes(this.keywords);
72-
},
73-
layers: [layer]
74-
}).then(showQueryResult);
105+
simleFilter();
75106
}
76107
},
77108
mounted: function () {
@@ -112,15 +143,6 @@ map2 = new maptalks.Map('map2', {
112143

113144
resultLayer = new maptalks.VectorLayer('layer1').addTo(map2);
114145

115-
function spatialQuery(geometry) {
116-
query.spatialQuery({
117-
geometry,
118-
layers: [layer]
119-
}).then(showQueryResult).catch(error => {
120-
console.error(error);
121-
});
122-
}
123-
124146
// eslint-disable-next-line no-unused-vars
125147
const mapSyncControl = new maptalks.MapSync([map1, map2]);
126148

@@ -140,12 +162,6 @@ function initDrawTool() {
140162
spatialQuery(param.geometry);
141163

142164
});
143-
144-
function clear() {
145-
debugLayer.clear();
146-
resultLayer.clear();
147-
}
148-
149165
const items = [
150166
// 'Point',
151167
// 'LineString',
@@ -160,7 +176,7 @@ function initDrawTool() {
160176
item: value,
161177
click: function () {
162178
drawTool.setMode(value).enable();
163-
clear();
179+
clearQuery();
164180
}
165181
};
166182
});
@@ -178,7 +194,7 @@ function initDrawTool() {
178194
},
179195
{
180196
item: 'Clear',
181-
click: clear
197+
click: clearQuery
182198
}
183199
]
184200
}).addTo(map1);

‎demo/style.css

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
html,
2+
body {
3+
margin: 0px;
4+
height: 100%;
5+
width: 100%
6+
}
7+
8+
.container {
9+
width: 100%;
10+
height: 100%;
11+
12+
/* display: flex;
13+
flex-direction: row; */
14+
15+
}
16+
17+
.flex {
18+
display: flex;
19+
}
20+
21+
.map {
22+
width: 50%;
23+
height: 100%;
24+
}
25+
26+
.panel {
27+
width: 400px;
28+
height: 100%;
29+
max-height: 100%;
30+
overflow: scroll;
31+
32+
}
33+
34+
.map-container {
35+
width: calc(100% - 400px);
36+
}

‎demo/vt-spatial.html

Lines changed: 4 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -3,42 +3,7 @@
33
<meta charset="UTF-8">
44
<meta name="viewport" content="width=device-width, initial-scale=1">
55
<title>maps sync control</title>
6-
<style type="text/css">
7-
html,
8-
body {
9-
margin: 0px;
10-
height: 100%;
11-
width: 100%
12-
}
13-
14-
.container {
15-
width: 100%;
16-
height: 100%;
17-
18-
/* display: flex;
19-
flex-direction: row; */
20-
21-
}
22-
23-
.flex {
24-
display: flex;
25-
}
26-
27-
.map {
28-
width: 50%;
29-
height: 100%;
30-
}
31-
32-
.panel {
33-
width: 400px;
34-
height: 100%;
35-
36-
}
37-
38-
.map-container {
39-
width: calc(100% - 400px);
40-
}
41-
</style>
6+
<link rel="stylesheet" href="./style.css">
427
<link rel="stylesheet" href="https://unpkg.com/maptalks/dist/maptalks.css">
438
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/maptalks-gl/dist/maptalks-gl.min.js"></script>
449
<script src="../dist/maptalks.query.js"></script>
@@ -54,6 +19,9 @@
5419
<!-- <input type="text" v-model="keywords" /><button @click="search">search</button><button
5520
@click="clear">clear</button> -->
5621
</div>
22+
<div>
23+
<div v-for="item in queryResult">{{item.name}}</div>
24+
</div>
5725
</div>
5826
<div class="map-container flex">
5927
<div class="map" id="map1"></div>

‎demo/vt.html

Lines changed: 4 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -3,42 +3,7 @@
33
<meta charset="UTF-8">
44
<meta name="viewport" content="width=device-width, initial-scale=1">
55
<title>maps sync control</title>
6-
<style type="text/css">
7-
html,
8-
body {
9-
margin: 0px;
10-
height: 100%;
11-
width: 100%
12-
}
13-
14-
.container {
15-
width: 100%;
16-
height: 100%;
17-
18-
/* display: flex;
19-
flex-direction: row; */
20-
21-
}
22-
23-
.flex {
24-
display: flex;
25-
}
26-
27-
.map {
28-
width: 50%;
29-
height: 100%;
30-
}
31-
32-
.panel {
33-
width: 400px;
34-
height: 100%;
35-
36-
}
37-
38-
.map-container {
39-
width: calc(100% - 400px);
40-
}
41-
</style>
6+
<link rel="stylesheet" href="./style.css">
427
<link rel="stylesheet" href="https://unpkg.com/maptalks/dist/maptalks.css">
438
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/maptalks-gl/dist/maptalks-gl.min.js"></script>
449
<script src="../dist/maptalks.query.js"></script>
@@ -53,6 +18,9 @@
5318
<input type="text" v-model="keywords" /><button @click="search">search</button><button
5419
@click="clear">clear</button>
5520
</div>
21+
<div>
22+
<div v-for="item in queryResult">{{item.name}}</div>
23+
</div>
5624
</div>
5725
<div class="map-container flex">
5826
<div class="map" id="map1"></div>

0 commit comments

Comments
 (0)