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.
@@ -1,22 +1,18 @@
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
+ <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
- </ry-map> -->
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
- <!-- <aside class="aside-style">
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 RyStaticMap from '@/components/maps/ryStaticMap/src/index.vue';
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
- RyStaticMap,
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.34667114000006, 30.198078622500038],
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: 4,
135
- color: '#000'
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.url="http://localhost:8601/uploads/5d53650724f04dd3b2d90a7adaddc87e.png";
200
- // this.isRyMapTool = !this.isRyMapTool;
198
+ this.isRyMapTool = !this.isRyMapTool;
201
199
  },
202
200
  onClick2() {
203
- this.url="http://localhost:8601/uploads/23070b484f53466b9dd07c6757da9204.png";
204
- // this.maxZoom = 28;
201
+ this.maxZoom = 28;
205
202
  },
206
203
  onClick3() {
207
204
  this.maxZoom = 10;
208
205
  },
209
- selectMapEvent(){
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
- v-if="dto"
10
- :boundaryModel="dto"
11
- :urls="urls"
12
- :bbox="bbox"
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
- <el-button
22
- class="ele-text-primary" v-show="isShowPaly" style="padding:10px;" @click.stop="onShowPaly(false)">
23
- 轨迹回放 </el-button>
24
-
25
- <el-button
26
- class="ele-text-primary" v-show="!isShowPaly" style="padding:10px; color: red;" @click.stop="onShowPaly(true)">
27
- 结束轨迹回放 </el-button>
28
- </aside>
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 RyMap from '@/components/maps/ryOfflineMap/src/index.vue';
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 RyClustersMarker from '@/components/maps/ryClustersMarker/src/index.vue';
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
- RyMap,
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
- // const bbox = [ 118.84072600000002, 29.937127000000032, 119.86315600000012, 30.445895000000064 ];
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
- {id:'ceshi1', x:120.15535003220648,y:30.179378795342608},
67
- {id:'ceshi2',x:120.16369976775891,y:30.1967116895034},
68
- {id:'ceshi3',x:120.156817,y:30.1753985} ,
69
- {id:'ceshi4',x:120.1538245,y:30.183076} ,
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
- // startMarkerDto:null,
97
- // endMarkerDto:null,
107
+ lineData1: null,
108
+ lineData2: null,
109
+ clearLiens: false,
110
+ // startMarkerDto:null,
111
+ // endMarkerDto:null,
98
112
  startMarkerDto: {
99
- url:require('@/assets/startpoint.png'),
100
- height:23,
101
- offset:[8, -11],
102
- width:28
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
- urls:[
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
- width:4,
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
- this.isShowPaly = b;
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>