ry-vue-map 0.3.3 → 0.3.5

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.
Files changed (15) hide show
  1. package/README.MD +1 -1
  2. package/lib/ryui.common.js +78 -54
  3. package/lib/ryui.common.js.gz +0 -0
  4. package/lib/ryui.css +1 -1
  5. package/lib/ryui.css.gz +0 -0
  6. package/lib/ryui.umd.js +78 -54
  7. package/lib/ryui.umd.js.gz +0 -0
  8. package/lib/ryui.umd.min.js +4 -4
  9. package/lib/ryui.umd.min.js.gz +0 -0
  10. package/package.json +2 -2
  11. package/src/components/maps/ryKMLs/src/index.vue +1 -0
  12. package/src/components/maps/ryStaticMap/src/index.vue +71 -52
  13. package/src/views/map/imgUrl.js +434 -110
  14. package/src/views/map/index.vue +558 -120
  15. package/src/views/map/indexStatic.vue +79 -68
package/src/views/map/indexStatic.vue CHANGED
@@ -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>