ry-vue-map 0.3.4 → 0.3.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.MD +1 -1
- package/lib/ryui.common.js +81 -140
- package/lib/ryui.common.js.gz +0 -0
- package/lib/ryui.css +1 -1
- package/lib/ryui.css.gz +0 -0
- package/lib/ryui.umd.js +81 -140
- package/lib/ryui.umd.js.gz +0 -0
- package/lib/ryui.umd.min.js +4 -4
- package/lib/ryui.umd.min.js.gz +0 -0
- package/package.json +2 -2
- package/src/components/maps/ryKMLs/src/index.vue +1 -0
- package/src/components/maps/ryMap/src/index.vue +22 -27
- package/src/components/maps/ryOfflineMap/src/index.vue +2 -57
- package/src/views/map/330112.js +5104 -218
- package/src/views/map/index.vue +24 -29
- package/src/views/map/indexStatic.vue +79 -68
package/src/views/map/index.vue
CHANGED
|
@@ -1,22 +1,18 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="map-style">
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
<RyOfflineMap projection="EPSG:4326" :zoom="10" :minZoom="1" :maxZoom="21" :center="center" @load="load($event)"
|
|
5
5
|
:isCrossHair="isRyMapTool" :isRight="true" :isRyMapTool="true" @drawSuccess="drawSuccess"
|
|
6
6
|
@drawError="drawError" :isShowRangingTool="true" :isShowDrawTool="isRyMapTool" :bindMapClick="true"
|
|
7
7
|
@mapClick="mapClick($event)" @crossHairClick="crossHairClick($event)" :bindMapMoveend="true"
|
|
8
8
|
@mapMoveend="mapMoveend($event)" v-if="dto" :boundaryModel="dto" :urls="urls" :bbox="bbox">
|
|
9
|
-
</
|
|
10
|
-
|
|
11
|
-
<RyStaticMap class="map-style" :url="url"
|
|
12
|
-
:minZoom="15" :maxZoom="18" :zoom="15.6" :center="center" @load="loadMap" @selectMapEvent="selectMapEvent">
|
|
13
|
-
</RyStaticMap>
|
|
9
|
+
</RyOfflineMap>
|
|
14
10
|
|
|
15
11
|
<button @click="onClick()">测试</button>
|
|
16
12
|
<button @click="onClick2()">测试2</button>
|
|
17
13
|
<button @click="onClick3()">测试3</button>
|
|
18
14
|
|
|
19
|
-
<!--
|
|
15
|
+
<!-- <aside class="aside-style">
|
|
20
16
|
<el-button class="ele-text-primary" v-show="isShowPaly" style="padding:10px;"
|
|
21
17
|
@click.stop="onShowPaly(false)">
|
|
22
18
|
轨迹回放 </el-button>
|
|
@@ -30,7 +26,7 @@
|
|
|
30
26
|
|
|
31
27
|
<script>
|
|
32
28
|
import dayjs from 'dayjs'
|
|
33
|
-
import
|
|
29
|
+
import RyOfflineMap from '@/components/maps/ryOfflineMap/src/index.vue';
|
|
34
30
|
import RyMapTool from '@/components/maps/ryMapTool/src/index.vue';
|
|
35
31
|
import RyPolygon from '@/components/maps/ryPolygon/src/index.vue';
|
|
36
32
|
import RyPolygons from '@/components/maps/ryPolygons/src/index.vue';
|
|
@@ -42,7 +38,7 @@
|
|
|
42
38
|
|
|
43
39
|
export default {
|
|
44
40
|
components: {
|
|
45
|
-
|
|
41
|
+
RyOfflineMap,
|
|
46
42
|
RyMapTool,
|
|
47
43
|
RyPolygon,
|
|
48
44
|
RyPolygons,
|
|
@@ -57,8 +53,7 @@
|
|
|
57
53
|
// const bbox = [ 118.84072600000002, 29.937127000000032, 119.86315600000012, 30.445895000000064 ];
|
|
58
54
|
// const center = [119.34667114000006, 30.198078622500038];
|
|
59
55
|
|
|
60
|
-
|
|
61
|
-
bbox: [118.84072600000002, 29.937127000000032, 119.86315600000012, 30.445895000000064],
|
|
56
|
+
bbox: [118.84146054770122, 29.935677496166022, 119.86391954737257, 30.44823698639243],
|
|
62
57
|
isClear: false,
|
|
63
58
|
colors: [],
|
|
64
59
|
modelArr2: [{
|
|
@@ -82,7 +77,7 @@
|
|
|
82
77
|
y: 30.183076
|
|
83
78
|
},
|
|
84
79
|
],
|
|
85
|
-
center: [119.
|
|
80
|
+
center: [119.45009201705076, 30.177110869281915],
|
|
86
81
|
polygonColors: [],
|
|
87
82
|
remove: 'ceshi1',
|
|
88
83
|
removes: [],
|
|
@@ -124,29 +119,33 @@
|
|
|
124
119
|
lineAppend: [],
|
|
125
120
|
isShowPaly: true,
|
|
126
121
|
layerArr: [2, 2],
|
|
122
|
+
urls: [
|
|
123
|
+
`https://zjhzla.ryaims.com/overlay/330112/roadmap/{z}/{x}/{y}.png`,
|
|
124
|
+
// `http://127.0.0.1:10006/${330112}/overlay/{z}/{x}/{y}.png`
|
|
125
|
+
],
|
|
127
126
|
dto: null,
|
|
128
|
-
url: 'http://localhost:8601/uploads/5d53650724f04dd3b2d90a7adaddc87e.png',
|
|
129
127
|
};
|
|
130
128
|
},
|
|
131
129
|
created() {
|
|
132
130
|
this.dto = {
|
|
133
131
|
geo: geoJson,
|
|
134
|
-
width:
|
|
135
|
-
color: '#
|
|
132
|
+
width: 6,
|
|
133
|
+
color: '#00adfd',
|
|
134
|
+
lineDash: [1, 2, 3, 4, 5, 6,8,9,10],
|
|
135
|
+
|
|
136
136
|
};
|
|
137
137
|
console.log(this.dto);
|
|
138
138
|
},
|
|
139
139
|
methods: {
|
|
140
|
-
async loadMap({
|
|
141
|
-
map,
|
|
142
|
-
mapServices
|
|
143
|
-
}) {
|
|
144
|
-
this.map = map;
|
|
145
|
-
this.lMap = mapServices;
|
|
146
|
-
},
|
|
147
140
|
onShowPaly(b) {
|
|
148
141
|
this.isShowPaly = b;
|
|
149
142
|
|
|
143
|
+
},
|
|
144
|
+
load(obj) {
|
|
145
|
+
this.lMap = obj.mapServices;
|
|
146
|
+
this.map = obj.map;
|
|
147
|
+
console.log(this.lMap);
|
|
148
|
+
|
|
150
149
|
},
|
|
151
150
|
drawSuccess(obj) {
|
|
152
151
|
this.polygonModel = {
|
|
@@ -196,19 +195,15 @@
|
|
|
196
195
|
this.gpsType = obj.mapType;
|
|
197
196
|
},
|
|
198
197
|
onClick() {
|
|
199
|
-
this.
|
|
200
|
-
// this.isRyMapTool = !this.isRyMapTool;
|
|
198
|
+
this.isRyMapTool = !this.isRyMapTool;
|
|
201
199
|
},
|
|
202
200
|
onClick2() {
|
|
203
|
-
|
|
204
|
-
// this.maxZoom = 28;
|
|
201
|
+
this.maxZoom = 28;
|
|
205
202
|
},
|
|
206
203
|
onClick3() {
|
|
207
204
|
this.maxZoom = 10;
|
|
208
205
|
},
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
}
|
|
206
|
+
|
|
212
207
|
}
|
|
213
208
|
};
|
|
214
209
|
</script>
|
|
@@ -1,49 +1,48 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="map-style">
|
|
3
3
|
|
|
4
|
-
<ry-map projection="EPSG:4326" :zoom="10" :minZoom="1" :maxZoom="maxZoom" :center="center" @load="load($event)"
|
|
4
|
+
<!-- <ry-map projection="EPSG:4326" :zoom="10" :minZoom="1" :maxZoom="maxZoom" :center="center" @load="load($event)"
|
|
5
5
|
:isCrossHair="isRyMapTool" :isRight="true" :isRyMapTool="true" @drawSuccess="drawSuccess"
|
|
6
6
|
@drawError="drawError" :isShowRangingTool="true" :isShowDrawTool="isRyMapTool" :bindMapClick="true"
|
|
7
7
|
@mapClick="mapClick($event)" @crossHairClick="crossHairClick($event)" :bindMapMoveend="true"
|
|
8
|
-
@mapMoveend="mapMoveend($event)"
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
</ry-map>
|
|
8
|
+
@mapMoveend="mapMoveend($event)" v-if="dto" :boundaryModel="dto" :urls="urls" :bbox="bbox">
|
|
9
|
+
</ry-map> -->
|
|
10
|
+
|
|
11
|
+
<RyStaticMap class="map-style" :url="item.url" :minZoom="15" :maxZoom="18" :zoom="15.6"
|
|
12
|
+
:center="center" @load="loadMap">
|
|
13
|
+
</RyStaticMap>
|
|
15
14
|
|
|
16
15
|
<button @click="onClick()">测试</button>
|
|
17
16
|
<button @click="onClick2()">测试2</button>
|
|
18
17
|
<button @click="onClick3()">测试3</button>
|
|
19
|
-
|
|
20
|
-
<aside class="aside-style">
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
18
|
+
|
|
19
|
+
<!-- <aside class="aside-style">
|
|
20
|
+
<el-button class="ele-text-primary" v-show="isShowPaly" style="padding:10px;"
|
|
21
|
+
@click.stop="onShowPaly(false)">
|
|
22
|
+
轨迹回放 </el-button>
|
|
23
|
+
|
|
24
|
+
<el-button class="ele-text-primary" v-show="!isShowPaly" style="padding:10px; color: red;"
|
|
25
|
+
@click.stop="onShowPaly(true)">
|
|
26
|
+
结束轨迹回放 </el-button>
|
|
27
|
+
</aside> -->
|
|
29
28
|
</div>
|
|
30
29
|
</template>
|
|
31
30
|
|
|
32
31
|
<script>
|
|
33
32
|
import dayjs from 'dayjs'
|
|
34
|
-
import
|
|
33
|
+
import RyStaticMap from '@/components/maps/ryStaticMap/src/index.vue';
|
|
35
34
|
import RyMapTool from '@/components/maps/ryMapTool/src/index.vue';
|
|
36
35
|
import RyPolygon from '@/components/maps/ryPolygon/src/index.vue';
|
|
37
36
|
import RyPolygons from '@/components/maps/ryPolygons/src/index.vue';
|
|
38
|
-
import
|
|
37
|
+
import RyClustersMarker from '@/components/maps/ryClustersMarker/src/index.vue';
|
|
39
38
|
import RyPolygonGeo from '@/components/maps/ryPolygonGeo/src/index.vue';
|
|
40
39
|
import geoJson from "./330112";
|
|
41
40
|
|
|
42
41
|
|
|
43
|
-
|
|
42
|
+
|
|
44
43
|
export default {
|
|
45
44
|
components: {
|
|
46
|
-
|
|
45
|
+
RyStaticMap,
|
|
47
46
|
RyMapTool,
|
|
48
47
|
RyPolygon,
|
|
49
48
|
RyPolygons,
|
|
@@ -55,19 +54,34 @@
|
|
|
55
54
|
map: null,
|
|
56
55
|
lMap: null,
|
|
57
56
|
polygonColorObj: null,
|
|
58
|
-
|
|
57
|
+
// const bbox = [ 118.84072600000002, 29.937127000000032, 119.86315600000012, 30.445895000000064 ];
|
|
59
58
|
// const center = [119.34667114000006, 30.198078622500038];
|
|
60
|
-
|
|
61
|
-
|
|
59
|
+
|
|
60
|
+
|
|
62
61
|
bbox: [118.84072600000002, 29.937127000000032, 119.86315600000012, 30.445895000000064],
|
|
63
62
|
isClear: false,
|
|
64
63
|
colors: [],
|
|
65
|
-
modelArr2: [
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
64
|
+
modelArr2: [{
|
|
65
|
+
id: 'ceshi1',
|
|
66
|
+
x: 120.15535003220648,
|
|
67
|
+
y: 30.179378795342608
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
id: 'ceshi2',
|
|
71
|
+
x: 120.16369976775891,
|
|
72
|
+
y: 30.1967116895034
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
id: 'ceshi3',
|
|
76
|
+
x: 120.156817,
|
|
77
|
+
y: 30.1753985
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
id: 'ceshi4',
|
|
81
|
+
x: 120.1538245,
|
|
82
|
+
y: 30.183076
|
|
83
|
+
},
|
|
84
|
+
],
|
|
71
85
|
center: [119.34667114000006, 30.198078622500038],
|
|
72
86
|
polygonColors: [],
|
|
73
87
|
remove: 'ceshi1',
|
|
@@ -90,50 +104,47 @@
|
|
|
90
104
|
gpsType: 0,
|
|
91
105
|
isRyMapTool: true,
|
|
92
106
|
maxZoom: 18,
|
|
93
|
-
lineData1:null,
|
|
94
|
-
lineData2:null,
|
|
95
|
-
clearLiens:false,
|
|
96
|
-
|
|
97
|
-
|
|
107
|
+
lineData1: null,
|
|
108
|
+
lineData2: null,
|
|
109
|
+
clearLiens: false,
|
|
110
|
+
// startMarkerDto:null,
|
|
111
|
+
// endMarkerDto:null,
|
|
98
112
|
startMarkerDto: {
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
endMarkerDto:{
|
|
105
|
-
url:require('@/assets/stoppoint.png'),
|
|
106
|
-
height:16,
|
|
107
|
-
offset:[0, -8],
|
|
108
|
-
width:16
|
|
109
|
-
},
|
|
110
|
-
lineAppend:[],
|
|
111
|
-
isShowPaly:true,
|
|
112
|
-
layerArr:[2,2],
|
|
113
|
-
|
|
114
|
-
`http://127.0.0.1:10006/${330112}/satellite/{z}/{x}/{y}.jpg`,
|
|
115
|
-
`http://127.0.0.1:10006/${330112}/overlay/{z}/{x}/{y}.png`
|
|
116
|
-
],
|
|
117
|
-
dto:null,
|
|
113
|
+
url: require('@/assets/startpoint.png'),
|
|
114
|
+
height: 23,
|
|
115
|
+
offset: [8, -11],
|
|
116
|
+
width: 28
|
|
117
|
+
},
|
|
118
|
+
endMarkerDto: {
|
|
119
|
+
url: require('@/assets/stoppoint.png'),
|
|
120
|
+
height: 16,
|
|
121
|
+
offset: [0, -8],
|
|
122
|
+
width: 16
|
|
123
|
+
},
|
|
124
|
+
lineAppend: [],
|
|
125
|
+
isShowPaly: true,
|
|
126
|
+
layerArr: [2, 2],
|
|
127
|
+
dto: null,
|
|
118
128
|
};
|
|
119
129
|
},
|
|
120
130
|
created() {
|
|
121
|
-
this.dto={
|
|
122
|
-
geo:geoJson,
|
|
123
|
-
|
|
124
|
-
color:'#000'
|
|
131
|
+
this.dto = {
|
|
132
|
+
geo: geoJson,
|
|
133
|
+
width: 4,
|
|
134
|
+
color: '#000'
|
|
125
135
|
};
|
|
126
136
|
console.log(this.dto);
|
|
127
137
|
},
|
|
128
138
|
methods: {
|
|
139
|
+
async loadMap({
|
|
140
|
+
map,
|
|
141
|
+
mapServices
|
|
142
|
+
}) {
|
|
143
|
+
this.map = map;
|
|
144
|
+
this.lMap = mapServices;
|
|
145
|
+
},
|
|
129
146
|
onShowPaly(b) {
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
},
|
|
133
|
-
load(obj) {
|
|
134
|
-
this.lMap = obj.mapServices;
|
|
135
|
-
this.map = obj.map;
|
|
136
|
-
console.log(this.lMap);
|
|
147
|
+
this.isShowPaly = b;
|
|
137
148
|
|
|
138
149
|
},
|
|
139
150
|
drawSuccess(obj) {
|
|
@@ -192,7 +203,7 @@
|
|
|
192
203
|
onClick3() {
|
|
193
204
|
this.maxZoom = 10;
|
|
194
205
|
},
|
|
195
|
-
|
|
206
|
+
|
|
196
207
|
}
|
|
197
208
|
};
|
|
198
209
|
</script>
|
|
@@ -202,4 +213,4 @@
|
|
|
202
213
|
height: 100vh;
|
|
203
214
|
position: relative;
|
|
204
215
|
}
|
|
205
|
-
</style>
|
|
216
|
+
</style>
|