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 width: 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 width: 460px;
382 height: 50px;
383 }
384 .inputInfo {
385 width: 100%;
386 position: absolute;
387 top: 0;
388 left: 35px;
389 height: 50px;
390 display: flex;
391 align-items: center;
392 .el-input {
393 width: 260px;
394 margin-right: 10px;
395 }
396 .area-ipt {
397 width: 120px;
398 margin-right: 0;
399 }
400 }
401 .opts {
402 width: 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 width: 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 width: 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 width: 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 width: 38px !important;
486 margin-left: 10px;
487 }
488 }
489 }
490 /deep/ .tdt-infowindow-content-wrapper {
491 width: 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>
浙公网安备 33010602011771号