Commit 27cc8f16f46c916212987e0a398d1c6efd41098e
1 parent
06e683a8
Exists in
dev
feat:高德地图替换为天地图
Showing
5 changed files
with
966 additions
and
415 deletions
Show diff stats
frontend/front/public/index.html
... | ... | @@ -18,6 +18,7 @@ |
18 | 18 | <script src="<%= BASE_URL %>ddLogin.js"></script> |
19 | 19 | <script src="<%= BASE_URL %>LarkSSOSDKWebQRCode-1.0.1.js"></script> |
20 | 20 | <link rel="stylesheet" href="<%= BASE_URL %>static/css/loading.css" /> |
21 | + <script src="https://api.tianditu.gov.cn/api?v=4.0&tk=73fb326ebb6c50729baaef65cea858c4"></script> | |
21 | 22 | <script type="text/javascript"> |
22 | 23 | window._AMapSecurityConfig = { |
23 | 24 | securityJsCode:'0b63a538e25f626fbfd6dbfe5bb2808a', | ... | ... |
frontend/front/src/views/pages/carMap/index.vue
... | ... | @@ -2,7 +2,7 @@ |
2 | 2 | <div class="container"> |
3 | 3 | <div class="searchSty"> |
4 | 4 | <el-form :inline="true" style="display: flex; justify-content: space-between" :model="queryForm" |
5 | - class="demo-form-inline"> | |
5 | + class="demo-form-inline"> | |
6 | 6 | <!-- <el-form-item label="气站名称:">--> |
7 | 7 | <!-- <el-input v-model="queryForm.orgname" clearable placeholder="请输入气站名称"></el-input>--> |
8 | 8 | <!-- </el-form-item>--> |
... | ... | @@ -22,54 +22,49 @@ |
22 | 22 | </div> |
23 | 23 | <el-form-item> |
24 | 24 | <el-button type="primary" icon="el-icon-refresh" |
25 | - style="border: 1px solid #5875eb; background: #ffffff; color: #5875eb; border-radius: 5px;" | |
26 | - @click="handleReset" plain>重置 | |
25 | + style="border: 1px solid #5875eb; background: #ffffff; color: #5875eb; border-radius: 5px;" | |
26 | + @click="handleReset" plain>重置 | |
27 | 27 | </el-button> |
28 | 28 | <el-button type="primary" style="background: #5875eb; border: 1px solid #5875eb; border-radius: 5px;" |
29 | - icon="el-icon-search" @click="handleSearch"> 查询 | |
29 | + icon="el-icon-search" @click="handleSearch"> 查询 | |
30 | 30 | </el-button> |
31 | 31 | </el-form-item> |
32 | 32 | </el-form> |
33 | 33 | </div> |
34 | - <div class="mapSty"> | |
35 | - <div id="mapContainer" | |
36 | - class="map" | |
37 | - tabindex="0"> | |
34 | + <div class="mapSty" v-loading="loading"> | |
35 | + <div id="mapContainer" class="map" tabindex="0"> | |
38 | 36 | </div> |
39 | 37 | </div> |
40 | - <div ref="infoData" | |
41 | - v-if="infoWindowVisible" | |
42 | - class="custom-info input-card content-window-card"> | |
38 | + <div ref="infoData" v-show="infoWindowVisible" class="custom-info input-card content-window-card"> | |
43 | 39 | <div class="info-top" style="display: flex; justify-content: space-between;align-items: center"> |
44 | 40 | <div> |
45 | 41 | <span style="color: #ffffff;">车辆信息</span> |
46 | 42 | </div> |
47 | 43 | <div @click="closeInfoWindow" style="display: flex;align-items: center"> |
48 | - <i class="el-icon-close" style="color: #ffffff; font-size: 20px;cursor: pointer; " ></i> | |
44 | + <i class="el-icon-close" style="color: #ffffff; font-size: 20px;cursor: pointer; "></i> | |
49 | 45 | </div> |
50 | 46 | </div> |
51 | - <div class="info-middle" | |
52 | - style="background-color: white;"> | |
47 | + <div class="info-middle" style="background-color: white;"> | |
53 | 48 | <el-row> |
54 | - <el-col :span="24" v-for="(item,index) in devInfoList1" :key="'dev'+index" > | |
55 | - <el-col :span="12" v-for="(bitem,index) in item" :key="bitem.name"> | |
49 | + <el-col :span="24" v-for="(item, index) in devInfoList1" :key="'dev' + index"> | |
50 | + <el-col :span="12" v-for="(bitem, index) in item" :key="bitem.name"> | |
56 | 51 | <div class="info-div" style="display: flex"> |
57 | 52 | <div style="text-align: right;width: 168px;"> |
58 | - {{bitem.name}}: | |
53 | + {{ bitem.name }}: | |
59 | 54 | </div> |
60 | - <div class="info-span" style="flex: 1">{{bitem.value}}</div> | |
55 | + <div class="info-span" style="flex: 1">{{ bitem.value }}</div> | |
61 | 56 | </div> |
62 | 57 | </el-col> |
63 | 58 | </el-col> |
64 | 59 | </el-row> |
65 | 60 | </div> |
66 | - <div class="info-bottom" | |
67 | - style="position: relative; top: 0px; margin: 0px auto;"><img src="https://webapi.amap.com/images/sharp.png"></div> | |
61 | + <div class="info-bottom" style="position: relative; top: 0px; margin: 0px auto;"><img | |
62 | + src="https://webapi.amap.com/images/sharp.png"></div> | |
68 | 63 | </div> |
69 | 64 | </div> |
70 | 65 | </template> |
71 | 66 | <script> |
72 | -import { getAppTagTypes,getMapPointDetailInfo } from '@/api/gasMap.js' | |
67 | +import { getAppTagTypes, getMapPointDetailInfo } from '@/api/gasMap.js' | |
73 | 68 | import { getCurrentEnterpriseAndStation } from '@/api/common.js' |
74 | 69 | import AMapLoader from '@amap/amap-jsapi-loader'; |
75 | 70 | import iconImg from '@/assets/qpxx/car.png' |
... | ... | @@ -82,147 +77,150 @@ export default { |
82 | 77 | name: "index", |
83 | 78 | data() { |
84 | 79 | return { |
85 | - rightImgUrl:rightImg, | |
86 | - dailyRecordImgUrl:dailyRecordImg, | |
80 | + rightImgUrl: rightImg, | |
81 | + dailyRecordImgUrl: dailyRecordImg, | |
87 | 82 | queryForm: { |
88 | 83 | qzId: "", //气站id |
89 | 84 | qyId: "" //企业id |
90 | 85 | }, |
91 | 86 | qyOption: [], |
92 | - allOption:[], | |
87 | + allOption: [], | |
93 | 88 | qzOption: [], |
94 | - reference:{}, | |
89 | + reference: {}, | |
95 | 90 | // 控制渲染条件 如果不用v-if会报错 具体可自行尝试 |
96 | 91 | showPop: false, |
97 | 92 | // 保存当前激活的refrence id |
98 | - activeId:'', | |
99 | - devInfoList1:[], | |
93 | + activeId: '', | |
94 | + devInfoList1: [], | |
100 | 95 | devInfoList: [ |
101 | 96 | { |
102 | 97 | name: '车票号', |
103 | 98 | value: '鄂A·A1217', |
104 | - key:'fSsqymc' | |
99 | + key: 'fSsqymc' | |
105 | 100 | }, |
106 | 101 | { |
107 | 102 | name: '车辆型号', |
108 | 103 | value: 'LN56516485656', |
109 | - key:'fSsczmc' | |
104 | + key: 'fSsczmc' | |
110 | 105 | }, |
111 | 106 | { |
112 | 107 | name: '所属气站', |
113 | 108 | value: '孝汉川市刘家隔镇液化石油气瓶', |
114 | - key:'fQpbh' | |
109 | + key: 'fQpbh' | |
115 | 110 | }, |
116 | 111 | { |
117 | 112 | name: '投入使用日期', |
118 | 113 | value: '20223年5月31号', |
119 | - key:'fZzrq' | |
114 | + key: 'fZzrq' | |
120 | 115 | }, |
121 | 116 | { |
122 | 117 | name: '驾驶员', |
123 | - value:'张三', | |
124 | - key:'qpzt', | |
118 | + value: '张三', | |
119 | + key: 'qpzt', | |
125 | 120 | }, |
126 | 121 | { |
127 | 122 | name: '联系电话', |
128 | 123 | value: '1810000081', |
129 | - key:'qpzl' | |
124 | + key: 'qpzl' | |
130 | 125 | }, |
131 | 126 | { |
132 | 127 | name: '证件编号', |
133 | - value:'- -', | |
134 | - key:'fQpgg', | |
128 | + value: '- -', | |
129 | + key: 'fQpgg', | |
135 | 130 | }, |
136 | 131 | { |
137 | 132 | name: '证件编号有效期', |
138 | 133 | value: '- -', |
139 | - key:'ccbh' | |
134 | + key: 'ccbh' | |
140 | 135 | }, |
141 | 136 | { |
142 | 137 | name: '身份证号', |
143 | - value:'- -', | |
144 | - key:'zybh' | |
138 | + value: '- -', | |
139 | + key: 'zybh' | |
145 | 140 | }, |
146 | 141 | { |
147 | 142 | name: '车辆照片', |
148 | 143 | value: '- -', |
149 | - key:'jyhbh' | |
144 | + key: 'jyhbh' | |
150 | 145 | }, |
151 | 146 | { |
152 | 147 | name: '委托运输公司', |
153 | - key:'bcjyrq', | |
154 | - value:'- -' | |
148 | + key: 'bcjyrq', | |
149 | + value: '- -' | |
155 | 150 | }, |
156 | 151 | { |
157 | 152 | name: '道路运输许可证', |
158 | - value:'- -', | |
159 | - key:'fXcjysj', | |
153 | + value: '- -', | |
154 | + key: 'fXcjysj', | |
160 | 155 | }, |
161 | 156 | { |
162 | 157 | name: '道路运输许可证有效日期', |
163 | 158 | value: '- -', |
164 | - key:'sjsynx' | |
159 | + key: 'sjsynx' | |
165 | 160 | }, |
166 | 161 | { |
167 | 162 | name: '危化品证号', |
168 | - key:'sccj', | |
169 | - value:'- -' | |
163 | + key: 'sccj', | |
164 | + value: '- -' | |
170 | 165 | }, |
171 | 166 | { |
172 | 167 | name: '危化品证有效日期', |
173 | 168 | value: '- -', |
174 | - key:'jzrq' | |
169 | + key: 'jzrq' | |
175 | 170 | }, |
176 | 171 | { |
177 | 172 | name: '创建时间', |
178 | - key:'jdrq', | |
179 | - value:'2021年7月4号' | |
173 | + key: 'jdrq', | |
174 | + value: '2021年7月4号' | |
180 | 175 | } |
181 | 176 | ], |
182 | - markers:[], | |
183 | - clickMapId:'', | |
184 | - infoWindowVisible:false, | |
177 | + marker: null, | |
178 | + markers: [], | |
179 | + clickMapId: '', | |
180 | + infoWindowVisible: false, | |
185 | 181 | map: null, //地图 |
186 | 182 | pointData: [], |
187 | - nodeList:[], | |
188 | - centerPoint:[114.347441, 30.50438], | |
183 | + nodeList: [], | |
184 | + centerPoint: [114.347441, 30.50438], | |
185 | + loading: false, | |
189 | 186 | } |
190 | 187 | }, |
191 | 188 | mounted() { |
189 | + // this.initMap(); | |
192 | 190 | }, |
193 | - created () { | |
191 | + created() { | |
194 | 192 | this.initData(); |
195 | 193 | }, |
196 | 194 | methods: { |
197 | - initData(){ | |
195 | + initData() { | |
198 | 196 | this.getEnterpriseAndStationList(); |
199 | 197 | this.getMarkPoint(); |
200 | 198 | }, |
201 | 199 | //获取企业和气站数据 |
202 | - async getEnterpriseAndStationList(){ | |
203 | - await getCurrentEnterpriseAndStation().then((res)=>{ | |
204 | - console.log('打印当前气站和企业信息数据====',res); | |
200 | + async getEnterpriseAndStationList() { | |
201 | + await getCurrentEnterpriseAndStation().then((res) => { | |
202 | + console.log('打印当前气站和企业信息数据====', res); | |
205 | 203 | const { value } = res; |
206 | - if(value.length>0){ | |
204 | + if (value.length > 0) { | |
207 | 205 | this.allOption = value; |
208 | - this.qyOption = value?value.map((item)=>{ | |
206 | + this.qyOption = value ? value.map((item) => { | |
209 | 207 | return { |
210 | - qyId:item.qyId, | |
211 | - qymc:item.qymc | |
208 | + qyId: item.qyId, | |
209 | + qymc: item.qymc | |
212 | 210 | } |
213 | - }):[]; | |
211 | + }) : []; | |
214 | 212 | } |
215 | 213 | }) |
216 | 214 | }, |
217 | 215 | //选择企业的数据 |
218 | - handleQyChange(val){ | |
219 | - this.qzOption =[]; | |
220 | - this.queryForm.qzId =''; | |
221 | - this.qzOption = this.allOption.filter((item)=>item.qyId == val)[0].qzxxList; | |
216 | + handleQyChange(val) { | |
217 | + this.qzOption = []; | |
218 | + this.queryForm.qzId = ''; | |
219 | + this.qzOption = this.allOption.filter((item) => item.qyId == val)[0].qzxxList; | |
222 | 220 | }, |
223 | 221 | //点击气瓶节点的功能 |
224 | - handleNodeItem(val){ | |
225 | - console.log('打印val',val) | |
222 | + handleNodeItem(val) { | |
223 | + console.log('打印val', val) | |
226 | 224 | // // 这个操作是为了避免与源码中的点击reference doToggle方法冲突 |
227 | 225 | // if (this.activeId === val.id && this.showPop) return |
228 | 226 | // this.showPop = false; |
... | ... | @@ -242,7 +240,9 @@ export default { |
242 | 240 | }, |
243 | 241 | //查询按钮 |
244 | 242 | handleSearch() { |
243 | + this.loading = true; | |
245 | 244 | this.pointData = []; |
245 | + this.markers = []; | |
246 | 246 | this.infoWindowVisible = false; |
247 | 247 | this.getMarkPoint(); |
248 | 248 | }, |
... | ... | @@ -253,38 +253,43 @@ export default { |
253 | 253 | this.queryForm.qyId = ''; |
254 | 254 | this.handleSearch(); |
255 | 255 | }, |
256 | - async getMarkPoint(){ | |
257 | - let params ={ | |
258 | - qzId:this.queryForm.qzId, | |
256 | + async getMarkPoint() { | |
257 | + this.loading = true; | |
258 | + let params = { | |
259 | + qzId: this.queryForm.qzId, | |
259 | 260 | qyId: this.queryForm.qyId, |
260 | 261 | } |
261 | - await getAppTagTypes(params).then((res)=>{ | |
262 | - let { code, value} = res; | |
263 | - if(code == 200){ | |
264 | - value.map((item,index)=>{ | |
265 | - if(item.typeone.length>0){ | |
266 | - item.typeone.map((itemone)=>{ | |
262 | + await getAppTagTypes(params).then((res) => { | |
263 | + let { code, value } = res; | |
264 | + if(!value.length){ | |
265 | + this.loading = false; | |
266 | + return | |
267 | + } | |
268 | + if (code == 200) { | |
269 | + value.map((item, index) => { | |
270 | + if (item.typeone.length > 0) { | |
271 | + item.typeone.map((itemone) => { | |
267 | 272 | this.pointData.push({ |
268 | 273 | ...itemone, |
269 | - type:'one', | |
274 | + type: 'one', | |
270 | 275 | }); |
271 | 276 | }) |
272 | 277 | } |
273 | - if(item.typetwo.length>0){ | |
274 | - item.typetwo.map((itemtwo)=>{ | |
278 | + if (item.typetwo.length > 0) { | |
279 | + item.typetwo.map((itemtwo) => { | |
275 | 280 | this.pointData.push({ |
276 | 281 | ...itemtwo, |
277 | - type:'two' | |
282 | + type: 'two' | |
278 | 283 | }); |
279 | 284 | }) |
280 | 285 | } |
281 | - if(item.typethree.length>0){ | |
286 | + if (item.typethree.length > 0) { | |
282 | 287 | console.log('打印111') |
283 | - item.typethree.map((itemthree)=>{ | |
288 | + item.typethree.map((itemthree) => { | |
284 | 289 | // this.pointData.push(itemthree); |
285 | 290 | this.pointData.push({ |
286 | 291 | ...itemthree, |
287 | - type:'three' | |
292 | + type: 'three' | |
288 | 293 | }); |
289 | 294 | }) |
290 | 295 | } |
... | ... | @@ -293,10 +298,10 @@ export default { |
293 | 298 | this.pointData = this.pointData.map(item => { |
294 | 299 | return { |
295 | 300 | ...item, |
296 | - isActive :false, | |
301 | + isActive: false, | |
297 | 302 | } |
298 | 303 | }); |
299 | - this.centerPoint = [this.pointData[0].fjd,this.pointData[0].fwd] | |
304 | + this.centerPoint = [this.pointData[0].fjd, this.pointData[0].fwd] | |
300 | 305 | this.initMap(); |
301 | 306 | } |
302 | 307 | }) |
... | ... | @@ -316,43 +321,93 @@ export default { |
316 | 321 | version: '2.0' //数据可视化 |
317 | 322 | } |
318 | 323 | }).then((AMap) => { |
319 | - this.map = new AMap.Map('mapContainer', {//设置地图容器id | |
320 | - viewMode: '2D', //是否为3D地图模式 | |
321 | - zoom: 16, //初始化地图层级 | |
322 | - center: this.centerPoint,//初始化地图中心点 | |
323 | - }); | |
324 | - //信息窗口实例 | |
325 | - //循环所有的标记点 | |
326 | - console.log('打印pointData',this.pointData); | |
327 | - let arr =[]; | |
328 | - for (let i = 0; i < this.pointData.length; i++) { | |
329 | - const num = i + 1; | |
330 | - const contentImg = '<div style="color: #fff; width: 50px;height: 50px;"><img src="./src/assets/images/后台.png" />'+num + "</div>" | |
331 | - // 引入本地图片 | |
332 | - const localIcon = new AMap.Icon({ | |
333 | - size: new AMap.Size(30, 34), // 图标尺寸 | |
334 | - image: iconImg, // 图片的URL | |
335 | - imageSize: new AMap.Size(30, 34), // 图标所用图片大小 | |
336 | - }); | |
337 | - var marker = new AMap.Marker({ | |
338 | - position: [this.pointData[i].fjd, this.pointData[i].fwd], | |
339 | - map: this.map, | |
340 | - icon:localIcon, | |
341 | - offset: new AMap.Pixel(-15, -20), | |
324 | + // this.map = new AMap.Map('mapContainer', {//设置地图容器id | |
325 | + // viewMode: '2D', //是否为3D地图模式 | |
326 | + // zoom: 16, //初始化地图层级 | |
327 | + // center: this.centerPoint,//初始化地图中心点 | |
328 | + // }); | |
329 | + | |
330 | + // ===========天地图代码============== | |
331 | + if(!this.map){ | |
332 | + // 防止二次初始化导致拖拽失效 | |
333 | + this.map = new T.Map('mapContainer',{ | |
334 | + projection: 'EPSG:900913' | |
342 | 335 | }); |
343 | - arr.push( Object.assign(this.pointData[i], { | |
344 | - mapId: marker._amap_id, | |
345 | - })) | |
346 | - // 将创建的点标记添加到已有的地图实例+ | |
336 | + } | |
337 | + this.map.centerAndZoom(new T.LngLat(this.centerPoint[0], this.centerPoint[1]), 16); | |
338 | + //允许鼠标双击放大地图 | |
339 | + this.map.enableScrollWheelZoom(); | |
340 | + let arr = []; | |
341 | + const seenCoordinates = new Set(); // 记录已经处理的经纬度 | |
342 | + | |
343 | + for (let i = 0; i < this.pointData.length; i++) { | |
344 | + const point = this.pointData[i]; | |
345 | + const coordsKey = `${point.fjd},${point.fwd}`; // 使用经纬度创建唯一的键 | |
346 | + // 如果经纬度之前未处理过,则添加到数组和地图 | |
347 | + | |
348 | + // 创建本地图标 | |
349 | + const localIcon = new T.Icon({ | |
350 | + iconUrl: iconImg, | |
351 | + iconSize: new T.Point(30, 34), | |
352 | + iconAnchor: new T.Point(30, 34), | |
353 | + }); | |
354 | + | |
355 | + // 创建自定义标记 | |
356 | + const marker = new T.Marker(new T.LngLat(point.fjd, point.fwd), { icon: localIcon }); | |
357 | + arr.push(Object.assign(point, { mapId: point.id })); | |
347 | 358 | marker['arr'] = arr; |
348 | - marker['isActive'] = this.pointData[i].isActive; | |
349 | - // console.log('marker=====', marker); | |
350 | - this.map.add([marker]); | |
351 | - // marker.content = '我是第' + (i + 1) + '个Marker'; | |
352 | - marker.on("click", this.markerClick); | |
359 | + marker['isActive'] = point.isActive; | |
360 | + marker['type'] = point.type; | |
361 | + marker['tid'] = point.id; | |
353 | 362 | this.markers.push(marker); |
354 | - marker.emit('click', {target: marker}); | |
363 | + if (!seenCoordinates.has(coordsKey)) { | |
364 | + seenCoordinates.add(coordsKey); | |
365 | + // 绑定点击事件 | |
366 | + marker.addEventListener("click", this.markerClick.bind(null, marker)); | |
367 | + // 将标记添加到地图 | |
368 | + this.map.addOverLay(marker); | |
369 | + } | |
355 | 370 | } |
371 | + // 创建并添加标记集群 | |
372 | + new T.MarkerClusterer(this.map, { markers: this.markers }); | |
373 | + // 更新加载状态 | |
374 | + this.loading = false; | |
375 | + // ===========天地图代码============== | |
376 | + | |
377 | + | |
378 | + //信息窗口实例 | |
379 | + //循环所有的标记点 | |
380 | + console.log('打印pointData', this.pointData); | |
381 | + // let arr =[]; | |
382 | + // for (let i = 0; i < this.pointData.length; i++) { | |
383 | + // const num = i + 1; | |
384 | + // const contentImg = '<div style="color: #fff; width: 50px;height: 50px;"><img src="./src/assets/images/后台.png" />'+num + "</div>" | |
385 | + // // 引入本地图片 | |
386 | + // const localIcon = new AMap.Icon({ | |
387 | + // size: new AMap.Size(30, 34), // 图标尺寸 | |
388 | + // image: iconImg, // 图片的URL | |
389 | + // imageSize: new AMap.Size(30, 34), // 图标所用图片大小 | |
390 | + // }); | |
391 | + // var marker = new AMap.Marker({ | |
392 | + // position: [this.pointData[i].fjd, this.pointData[i].fwd], | |
393 | + // map: this.map, | |
394 | + // icon:localIcon, | |
395 | + // offset: new AMap.Pixel(-15, -20), | |
396 | + // }); | |
397 | + // arr.push( Object.assign(this.pointData[i], { | |
398 | + // mapId: marker._amap_id, | |
399 | + // })) | |
400 | + // // 将创建的点标记添加到已有的地图实例+ | |
401 | + // marker['arr'] = arr; | |
402 | + // marker['isActive'] = this.pointData[i].isActive; | |
403 | + // // console.log('marker=====', marker); | |
404 | + // this.map.add([marker]); | |
405 | + // // marker.content = '我是第' + (i + 1) + '个Marker'; | |
406 | + // marker.on("click", this.markerClick); | |
407 | + // this.markers.push(marker); | |
408 | + // marker.emit('click', {target: marker}); | |
409 | + // } | |
410 | + return | |
356 | 411 | AMap.plugin('AMap.DistrictSearch', function () { |
357 | 412 | //创建行政区查询对象 |
358 | 413 | var options = { |
... | ... | @@ -391,61 +446,106 @@ export default { |
391 | 446 | }); |
392 | 447 | }, |
393 | 448 | //点击点标记事件 |
394 | - markerClick(e) { | |
395 | - this.infoWindowVisible = true; | |
396 | - let arrNew = e.target.arr.filter((x) => x.mapId == e.target._amap_id); | |
449 | + markerClick(event, e) { | |
450 | + console.log(e); | |
451 | + let arrNew = e.target.arr.filter((x) => x.mapId == e.target.tid); | |
397 | 452 | this.devInfo = arrNew && arrNew[0]; |
398 | 453 | // infoWindow.setContent(e.target.content); |
399 | 454 | console.log('打印res', arrNew); |
400 | 455 | // 如果已选中,则不做处理 |
401 | 456 | |
402 | 457 | // 引入本地图片 |
403 | - const newIcon = new AMap.Icon({ | |
404 | - size: new AMap.Size(30, 34), // 图标尺寸 | |
405 | - image: iconImg1, // 图片的URL | |
406 | - imageSize: new AMap.Size(30, 34), // 图标所用图片大小 | |
407 | - }); | |
408 | - const oldIcon = new AMap.Icon({ | |
409 | - size: new AMap.Size(30, 34), // 图标尺寸 | |
410 | - image: iconImg, // 图片的URL | |
411 | - imageSize: new AMap.Size(30, 34), // 图标所用图片大小 | |
412 | - }); | |
458 | + // const newIcon = new AMap.Icon({ | |
459 | + // size: new AMap.Size(30, 34), // 图标尺寸 | |
460 | + // image: iconImg1, // 图片的URL | |
461 | + // imageSize: new AMap.Size(30, 34), // 图标所用图片大小 | |
462 | + // }); | |
463 | + // const oldIcon = new AMap.Icon({ | |
464 | + // size: new AMap.Size(30, 34), // 图标尺寸 | |
465 | + // image: iconImg, // 图片的URL | |
466 | + // imageSize: new AMap.Size(30, 34), // 图标所用图片大小 | |
467 | + // }); | |
468 | + this.clickMapId = e.target.tid; | |
413 | 469 | if (!e.target.isActive) { |
414 | - e.target.isActive = true; | |
415 | - this.clickMapId = ''; | |
416 | - } else { | |
417 | - e.target.isActive = false; | |
418 | - this.getPointDetailInfo(arrNew[0].fqptm,e); | |
419 | - this.clickMapId = e.target._amap_id; | |
470 | + // 如果已选中,则不做处理 | |
471 | + this.getPointDetailInfo(arrNew[0].fqptm, e); | |
472 | + this.infoWindowVisible = true; | |
473 | + let content = this.$refs.infoData; | |
474 | + if (!content) return | |
475 | + var lnglat = new T.LngLat(e.lnglat.lng, e.lnglat.lat); | |
476 | + console.log("content", content); | |
477 | + console.log("lnglat", lnglat); | |
478 | + var infoWin = new T.InfoWindow(); | |
479 | + infoWin.setLngLat(lnglat); | |
480 | + infoWin.setContent(content); | |
481 | + this.map.openInfoWindow(content, lnglat); | |
482 | + this.map.panTo(lnglat); | |
483 | + // this.map.panTo(lnglat); | |
420 | 484 | } |
485 | + | |
486 | + const newIcon = new T.Icon({ | |
487 | + iconSize: T.Point(30, 34), // 图标尺寸 | |
488 | + iconUrl: iconImg1, // 图片的URL | |
489 | + iconAnchor: T.Point(30, 34), // 图标所用图片大小 | |
490 | + }); | |
491 | + const oldIcon = new T.Icon({ | |
492 | + iconSize: T.Point(30, 34), // 图标尺寸 | |
493 | + iconUrl: iconImg, // 图片的URL | |
494 | + iconAnchor: T.Point(30, 34), // 图标所用图片大小 | |
495 | + }); | |
496 | + | |
421 | 497 | this.markers.forEach((marker) => { |
422 | - if (marker._amap_id !== this.clickMapId) { | |
423 | - marker.isActive = true; | |
498 | + if (marker.tid !== this.clickMapId) { | |
499 | + // marker.isActive = true; | |
424 | 500 | marker.setIcon(oldIcon); |
425 | - }else{ | |
426 | - marker.isActive = false; | |
427 | - console.log('打印marker',marker); | |
501 | + } else { | |
502 | + // marker.isActive = false; | |
503 | + console.log('打印marker', marker); | |
428 | 504 | marker.setIcon(newIcon); |
429 | 505 | } |
430 | 506 | }); |
507 | + | |
508 | + | |
509 | + | |
510 | + | |
511 | + | |
512 | + | |
513 | + // if (!e.target.isActive) { | |
514 | + // e.target.isActive = true; | |
515 | + // this.clickMapId = ''; | |
516 | + // } else { | |
517 | + // e.target.isActive = false; | |
518 | + // this.getPointDetailInfo(arrNew[0].fqptm,e); | |
519 | + // this.clickMapId = e.target._amap_id; | |
520 | + // } | |
521 | + // this.markers.forEach((marker) => { | |
522 | + // if (marker._amap_id !== this.clickMapId) { | |
523 | + // marker.isActive = true; | |
524 | + // marker.setIcon(oldIcon); | |
525 | + // }else{ | |
526 | + // marker.isActive = false; | |
527 | + // console.log('打印marker',marker); | |
528 | + // marker.setIcon(newIcon); | |
529 | + // } | |
530 | + // }); | |
431 | 531 | // 更新选中的标记点 |
432 | 532 | // 设置当前点击的标记点样式 |
433 | 533 | // e.target.setIcon(newIcon); // 或者其他方法来重置样式 |
434 | 534 | }, |
435 | - async getPointDetailInfo(fqptm,e){ | |
436 | - let params ={ | |
437 | - qptm:fqptm | |
535 | + async getPointDetailInfo(fqptm, e) { | |
536 | + let params = { | |
537 | + qptm: fqptm | |
438 | 538 | } |
439 | - await getMapPointDetailInfo(params).then(async(res)=>{ | |
440 | - console.log('打印res',res); | |
441 | - const { value} = res; | |
442 | - const {qpdqlzs,qpOrderInfoVO} = value; | |
443 | - var infoWindow = this.createInfoWindow(); | |
444 | - infoWindow.open(this.map, e.target.getPosition()); | |
539 | + await getMapPointDetailInfo(params).then(async (res) => { | |
540 | + console.log('打印res', res); | |
541 | + const { value } = res; | |
542 | + const { qpdqlzs, qpOrderInfoVO } = value; | |
543 | + // var infoWindow = this.createInfoWindow(); | |
544 | + // infoWindow.open(this.map, e.target.getPosition()); | |
445 | 545 | // this.devInfoList = await this.$assignValues(value, this.devInfoList); |
446 | - this.nodeList = await this.$createDoubleArray(qpdqlzs,5); | |
546 | + this.nodeList = await this.$createDoubleArray(qpdqlzs, 5); | |
447 | 547 | console.log('打印this.nodeList', this.nodeList); |
448 | - this.devInfoList1 = await this.$createDoubleArray(this.devInfoList,2); | |
548 | + this.devInfoList1 = await this.$createDoubleArray(this.devInfoList, 2); | |
449 | 549 | |
450 | 550 | }) |
451 | 551 | }, |
... | ... | @@ -461,19 +561,31 @@ export default { |
461 | 561 | }, |
462 | 562 | closeInfoWindow() { |
463 | 563 | // 引入本地图片 |
464 | - const oldIcon = new AMap.Icon({ | |
465 | - size: new AMap.Size(30, 34), // 图标尺寸 | |
466 | - image: iconImg, // 图片的URL | |
467 | - imageSize: new AMap.Size(30, 34), // 图标所用图片大小 | |
564 | + // const oldIcon = new AMap.Icon({ | |
565 | + // size: new AMap.Size(30, 34), // 图标尺寸 | |
566 | + // image: iconImg, // 图片的URL | |
567 | + // imageSize: new AMap.Size(30, 34), // 图标所用图片大小 | |
568 | + // }); | |
569 | + // this.markers.forEach((marker) => { | |
570 | + // if (marker._amap_id == this.clickMapId) { | |
571 | + // marker.isActive = true; | |
572 | + // marker.setIcon(oldIcon); | |
573 | + // } | |
574 | + // }); | |
575 | + const oldIcon = new T.Icon({ | |
576 | + iconSize: T.Point(30, 34), // 图标尺寸 | |
577 | + iconUrl: iconImg, // 图片的URL | |
578 | + iconAnchor: T.Point(30, 34), // 图标所用图片大小 | |
468 | 579 | }); |
469 | 580 | this.markers.forEach((marker) => { |
470 | - if (marker._amap_id == this.clickMapId) { | |
471 | - marker.isActive = true; | |
581 | + if (marker.tid == this.clickMapId) { | |
582 | + // marker.isActive = true; | |
472 | 583 | marker.setIcon(oldIcon); |
473 | 584 | } |
474 | 585 | }); |
475 | 586 | this.clickMapId = ''; |
476 | - this.map.clearInfoWindow(); | |
587 | + // this.map.clearInfoWindow(); | |
588 | + this.map.closeInfoWindow(); | |
477 | 589 | }, |
478 | 590 | } |
479 | 591 | } |
... | ... | @@ -488,24 +600,48 @@ export default { |
488 | 600 | opacity: 0.92; |
489 | 601 | color: #fff; |
490 | 602 | } |
603 | + | |
491 | 604 | /* 下方是去除三角箭头的代码 */ |
492 | 605 | .popoverSty.el-popper[x-placement^=top] .popper__arrow::after { |
493 | 606 | border-top-color: #ec661e !important; |
494 | 607 | } |
495 | 608 | </style> |
496 | 609 | <style lang="scss" scoped> |
610 | +::v-deep .tdt-infowindow-content-wrapper { | |
611 | + box-shadow: none; | |
612 | + background: rgba(255, 255, 255, 0); | |
613 | +} | |
614 | + | |
615 | +::v-deep .tdt-infowindow-close-button { | |
616 | + display: none; | |
617 | +} | |
618 | + | |
619 | +::v-deep .tdt-infowindow-tip-container { | |
620 | + display: none; | |
621 | +} | |
622 | + | |
623 | +::v-deep .tdt-infowindow { | |
624 | + bottom: 40px !important; | |
625 | + left: -360px !important; | |
626 | +} | |
627 | + | |
497 | 628 | #mapContainer { |
498 | 629 | min-width: 865px; |
499 | 630 | min-height: 630px; |
500 | 631 | } |
501 | 632 | |
502 | 633 | .container { |
503 | - .textSty{ | |
504 | - white-space: nowrap; /* 设置为单行 */ | |
505 | - max-width: 200px; /* 设置最大宽度 */ | |
506 | - overflow: hidden; /* 隐藏超出部分的内容 */ | |
507 | - text-overflow: ellipsis; /* 显示省略号 */ | |
634 | + .textSty { | |
635 | + white-space: nowrap; | |
636 | + /* 设置为单行 */ | |
637 | + max-width: 200px; | |
638 | + /* 设置最大宽度 */ | |
639 | + overflow: hidden; | |
640 | + /* 隐藏超出部分的内容 */ | |
641 | + text-overflow: ellipsis; | |
642 | + /* 显示省略号 */ | |
508 | 643 | } |
644 | + | |
509 | 645 | .searchSty { |
510 | 646 | background: #ffffff; |
511 | 647 | padding: 0 20px; |
... | ... | @@ -517,25 +653,34 @@ export default { |
517 | 653 | margin-top: 20px; |
518 | 654 | background: #ffffff; |
519 | 655 | } |
520 | - .labelSty{ | |
656 | + | |
657 | + .labelSty { | |
521 | 658 | width: 10px; |
522 | 659 | height: 10px; |
523 | 660 | border-radius: 2px; |
524 | 661 | margin-right: 10px; |
525 | 662 | } |
526 | - .completeSty{ | |
663 | + | |
664 | + .completeSty { | |
527 | 665 | background-color: #ea5504; |
528 | 666 | } |
529 | - .uncompleteSty{ | |
667 | + | |
668 | + .uncompleteSty { | |
530 | 669 | background-color: #ccd0e5; |
531 | 670 | } |
532 | - .textSty{ | |
533 | - white-space: nowrap; /* 设置为单行 */ | |
534 | - max-width: 200px; /* 设置最大宽度 */ | |
535 | - overflow: hidden; /* 隐藏超出部分的内容 */ | |
536 | - text-overflow: ellipsis; /* 显示省略号 */ | |
671 | + | |
672 | + .textSty { | |
673 | + white-space: nowrap; | |
674 | + /* 设置为单行 */ | |
675 | + max-width: 200px; | |
676 | + /* 设置最大宽度 */ | |
677 | + overflow: hidden; | |
678 | + /* 隐藏超出部分的内容 */ | |
679 | + text-overflow: ellipsis; | |
680 | + /* 显示省略号 */ | |
537 | 681 | } |
538 | 682 | } |
683 | + | |
539 | 684 | .content-window-card { |
540 | 685 | position: relative; |
541 | 686 | box-shadow: none; |
... | ... | @@ -545,6 +690,7 @@ export default { |
545 | 690 | width: 45rem; |
546 | 691 | padding: 0; |
547 | 692 | } |
693 | + | |
548 | 694 | .content-window-card p { |
549 | 695 | height: 2rem; |
550 | 696 | } |
... | ... | @@ -569,6 +715,7 @@ export default { |
569 | 715 | line-height: 31px; |
570 | 716 | padding: 0 10px; |
571 | 717 | } |
718 | + | |
572 | 719 | .info-top img { |
573 | 720 | position: absolute; |
574 | 721 | top: 10px; |
... | ... | @@ -593,6 +740,7 @@ export default { |
593 | 740 | clear: both; |
594 | 741 | text-align: center; |
595 | 742 | } |
743 | + | |
596 | 744 | .info-bottom img { |
597 | 745 | position: relative; |
598 | 746 | z-index: 104; |
... | ... | @@ -628,6 +776,4 @@ export default { |
628 | 776 | .info-a-title { |
629 | 777 | color: #000000; |
630 | 778 | font-size: 16px; |
631 | -} | |
632 | - | |
633 | -</style> | |
779 | +}</style> | ... | ... |
frontend/front/src/views/pages/enterpriseGasStation/enterpriseGasMap/index.vue
... | ... | @@ -28,7 +28,7 @@ |
28 | 28 | </el-form-item> |
29 | 29 | </el-form> |
30 | 30 | </div> |
31 | - <div class="mapSty"> | |
31 | + <div class="mapSty" v-loading="loading"> | |
32 | 32 | <div id="mapContainer" |
33 | 33 | class="map" |
34 | 34 | tabindex="0"> |
... | ... | @@ -304,6 +304,7 @@ export default { |
304 | 304 | key:'czl' |
305 | 305 | }, |
306 | 306 | ], |
307 | + marker:null, | |
307 | 308 | markers:[], |
308 | 309 | clickMapId:'', |
309 | 310 | companyInfoDataVisible:false, |
... | ... | @@ -311,6 +312,8 @@ export default { |
311 | 312 | map: null, //地图 |
312 | 313 | pointData: [], |
313 | 314 | centerPoint:[114.347441, 30.50438], |
315 | + currentObj:{}, | |
316 | + loading:false | |
314 | 317 | } |
315 | 318 | }, |
316 | 319 | mounted() { |
... | ... | @@ -350,7 +353,9 @@ export default { |
350 | 353 | }, |
351 | 354 | //查询按钮 |
352 | 355 | handleSearch() { |
356 | + this.loading = true; | |
353 | 357 | this.pointData = []; |
358 | + this.markers = []; | |
354 | 359 | this.companyInfoDataVisible = false; |
355 | 360 | this.gasStationInfoVisible = false; |
356 | 361 | this.getMarkPoint(); |
... | ... | @@ -362,13 +367,18 @@ export default { |
362 | 367 | this.queryForm.qyId = ''; |
363 | 368 | this.handleSearch(); |
364 | 369 | }, |
365 | - async getMarkPoint(){ | |
370 | + async getMarkPoint(){ | |
371 | + this.loading = true; | |
366 | 372 | let params ={ |
367 | 373 | qzId:this.queryForm.qzId, |
368 | 374 | qyId: this.queryForm.qyId, |
369 | 375 | } |
370 | 376 | await getEnterpriseMapPoint(params).then((res)=>{ |
371 | 377 | let { code, value} = res; |
378 | + if(!value){ | |
379 | + this.loading = false; | |
380 | + return | |
381 | + } | |
372 | 382 | if(code == 200){ |
373 | 383 | const { qyxxList, qzxxList } = value; |
374 | 384 | let pointDataArray =[] |
... | ... | @@ -394,7 +404,8 @@ export default { |
394 | 404 | }):[]; |
395 | 405 | console.log('打印value====>', pointDataArray); |
396 | 406 | this.pointData = pointDataArray; |
397 | - // this.centerPoint=[pointDataArray[0].fJd,pointDataArray[0].fWd] | |
407 | + console.log('打印pointData',this.pointData); | |
408 | + this.centerPoint=[pointDataArray[0].fJd,pointDataArray[0].fWd] | |
398 | 409 | this.initMap(); |
399 | 410 | } |
400 | 411 | }) |
... | ... | @@ -414,40 +425,82 @@ export default { |
414 | 425 | version: '2.0' //数据可视化 |
415 | 426 | } |
416 | 427 | }).then((AMap) => { |
417 | - this.map = new AMap.Map('mapContainer', {//设置地图容器id | |
418 | - viewMode: '2D', //是否为3D地图模式 | |
419 | - zoom: 15, //初始化地图层级 | |
420 | - center: this.centerPoint,//初始化地图中心点 | |
421 | - }); | |
422 | - //信息窗口实例 | |
423 | - //循环所有的标记点 | |
424 | - console.log('打印pointData',this.pointData); | |
428 | + console.log("初始化地图",this.map); | |
429 | + // this.map = new AMap.Map('mapContainer', {//设置地图容器id | |
430 | + // viewMode: '2D', //是否为3D地图模式 | |
431 | + // zoom: 15, //初始化地图层级 | |
432 | + // center: this.centerPoint,//初始化地图中心点 | |
433 | + // }); | |
434 | + // ===========天地图代码============== | |
435 | + // if(!this.map){ | |
436 | + // 防止二次初始化导致拖拽失效 | |
437 | + this.map = new T.Map('mapContainer',{ | |
438 | + projection: 'EPSG:900913' | |
439 | + }); | |
440 | + // } | |
441 | + this.map.centerAndZoom(new T.LngLat(this.centerPoint[0], this.centerPoint[1]), 15); | |
442 | + //允许鼠标双击放大地图 | |
443 | + this.map.enableScrollWheelZoom(); | |
425 | 444 | let arr =[]; |
445 | + | |
426 | 446 | for (let i = 0; i < this.pointData.length; i++) { |
427 | 447 | // 引入本地图片 |
428 | - const localIcon = new AMap.Icon({ | |
429 | - size: new AMap.Size(30, 34), // 图标尺寸 | |
430 | - image: this.pointData[i].type=='qy'?companyImg:gasStationImg, // 图片的URL | |
431 | - imageSize: new AMap.Size(30, 34), // 图标所用图片大小 | |
432 | - }); | |
433 | - var marker = new AMap.Marker({ | |
434 | - position: [this.pointData[i].fJd, this.pointData[i].fWd], | |
435 | - map: this.map, | |
436 | - icon:localIcon, | |
437 | - offset: new AMap.Pixel(-15, -20), | |
448 | + const localIcon = new T.Icon({ | |
449 | + iconUrl: this.pointData[i].type=='qy'?companyImg:gasStationImg, | |
450 | + iconSize: new T.Point(30, 34), | |
451 | + iconAnchor: new T.Point(30, 34), | |
438 | 452 | }); |
439 | - arr.push( Object.assign(this.pointData[i], { | |
440 | - mapId: marker._amap_id, | |
441 | - })) | |
442 | - // 将创建的点标记添加到已有的地图实例+ | |
443 | - marker['arr'] = arr; | |
444 | - marker['isActive'] = this.pointData[i].isActive; | |
445 | - marker['type'] = this.pointData[i].type; | |
446 | - this.map.add([marker]); | |
447 | - marker.on("click", this.markerClick); | |
448 | - this.markers.push(marker); | |
449 | - marker.emit('click', {target: marker}); | |
453 | + //向地图上添加自定义标注 | |
454 | + if(this.pointData[i].fJd && this.pointData[i].fWd){ | |
455 | + this.marker = new T.Marker(new T.LngLat(this.pointData[i].fJd, this.pointData[i].fWd), {icon: localIcon}); | |
456 | + arr.push( Object.assign(this.pointData[i], { | |
457 | + mapId: this.pointData[i].id, | |
458 | + })) | |
459 | + this.marker['arr'] = arr; | |
460 | + this.marker['isActive'] = this.pointData[i].isActive; | |
461 | + this.marker['type'] = this.pointData[i].type; | |
462 | + this.marker['tid'] = this.pointData[i].id | |
463 | + this.marker.addEventListener("click", this.markerClick.bind(null,this.marker)); | |
464 | + this.markers.push(this.marker); | |
465 | + this.map.addOverLay(this.marker); | |
466 | + } | |
450 | 467 | } |
468 | + this.loading = false; | |
469 | + console.log('所有makers点',this.markers); | |
470 | + // ===========天地图代码============== | |
471 | + | |
472 | + | |
473 | + //信息窗口实例 | |
474 | + //循环所有的标记点 | |
475 | + // console.log('打印pointData',this.pointData); | |
476 | + // let arr =[]; | |
477 | + // for (let i = 0; i < this.pointData.length; i++) { | |
478 | + // // 引入本地图片 | |
479 | + // const localIcon = new AMap.Icon({ | |
480 | + // size: new AMap.Size(30, 34), // 图标尺寸 | |
481 | + // image: this.pointData[i].type=='qy'?companyImg:gasStationImg, // 图片的URL | |
482 | + // imageSize: new AMap.Size(30, 34), // 图标所用图片大小 | |
483 | + // }); | |
484 | + // var marker = new AMap.Marker({ | |
485 | + // position: [this.pointData[i].fJd, this.pointData[i].fWd], | |
486 | + // map: this.map, | |
487 | + // icon:localIcon, | |
488 | + // offset: new AMap.Pixel(-15, -20), | |
489 | + // }); | |
490 | + // arr.push( Object.assign(this.pointData[i], { | |
491 | + // mapId: marker._amap_id, | |
492 | + // })) | |
493 | + // // 将创建的点标记添加到已有的地图实例+ | |
494 | + // marker['arr'] = arr; | |
495 | + // marker['isActive'] = this.pointData[i].isActive; | |
496 | + // marker['type'] = this.pointData[i].type; | |
497 | + // this.map.add([marker]); | |
498 | + // marker.on("click", this.markerClick); | |
499 | + // this.markers.push(marker); | |
500 | + // marker.emit('click', {target: marker}); | |
501 | + // } | |
502 | + | |
503 | + | |
451 | 504 | // AMap.plugin('AMap.DistrictSearch', function () { |
452 | 505 | // //创建行政区查询对象 |
453 | 506 | // var options = { |
... | ... | @@ -484,27 +537,34 @@ export default { |
484 | 537 | }); |
485 | 538 | }, |
486 | 539 | //点击点标记事件 |
487 | - async markerClick(e) { | |
488 | - console.log('打印e',e); | |
489 | - let arrNew = e.target.arr.filter((x) => x.mapId == e.target._amap_id); | |
490 | - console.log('打印e',e.target.type); | |
540 | + async markerClick(event,e) { | |
541 | + console.log("event",event); | |
542 | + console.log('打印e',e.target); | |
543 | + // return | |
544 | + let arrNew = e.target.arr.filter((x) => x.id == e.target.tid); | |
545 | + console.log('打印arrNew[0]',arrNew[0]); | |
491 | 546 | // 引入本地图片 |
492 | - if (!e.target.isActive) { | |
493 | - e.target.isActive = true; | |
494 | - this.clickMapId = ''; | |
495 | - } else { | |
496 | - e.target.isActive = false; | |
497 | - this.clickMapId = e.target._amap_id; | |
498 | - switch ( e.target.type){ | |
547 | + // if (!e.target.isActive) { | |
548 | + // e.target.isActive = true; | |
549 | + // this.companyInfoDataVisible = false; | |
550 | + // this.gasStationInfoVisible = false; | |
551 | + // this.clickMapId = ''; | |
552 | + // } else { | |
553 | + // this.clickMapId = e.target._amap_id; | |
554 | + this.clickMapId = e.target.tid; | |
555 | + console.log("true",this.clickMapId); | |
556 | + switch (e.target.type){ | |
499 | 557 | case 'qy': |
500 | 558 | this.companyInfoDataVisible = true; |
501 | 559 | this.companyInfoList = await this.$assignValues(arrNew[0], this.companyInfoList); |
502 | 560 | this.companyInfoList1 = await this.$createDoubleArray(this.companyInfoList,2); |
561 | + console.log("企业1",this.companyInfoList); | |
562 | + console.log("企业2",this.companyInfoList1); | |
503 | 563 | break; |
504 | 564 | case 'qz': |
505 | 565 | this.gasStationInfoVisible = true; |
506 | 566 | this.gasStationInfoList = await this.$assignValues(arrNew[0], this.gasStationInfoList); |
507 | - console.log('打印arrNew[0]',arrNew[0]); | |
567 | + console.log("气站",this.gasStationInfoList); | |
508 | 568 | this.gasStationInfoList.map(async (item)=>{ |
509 | 569 | if(item.type == 'img' && item.value !=='— —'){ |
510 | 570 | console.log('打印item', item); |
... | ... | @@ -518,33 +578,63 @@ export default { |
518 | 578 | this.gasStationInfoList1 = await this.$createDoubleArray(this.gasStationInfoList,2); |
519 | 579 | break; |
520 | 580 | } |
521 | - } | |
581 | + // } | |
582 | + // this.markers.forEach((marker) => { | |
583 | + // const newIcon = new AMap.Icon({ | |
584 | + // size: new AMap.Size(30, 34), // 图标尺寸 | |
585 | + // image: marker.type=='qy'?companyImgHigh:gasStationImgHigh, // 图片的URL | |
586 | + // imageSize: new AMap.Size(30, 34), // 图标所用图片大小 | |
587 | + // }); | |
588 | + // const oldIcon = new AMap.Icon({ | |
589 | + // size: new AMap.Size(30, 34), // 图标尺寸 | |
590 | + // image: marker.type=='qy'?companyImg:gasStationImg, // 图片的URL | |
591 | + // imageSize: new AMap.Size(30, 34), // 图标所用图片大小 | |
592 | + // }); | |
593 | + // if (marker._amap_id !== this.clickMapId) { | |
594 | + // marker.isActive = true; | |
595 | + // marker.setIcon(oldIcon); | |
596 | + // }else{ | |
597 | + // marker.isActive = false; | |
598 | + // console.log('打印marker',marker); | |
599 | + // marker.setIcon(newIcon); | |
600 | + // } | |
601 | + // }); | |
522 | 602 | this.markers.forEach((marker) => { |
523 | - const newIcon = new AMap.Icon({ | |
524 | - size: new AMap.Size(30, 34), // 图标尺寸 | |
525 | - image: marker.type=='qy'?companyImgHigh:gasStationImgHigh, // 图片的URL | |
526 | - imageSize: new AMap.Size(30, 34), // 图标所用图片大小 | |
603 | + const newIcon = new T.Icon({ | |
604 | + iconSize: T.Point(30, 34), // 图标尺寸 | |
605 | + iconUrl: marker.type=='qy'?companyImgHigh:gasStationImgHigh, // 图片的URL | |
606 | + iconAnchor: T.Point(30, 34), // 图标所用图片大小 | |
527 | 607 | }); |
528 | - const oldIcon = new AMap.Icon({ | |
529 | - size: new AMap.Size(30, 34), // 图标尺寸 | |
530 | - image: marker.type=='qy'?companyImg:gasStationImg, // 图片的URL | |
531 | - imageSize: new AMap.Size(30, 34), // 图标所用图片大小 | |
608 | + const oldIcon = new T.Icon({ | |
609 | + iconSize: T.Point(30, 34), // 图标尺寸 | |
610 | + iconUrl: marker.type=='qy'?companyImg:gasStationImg, // 图片的URL | |
611 | + iconAnchor: T.Point(30, 34), // 图标所用图片大小 | |
532 | 612 | }); |
533 | - if (marker._amap_id !== this.clickMapId) { | |
534 | - marker.isActive = true; | |
613 | + if (marker.tid !== this.clickMapId) { | |
614 | + // marker.isActive = true; | |
535 | 615 | marker.setIcon(oldIcon); |
536 | 616 | }else{ |
537 | - marker.isActive = false; | |
617 | + // marker.isActive = false; | |
538 | 618 | console.log('打印marker',marker); |
539 | 619 | marker.setIcon(newIcon); |
540 | 620 | } |
541 | 621 | }); |
542 | - console.log('打印arrNew[0]',arrNew[0]) | |
622 | + // console.log('打印arrNew[0]',arrNew[0]) | |
543 | 623 | // infoWindow.setContent(e.target.content); |
544 | 624 | if(!e.target.isActive){ |
545 | 625 | // 如果已选中,则不做处理 |
546 | - var infoWindow = this.createInfoWindow(arrNew[0]); | |
547 | - infoWindow.open(this.map, e.target.getPosition()); | |
626 | + let content = e.target.type=='qy'?this.$refs.companyInfoData: this.$refs.gasStationInfoData; | |
627 | + var lnglat = new T.LngLat(e.lnglat.lng, e.lnglat.lat); | |
628 | + console.log("content",content); | |
629 | + console.log("lnglat",lnglat); | |
630 | + var infoWin = new T.InfoWindow(); | |
631 | + infoWin.setLngLat(lnglat); | |
632 | + infoWin.setContent(content); | |
633 | + this.map.openInfoWindow(content,lnglat); | |
634 | + this.map.panTo(lnglat); | |
635 | + // this.map.centerAndZoom(lnglat); | |
636 | + this.map.checkResize(); | |
637 | + // infoWindow.open(this.map, e.target.getPosition()); | |
548 | 638 | } |
549 | 639 | // 更新选中的标记点 |
550 | 640 | // 设置当前点击的标记点样式 |
... | ... | @@ -581,24 +671,31 @@ export default { |
581 | 671 | // content: this.getContent(), |
582 | 672 | offset: new AMap.Pixel(-180, -50), |
583 | 673 | }) |
674 | + console.log("infoWindowData",infoWindowData); | |
584 | 675 | return infoWindowData |
585 | 676 | }, |
586 | 677 | closeInfoWindow(e) { |
587 | 678 | // 引入本地图片 |
588 | 679 | this.markers.forEach((marker) => { |
589 | 680 | console.log('打印marker', marker); |
590 | - const oldIcon = new AMap.Icon({ | |
591 | - size: new AMap.Size(30, 34), // 图标尺寸 | |
592 | - image:marker.type=='qy'?companyImg:gasStationImg, // 图片的URL | |
593 | - imageSize: new AMap.Size(30, 34), // 图标所用图片大小 | |
681 | + // const oldIcon = new AMap.Icon({ | |
682 | + // size: new AMap.Size(30, 34), // 图标尺寸 | |
683 | + // image:marker.type=='qy'?companyImg:gasStationImg, // 图片的URL | |
684 | + // imageSize: new AMap.Size(30, 34), // 图标所用图片大小 | |
685 | + // }); | |
686 | + const oldIcon = new T.Icon({ | |
687 | + iconSize: T.Point(30, 34), // 图标尺寸 | |
688 | + iconUrl:marker.type=='qy'?companyImg:gasStationImg, // 图片的URL | |
689 | + iconAnchor: T.Point(30, 34), // 图标所用图片大小 | |
594 | 690 | }); |
595 | - if (marker._amap_id == this.clickMapId) { | |
691 | + if (marker.tid == this.clickMapId) { | |
596 | 692 | marker.isActive = true; |
597 | 693 | marker.setIcon(oldIcon); |
598 | 694 | } |
599 | 695 | }); |
600 | 696 | this.clickMapId = ''; |
601 | - this.map.clearInfoWindow(); | |
697 | + // this.map.clearInfoWindow(); | |
698 | + this.map.closeInfoWindow(); | |
602 | 699 | }, |
603 | 700 | } |
604 | 701 | } |
... | ... | @@ -619,6 +716,25 @@ export default { |
619 | 716 | } |
620 | 717 | </style> |
621 | 718 | <style lang="scss" scoped> |
719 | + | |
720 | +::v-deep .tdt-infowindow-content-wrapper{ | |
721 | + box-shadow:none; | |
722 | + background:rgba(255, 255, 255, 0); | |
723 | +} | |
724 | + | |
725 | +::v-deep .tdt-infowindow-close-button{ | |
726 | + display: none; | |
727 | +} | |
728 | + | |
729 | +::v-deep .tdt-infowindow-tip-container{ | |
730 | + display: none; | |
731 | +} | |
732 | + | |
733 | +::v-deep .tdt-infowindow{ | |
734 | + bottom: 40px !important; | |
735 | + left: -360px !important; | |
736 | +} | |
737 | + | |
622 | 738 | #mapContainer { |
623 | 739 | min-width: 865px; |
624 | 740 | min-height: 630px; | ... | ... |
frontend/front/src/views/pages/gasCylinderManage/gasCylinderMap/index.vue
... | ... | @@ -31,14 +31,14 @@ |
31 | 31 | </el-form-item> |
32 | 32 | </el-form> |
33 | 33 | </div> |
34 | - <div class="mapSty"> | |
34 | + <div class="mapSty" v-loading="loading"> | |
35 | 35 | <div id="mapContainer" |
36 | 36 | class="map" |
37 | 37 | tabindex="0"> |
38 | 38 | </div> |
39 | 39 | </div> |
40 | 40 | <div ref="infoData" |
41 | - v-if="infoWindowVisible" | |
41 | + v-show="infoWindowVisible" | |
42 | 42 | class="custom-info input-card content-window-card"> |
43 | 43 | <div class="info-top" style="display: flex; justify-content: space-between;align-items: center"> |
44 | 44 | <div> |
... | ... | @@ -375,6 +375,7 @@ export default { |
375 | 375 | pointData: [], |
376 | 376 | nodeList:[], |
377 | 377 | centerPoint:[114.347441, 30.50438], |
378 | + loading:false, | |
378 | 379 | } |
379 | 380 | }, |
380 | 381 | mounted() { |
... | ... | @@ -431,6 +432,7 @@ export default { |
431 | 432 | }, |
432 | 433 | //查询按钮 |
433 | 434 | handleSearch() { |
435 | + this.markers = []; | |
434 | 436 | this.pointData = []; |
435 | 437 | this.infoWindowVisible = false; |
436 | 438 | this.getMarkPoint(); |
... | ... | @@ -443,12 +445,17 @@ export default { |
443 | 445 | this.handleSearch(); |
444 | 446 | }, |
445 | 447 | async getMarkPoint(){ |
448 | + this.loading = true; | |
446 | 449 | let params ={ |
447 | 450 | qzId:this.queryForm.qzId, |
448 | 451 | qyId: this.queryForm.qyId, |
449 | 452 | } |
450 | 453 | await getAppTagTypes(params).then((res)=>{ |
451 | 454 | let { code, value} = res; |
455 | + if(!value.length){ | |
456 | + this.loading = false; | |
457 | + return | |
458 | + } | |
452 | 459 | if(code == 200){ |
453 | 460 | value.map((item,index)=>{ |
454 | 461 | if(item.typeone.length>0){ |
... | ... | @@ -502,43 +509,93 @@ export default { |
502 | 509 | version: '2.0' //数据可视化 |
503 | 510 | } |
504 | 511 | }).then((AMap) => { |
505 | - this.map = new AMap.Map('mapContainer', {//设置地图容器id | |
506 | - viewMode: '2D', //是否为3D地图模式 | |
507 | - zoom: 16, //初始化地图层级 | |
508 | - center: this.centerPoint,//初始化地图中心点 | |
509 | - }); | |
510 | - //信息窗口实例 | |
511 | - //循环所有的标记点 | |
512 | - console.log('打印pointData',this.pointData); | |
513 | - let arr =[]; | |
514 | - for (let i = 0; i < this.pointData.length; i++) { | |
515 | - const num = i + 1; | |
516 | - const contentImg = '<div style="color: #fff; width: 50px;height: 50px;"><img src="./src/assets/images/后台.png" />'+num + "</div>" | |
517 | - // 引入本地图片 | |
518 | - const localIcon = new AMap.Icon({ | |
519 | - size: new AMap.Size(30, 34), // 图标尺寸 | |
520 | - image: iconImg, // 图片的URL | |
521 | - imageSize: new AMap.Size(30, 34), // 图标所用图片大小 | |
522 | - }); | |
523 | - var marker = new AMap.Marker({ | |
524 | - position: [this.pointData[i].fjd, this.pointData[i].fwd], | |
525 | - map: this.map, | |
526 | - icon:localIcon, | |
527 | - offset: new AMap.Pixel(-15, -20), | |
512 | + // this.map = new AMap.Map('mapContainer', {//设置地图容器id | |
513 | + // viewMode: '2D', //是否为3D地图模式 | |
514 | + // zoom: 16, //初始化地图层级 | |
515 | + // center: this.centerPoint,//初始化地图中心点 | |
516 | + // }); | |
517 | + | |
518 | + // ===========天地图代码============== | |
519 | + if(!this.map){ | |
520 | + // 防止二次初始化导致拖拽失效 | |
521 | + this.map = new T.Map('mapContainer',{ | |
522 | + projection: 'EPSG:900913' | |
528 | 523 | }); |
529 | - arr.push( Object.assign(this.pointData[i], { | |
530 | - mapId: marker._amap_id, | |
531 | - })) | |
532 | - // 将创建的点标记添加到已有的地图实例+ | |
524 | + } | |
525 | + this.map.centerAndZoom(new T.LngLat(this.centerPoint[0], this.centerPoint[1]), 16); | |
526 | + //允许鼠标双击放大地图 | |
527 | + this.map.enableScrollWheelZoom(); | |
528 | + let arr = []; | |
529 | + const seenCoordinates = new Set(); // 记录已经处理的经纬度 | |
530 | + | |
531 | + for (let i = 0; i < this.pointData.length; i++) { | |
532 | + const point = this.pointData[i]; | |
533 | + const coordsKey = `${point.fjd},${point.fwd}`; // 使用经纬度创建唯一的键 | |
534 | + // 如果经纬度之前未处理过,则添加到数组和地图 | |
535 | + | |
536 | + // 创建本地图标 | |
537 | + const localIcon = new T.Icon({ | |
538 | + iconUrl: iconImg, | |
539 | + iconSize: new T.Point(30, 34), | |
540 | + iconAnchor: new T.Point(30, 34), | |
541 | + }); | |
542 | + | |
543 | + // 创建自定义标记 | |
544 | + const marker = new T.Marker(new T.LngLat(point.fjd, point.fwd), { icon: localIcon }); | |
545 | + arr.push(Object.assign(point, { mapId: point.id })); | |
533 | 546 | marker['arr'] = arr; |
534 | - marker['isActive'] = this.pointData[i].isActive; | |
535 | - // console.log('marker=====', marker); | |
536 | - this.map.add([marker]); | |
537 | - // marker.content = '我是第' + (i + 1) + '个Marker'; | |
538 | - marker.on("click", this.markerClick); | |
547 | + marker['isActive'] = point.isActive; | |
548 | + marker['type'] = point.type; | |
549 | + marker['tid'] = point.id; | |
539 | 550 | this.markers.push(marker); |
540 | - marker.emit('click', {target: marker}); | |
551 | + if (!seenCoordinates.has(coordsKey)) { | |
552 | + seenCoordinates.add(coordsKey); | |
553 | + // 绑定点击事件 | |
554 | + marker.addEventListener("click", this.markerClick.bind(null, marker)); | |
555 | + // 将标记添加到地图 | |
556 | + this.map.addOverLay(marker); | |
557 | + } | |
541 | 558 | } |
559 | + // 创建并添加标记集群 | |
560 | + new T.MarkerClusterer(this.map, { markers: this.markers }); | |
561 | + // 更新加载状态 | |
562 | + this.loading = false; | |
563 | + // ===========天地图代码============== | |
564 | + | |
565 | + | |
566 | + //信息窗口实例 | |
567 | + //循环所有的标记点 | |
568 | + // console.log('打印pointData',this.pointData); | |
569 | + // let arr =[]; | |
570 | + // for (let i = 0; i < this.pointData.length; i++) { | |
571 | + // const num = i + 1; | |
572 | + // const contentImg = '<div style="color: #fff; width: 50px;height: 50px;"><img src="./src/assets/images/后台.png" />'+num + "</div>" | |
573 | + // // 引入本地图片 | |
574 | + // const localIcon = new AMap.Icon({ | |
575 | + // size: new AMap.Size(30, 34), // 图标尺寸 | |
576 | + // image: iconImg, // 图片的URL | |
577 | + // imageSize: new AMap.Size(30, 34), // 图标所用图片大小 | |
578 | + // }); | |
579 | + // var marker = new AMap.Marker({ | |
580 | + // position: [this.pointData[i].fjd, this.pointData[i].fwd], | |
581 | + // map: this.map, | |
582 | + // icon:localIcon, | |
583 | + // offset: new AMap.Pixel(-15, -20), | |
584 | + // }); | |
585 | + // arr.push( Object.assign(this.pointData[i], { | |
586 | + // mapId: marker._amap_id, | |
587 | + // })) | |
588 | + // // 将创建的点标记添加到已有的地图实例+ | |
589 | + // marker['arr'] = arr; | |
590 | + // marker['isActive'] = this.pointData[i].isActive; | |
591 | + // // console.log('marker=====', marker); | |
592 | + // this.map.add([marker]); | |
593 | + // // marker.content = '我是第' + (i + 1) + '个Marker'; | |
594 | + // // marker.on("click", this.markerClick); | |
595 | + // this.markers.push(marker); | |
596 | + // marker.emit('click', {target: marker}); | |
597 | + // } | |
598 | + return | |
542 | 599 | AMap.plugin('AMap.DistrictSearch', function () { |
543 | 600 | //创建行政区查询对象 |
544 | 601 | var options = { |
... | ... | @@ -577,43 +634,81 @@ export default { |
577 | 634 | }); |
578 | 635 | }, |
579 | 636 | //点击点标记事件 |
580 | - markerClick(e) { | |
581 | - this.infoWindowVisible = true; | |
582 | - let arrNew = e.target.arr.filter((x) => x.mapId == e.target._amap_id); | |
637 | + markerClick(event,e) { | |
638 | + // this.infoWindowVisible = true; | |
639 | + let arrNew = e.target.arr.filter((x) => x.mapId == e.target.tid); | |
583 | 640 | this.devInfo = arrNew && arrNew[0]; |
584 | 641 | // infoWindow.setContent(e.target.content); |
585 | 642 | console.log('打印res', arrNew); |
586 | 643 | // 如果已选中,则不做处理 |
644 | + this.clickMapId = e.target.tid; | |
645 | + if (!e.target.isActive) { | |
646 | + // 如果已选中,则不做处理 | |
647 | + this.getPointDetailInfo(arrNew[0].fqptm, e); | |
648 | + this.infoWindowVisible = true; | |
649 | + let content = this.$refs.infoData; | |
650 | + if (!content) return | |
651 | + var lnglat = new T.LngLat(e.lnglat.lng, e.lnglat.lat); | |
652 | + console.log("content", content); | |
653 | + console.log("lnglat", lnglat); | |
654 | + var infoWin = new T.InfoWindow(); | |
655 | + infoWin.setLngLat(lnglat); | |
656 | + infoWin.setContent(content); | |
657 | + this.map.openInfoWindow(content, lnglat); | |
658 | + this.map.panTo(lnglat); | |
659 | + } | |
587 | 660 | |
588 | - // 引入本地图片 | |
589 | - const newIcon = new AMap.Icon({ | |
590 | - size: new AMap.Size(30, 34), // 图标尺寸 | |
591 | - image: iconImg1, // 图片的URL | |
592 | - imageSize: new AMap.Size(30, 34), // 图标所用图片大小 | |
661 | + const newIcon = new T.Icon({ | |
662 | + iconSize: T.Point(30, 34), // 图标尺寸 | |
663 | + iconUrl: iconImg1, // 图片的URL | |
664 | + iconAnchor: T.Point(30, 34), // 图标所用图片大小 | |
593 | 665 | }); |
594 | - const oldIcon = new AMap.Icon({ | |
595 | - size: new AMap.Size(30, 34), // 图标尺寸 | |
596 | - image: iconImg, // 图片的URL | |
597 | - imageSize: new AMap.Size(30, 34), // 图标所用图片大小 | |
666 | + const oldIcon = new T.Icon({ | |
667 | + iconSize: T.Point(30, 34), // 图标尺寸 | |
668 | + iconUrl: iconImg, // 图片的URL | |
669 | + iconAnchor: T.Point(30, 34), // 图标所用图片大小 | |
598 | 670 | }); |
599 | - if (!e.target.isActive) { | |
600 | - e.target.isActive = true; | |
601 | - this.clickMapId = ''; | |
602 | - } else { | |
603 | - e.target.isActive = false; | |
604 | - this.getPointDetailInfo(arrNew[0].fqptm,e); | |
605 | - this.clickMapId = e.target._amap_id; | |
606 | - } | |
671 | + | |
607 | 672 | this.markers.forEach((marker) => { |
608 | - if (marker._amap_id !== this.clickMapId) { | |
609 | - marker.isActive = true; | |
673 | + if (marker.tid !== this.clickMapId) { | |
674 | + // marker.isActive = true; | |
610 | 675 | marker.setIcon(oldIcon); |
611 | - }else{ | |
612 | - marker.isActive = false; | |
613 | - console.log('打印marker',marker); | |
676 | + } else { | |
677 | + // marker.isActive = false; | |
678 | + console.log('打印marker', marker); | |
614 | 679 | marker.setIcon(newIcon); |
615 | 680 | } |
616 | 681 | }); |
682 | + | |
683 | + // 引入本地图片 | |
684 | + // const newIcon = new AMap.Icon({ | |
685 | + // size: new AMap.Size(30, 34), // 图标尺寸 | |
686 | + // image: iconImg1, // 图片的URL | |
687 | + // imageSize: new AMap.Size(30, 34), // 图标所用图片大小 | |
688 | + // }); | |
689 | + // const oldIcon = new AMap.Icon({ | |
690 | + // size: new AMap.Size(30, 34), // 图标尺寸 | |
691 | + // image: iconImg, // 图片的URL | |
692 | + // imageSize: new AMap.Size(30, 34), // 图标所用图片大小 | |
693 | + // }); | |
694 | + // if (!e.target.isActive) { | |
695 | + // e.target.isActive = true; | |
696 | + // this.clickMapId = ''; | |
697 | + // } else { | |
698 | + // e.target.isActive = false; | |
699 | + // this.getPointDetailInfo(arrNew[0].fqptm,e); | |
700 | + // this.clickMapId = e.target._amap_id; | |
701 | + // } | |
702 | + // this.markers.forEach((marker) => { | |
703 | + // if (marker._amap_id !== this.clickMapId) { | |
704 | + // marker.isActive = true; | |
705 | + // marker.setIcon(oldIcon); | |
706 | + // }else{ | |
707 | + // marker.isActive = false; | |
708 | + // console.log('打印marker',marker); | |
709 | + // marker.setIcon(newIcon); | |
710 | + // } | |
711 | + // }); | |
617 | 712 | // 更新选中的标记点 |
618 | 713 | // 设置当前点击的标记点样式 |
619 | 714 | // e.target.setIcon(newIcon); // 或者其他方法来重置样式 |
... | ... | @@ -626,8 +721,8 @@ export default { |
626 | 721 | console.log('打印res',res); |
627 | 722 | const { value} = res; |
628 | 723 | const {qpdqlzs,qpOrderInfoVO} = value; |
629 | - var infoWindow = this.createInfoWindow(); | |
630 | - infoWindow.open(this.map, e.target.getPosition()); | |
724 | + // var infoWindow = this.createInfoWindow(); | |
725 | + // infoWindow.open(this.map, e.target.getPosition()); | |
631 | 726 | this.devInfoList = await this.$assignValues(value, this.devInfoList); |
632 | 727 | this.nodeList = await this.$createDoubleArray(qpdqlzs,5); |
633 | 728 | console.log('打印this.nodeList', this.nodeList); |
... | ... | @@ -653,19 +748,32 @@ export default { |
653 | 748 | }, |
654 | 749 | closeInfoWindow() { |
655 | 750 | // 引入本地图片 |
656 | - const oldIcon = new AMap.Icon({ | |
657 | - size: new AMap.Size(30, 34), // 图标尺寸 | |
658 | - image: iconImg, // 图片的URL | |
659 | - imageSize: new AMap.Size(30, 34), // 图标所用图片大小 | |
751 | + // const oldIcon = new AMap.Icon({ | |
752 | + // size: new AMap.Size(30, 34), // 图标尺寸 | |
753 | + // image: iconImg, // 图片的URL | |
754 | + // imageSize: new AMap.Size(30, 34), // 图标所用图片大小 | |
755 | + // }); | |
756 | + // this.markers.forEach((marker) => { | |
757 | + // if (marker._amap_id == this.clickMapId) { | |
758 | + // marker.isActive = true; | |
759 | + // marker.setIcon(oldIcon); | |
760 | + // } | |
761 | + // }); | |
762 | + // this.clickMapId = ''; | |
763 | + // this.map.clearInfoWindow(); | |
764 | + | |
765 | + const oldIcon = new T.Icon({ | |
766 | + iconSize: T.Point(30, 34), // 图标尺寸 | |
767 | + iconUrl: iconImg, // 图片的URL | |
768 | + iconAnchor: T.Point(30, 34), // 图标所用图片大小 | |
660 | 769 | }); |
661 | 770 | this.markers.forEach((marker) => { |
662 | - if (marker._amap_id == this.clickMapId) { | |
663 | - marker.isActive = true; | |
771 | + if (marker.tid == this.clickMapId) { | |
664 | 772 | marker.setIcon(oldIcon); |
665 | 773 | } |
666 | 774 | }); |
667 | 775 | this.clickMapId = ''; |
668 | - this.map.clearInfoWindow(); | |
776 | + this.map.closeInfoWindow(); | |
669 | 777 | }, |
670 | 778 | } |
671 | 779 | } |
... | ... | @@ -686,6 +794,24 @@ export default { |
686 | 794 | } |
687 | 795 | </style> |
688 | 796 | <style lang="scss" scoped> |
797 | +::v-deep .tdt-infowindow-content-wrapper { | |
798 | + box-shadow: none; | |
799 | + background: rgba(255, 255, 255, 0); | |
800 | +} | |
801 | + | |
802 | +::v-deep .tdt-infowindow-close-button { | |
803 | + display: none; | |
804 | +} | |
805 | + | |
806 | +::v-deep .tdt-infowindow-tip-container { | |
807 | + display: none; | |
808 | +} | |
809 | + | |
810 | +::v-deep .tdt-infowindow { | |
811 | + bottom: 40px !important; | |
812 | + left: -360px !important; | |
813 | +} | |
814 | + | |
689 | 815 | #mapContainer { |
690 | 816 | min-width: 865px; |
691 | 817 | min-height: 630px; | ... | ... |
frontend/front/src/views/pages/regionalManage/components/regionManage.vue
... | ... | @@ -209,6 +209,7 @@ export default { |
209 | 209 | size:10, |
210 | 210 | total:0 |
211 | 211 | }, |
212 | + handler:null, | |
212 | 213 | |
213 | 214 | } |
214 | 215 | }, |
... | ... | @@ -362,92 +363,152 @@ export default { |
362 | 363 | } |
363 | 364 | }).then((AMap)=>{ |
364 | 365 | console.log('打印AMap====>',AMap); |
365 | - this.map = new AMap.Map('mapContainer', {//设置地图容器id | |
366 | - viewMode: '2D', //是否为3D地图模式 | |
367 | - zoom: 16, //初始化地图层级 | |
368 | - center: this.centerPoint,//初始化地图中心点 | |
366 | + let that = this; | |
367 | + this.map = new T.Map('mapContainer',{ | |
368 | + projection: 'EPSG:900913' | |
369 | 369 | }); |
370 | + this.map.centerAndZoom(new T.LngLat(this.centerPoint[0], this.centerPoint[1]), 16); | |
371 | + //允许鼠标双击放大地图 | |
372 | + this.map.enableScrollWheelZoom(); | |
373 | + // 允许拖拽 | |
374 | + setTimeout(function () { | |
375 | + that.map.enableDrag(); | |
376 | + }, 500); | |
377 | + | |
378 | + var config = { | |
379 | + showLabel: true, | |
380 | + color: "blue", weight: 3, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5 | |
381 | + }; | |
382 | + //创建标注工具对象 | |
383 | + this.polygonTool = new T.PolygonTool(this.map, config); | |
384 | + | |
385 | + | |
386 | + // this.map = new AMap.Map('mapContainer', {//设置地图容器id | |
387 | + // viewMode: '2D', //是否为3D地图模式 | |
388 | + // zoom: 16, //初始化地图层级 | |
389 | + // center: this.centerPoint,//初始化地图中心点 | |
390 | + // }); | |
391 | + | |
392 | + | |
370 | 393 | // this.map.on('rightclick', (e)=> { |
371 | 394 | // this.rightclickObj(); //定义右键内容 |
372 | 395 | // this.contextMenu.open(this.map, e.lnglat); |
373 | 396 | // this.contextMenuPositon = e.lnglat; //右键菜单位置 |
374 | 397 | // }); |
375 | - let that = this; | |
376 | - this.mouseTool =new AMap.MouseTool(this.map); | |
377 | - this.mouseTool.on('draw',function (e){ | |
378 | - if(that.overlays.length>0){ | |
379 | - console.log('打印this.overlays=====>',that.overlays); | |
380 | - that.map.remove(that.overlays); | |
381 | - //关闭绘画 | |
382 | - // that.mouseTool.close(true); | |
383 | - that.overlays = []; | |
384 | - } | |
385 | - if(that.dialogParams.fShape == '圆形'){ | |
386 | - let circleCenterPoint = e.obj.getCenter(); //获取圆形坐标点 | |
387 | - let circleRadius = e.obj.getRadius();//获取半径 | |
388 | - that.dialogParams.radius = circleRadius; | |
389 | - let circlePointList = [ | |
390 | - { | |
391 | - jd:circleCenterPoint.lng, | |
392 | - wd:circleCenterPoint.lat | |
393 | - } | |
394 | - ]; | |
395 | - that.circleOverlays = circlePointList; | |
396 | - console.log('打印position',circleCenterPoint,circleRadius); | |
397 | - } | |
398 | - that.overlays.push(e.obj); | |
399 | - console.log('打印that.overlays',that.overlays); | |
400 | - }) | |
398 | + | |
399 | + // let that = this; | |
400 | + // this.mouseTool = new AMap.MouseTool(this.map); | |
401 | + // this.mouseTool.on('draw',function (e){ | |
402 | + // console.log("e======",e); | |
403 | + // if(that.overlays.length>0){ | |
404 | + // console.log('打印this.overlays=====>',that.overlays); | |
405 | + // that.map.remove(that.overlays); | |
406 | + // //关闭绘画 | |
407 | + // // that.mouseTool.close(true); | |
408 | + // that.overlays = []; | |
409 | + // } | |
410 | + // if(that.dialogParams.fShape == '圆形'){ | |
411 | + // let circleCenterPoint = e.obj.getCenter(); //获取圆形坐标点 | |
412 | + // let circleRadius = e.obj.getRadius();//获取半径 | |
413 | + // that.dialogParams.radius = circleRadius; | |
414 | + // let circlePointList = [ | |
415 | + // { | |
416 | + // jd:circleCenterPoint.lng, | |
417 | + // wd:circleCenterPoint.lat | |
418 | + // } | |
419 | + // ]; | |
420 | + // that.circleOverlays = circlePointList; | |
421 | + // console.log('打印position',circleCenterPoint,circleRadius); | |
422 | + // } | |
423 | + // that.overlays.push(e.obj); | |
424 | + // console.log('打印that.overlays',that.overlays); | |
425 | + // }) | |
401 | 426 | if(this.dialogParams.dialogType == 'edit'){ |
402 | - var editShap = null; | |
427 | + // var editShap = null; | |
403 | 428 | if(this.dialogParams.fShape == '圆形'){ |
404 | - editShap = new AMap.Circle({ | |
405 | - center: this.dialogParams.centerOfCircle, | |
406 | - radius: this.dialogParams.radius, //半径 | |
407 | - borderWeight: 3, | |
408 | - strokeColor: "#FF33FF", | |
409 | - // strokeOpacity: 1, | |
410 | - strokeWeight: 6, | |
411 | - strokeOpacity: 0.2, | |
412 | - fillOpacity: 0.4, | |
413 | - strokeStyle: 'dashed', | |
414 | - strokeDasharray: [10, 10], | |
415 | - // 线样式还支持 'dashed' | |
416 | - fillColor: '#1791fc', | |
417 | - zIndex: 50, | |
418 | - }); | |
419 | - this.mapEditor = new AMap.CircleEditor(this.map, editShap); | |
420 | - }else if(this.dialogParams.fShape == '矩形'){ | |
421 | - var southWest = new AMap.LngLat(this.dialogParams.rectangleSouthPoint[0], this.dialogParams.rectangleSouthPoint[1]) | |
422 | - var northEast = new AMap.LngLat(this.dialogParams.rectangleNothPoint[0], this.dialogParams.rectangleNothPoint[1]) | |
423 | - var bounds = new AMap.Bounds(southWest, northEast) | |
424 | - editShap = new AMap.Rectangle({ | |
425 | - bounds: bounds, | |
426 | - strokeColor:'#FF33FF', | |
427 | - strokeWeight: 6, | |
428 | - strokeOpacity:0.2, | |
429 | - strokeDasharray: [30,10], | |
430 | - // strokeStyle还支持 solid | |
431 | - // 线样式还支持 'dashed' | |
432 | - fillColor: '#1791fc', | |
433 | - strokeStyle: 'dashed', | |
429 | + this.handler = new T.Circle(new T.LngLat( | |
430 | + this.dialogParams.centerOfCircle[0], | |
431 | + this.dialogParams.centerOfCircle[1]), | |
432 | + parseInt(this.dialogParams.radius),{ | |
433 | + color:"blue", | |
434 | + weight:5, | |
435 | + opacity:0.5, | |
436 | + fillColor:"#FFFFFF", | |
434 | 437 | fillOpacity:0.5, |
435 | - cursor:'pointer', | |
436 | - zIndex:50, | |
437 | - }); | |
438 | - this.mapEditor = new AMap.RectangleEditor(this.map, editShap); | |
439 | - }else { | |
440 | - editShap = new AMap.Polygon({ | |
441 | - path: this.dialogParams.polygonPoint, | |
442 | - strokeColor: "#FF33FF", | |
443 | - strokeWeight: 6, | |
444 | - strokeOpacity: 0.2, | |
445 | - fillOpacity: 0.4, | |
446 | - fillColor: '#1791fc', | |
447 | - zIndex: 50, | |
438 | + lineStyle:"solid"}); | |
439 | + this.handler.enableEdit(); | |
440 | + this.handler.on("edit",this.editPointsDrawCircle); | |
441 | + this.map.addOverLay(this.handler); | |
442 | + // editShap = new AMap.Circle({ | |
443 | + // center: this.dialogParams.centerOfCircle, | |
444 | + // radius: this.dialogParams.radius, //半径 | |
445 | + // borderWeight: 3, | |
446 | + // strokeColor: "#FF33FF", | |
447 | + // // strokeOpacity: 1, | |
448 | + // strokeWeight: 6, | |
449 | + // strokeOpacity: 0.2, | |
450 | + // fillOpacity: 0.4, | |
451 | + // strokeStyle: 'dashed', | |
452 | + // strokeDasharray: [10, 10], | |
453 | + // // 线样式还支持 'dashed' | |
454 | + // fillColor: '#1791fc', | |
455 | + // zIndex: 50, | |
456 | + // }); | |
457 | + // this.mapEditor = new AMap.CircleEditor(this.map, editShap); | |
458 | + }else if(this.dialogParams.fShape == '矩形'){ | |
459 | + // var southWest = new AMap.LngLat(this.dialogParams.rectangleSouthPoint[0], this.dialogParams.rectangleSouthPoint[1]) | |
460 | + // var northEast = new AMap.LngLat(this.dialogParams.rectangleNothPoint[0], this.dialogParams.rectangleNothPoint[1]) | |
461 | + // var bounds = new AMap.Bounds(southWest, northEast) | |
462 | + // editShap = new AMap.Rectangle({ | |
463 | + // bounds: bounds, | |
464 | + // strokeColor:'#FF33FF', | |
465 | + // strokeWeight: 6, | |
466 | + // strokeOpacity:0.2, | |
467 | + // strokeDasharray: [30,10], | |
468 | + // // strokeStyle还支持 solid | |
469 | + // // 线样式还支持 'dashed' | |
470 | + // fillColor: '#1791fc', | |
471 | + // strokeStyle: 'dashed', | |
472 | + // fillOpacity:0.5, | |
473 | + // cursor:'pointer', | |
474 | + // zIndex:50, | |
475 | + // }); | |
476 | + // this.mapEditor = new AMap.RectangleEditor(this.map, editShap); | |
477 | + var bounds = new T.LngLatBounds(new T.LngLat( | |
478 | + this.dialogParams.rectangleSouthPoint[0], | |
479 | + this.dialogParams.rectangleSouthPoint[1]), | |
480 | + new T.LngLat( | |
481 | + this.dialogParams.rectangleNothPoint[0], | |
482 | + this.dialogParams.rectangleNothPoint[1] | |
483 | + )); | |
484 | + this.handler = new T.Rectangle(bounds); | |
485 | + this.handler.enableEdit(); | |
486 | + this.handler.on("edit",this.editPointsDrawRectangle); | |
487 | + this.map.addOverLay(this.handler); | |
488 | + } else { | |
489 | + // editShap = new AMap.Polygon({ | |
490 | + // path: this.dialogParams.polygonPoint, | |
491 | + // strokeColor: "#FF33FF", | |
492 | + // strokeWeight: 6, | |
493 | + // strokeOpacity: 0.2, | |
494 | + // fillOpacity: 0.4, | |
495 | + // fillColor: '#1791fc', | |
496 | + // zIndex: 50, | |
497 | + // }); | |
498 | + // this.mapEditor = new AMap.PolyEditor(this.map, editShap); | |
499 | + var points = []; | |
500 | + this.dialogParams.polygonPoint.map(item =>{ | |
501 | + points.push(new T.LngLat(item[0], item[1])); | |
502 | + }) | |
503 | + this.handler = new T.Polygon(points,{ | |
504 | + color: "blue", weight: 3, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5 | |
448 | 505 | }); |
449 | - this.mapEditor = new AMap.PolyEditor(this.map, editShap); | |
506 | + //向地图上添加面 | |
507 | + this.handler.enableEdit(); | |
508 | + this.handler.on("edit",this.editPointsDrawPolygon); | |
509 | + this.map.addOverLay(this.handler); | |
450 | 510 | } |
511 | + return | |
451 | 512 | editShap.setMap(this.map); |
452 | 513 | // 缩放地图到合适的视野级别 |
453 | 514 | this.map.setFitView([ editShap ]); |
... | ... | @@ -475,34 +536,131 @@ export default { |
475 | 536 | }, |
476 | 537 | //结束编辑 |
477 | 538 | closeDraw(){ |
478 | - this.mapEditor.close(); | |
539 | + // this.mapEditor.close(); | |
540 | + this.handler.disableEdit(); | |
541 | + }, | |
542 | + getPointsDrawPolygon(e){ | |
543 | + let that = this; | |
544 | + let arry = e.currentLnglats; | |
545 | + arry.forEach(item => { | |
546 | + that.overlays.push({ | |
547 | + jd:item.lng, | |
548 | + wd:item.lat | |
549 | + }); | |
550 | + }); | |
551 | + that.overlays.push(that.overlays[0]) | |
552 | + console.log('多边形overlays===',JSON.parse(JSON.stringify(this.overlays))); | |
553 | + }, | |
554 | + // 编辑多边形 | |
555 | + editPointsDrawPolygon(e){ | |
556 | + let that = this; | |
557 | + let lines = this.handler.getLngLats(); | |
558 | + let arry = lines[0]; | |
559 | + arry.forEach(item => { | |
560 | + that.overlays.push({ | |
561 | + jd:item.lng, | |
562 | + wd:item.lat | |
563 | + }); | |
564 | + }); | |
565 | + that.overlays.push(that.overlays[0]) | |
566 | + console.log('编辑多边形overlays===',JSON.parse(JSON.stringify(this.overlays))); | |
567 | + }, | |
568 | + getPointsDrawRectangle(e){ | |
569 | + let that = this; | |
570 | + let arry = e.currentBounds; | |
571 | + let southwest = { jd: arry.Lq.lng, wd: arry.Lq.lat }; // 西南角 | |
572 | + let northeast = { jd: arry.kq.lng, wd: arry.kq.lat }; // 东北角 | |
573 | + let northwest = { jd: arry.Lq.lng, wd: arry.kq.lat }; // 西北角 | |
574 | + let southeast = { jd: arry.Lq.lng, wd: arry.Lq.lat }; // 东南角 | |
575 | + // 将四个角点推入 overlays 数组 | |
576 | + that.overlays = [southwest, northwest, northeast, southeast]; | |
577 | + console.log("矩形===",this.overlays); | |
578 | + }, | |
579 | + //编辑矩形 | |
580 | + editPointsDrawRectangle(e){ | |
581 | + console.log("编辑矩形",e); | |
582 | + // console.log("矩形范围",this.handler.getBounds()); | |
583 | + let that = this; | |
584 | + let arry = e.target.Qr; | |
585 | + let southwest = { jd: arry.Lq.lng, wd: arry.Lq.lat }; // 西南角 | |
586 | + let northeast = { jd: arry.kq.lng, wd: arry.kq.lat }; // 东北角 | |
587 | + let northwest = { jd: arry.Lq.lng, wd: arry.kq.lat }; // 西北角 | |
588 | + let southeast = { jd: arry.Lq.lng, wd: arry.Lq.lat }; // 东南角 | |
589 | + // 将四个角点推入 overlays 数组 | |
590 | + that.overlays = [southwest, northwest, northeast, southeast]; | |
591 | + console.log("矩形===",this.overlays); | |
592 | + }, | |
593 | + getPointsDrawCircle(e){ | |
594 | + console.log("圆形",e); | |
595 | + let arry = e.currentCenter; | |
596 | + let circleRadius = e.currentRadius | |
597 | + this.overlays = [{jd:arry.lng, wd:arry.lat}] | |
598 | + this.circleOverlays = [{jd:arry.lng, wd:arry.lat}] | |
599 | + this.dialogParams.radius = circleRadius | |
600 | + }, | |
601 | + // 编辑圆形 | |
602 | + editPointsDrawCircle(e){ | |
603 | + console.log("编辑圆形e",e); | |
604 | + let center,radius; | |
605 | + center = this.handler.getCenter(); | |
606 | + radius = this.handler.getRadius(); | |
607 | + this.overlays = [{jd:center.lng, wd:center.lat}]; | |
608 | + this.circleOverlays = [{jd:center.lng, wd:center.lat}]; | |
609 | + this.dialogParams.radius = radius; | |
479 | 610 | }, |
480 | 611 | //draw 绘制圆形,矩形,多边形 |
481 | 612 | draw(type,shapType){ |
482 | 613 | if(this.dialogParams.dialogType == 'edit'){ |
483 | - this.mapEditor.close(); | |
614 | + this.handler.close(); | |
615 | + // this.handler.clear(); | |
616 | + // this.mapEditor.close(); | |
484 | 617 | } |
618 | + this.overlays = []; | |
485 | 619 | this.dialogParams.fShape = shapType; |
486 | 620 | switch (type){ |
487 | 621 | case 'polygon':{ |
488 | - this.mouseTool.polygon({ | |
489 | - fillColor:'#00b0ff', | |
490 | - strokeColor:'#80d8ff' | |
491 | - }); | |
622 | + if (this.handler) { | |
623 | + this.handler.close(); | |
624 | + this.handler.clear(); | |
625 | + } | |
626 | + this.handler = new T.PolygonTool(this.map); | |
627 | + this.handler.open(); | |
628 | + this.handler.addEventListener("draw",this.getPointsDrawPolygon); | |
629 | + | |
630 | + // this.mouseTool.polygon({ | |
631 | + // fillColor:'#00b0ff', | |
632 | + // strokeColor:'#80d8ff' | |
633 | + // }); | |
492 | 634 | break; |
493 | 635 | } |
494 | 636 | case 'rectangle':{ |
495 | - this.mouseTool.rectangle({ | |
496 | - fillColor:'#00b0ff', | |
497 | - strokeColor:'#80d8ff' | |
498 | - }); | |
637 | + if (this.handler) { | |
638 | + this.handler.close(); | |
639 | + this.handler.clear(); | |
640 | + } | |
641 | + this.handler = new T.RectangleTool(this.map, {follow: true}); | |
642 | + this.handler.open(); | |
643 | + this.handler.addEventListener("draw",this.getPointsDrawRectangle); | |
644 | + | |
645 | + // this.mouseTool.rectangle({ | |
646 | + // fillColor:'#00b0ff', | |
647 | + // strokeColor:'#80d8ff' | |
648 | + // }); | |
499 | 649 | break; |
500 | 650 | } |
501 | 651 | case 'circle':{ |
502 | - this.mouseTool.circle({ | |
503 | - fillColor:'#00b0ff', | |
504 | - strokeColor:'#80d8ff' | |
505 | - }); | |
652 | + if (this.handler) { | |
653 | + this.handler.close(); | |
654 | + this.handler.clear(); | |
655 | + } | |
656 | + this.handler = new T.CircleTool(this.map, {follow: true}); | |
657 | + this.handler.open(); | |
658 | + this.handler.addEventListener("draw",this.getPointsDrawCircle); | |
659 | + | |
660 | + // this.mouseTool.circle({ | |
661 | + // fillColor:'#00b0ff', | |
662 | + // strokeColor:'#80d8ff' | |
663 | + // }); | |
506 | 664 | break; |
507 | 665 | } |
508 | 666 | } |
... | ... | @@ -511,20 +669,21 @@ export default { |
511 | 669 | async handleSubmit(formName){ |
512 | 670 | this.$refs[formName].validate(async (valid) => { |
513 | 671 | if (valid) { |
514 | - console.log('打印this.overlays.',this.overlays) | |
672 | + console.log('打印this.overlays',this.overlays) | |
515 | 673 | if(this.overlays.length<=0){ |
516 | 674 | this.$message.warning('请规划区域!'); |
517 | 675 | return; |
518 | 676 | } |
519 | - console.log('打印this.overLays',); | |
520 | - let jwdDTOListArray = this.overlays[0].getPath().map((item)=>{ | |
521 | - return { | |
522 | - jd:item.lng, | |
523 | - wd:item.lat | |
524 | - } | |
525 | - }); | |
526 | - jwdDTOListArray.push(jwdDTOListArray[0]); | |
527 | - console.log('打印jwdDTOListArray',jwdDTOListArray); | |
677 | + // let jwdDTOListArray = this.overlays[0].getPath().map((item)=>{ | |
678 | + // console.log("item222",item); | |
679 | + // return { | |
680 | + // jd:item.lng, | |
681 | + // wd:item.lat | |
682 | + // } | |
683 | + // }); | |
684 | + // jwdDTOListArray.push(jwdDTOListArray); | |
685 | + let jwdDTOListArray = this.overlays | |
686 | + console.log("jwdDTOListArray",jwdDTOListArray); | |
528 | 687 | let params= { |
529 | 688 | id:this.dialogParams.id, |
530 | 689 | fName: this.dialogParams.regionalName, |
... | ... | @@ -540,9 +699,11 @@ export default { |
540 | 699 | radius:this.dialogParams.radius |
541 | 700 | } |
542 | 701 | } |
702 | + console.log("params",params); | |
703 | + // return; | |
543 | 704 | await regionalAddEditPort(params).then((res)=>{ |
544 | 705 | this.dialogParams.dialogVisible = false; |
545 | - this.mouseTool.close(true); | |
706 | + // this.mouseTool.close(true); | |
546 | 707 | this.overlays = []; |
547 | 708 | this.handleSearch(); |
548 | 709 | this.pageParam.page = 1; |
... | ... | @@ -556,7 +717,7 @@ export default { |
556 | 717 | handleDialogClose(){ |
557 | 718 | this.$refs.dialogParams.resetFields(); |
558 | 719 | this.dialogParams.dialogVisible = false; |
559 | - this.mouseTool.close(true); | |
720 | + // this.mouseTool.close(true); | |
560 | 721 | this.overlays = []; |
561 | 722 | |
562 | 723 | }, |
... | ... | @@ -576,6 +737,7 @@ export default { |
576 | 737 | this.dialogParams.dialogType= type; |
577 | 738 | switch (type){ |
578 | 739 | case 'add': |
740 | + this.handler = null; | |
579 | 741 | this.dialogParams.fSsczid = this.rowData.fSsczid; |
580 | 742 | this.dialogParams.id =''; |
581 | 743 | this.dialogParams.radius = ''; | ... | ... |