天地图，弹窗自定义

  1 <template>
  2     <div class="innerMap">
  3         <div id="proMap"></div>
  4         <div class="shrink">
  5             <img src="@/assets/img/triangle.png" alt="" class="triangle" v-if="flag" @click="toggleImg" />
  6             <img v-else src="@/assets/img/triangleLong.png" alt="" class="triangleLong" />
  7             <div v-if="!flag" class="inputInfo">
  8                 <el-input 
  9                     placeholder="企业名称"
 10                     @input="changeCompanyName"  
 11                     maxlength="20" 
 12                     v-model="searchFrom.companyName" clearable>
 13                 </el-input>
 14                 <el-button type="primary" size="mini" @click="search">搜索</el-button>
 15                 <el-button size="mini" class="resetBtn" @click="reset">重置</el-button>
 16                 <i class="el-icon-close closeBtn" @click="closeQuery"></i>
 17             </div>
 18              <div v-if="flag2" class="opts">
 19                 <ul class="opts-list">
 20                     <li 
 21                         :title="item.companyName"
 22                         :key="index" 
 23                         v-for="(item, index) in searchOptionList" 
 24                         class="opts-item"
 25                         @click="checkedInfo(item)">
 26                         <span class="icon-dot"></span>
 27                         {{ item.companyName }}
 28                     </li>
 29                 </ul>
 30             </div>
 31         </div>
 32         <!-- 地图右下角 -->
 33         <ul class="map-right">
 34             <li class="map-select-item">
 35                 <i class="icon-pillar"></i>
 36                 支柱产业：{{ typeNumObj.pillarNum }}
 37                 <el-switch v-model="pillarSelect" active-color="#13ce66" inactive-color="#566278" ></el-switch>
 38             </li>
 39             <li class="map-select-item">
 40                 <i class="icon-rising"></i>
 41                 新兴产业：{{ typeNumObj.risingNum }}
 42                 <el-switch v-model="risingSelect" active-color="#13ce66" inactive-color="#566278" ></el-switch>
 43             </li>
 44             <li class="map-select-item">
 45                 <i class="icon-tradition"></i>
 46                 传统产业：{{ typeNumObj.traditionNum }}
 47                 <el-switch v-model="traditionSelect" active-color="#13ce66" inactive-color="#566278" ></el-switch>
 48             </li>
 49             <li class="map-select-item">
 50                 <i class="icon-stable"></i>
 51                 稳定产业：{{ typeNumObj.stableNum }}
 52                 <el-switch v-model="stableSelect" active-color="#13ce66" inactive-color="#566278" ></el-switch>
 53             </li>
 54         </ul>
 55 
 56     </div>
 57 </template>
 58 
 59 <script>
 60 import { getCompanyMapCountApi, selectCompanyMapApi } from "@/api/home.js"
 61 import iconPillar from  '@/assets/img/icon-pillar.png';
 62 import iconRising from  '@/assets/img/icon-rising.png';
 63 import iconTradition from '@/assets/img/icon-tradition.png';
 64 import iconStable from '@/assets/img/icon-stable.png';
 65 
 66 export default {
 67     data() {
 68         return {
 69             map: {},
 70             zoom: 9,
 71             flag: true,
 72             flag2: false,
 73             searchFrom: {
 74                 companyName: '',
 75             },
 76             pillarSelect: true,
 77             risingSelect: true,
 78             traditionSelect: true,
 79             stableSelect: true,
 80             mapList: [],
 81             searchOptionList: [],
 82             typeNumObj: {
 83                 pillarNum: 0,
 84                 risingNum: 0,
 85                 traditionNum: 0,
 86                 stableNum: 0
 87             },
 88             pillarList: [],
 89             risingList: [],
 90             traditionList: [],
 91             stableList: [],
 92         }
 93     },
 94     watch: {
 95         pillarSelect(val) {
 96             if(!val) { 
 97                 this.pillarList = [];
 98                 let allList = [...this.pillarList, ...this.risingList, ...this.traditionList, ...this.stableList];
 99                 this.$nextTick(function() {
100                     this.loadMap(allList);
101                 });
102             } else {
103                 this.pillarList = this.mapList.filter(item => item.typeNames.includes('支柱产业'));
104                 let allList = [...this.pillarList, ...this.risingList, ...this.traditionList, ...this.stableList];
105                 this.$nextTick(function() {
106                     this.loadMap(allList);
107                 });
108             }
109         }, 
110         risingSelect(val) {
111             if(!val) {
112                 this.risingList = [];
113                 let allList = [...this.pillarList, ...this.risingList, ...this.traditionList, ...this.stableList];
114                 this.$nextTick(function() {
115                     this.loadMap(allList);
116                 });
117             } else {
118                 this.risingList = this.mapList.filter(item => item.typeNames.includes('新兴产业'));
119                 let allList = [...this.pillarList, ...this.risingList, ...this.traditionList, ...this.stableList];
120                 this.$nextTick(function() {
121                     this.loadMap(allList);
122                 });
123             }
124         }, 
125         traditionSelect(val) {
126             if(!val) {
127                 this.traditionList = [];
128                 let allList = [...this.pillarList, ...this.risingList, ...this.traditionList, ...this.stableList];
129                 this.$nextTick(function() {
130                     this.loadMap(allList);
131                 });
132             } else {
133                 this.traditionList = this.mapList.filter(item=> item.typeNames.includes('传统产业'));
134                 let allList = [...this.pillarList, ...this.risingList, ...this.traditionList, ...this.stableList];
135                 this.$nextTick(function() {
136                     this.loadMap(allList);
137                 });
138             }
139         }, 
140         stableSelect(val) {
141             if(!val) {
142                 this.stableList = [];
143                 let allList = [...this.pillarList, ...this.risingList, ...this.traditionList, ...this.stableList];
144                 this.$nextTick(function() {
145                     this.loadMap(allList);
146                 });
147             } else {
148                 this.stableList = this.mapList.filter(item => item.typeNames.includes('稳定产业'));
149                 let allList = [...this.pillarList, ...this.risingList, ...this.traditionList, ...this.stableList];
150                 this.$nextTick(function() {
151                    this.loadMap(allList);
152                 });
153             }
154         } 
155     },
156     created() {
157         this.getMapList();
158         this.getCompanyMapCount();
159     },
160     methods: {
161         // 搜索框切换
162         toggleImg() {
163             this.flag = false;
164         },
165         search() {
166             this.getMapList();
167         },
168         reset() {
169             this.searchFrom.companyName = '';
170             this.map.clearOverLays();
171             this.getMapList();
172         },
173         changeCompanyName(val) {
174             let list = [];
175             if(val) {
176                 this.flag2 = true;
177                 this.mapList.forEach( item => {
178                     if( item.companyName.indexOf(val) != -1 ) {
179                         list.push(item);
180                     }
181                 })
182             } else {
183                 this.flag2 = false;
184             }
185             this.searchOptionList = list;
186         },
187          // 选中项目信息
188         checkedInfo(item) {
189             this.searchFrom.companyName = item.companyName;
190             this.flag2 = false;
191         },
192         // 关闭搜索
193         closeQuery() {
194             this.flag = true;
195         },
196         // 天地图地理编码
197         getCoder(address) {
198             return new Promise((resolve)=> { 
199                 let url = `http://api.tianditu.gov.cn/geocoder?ds={"keyWord": "${address}"}&tk=958aa355f2fe94c1817c458ba57da90d`;
200                 this.$axios.get(url).then(res => {
201                     let lonLatObj = {};
202                     if (res.data.status === '0') {
203                         lonLatObj = {
204                             lon: res.data.location.lon,
205                             lat: res.data.location.lat,
206                         }
207                     }
208                     resolve(lonLatObj);
209                 })
210             });
211         },
212         // 天地图-默认查所有
213         getMapList() {
214             let params = {
215                 companyName: this.searchFrom.companyName
216             }
217             selectCompanyMapApi(params).then(res => { 
218                 this.mapList = res.data.data;
219                 this.pillarList = this.mapList.filter(item => item.typeNames.includes('支柱产业'));
220                 this.risingList = this.mapList.filter(item => item.typeNames.includes('新兴产业'));
221                 this.traditionList = this.mapList.filter(item => item.typeNames.includes('传统产业'));
222                 this.stableList = this.mapList.filter(item => item.typeNames.includes('稳定产业'));
223                 this.$nextTick(function() {
224                     this.loadMap(this.mapList);
225                 }); 
226             });
227         },
228 
229         // 天地图-右下方数量查询
230         getCompanyMapCount() {
231             getCompanyMapCountApi().then(res => {  
232                 this.typeNumObj = res.data.data;
233                 for( let key in this.typeNumObj ) {
234                     if(key === '支柱产业') {
235                         this.typeNumObj.pillarNum = this.typeNumObj[key];
236                     } else if (key === '新兴产业') {
237                         this.typeNumObj.risingNum = this.typeNumObj[key];
238                     } else if (key === '传统产业') {
239                         this.typeNumObj.traditionNum = this.typeNumObj[key];
240                     } else if (key === '稳定产业') {
241                         this.typeNumObj.stableNum = this.typeNumObj[key];
242                     }
243                 }
244             });
245         },
246         // 天地图加载
247         loadMap(mapList) {
248             // 通过Gw这个属性判断地图是否存在
249             if(this.map.Gw) {
250                 // 清除标注
251                 this.map.clearOverLays();
252                 this.map.removeStyle();
253             } 
254             // 初始化地图对象
255             this.map = new T.Map("proMap");
256             // 设置显示地图的中心点和级别
257             this.map.centerAndZoom(new T.LngLat(119.82654, 32.23699), this.zoom);
258             this.map.enableDoubleClickZoom();
259             this.map.setStyle('indigo');
260             this.map.enableInertia();
261             // 加载标注
262             if(mapList && mapList.length > 0) {
263                 for(var i = 0; i < mapList.length; i++) {
264                     var itemLonLatObj = {};
265                     let _this = this;
266                     // for循环，闭包问题解决
267                     (function(j) {
268                         var item = mapList[j];
269                         _this.getCoder(item.address).then(res => {
270                             itemLonLatObj = res;
271                             var icon1 = new T.Icon({
272                                 iconUrl: iconPillar,
273                                 iconSize: new T.Point(24, 24),
274                             });
275                             var icon2 = new T.Icon({
276                                 iconUrl: iconRising,
277                                 iconSize: new T.Point(24, 24),
278                             });
279                             var icon3 = new T.Icon({
280                                 iconUrl: iconTradition,
281                                 iconSize: new T.Point(24, 24),
282                             });
283                             var icon4 = new T.Icon({
284                                 iconUrl: iconStable,
285                                 iconSize: new T.Point(24, 24),
286                             });
287                             // 根据类型判断不同的标注
288                             if(item.typeNames.includes('支柱产业')) {
289                                 var marker = new T.Marker(new T.LngLat( itemLonLatObj.lon, itemLonLatObj.lat ), {icon: icon1});
290                             } else if (item.typeNames.includes('新兴产业')) {
291                                 var marker = new T.Marker(new T.LngLat( itemLonLatObj.lon, itemLonLatObj.lat ), {icon: icon2});
292                             } else if (item.typeNames.includes('传统产业')) {
293                                 var marker = new T.Marker(new T.LngLat( itemLonLatObj.lon, itemLonLatObj.lat ), {icon: icon3});
294                             } else if (item.typeNames.includes('稳定产业')) {
295                                 var marker = new T.Marker(new T.LngLat( itemLonLatObj.lon, itemLonLatObj.lat ), {icon: icon4});
296                             };
297                             let content = `
298                                 <div>
299                                     <div style="margin-bottom: 14px;">
300                                         <p 
301                                             style="font-size: 16px; 
302                                             margin-right: 10px;">${ item.companyName }
303                                         </p>
304                                         <p  
305                                             style="font-size: 12px; 
306                                             padding: 2px 5px; 
307                                             background: rgba(76, 122, 246, 0.2); 
308                                             border: 1px solid #4C7AF6; 
309                                             border-radius: 3px;"
310                                         >${ item.typeNames.join(',') }</p>
311                                     </div>
312                                     <p>
313                                         <span style="color: #999;">行业：</span>${ item.companyIndustry }
314                                         <span 
315                                             style="color: #999; 
316                                             margin-left: 10px;">
317                                             税收：<span style="color: #FFC702;">${ item.shui ? item.shui : 0}</span>
318                                             万元
319                                         </span>
320                                     </p> 
321                                     <p><span style="color: #999;">类型：</span>${ item.gongshangqiyeleixing }</p> 
322                                     <p><span style="color: #999;">地址：</span>${ item.address }</p> 
323                                 </div>  
324                             `;
325                             _this.map.addOverLay(marker);
326                             addClickHandler(content, marker);
327                             function addClickHandler(content, marker) {
328                                 marker.addEventListener("click", function(e) {
329                                     openInfo(content, e)
330                                 });
331                             };
332                             function openInfo(content, e) {
333                                 var point = e.lnglat;
334                                 marker = new T.Marker(point);
335                                 var markerInfoWin = new T.InfoWindow(content, {offset: new T.Point(0, -10)}); 
336                                 _this.map.openInfoWindow(markerInfoWin, point); 
337                             };
338                         });
339                     })(i);
340                 } 
341             } else {
342               
343             }
344         },
345         onClose() {
346             this.map.removeOverLay(customerWinInfo);
347         },
348     }
349 }
350 </script>
351 
352 <style lang="scss" scoped>
353 .innerMap {
354     height: 780px;
355     position: absolute;
356     top: 124px;
357     left: 27%;
358     border: 1px solid #182E59;
359     overflow: hidden;
360     #proMap {
361          100%;
362         height: 100%;
363     }
364     .bg {
365         background-color: rgb(65, 10, 144);
366     }
367     .shrink {
368         position: absolute;
369         top: 0;
370         right: 0;
371         color: #fff;
372         z-index: 999;
373         height: 46px;
374         line-height: 46px;
375         .triangle {
376             height: 100%;
377             float: right;
378             cursor: pointer;
379         }
380         .triangleLong {
381              460px;
382             height: 50px;
383         }
384         .inputInfo {
385              100%;
386             position: absolute;
387             top: 0;
388             left: 35px;
389             height: 50px;
390             display: flex;
391             align-items: center;
392             .el-input {
393                  260px;
394                 margin-right: 10px;
395             }
396             .area-ipt {
397                  120px;
398                 margin-right: 0;
399             }
400         }
401         .opts {
402              162px;
403             background: rgba(13,89,141,.8);
404             border-radius: 3px;
405             position: absolute;
406             top: 46px;
407             right: 0;
408             overflow: hidden;
409             overflow-y: auto;
410             color: #fff;
411             font-size: 14px;
412             .opts-list {
413                 padding: 10px;
414                 color: #B1CFE8;
415                 line-height: 30px;
416                 cursor: pointer;
417             }
418             .opts-item {
419                  130px;
420                 color: #B1CFE8;
421                 height: 30px;
422                 line-height: 30px;
423                 text-overflow: ellipsis;
424                 white-space: nowrap;
425                 overflow: hidden;
426                 display: inline-block;
427                 vertical-align: bottom;
428                 .icon-dot {
429                     display: inline-block;
430                      8px;
431                     height: 8px;
432                     background: #B1CFE8;
433                     border-radius: 4px;
434                     margin-right: 5px;
435                 }
436                 &:hover {
437                     color: #44CDDB;
438                 }
439             }
440         }
441         /deep/.el-input__inner {
442             height: 28px;
443             line-height: 28px;
444         }
445         .resetBtn {
446             color: #fff;
447             background: #079CA7;
448             border-color: #079CA7;
449         }
450         .closeBtn {
451             font-size: 20px;
452             margin-left: 6px;
453             cursor: pointer;
454         }
455     }
456     .map-right {
457         position: absolute;
458         right: 20px;
459         bottom: 10px;
460         z-index: 1000;
461         font-size: 14px;
462         color: #fff;
463         .map-select-item {
464             height: 32px;
465             display: flex;
466             align-items: center;
467             [class^="icon-"] {
468                 display: inline-block;
469                  12px;
470                 height: 12px;
471                 background: #1F5CFF;
472                 border-radius: 6px;
473                 margin-right: 6px;
474                 &.icon-rising {
475                     background: #039BFE;
476                 }
477                 &.icon-tradition {
478                     background: #55F6FC;
479                 }
480                 &.icon-stable {
481                     background: #A0EF91;
482                 }
483             }
484             /deep/ .el-switch__core {
485                  38px !important;
486                 margin-left: 10px;
487             }
488         }
489     }
490     /deep/ .tdt-infowindow-content-wrapper {
491          464px; 
492         height: 264px; 
493         box-sizing: border-box;
494         box-shadow: none;
495         color: #fff;
496         padding: 30px;
497         background: url("../../../../assets/img/map-window-bg-mid.png") left top no-repeat;
498         background-size: 100% 100%;
499     }
500     /deep/ .tdt-infowindow-content p {
501         font-size: 12px;
502         line-height: 18px;
503         margin: 0 0 10px 0;
504     }
505     /deep/ .tdt-infowindow-tip-container {
506         background-position: center;
507         background-size: cover;
508         height: 34px;
509         background-image: url('../../../../assets/img/dingwei.png');
510         .tdt-infowindow-tip {
511             display: none;
512         }
513     }
514 }
515 </style>