Skip to content

Commit 98621fb

Browse files
asd123a20asd123a20
committed
Modify the demonstration to a map with multiple shapes
1 parent 49db077 commit 98621fb

File tree

1 file changed

+28
-112
lines changed

1 file changed

+28
-112
lines changed

Diff for: ‎src/demos/MultiPoint.vue

+28-112
Original file line numberDiff line numberDiff line change
@@ -19,24 +19,7 @@
1919
<ol-source-vector>
2020
<ol-feature>
2121
<ol-geom-multi-point
22-
:coordinates="[
23-
[116.544921, 40.451633],
24-
[116.545264, 40.451649],
25-
[116.545865, 40.451698],
26-
[116.546144, 40.451551],
27-
[116.546337, 40.451274],
28-
[116.546788, 40.451143],
29-
[116.547324, 40.451078],
30-
[116.547539, 40.450996],
31-
[116.547839, 40.450719],
32-
[116.54844, 40.450506],
33-
[116.548933, 40.450604],
34-
[116.549448, 40.450604],
35-
[116.550242, 40.450376],
36-
[116.550865, 40.450163],
37-
[116.551702, 40.449935],
38-
[116.552581, 40.449576],
39-
]"
22+
:coordinates="[[116.547539, 40.450996]]"
4023
></ol-geom-multi-point>
4124
<ol-style>
4225
<ol-style-circle :radius="radius">
@@ -48,111 +31,50 @@
4831
</ol-style-circle>
4932
</ol-style>
5033
</ol-feature>
51-
</ol-source-vector>
52-
</ol-vector-layer>
53-
</ol-map>
5434

55-
<ol-map
56-
:loadTilesWhileAnimating="true"
57-
:loadTilesWhileInteracting="true"
58-
style="height: 400px"
59-
>
60-
<ol-view
61-
ref="view"
62-
:center="center2"
63-
:zoom="zoom2"
64-
:projection="projection2"
65-
/>
66-
67-
<ol-tile-layer>
68-
<ol-source-osm />
69-
</ol-tile-layer>
35+
<ol-feature>
36+
<ol-geom-polygon
37+
:coordinates="[
38+
[
39+
[116.54825, 40.44664],
40+
[116.55125, 40.44664],
41+
[116.55175, 40.45364],
42+
[116.54875, 40.45364],
43+
[116.54825, 40.44664],
44+
],
45+
]"
46+
></ol-geom-polygon>
47+
<ol-style>
48+
<ol-style-fill color="red" />
49+
</ol-style>
50+
</ol-feature>
7051

71-
<ol-vector-layer>
72-
<ol-source-vector>
7352
<ol-feature>
7453
<ol-geom-polygon
7554
:coordinates="[
7655
[
77-
[116.47002404644267, 40.99093328925813],
78-
[116.4711768581417, 40.992878669502076],
79-
[116.47228243645466, 40.99516210909935],
80-
[116.47326121895479, 40.99737943568237],
81-
[116.47427789090142, 40.99921969843481],
82-
[116.47532929515239, 41.00132369592343],
83-
[116.4762939627539, 41.003541854028306],
84-
[116.47727258042467, 41.0053002738806],
85-
[116.47835156610404, 41.007269624853535],
86-
[116.47946967442907, 41.00930314735945],
87-
[116.48052150751474, 41.011403661489204],
88-
[116.46321063129544, 41.01318358466894],
89-
[116.46346516898865, 41.01127347916341],
90-
[116.46355757652879, 41.00899723235789],
91-
[116.46366872159692, 41.00667901337523],
92-
[116.46387719747767, 41.00450595619715],
93-
[116.46420396408529, 41.0024736499698],
94-
[116.46439723545224, 41.000281973997225],
95-
[116.4645750958243, 40.998084867230116],
96-
[116.46487149748539, 40.995954127907204],
97-
[116.46504464744574, 40.99372228077026],
98-
[116.46511844566551, 40.991608178272905],
99-
[116.47002404644267, 40.99093328925813],
56+
[116.55325, 40.44364],
57+
[116.55625, 40.44364],
58+
[116.55675, 40.45164],
59+
[116.55375, 40.45164],
60+
[116.55325, 40.44364],
10061
],
10162
]"
10263
></ol-geom-polygon>
10364
<ol-style>
10465
<ol-style-fill :gradient="linearGradient" />
10566
</ol-style>
10667
</ol-feature>
107-
</ol-source-vector>
108-
</ol-vector-layer>
109-
</ol-map>
11068

111-
<ol-map
112-
:loadTilesWhileAnimating="true"
113-
:loadTilesWhileInteracting="true"
114-
style="height: 400px"
115-
>
116-
<ol-view
117-
ref="view"
118-
:center="center2"
119-
:zoom="zoom2"
120-
:projection="projection2"
121-
/>
122-
123-
<ol-tile-layer>
124-
<ol-source-osm />
125-
</ol-tile-layer>
126-
127-
<ol-vector-layer>
128-
<ol-source-vector>
12969
<ol-feature>
13070
<ol-geom-polygon
13171
:coordinates="[
13272
[
133-
[116.47002404644267, 40.99093328925813],
134-
[116.4711768581417, 40.992878669502076],
135-
[116.47228243645466, 40.99516210909935],
136-
[116.47326121895479, 40.99737943568237],
137-
[116.47427789090142, 40.99921969843481],
138-
[116.47532929515239, 41.00132369592343],
139-
[116.4762939627539, 41.003541854028306],
140-
[116.47727258042467, 41.0053002738806],
141-
[116.47835156610404, 41.007269624853535],
142-
[116.47946967442907, 41.00930314735945],
143-
[116.48052150751474, 41.011403661489204],
144-
[116.46321063129544, 41.01318358466894],
145-
[116.46346516898865, 41.01127347916341],
146-
[116.46355757652879, 41.00899723235789],
147-
[116.46366872159692, 41.00667901337523],
148-
[116.46387719747767, 41.00450595619715],
149-
[116.46420396408529, 41.0024736499698],
150-
[116.46439723545224, 41.000281973997225],
151-
[116.4645750958243, 40.998084867230116],
152-
[116.46487149748539, 40.995954127907204],
153-
[116.46504464744574, 40.99372228077026],
154-
[116.46511844566551, 40.991608178272905],
155-
[116.47002404644267, 40.99093328925813],
73+
[116.53415, 40.45154],
74+
[116.54245, 40.45154],
75+
[116.54385, 40.44664],
76+
[116.53555, 40.44664],
77+
[116.53415, 40.45154],
15678
],
15779
]"
15880
></ol-geom-polygon>
@@ -163,24 +85,19 @@
16385
</ol-source-vector>
16486
</ol-vector-layer>
16587
</ol-map>
166-
16788
</template>
16889

16990
<script setup>
17091
import { ref } from "vue";
17192
17293
const center = ref([116.54875, 40.45064]);
17394
const projection = ref("EPSG:4326");
174-
const zoom = ref(17);
95+
const zoom = ref(15);
17596
const radius = ref(10);
17697
const strokeWidth = ref(4);
17798
const strokeColor = ref("red");
17899
const fillColor = ref("white");
179100
180-
const center2 = ref([116.47727258042467, 40.99921969843481]);
181-
const projection2 = ref("EPSG:4326");
182-
const zoom2 = ref(13.5);
183-
184101
const linearGradient = {
185102
type: "linear",
186103
x0: 0,
@@ -208,5 +125,4 @@ const radialGradient = {
208125
[1, "white"], // Edge color
209126
],
210127
};
211-
212128
</script>

0 commit comments

Comments
 (0)