Newer
Older
urbanLifeline_YanAn / src / views / oneMap / LayerControl / LayerControl.vue
@jimengfei jimengfei on 23 Oct 79 KB updata
  1. <template>
  2. <Transition name="slideTC">
  3. <div class="LayerControl" v-show="ShowTuCheng" :class="[showPanel ? 'TuChengImgTrue' : 'TuChengImgFalse']">
  4. <div class="GroupBox" v-for="item in AllData.LayerData" v-show="item.children">
  5. <div class="GroupName" @click="item.Show = !item.Show">{{ item.title }}</div>
  6. <!-- <Transition name="Group"> -->
  7. <div class="TCListBox" v-show="item.Show">
  8. <div
  9. class="TCList"
  10. v-for="item2 in item.children"
  11. :class="item2.layerVisible ? 'TCList_Check' : ''"
  12. @click="layerClick(item2)"
  13. >
  14. <div class="TCList_Select">
  15. <el-icon v-show="item2.layerVisible"><Check /></el-icon>
  16. </div>
  17. <img class="TCList_Icon" :src="item2.layerIcon" v-if="item2.layerIcon" />
  18. <!-- 当有未配置图片的图层时,将使用备用图片 -->
  19. <img class="TCList_Icon" :src="requireTuChengImg('TuCheng')" v-else />
  20.  
  21. <div class="TCList_Name">
  22. {{ item2.layerName }}
  23. </div>
  24. </div>
  25. </div>
  26. <!-- </Transition/> -->
  27. </div>
  28. </div>
  29. </Transition>
  30. </template>
  31.  
  32. <script setup name="LayerControl">
  33. import { ref, reactive, toRefs, onMounted } from 'vue';
  34. // 图层控制icon引入
  35. import { requireTuChengImg } from '@/utils/util';
  36. import yanAnPaiShuiArea from '@/assets/yanAnPaiShuiArea.json';
  37. import yanAnRoad from '@/assets/yanAnRoad.json';
  38. import yanAnWater from '@/assets/yanAnWater.json';
  39. import yanAnWSCLC from '@/assets/yanAnWSCLC.json';
  40. import yanAnCenterCity from '@/assets/yanAnCenterCity.json';
  41. import yanAnYSBZ from '@/assets/yanAnYSBZ.json';
  42. import yanAnYiLao from '@/assets/yanAnYiLao.json';
  43. import yanAnFengXian from '@/assets/yanAnFengXian.json';
  44. import yanAnPipeSupervise from '@/assets/yanAnPipeSupervise.json';
  45. import yanAnPKSupervise from '@/assets/yanAnPKSupervise.json';
  46. import yanAnNature from '@/assets/yanAnNature.json';
  47. import yanAnVideo from '@/assets/yanAnVideo.json';
  48. import yanAnMountain from '@/assets/yanAnMountain.json';
  49. import yanAnSmallWater from '@/assets/yanAnSmallWater.json';
  50. import yanAnRainArea from '@/assets/yanAnRainArea.json';
  51. import heDiJiaGu from '@/assets/heDiJiaGu.json';
  52. import heDiShuJun from '@/assets/heDiShuJun.json';
  53. import anXianGaiZao from '@/assets/anXianGaiZao.json';
  54. import testProjection from '@/assets/testProjection.json';
  55. import testProjectionLabel from '@/assets/testProjectionLabel.json';
  56.  
  57. import ranQi_supervise from '@/assets/ranQi_supervise.json';
  58. import paishuiSupervise from '@/assets/paishuiSupervise.json';
  59. import xtb_img from '@/assets/newImgs/xtb_img.png';
  60. import bus from '@/bus';
  61. import axios from 'axios';
  62. import mapBoxVectorLayer from '@/utils/GISdocument/mapboxVectorLayer.js';
  63. const AllData = reactive({
  64. // 图层控制面板的渲染数据
  65. /**图层面板数据字段说明
  66. *@param title:渲染在图层控制中的图层分组名称
  67. *@param children:关联图层分组与图层的字段
  68. *@param layerName:渲染在图层控制中的图层名称
  69. *@param layerKey:gis使用的图层唯一id名称
  70. *@param layerIcon:渲染在图层控制中UI设计的图层示意图
  71. *@param layerVisible:代表当前图层是否勾选,true:勾选中且地图上图;false:不勾选且地图不上图
  72. */
  73. LayerData: [
  74. {
  75. title: '基本信息',
  76. Show: true,
  77. children: [
  78. {
  79. layerName: '蓝色地图',
  80. layerKey: 'blackMap',
  81. layerIcon: requireTuChengImg('blueMap_icon'),
  82. layerVisible: true,
  83. },
  84. {
  85. layerName: '白色地图',
  86. layerKey: 'whiteMap',
  87. layerIcon: requireTuChengImg('whiteMap_icon'),
  88. layerVisible: false,
  89. },
  90. {
  91. layerName: '影像地图',
  92. layerKey: 'imageMap',
  93. layerIcon: requireTuChengImg('imageLayer_icon'),
  94. layerVisible: false,
  95. },
  96. {
  97. layerName: '中心城区',
  98. layerKey: 'centerCity',
  99. layerIcon: requireTuChengImg('centerCity'),
  100. layerVisible: false,
  101. dynamicLineData: yanAnCenterCity,
  102. },
  103. {
  104. layerName: '示范区',
  105. layerKey: 'testProjection',
  106. layerIcon: requireTuChengImg('centerCity'),
  107. layerVisible: false,
  108. },
  109. {
  110. layerName: '综合视角',
  111. layerKey: 'zongHeView',
  112. layerIcon: '',
  113. layerVisible: true,
  114. lonlat: [109.478, 36.606],
  115. zoom: 14,
  116. bearing: 0,
  117. pitch: 55,
  118. },
  119. {
  120. layerName: '燃气视角',
  121. layerKey: 'ranQiView',
  122. layerIcon: '',
  123. layerVisible: false,
  124. lonlat: [109.478, 36.606],
  125. zoom: 11.5,
  126. bearing: 40,
  127. pitch: 55,
  128. },
  129. {
  130. layerName: '桥梁视角',
  131. layerKey: 'qiaoLiangView',
  132. layerIcon: '',
  133. layerVisible: false,
  134. lonlat: [109.4716, 36.6064],
  135. zoom: 18,
  136. bearing: 300,
  137. pitch: 45,
  138. },
  139. {
  140. layerName: '隧道视角',
  141. layerKey: 'suiDaoView',
  142. layerIcon: '',
  143. layerVisible: false,
  144. lonlat: [109.4636, 36.6134],
  145. zoom: 18,
  146. bearing: 30,
  147. pitch: 45,
  148. },
  149. {
  150. layerName: '三维建筑',
  151. layerKey: 'buildingLayer',
  152. layerIcon: '',
  153. layerVisible: true,
  154. },
  155. {
  156. layerName: '仿真地图',
  157. layerKey: 'fangZhenMap',
  158. layerIcon: '',
  159. layerVisible: false,
  160. },
  161. {
  162. layerName: '路网',
  163. layerKey: 'road',
  164. layerIcon: requireTuChengImg('roadNet'),
  165. layerVisible: true,
  166. dynamicLineData: yanAnRoad,
  167. },
  168. {
  169. layerName: '河流水系',
  170. layerKey: 'waterLake',
  171. layerIcon: requireTuChengImg('waterLake'),
  172. layerVisible: true,
  173. dynamicLineData: yanAnWater,
  174. },
  175. {
  176. layerName: '防洪河道',
  177. layerKey: 'fangHongWater',
  178. layerIcon: requireTuChengImg('fangHongRivel'),
  179. layerVisible: false,
  180. lineWithLabel: yanAnSmallWater,
  181. },
  182. {
  183. layerName: '河堤疏浚',
  184. layerKey: 'heDiShuJun',
  185. layerIcon: requireTuChengImg('hediShuJun'),
  186. layerVisible: false,
  187. lineWithLabel: heDiShuJun,
  188. },
  189. {
  190. layerName: '河堤加固',
  191. layerKey: 'heDiJiaGu',
  192. layerIcon: requireTuChengImg('hediJiaGu'),
  193. layerVisible: false,
  194. lineWithLabel: heDiJiaGu,
  195. },
  196. {
  197. layerName: '岸线改造',
  198. layerKey: 'anXianGaiZao',
  199. layerIcon: requireTuChengImg('anXianGaiZao'),
  200. layerVisible: false,
  201. lineWithLabel: anXianGaiZao,
  202. },
  203. {
  204. layerName: '河堤治理',
  205. layerKey: 'heDiZhiLi',
  206. layerIcon: requireTuChengImg('hediZhiLi'),
  207. layerVisible: false,
  208. lineWithLabel: anXianGaiZao,
  209. },
  210. {
  211. layerName: '空间格局',
  212. layerKey: 'yanAnNature',
  213. layerIcon: requireTuChengImg('yanAnNature'),
  214. layerVisible: false,
  215. areaData: yanAnNature,
  216. },
  217. {
  218. layerName: '山体修复',
  219. layerKey: 'yanAnMountain',
  220. layerIcon: requireTuChengImg('yanAnMountain'),
  221. layerVisible: false,
  222. lineWithLabel: yanAnMountain,
  223. },
  224. ],
  225. },
  226. {
  227. title: '燃气系统',
  228. Show: true,
  229. children: [
  230. {
  231. layerName: '燃气管网',
  232. layerKey: 'rq_all',
  233. layerIcon: requireTuChengImg('rq_all'),
  234. layerVisible: false,
  235. },
  236. {
  237. layerName: '燃气风险评估',
  238. layerKey: 'ranqiRisk',
  239. layerIcon: requireTuChengImg('rq_all'),
  240. layerVisible: false,
  241. layerType: 'heatMap',
  242. },
  243. {
  244. layerName: '干管',
  245. layerKey: 'rq_SZLH',
  246. layerIcon: requireTuChengImg('rq_SZLH'),
  247. layerVisible: false,
  248. },
  249. {
  250. layerName: '干管流向',
  251. layerKey: 'sx_ya_smx_rq_line_sz',
  252. layerIcon: requireTuChengImg('sx_ya_smx_rq_line_sz'),
  253. layerVisible: false,
  254. },
  255. {
  256. layerName: '主管',
  257. layerKey: 'rq_TYLH',
  258. layerIcon: requireTuChengImg('rq_TYLH'),
  259. layerVisible: false,
  260. },
  261. {
  262. layerName: '主管流向',
  263. layerKey: 'sx_ya_smx_rq_line_zg',
  264. layerIcon: requireTuChengImg('sx_ya_smx_rq_line_zg'),
  265. layerVisible: false,
  266. },
  267. {
  268. layerName: '支管',
  269. layerKey: 'rq_LGLH',
  270. layerIcon: requireTuChengImg('rq_LGLH'),
  271. layerVisible: false,
  272. },
  273. {
  274. layerName: '支管流向',
  275. layerKey: 'sx_ya_smx_rq_line_zhig',
  276. layerIcon: requireTuChengImg('sx_ya_smx_rq_line_zhig'),
  277. layerVisible: false,
  278. },
  279. {
  280. layerName: '其他管网',
  281. layerKey: 'rq_other',
  282. layerIcon: requireTuChengImg('rq_other'),
  283. layerVisible: false,
  284. },
  285. {
  286. layerName: '调压器',
  287. layerKey: 'tiaoYaQi',
  288. layerIcon: requireTuChengImg('tiaoYaQi'),
  289. layerVisible: false,
  290. },
  291. {
  292. layerName: '节点',
  293. layerKey: 'rq_jieDian',
  294. layerIcon: requireTuChengImg('jiedian_iocn'),
  295. layerVisible: false,
  296. },
  297. {
  298. layerName: '极性保护',
  299. layerKey: 'jiXingBaoHu',
  300. layerIcon: requireTuChengImg('jiXingBaoHu'),
  301. layerVisible: false,
  302. },
  303. {
  304. layerName: '流量计',
  305. layerKey: 'rq_liuLiangJi',
  306. layerIcon: requireTuChengImg('rq_liuLiangJi'),
  307. layerVisible: false,
  308. },
  309. {
  310. layerName: '未知设备',
  311. layerKey: 'rq_unknow',
  312. layerIcon: requireTuChengImg('rq_unknow'),
  313. layerVisible: false,
  314. },
  315. ],
  316. },
  317. {
  318. title: '雨水系统',
  319. Show: true,
  320. children: [
  321. {
  322. layerName: '雨水分区',
  323. layerKey: 'rainArea',
  324. layerIcon: requireTuChengImg('rainArea'),
  325. layerVisible: false,
  326. areaData: yanAnRainArea,
  327. },
  328. {
  329. layerName: '排水分区',
  330. layerKey: 'paishuiArea',
  331. layerIcon: requireTuChengImg('paishuiArea'),
  332. layerVisible: false,
  333. areaData: yanAnPaiShuiArea,
  334. },
  335. {
  336. layerName: '雨水管网',
  337. layerKey: 'ysLine1',
  338. layerIcon: requireTuChengImg('ysLine1'),
  339. layerVisible: false,
  340. },
  341. {
  342. layerName: '雨水管网流向',
  343. layerKey: 'pipeline_info_flow_ys',
  344. layerIcon: requireTuChengImg('pipeline_info_flow_ys'),
  345. layerVisible: false,
  346. },
  347. {
  348. layerName: '排水风险评估',
  349. layerKey: 'paishuiRisk',
  350. layerIcon: requireTuChengImg('pipeline_info_flow_ys'),
  351. layerVisible: false,
  352. layerType: 'heatMap',
  353. },
  354. // {
  355. // layerName: '雨水排口',
  356. // layerKey: '',
  357. // layerIcon: null,
  358. // layerVisible: false,
  359. // },
  360. {
  361. layerName: '雨水泵站',
  362. layerKey: 'YSBZ',
  363. layerIcon: requireTuChengImg('YSBZ'),
  364. layerVisible: false,
  365. data: yanAnYSBZ,
  366. },
  367. ],
  368. },
  369. {
  370. title: '污水系统',
  371. Show: true,
  372. children: [
  373. {
  374. layerName: '污水分区',
  375. layerKey: 'sewageArea',
  376. layerIcon: requireTuChengImg('sewageArea'),
  377. layerVisible: false,
  378. },
  379. {
  380. layerName: '污水管网',
  381. layerKey: 'wsLine1',
  382. layerIcon: requireTuChengImg('wsLine1'),
  383. layerVisible: false,
  384. },
  385. {
  386. layerName: '污水管网流向',
  387. layerKey: 'pipeline_info_flow_ws1',
  388. layerIcon: requireTuChengImg('pipeline_info_flow_ws1'),
  389. layerVisible: false,
  390. },
  391. // {
  392. // layerName: '溢流口',
  393. // layerKey: '',
  394. // layerIcon: null,
  395. // layerVisible: false,
  396. // },
  397. // {
  398. // layerName: '污水泵站',
  399. // layerKey: '',
  400. // layerIcon: null,
  401. // layerVisible: false,
  402. // },
  403. {
  404. layerName: '污水处理厂',
  405. layerKey: 'WSCLC',
  406. layerIcon: requireTuChengImg('WSCLC'),
  407. layerVisible: false,
  408. data: yanAnWSCLC,
  409. },
  410. ],
  411. },
  412. {
  413. title: '感知设备',
  414. Show: true,
  415. children: [
  416. {
  417. layerName: '内涝易涝点',
  418. layerKey: 'yiLaoPoint',
  419. layerIcon: requireTuChengImg('yiLaoPoint'),
  420. layerVisible: false,
  421. data: yanAnYiLao,
  422. },
  423. {
  424. layerName: '内涝风险点',
  425. layerKey: 'fengXianPoint',
  426. layerIcon: requireTuChengImg('fengXianPoint'),
  427. layerVisible: false,
  428. data: yanAnFengXian,
  429. },
  430. {
  431. layerName: '排水管网监测',
  432. layerKey: 'pipeSupervise',
  433. layerIcon: requireTuChengImg('pipeSupervise'),
  434. layerVisible: false,
  435. data: yanAnPipeSupervise,
  436. },
  437. {
  438. layerName: '排水排口监测',
  439. layerKey: 'PKsupervise',
  440. layerIcon: requireTuChengImg('PKsupervise'),
  441. layerVisible: false,
  442. data: yanAnPKSupervise,
  443. },
  444. {
  445. layerName: '视频监测',
  446. layerKey: 'video',
  447. layerIcon: requireTuChengImg('video'),
  448. layerVisible: false,
  449. data: yanAnVideo,
  450. },
  451. {
  452. layerName: '燃气监测',
  453. layerKey: 'ranQi_supervise',
  454. layerIcon: requireTuChengImg('ranQiJing'),
  455. layerVisible: false,
  456. data: ranQi_supervise,
  457. },
  458. {
  459. layerName: '排水监测',
  460. layerKey: 'paishuiSupervise',
  461. layerIcon: requireTuChengImg('shuiWeiJi_icon'),
  462. layerVisible: false,
  463. data: paishuiSupervise,
  464. },
  465. ],
  466. },
  467. ],
  468. });
  469. onMounted(() => {
  470. let initeLegend = AllData.LayerData[0].children
  471. .concat(AllData.LayerData[1].children)
  472. .concat(AllData.LayerData[2].children)
  473. .concat(AllData.LayerData[3].children)
  474. .concat(AllData.LayerData[4].children);
  475. initeLegend.forEach(element => {
  476. element.layername = element.layerKey;
  477. });
  478. bus.emit('setLegendData', initeLegend);
  479. });
  480. const props = defineProps({
  481. ShowTuCheng: false,
  482. showPanel: false,
  483. });
  484.  
  485. watch(
  486. () => props.ShowTuCheng,
  487. (newValue, oldValue) => {
  488. console.log('ShowTuCheng变化了', newValue, oldValue);
  489. },
  490. { immediate: true, deep: true }
  491. );
  492.  
  493. const layerClick = async item2 => {
  494. item2.layerVisible = !item2.layerVisible;
  495. item2.isCheck = item2.layerVisible;
  496. console.info(`点击了名称为${item2.layerName},图层ID${item2.layerKey}的图层,点击后的图层展示情况为${item2.layerVisible}`);
  497. bus.emit('setLayerVisible', { layername: item2.layerKey, isCheck: item2.isCheck });
  498. //示范区
  499. if (item2.layerKey == 'testProjection') {
  500. if (item2.isCheck) {
  501. AllData.LayerData[0]['children'][10].layerVisible = false;
  502. mapBoxVectorLayer.remove3Dtiles();
  503. const layer = new mapboxL7.LineLayer({
  504. name: 'testProjection',
  505. })
  506. .source(testProjection)
  507. .size(30)
  508. .shape('wall')
  509. .style({
  510. opacity: 0.8,
  511. sourceColor: '#16f7ff',
  512. targetColor: 'rbga(255,255,255, 0)',
  513. });
  514. newfiberMapbox.addLayer(layer);
  515. mapBoxVectorLayer.addGeojsonSymbol('testProjection', testProjectionLabel, xtb_img);
  516. } else {
  517. newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('testProjection'));
  518. mapBoxVectorLayer.removeByIds(['testProjection']);
  519. }
  520. }
  521. //燃气风险
  522. if (item2.layerKey == 'ranqiRisk') {
  523. if (item2.isCheck) {
  524. bus.emit('SiSeTuBol', true);
  525. let heatMapList = [
  526. { lonlat: [109.4583517767791, 36.64045660187989], value: 2 },
  527. { lonlat: [109.45915900059231, 36.639564923076406], value: 1 },
  528. { lonlat: [109.46064074624108, 36.63888888248738], value: 3 },
  529. { lonlat: [109.46175090337006, 36.63763347376713], value: 4 },
  530. { lonlat: [109.46233801013652, 36.63722780459428], value: 5 },
  531. { lonlat: [109.46275737211255, 36.63718265184453], value: 3 },
  532. { lonlat: [109.46340039380915, 36.63601087211503], value: 2 },
  533. { lonlat: [109.4634842662043, 36.639796184662536], value: 3 },
  534. { lonlat: [109.46681120454784, 36.635965630684304], value: 2 },
  535. { lonlat: [109.46751014117459, 36.63303623297878], value: 3 },
  536. { lonlat: [109.46764992849988, 36.63236013419859], value: 4 },
  537. { lonlat: [109.46801337554575, 36.63082773329404], value: 5 },
  538. { lonlat: [109.4677058434299, 36.629971339150515], value: 6 },
  539. { lonlat: [109.46790154568534, 36.62897972679855], value: 4 },
  540. { lonlat: [109.46820907780108, 36.62758246914724], value: 5 },
  541. { lonlat: [109.46846069498666, 36.625914758136716], value: 3 },
  542. { lonlat: [109.46435094762097, 36.63127797375913], value: 3 },
  543. { lonlat: [109.46493805438743, 36.62726670999692], value: 3 },
  544. { lonlat: [109.46518967157303, 36.625959563646546], value: 3 },
  545. { lonlat: [109.45336366384743, 36.6337564188794], value: 3 },
  546. { lonlat: [109.45450991991531, 36.63114241494354], value: 3 },
  547. { lonlat: [109.4557680058435, 36.6292043657803], value: 3 },
  548. { lonlat: [109.4545099199152, 36.62609442354592], value: 3 },
  549. { lonlat: [109.45330774891703, 36.62532758190564], value: 3 },
  550. { lonlat: [109.45825622023474, 36.62505706236186], value: 3 },
  551. { lonlat: [109.46314877662232, 36.62532740431396], value: 3 },
  552. { lonlat: [109.44662591476458, 36.62744565667445], value: 3 },
  553. { lonlat: [109.44139786879603, 36.62974412708136], value: 3 },
  554. { lonlat: [109.43645036088442, 36.63126842378145], value: 3 },
  555. { lonlat: [109.43211670920196, 36.63081469982216], value: 3 },
  556. { lonlat: [109.42868355657039, 36.632810587611026], value: 3 },
  557. { lonlat: [109.41793384915036, 36.634987868433505], value: 3 },
  558. { lonlat: [109.40921026459482, 36.63444344378062], value: 3 },
  559. { lonlat: [109.46858692076272, 36.62110590039618], value: 3 },
  560. { lonlat: [109.47035661856971, 36.61995354263662], value: 3 },
  561. { lonlat: [109.47258171472353, 36.61892777347618], value: 3 },
  562. { lonlat: [109.47334332481641, 36.6208153097412], value: 35 },
  563. { lonlat: [109.47401900156899, 36.620127962636424], value: 45 },
  564. { lonlat: [109.47436575670645, 36.61957709339732], value: 43 },
  565. { lonlat: [109.47556013551343, 36.61923328226432], value: 4 },
  566. { lonlat: [109.47708842667508, 36.61754354976672], value: 5 },
  567. { lonlat: [109.47910474358588, 36.61661993861554], value: 6 },
  568. { lonlat: [109.47944089622014, 36.616364726231225], value: 6 },
  569. { lonlat: [109.47757869270369, 36.615731001159105], value: 6 },
  570. { lonlat: [109.47590065021183, 36.61525895943912], value: 7 },
  571. { lonlat: [109.47548213080846, 36.614904203510264], value: 6 },
  572. { lonlat: [109.47457696093612, 36.61451805927941], value: 6 },
  573. { lonlat: [109.47548213080833, 36.61421038003272], value: 6 },
  574. { lonlat: [109.476835019112, 36.613808538791], value: 4 },
  575. { lonlat: [109.47752606277787, 36.61309282379784], value: 4 },
  576. { lonlat: [109.478197640425, 36.61383660779872], value: 5 },
  577. { lonlat: [109.47888868409086, 36.61442345137025], value: 6 },
  578. { lonlat: [109.47862589283756, 36.61518291568912], value: 4 },
  579. { lonlat: [109.47945319863473, 36.61438874695218], value: 4 },
  580. { lonlat: [109.48037783452571, 36.61392413291535], value: 4 },
  581. { lonlat: [109.48066009179765, 36.613381048298066], value: 33 },
  582. { lonlat: [109.47880108700613, 36.613057670788265], value: 33 },
  583. { lonlat: [109.47672795600828, 36.61215362328269], value: 3 },
  584. { lonlat: [109.47235706714471, 36.608714319110575], value: 33 },
  585. { lonlat: [109.47095953066176, 36.60900989208619], value: 33 },
  586. { lonlat: [109.47242414889578, 36.60820574067667], value: 33 },
  587. { lonlat: [109.47080300657555, 36.60720326624053], value: 44 },
  588. { lonlat: [109.46960671534613, 36.60677769970712], value: 4 },
  589. { lonlat: [109.4667110197535, 36.60586535117448], value: 54 },
  590. { lonlat: [109.46634207012195, 36.60571021211726], value: 65 },
  591. { lonlat: [109.48124809033756, 36.61305208261769], value: 4 },
  592. { lonlat: [109.48183684833916, 36.61249083700314], value: 4 },
  593. { lonlat: [109.48355078829951, 36.611592045362464], value: 4 },
  594. { lonlat: [109.4836162058552, 36.611030788941534], value: 4 },
  595. { lonlat: [109.48472830430275, 36.6098155271458], value: 4 },
  596. { lonlat: [109.4848983899476, 36.60950742186193], value: 4 },
  597. { lonlat: [109.48548714794921, 36.61046512927026], value: 4 },
  598. { lonlat: [109.48597123786165, 36.60922876138633], value: 4 },
  599. { lonlat: [109.48645532777408, 36.60856200129905], value: 4 },
  600. { lonlat: [109.48743659111014, 36.60781084557607], value: 4 },
  601. { lonlat: [109.48792068102257, 36.607355049157874], value: 5 },
  602. { lonlat: [109.48809076666744, 36.60711022678964], value: 5 },
  603. { lonlat: [109.48710950333127, 36.60684430590222], value: 5 },
  604. { lonlat: [109.48636374319577, 36.60624081857617], value: 5 },
  605. { lonlat: [109.48535859229459, 36.605997022060514], value: 28 },
  606. { lonlat: [109.48571114675235, 36.60507741447555], value: 26 },
  607. { lonlat: [109.4869629705518, 36.60486639408042], value: 32 },
  608. { lonlat: [109.48860822468815, 36.60652068303526], value: 43 },
  609. { lonlat: [109.48959435527298, 36.606639238856765], value: 33 },
  610. { lonlat: [109.49055507792285, 36.60707599046411], value: 23 },
  611. { lonlat: [109.49062150122646, 36.606453011511526], value: 43 },
  612. { lonlat: [109.4906824296868, 36.607181292824684], value: 23 },
  613. { lonlat: [109.49173098572089, 36.60668830758674], value: 43 },
  614. { lonlat: [109.49338196262373, 36.60598188730296], value: 56 },
  615. { lonlat: [109.49414496601992, 36.605639090280604], value: 55 },
  616. { lonlat: [109.49287133727367, 36.60487615143745], value: 55 },
  617. { lonlat: [109.49244041494259, 36.604467862285254], value: 55 },
  618. { lonlat: [109.49361186903214, 36.604247271956666], value: 55 },
  619. { lonlat: [109.49395592159959, 36.603945994095234], value: 55 },
  620. { lonlat: [109.49451061859614, 36.603633392114766], value: 55 },
  621. { lonlat: [109.49505127263073, 36.603150944228496], value: 66 },
  622. { lonlat: [109.49581661405635, 36.60443486991358], value: 55 },
  623. { lonlat: [109.49529000298357, 36.604994123879244], value: 66 },
  624. { lonlat: [109.49460891932945, 36.60451168465817], value: 66 },
  625. { lonlat: [109.4949529718969, 36.60387072220969], value: 5 },
  626. { lonlat: [109.4958166140561, 36.60367134909574], value: 5 },
  627. { lonlat: [109.49568320591762, 36.60269068866781], value: 5 },
  628. { lonlat: [109.49566916295554, 36.60080859328861], value: 6 },
  629. { lonlat: [109.49566214147451, 36.60014495272406], value: 6 },
  630. { lonlat: [109.494840628201, 36.599753070596016], value: 6 },
  631. { lonlat: [109.4965608910385, 36.60014250723452], value: 6 },
  632. { lonlat: [109.49708750211117, 36.60052061853767], value: 6 },
  633. { lonlat: [109.49651876215258, 36.60062696783045], value: 6 },
  634. { lonlat: [109.49725601765434, 36.60026905844781], value: 6 },
  635. { lonlat: [109.49813370277548, 36.601100102081844], value: 6 },
  636. { lonlat: [109.49785284353655, 36.60242247026715], value: 6 },
  637. { lonlat: [109.49832328276145, 36.60081901303621], value: 6 },
  638. { lonlat: [109.49783880057448, 36.59967978702087], value: 6 },
  639. { lonlat: [109.49802838056061, 36.599299226039754], value: 6 },
  640. { lonlat: [109.49848477682357, 36.59905454638016], value: 6 },
  641. { lonlat: [109.49689090064342, 36.59891177851914], value: 6 },
  642. { lonlat: [109.4978247576123, 36.59752340035382], value: 6 },
  643. { lonlat: [109.49701728730074, 36.596542660729575], value: 6 },
  644. { lonlat: [109.49685645137883, 36.595212452415], value: 6 },
  645. { lonlat: [109.49616132476278, 36.59372208751017], value: 6 },
  646. { lonlat: [109.497713072057, 36.59436068924544], value: 6 },
  647. { lonlat: [109.49829530434499, 36.59627757677923], value: 7 },
  648. { lonlat: [109.49801374925752, 36.593942855465386], value: 7 },
  649. { lonlat: [109.49621402796436, 36.59244561043963], value: 7 },
  650. { lonlat: [109.49611930579097, 36.591341185842126], value: 7 },
  651. { lonlat: [109.49618696448614, 36.58984388974645], value: 7 },
  652. { lonlat: [109.49579789965442, 36.589368310214226], value: 7 },
  653. { lonlat: [109.4920496079386, 36.58885313566361], value: 7 },
  654. { lonlat: [109.48960036317119, 36.588970902925006], value: 7 },
  655. { lonlat: [109.48761119753136, 36.58913232115246], value: 7 },
  656. { lonlat: [109.48470187363641, 36.58831158443507], value: 7 },
  657. { lonlat: [109.48200905756617, 36.589389680113165], value: 56 },
  658. { lonlat: [109.48023639975108, 36.58902015763719], value: 7 },
  659. { lonlat: [109.47394414109459, 36.58837402615219], value: 80 },
  660. { lonlat: [109.4728480702318, 36.59023783394082], value: 78 },
  661. { lonlat: [109.46961398459973, 36.588434956116345], value: 77 },
  662. { lonlat: [109.46908624677688, 36.587439603702165], value: 55 },
  663. { lonlat: [109.4652161694096, 36.58760966434236], value: 7 },
  664. { lonlat: [109.46463430463056, 36.58702899938492], value: 55 },
  665. { lonlat: [109.46321347203066, 36.585073258863616], value: 7 },
  666. { lonlat: [109.46482374897708, 36.583968727419084], value: 7 },
  667. { lonlat: [109.46692116852915, 36.58347534338372], value: 55 },
  668. { lonlat: [109.4688020802565, 36.58344032845259], value: 55 },
  669. { lonlat: [109.47236092762554, 36.58305607754432], value: 66 },
  670. { lonlat: [109.47351112544439, 36.58086012847229], value: 55 },
  671. { lonlat: [109.47357878413955, 36.58486317336802], value: 5 },
  672. { lonlat: [109.46054812145172, 36.592050037038575], value: 55 },
  673. { lonlat: [109.45958516192611, 36.59014334083254], value: 45 },
  674. { lonlat: [109.441690631703, 36.574861874203556], value: 45 },
  675. { lonlat: [109.44624550826747, 36.57378190194129], value: 7 },
  676. { lonlat: [109.4509010450875, 36.57331087985171], value: 7 },
  677. { lonlat: [109.45600955305757, 36.573692403602315], value: 7 },
  678. { lonlat: [109.45623603863253, 36.573058990448956], value: 7 },
  679. { lonlat: [109.46174718762488, 36.57201959088281], value: 7 },
  680. { lonlat: [109.46564777252813, 36.57459338262966], value: 7 },
  681. { lonlat: [109.47100793113714, 36.57481251327233], value: 7 },
  682. { lonlat: [109.47073111543428, 36.57287999199309], value: 7 },
  683. { lonlat: [109.47181321318158, 36.57139400720595], value: 7 },
  684. { lonlat: [109.47722370191836, 36.57685016603991], value: 7 },
  685. { lonlat: [109.48097329643825, 36.57962676684916], value: 7 },
  686. { lonlat: [109.49076250629228, 36.580657760474004], value: 7 },
  687. { lonlat: [109.4908883316117, 36.57815705967815], value: 7 },
  688. { lonlat: [109.48588048389708, 36.575696873317725], value: 7 },
  689. { lonlat: [109.48555333806642, 36.57234345586721], value: 7 },
  690. { lonlat: [109.48462223070236, 36.57114165197099], value: 7 },
  691. { lonlat: [109.48494937653292, 36.569168438097215], value: 7 },
  692. { lonlat: [109.48789368900827, 36.568575587318655], value: 7 },
  693. { lonlat: [109.48701291177198, 36.56741432474017], value: 77 },
  694. { lonlat: [109.48668576594132, 36.565197403953434], value: 77 },
  695. { lonlat: [109.48661027074958, 36.56200594032002], value: 77 },
  696. { lonlat: [109.48643411530227, 36.55950462918852], value: 7 },
  697. { lonlat: [109.47872714141864, 36.55363535583412], value: 7 },
  698. { lonlat: [109.47752130169793, 36.55237880798815], value: 7 },
  699. { lonlat: [109.47659108248483, 36.550399478960415], value: 7 },
  700. { lonlat: [109.47531633763725, 36.54680772057538], value: 7 },
  701. { lonlat: [109.47714232349988, 36.538378228993835], value: 7 },
  702. { lonlat: [109.47628100941364, 36.53678778825302], value: 7 },
  703. { lonlat: [109.49119798128915, 36.57421937037934], value: 7 },
  704. { lonlat: [109.49316811330803, 36.5763548006588], value: 7 },
  705. { lonlat: [109.49201320833134, 36.5772533638739], value: 7 },
  706. { lonlat: [109.49206173375048, 36.57869986536457], value: 7 },
  707. { lonlat: [109.49288666587658, 36.57962971205523], value: 7 },
  708. { lonlat: [109.4948373877278, 36.579792436760556], value: 7 },
  709. { lonlat: [109.49405127593694, 36.581677232061956], value: 7 },
  710. { lonlat: [109.49497325890142, 36.582200016243696], value: 7 },
  711. { lonlat: [109.49599229270427, 36.581908742939454], value: 7 },
  712. { lonlat: [109.49642902147689, 36.583276883316856], value: 56 },
  713. { lonlat: [109.49692398075254, 36.58497374115537], value: 4 },
  714. { lonlat: [109.49697250617166, 36.58646705928871], value: 4 },
  715. { lonlat: [109.49781684846545, 36.58750638888238], value: 4 },
  716. { lonlat: [109.49951870129331, 36.59430380170364], value: 3 },
  717. { lonlat: [109.49965804385573, 36.59486501809594], value: 65 },
  718. { lonlat: [109.49988842408676, 36.59649457072071], value: 76 },
  719. { lonlat: [109.50008437575242, 36.59732109333835], value: 64 },
  720. { lonlat: [109.49935516493218, 36.59831527959685], value: 43 },
  721. { lonlat: [109.50060236752009, 36.60104441193055], value: 45 },
  722. { lonlat: [109.50126321265897, 36.60358057739102], value: 23 },
  723. { lonlat: [109.49942472380532, 36.604173438687546], value: 34 },
  724. { lonlat: [109.5007026398301, 36.60501144006829], value: 6 },
  725. { lonlat: [109.49901617072663, 36.605443415517875], value: 5 },
  726. { lonlat: [109.50014206700124, 36.6054693718935], value: 5 },
  727. { lonlat: [109.50184753857336, 36.6066137836571], value: 6 },
  728. { lonlat: [109.50264089164449, 36.606042210978295], value: 6 },
  729. { lonlat: [109.50362426940333, 36.606627392739135], value: 6 },
  730. { lonlat: [109.5029639336135, 36.60551750543657], value: 6 },
  731. { lonlat: [109.50313970644957, 36.60497656754981], value: 6 },
  732. { lonlat: [109.50333489978382, 36.60424830824475], value: 6 },
  733. { lonlat: [109.50498336394963, 36.60554595245176], value: 6 },
  734. { lonlat: [109.5062137738025, 36.60733384990011], value: 6 },
  735. { lonlat: [109.50681710218589, 36.607903700917404], value: 6 },
  736. { lonlat: [109.5058527268957, 36.60992901196387], value: 6 },
  737. { lonlat: [109.50458431210518, 36.61083589220665], value: 6 },
  738. { lonlat: [109.5035629294087, 36.61163552050199], value: 6 },
  739. { lonlat: [109.50728675442862, 36.60816923300994], value: 6 },
  740. { lonlat: [109.50862770454853, 36.60957898993155], value: 6 },
  741. { lonlat: [109.50900738849452, 36.611329111002924], value: 6 },
  742. { lonlat: [109.5087728725542, 36.61263215550033], value: 6 },
  743. { lonlat: [109.51196589727925, 36.61287834022912], value: 6 },
  744. { lonlat: [109.51194785759148, 36.614481923277204], value: 6 },
  745. { lonlat: [109.5131805695851, 36.614291799340485], value: 6 },
  746. { lonlat: [109.51506271033638, 36.61535240611497], value: 6 },
  747. { lonlat: [109.51550167607066, 36.616878374906946], value: 6 },
  748. { lonlat: [109.5174078697389, 36.6167755151019], value: 6 },
  749. { lonlat: [109.51728159192487, 36.61817541867955], value: 6 },
  750. { lonlat: [109.51805729849644, 36.61931353190943], value: 6 },
  751. { lonlat: [109.52015591550028, 36.61910403021254], value: 6 },
  752. { lonlat: [109.52326378422758, 36.618323942249155], value: 6 },
  753. { lonlat: [109.52535504124248, 36.621157617292155], value: 6 },
  754. { lonlat: [109.52708365253223, 36.622782899894624], value: 6 },
  755. { lonlat: [109.53062549244765, 36.62553845807305], value: 6 },
  756. { lonlat: [109.53329698262276, 36.62472766573882], value: 6 },
  757. { lonlat: [109.53529153411093, 36.62401430655811], value: 6 },
  758. { lonlat: [109.53622232480538, 36.62273577119326], value: 6 },
  759. { lonlat: [109.53555747430924, 36.62184699338395], value: 6 },
  760. { lonlat: [109.5376787067582, 36.627153166827114], value: 6 },
  761. { lonlat: [109.53979414015477, 36.62881729653026], value: 6 },
  762. { lonlat: [109.54130516400943, 36.63016960226274], value: 6 },
  763. { lonlat: [109.54008425673476, 36.63148291126323], value: 6 },
  764. { lonlat: [109.53755782484959, 36.63369255351504], value: 6 },
  765. { lonlat: [109.53614579982442, 36.6360575522797], value: 6 },
  766. { lonlat: [109.53343812543821, 36.62040741435609], value: 6 },
  767. { lonlat: [109.53580803843838, 36.62277137411824], value: 6 },
  768. { lonlat: [109.54168042409255, 36.62849933558428], value: 6 },
  769. { lonlat: [109.54288050769686, 36.63006645029258], value: 6 },
  770. { lonlat: [109.54573448803326, 36.63312914358253], value: 6 },
  771. { lonlat: [109.54725728319507, 36.636077923401025], value: 6 },
  772. { lonlat: [109.54490753966712, 36.63712470479035], value: 6 },
  773. { lonlat: [109.54219474563702, 36.63804142854716], value: 6 },
  774. { lonlat: [109.53998618841547, 36.636568584052085], value: 6 },
  775. { lonlat: [109.53464796833235, 36.63649472525616], value: 6 },
  776. { lonlat: [109.53531650653413, 36.633497267658136], value: 6 },
  777. { lonlat: [109.52895761991671, 36.63899560790742], value: 6 },
  778. { lonlat: [109.52561492890752, 36.6410855206062], value: 6 },
  779. { lonlat: [109.52130829909568, 36.6436264356986], value: 6 },
  780. { lonlat: [109.51955144289083, 36.64125575007403], value: 6 },
  781. { lonlat: [109.51807443988673, 36.63976209758932], value: 6 },
  782. { lonlat: [109.51690838488348, 36.64107514503131], value: 6 },
  783. { lonlat: [109.51689283748337, 36.643941824018825], value: 6 },
  784. { lonlat: [109.51588225648054, 36.646106775610676], value: 6 },
  785. { lonlat: [109.51409430547558, 36.64724431137258], value: 6 },
  786. { lonlat: [109.51174664806909, 36.646327110237564], value: 6 },
  787. { lonlat: [109.51070497226618, 36.648567165872755], value: 6 },
  788. { lonlat: [109.50978767566362, 36.64972972191704], value: 6 },
  789. { lonlat: [109.51067387746598, 36.650967429494266], value: 6 },
  790. { lonlat: [109.51146679486808, 36.652280284952866], value: 6 },
  791. { lonlat: [109.51191766946926, 36.65361817342491], value: 6 },
  792. { lonlat: [109.51199540646942, 36.65525669873434], value: 6 },
  793. { lonlat: [109.51428087427561, 36.655191468743396], value: 6 },
  794. { lonlat: [109.51460736967644, 36.65357281224559], value: 6 },
  795. { lonlat: [109.51353459907345, 36.65593792955656], value: 6 },
  796. { lonlat: [109.50664710085456, 36.64933312632619], value: 6 },
  797. { lonlat: [109.50327331504526, 36.64723825232908], value: 6 },
  798. { lonlat: [109.50558987765153, 36.64807508399961], value: 28 },
  799. { lonlat: [109.50703578585542, 36.64720800813199], value: 29 },
  800. { lonlat: [109.50596301525242, 36.6462406907215], value: 28 },
  801. { lonlat: [109.50380192664646, 36.647478454644535], value: 6 },
  802. { lonlat: [109.50293172446254, 36.64689822474207], value: 6 },
  803. { lonlat: [109.49977744553338, 36.648514140036085], value: 6 },
  804. { lonlat: [109.49841675260586, 36.64788286957943], value: 5 },
  805. { lonlat: [109.49667830356817, 36.64754979371535], value: 5 },
  806. { lonlat: [109.49480514097309, 36.64623412909707], value: 5 },
  807. { lonlat: [109.49194575265034, 36.64800589561177], value: 5 },
  808. { lonlat: [109.48774678808107, 36.64818660580967], value: 5 },
  809. { lonlat: [109.48778573951488, 36.65030081450137], value: 23 },
  810. { lonlat: [109.49052013017122, 36.65182489248657], value: 34 },
  811. { lonlat: [109.49386216319564, 36.653097849178344], value: 23 },
  812. { lonlat: [109.49541243026289, 36.655375126863646], value: 34 },
  813. { lonlat: [109.49376867975428, 36.65881983304358], value: 5 },
  814. { lonlat: [109.49594216976315, 36.66097140773642], value: 5 },
  815. { lonlat: [109.49674456930045, 36.662419955163955], value: 5 },
  816. { lonlat: [109.49257676587825, 36.66373039429423], value: 5 },
  817. { lonlat: [109.48954634432454, 36.66561822861078], value: 5 },
  818. { lonlat: [109.48265911535468, 36.654995428105366], value: 5 },
  819. { lonlat: [109.47853819629543, 36.65495490425706], value: 5 },
  820. { lonlat: [109.47794031082658, 36.64600156969751], value: 5 },
  821. { lonlat: [109.47947610116441, 36.638089580666374], value: 5 },
  822. { lonlat: [109.48196313342223, 36.63989201277776], value: 5 },
  823. { lonlat: [109.48007581107044, 36.63626409608854], value: 5 },
  824. { lonlat: [109.48312727618112, 36.63616165277856], value: 6 },
  825. { lonlat: [109.48487349031957, 36.63719648127574], value: 5 },
  826. { lonlat: [109.48806606364347, 36.640221454017194], value: 5 },
  827. { lonlat: [109.48968880809531, 36.64396832101501], value: 5 },
  828. { lonlat: [109.49199945508674, 36.64370117513442], value: 5 },
  829. { lonlat: [109.4886481350228, 36.64628232413764], value: 5 },
  830. { lonlat: [109.48693719793754, 36.6481698459415], value: 5 },
  831. { lonlat: [109.49295193552571, 36.64621960689284], value: 6 },
  832. { lonlat: [109.4960034006364, 36.647282727565546], value: 5 },
  833. { lonlat: [109.4991959739603, 36.64675388047846], value: 5 },
  834. { lonlat: [109.50401129173616, 36.64690730406689], value: 5 },
  835. { lonlat: [109.50575750587461, 36.64410416698772], value: 5 },
  836. { lonlat: [109.5035879670964, 36.64221068329797], value: 5 },
  837. { lonlat: [109.49916069690676, 36.63886718707988], value: 5 },
  838. { lonlat: [109.4955447989431, 36.639105918699926], value: 34 },
  839. { lonlat: [109.49207000919266, 36.63564855779099], value: 34 },
  840. { lonlat: [109.48792495542945, 36.63128116433782], value: 23 },
  841. { lonlat: [109.4824393736407, 36.62725474513087], value: 43 },
  842. { lonlat: [109.48350796628219, 36.6240399916917], value: 5 },
  843. { lonlat: [109.47904752109281, 36.617139346998826], value: 5 },
  844. { lonlat: [109.47973483856029, 36.6163530732266], value: 5 },
  845. { lonlat: [109.48169304493001, 36.61519041973535], value: 6 },
  846. { lonlat: [109.48128150577406, 36.61652725739157], value: 5 },
  847. { lonlat: [109.4856636114327, 36.61250054572504], value: 6 },
  848. { lonlat: [109.48669837172288, 36.61390464711184], value: 5 },
  849. { lonlat: [109.48778868961256, 36.61110958729933], value: 5 },
  850. { lonlat: [109.48832343150745, 36.61186423919422], value: 5 },
  851. { lonlat: [109.48855260660523, 36.61062565266084], value: 5 },
  852. { lonlat: [109.49005960649093, 36.60966700183684], value: 5 },
  853. { lonlat: [109.49101103038188, 36.608943504005595], value: 5 },
  854. { lonlat: [109.49269164776588, 36.607944427600174], value: 5 },
  855. { lonlat: [109.49137909947821, 36.60774724442752], value: 5 },
  856. { lonlat: [109.49426114995096, 36.60713571424016], value: 5 },
  857. { lonlat: [109.4965699550399, 36.6053070257893], value: 5 },
  858. { lonlat: [109.49771583052903, 36.60506504012202], value: 5 },
  859. { lonlat: [109.49879225901881, 36.60545019078856], value: 5 },
  860. { lonlat: [109.49911865991568, 36.6049954268223], value: 5 },
  861. { lonlat: [109.50854172185717, 36.60498562319275], value: 5 },
  862. { lonlat: [109.51044938269962, 36.60552218657323], value: 5 },
  863. { lonlat: [109.51212316173265, 36.60707867359568], value: 5 },
  864. { lonlat: [109.51372557809377, 36.60793013404142], value: 5 },
  865. { lonlat: [109.51465329282912, 36.60842590572189], value: 5 },
  866. { lonlat: [109.51604810869001, 36.60896351865908], value: 5 },
  867. { lonlat: [109.51735209933206, 36.609239601548374], value: 6 },
  868. { lonlat: [109.51869501506792, 36.61021656939483], value: 6 },
  869. { lonlat: [109.51997305564743, 36.61025204679149], value: 6 },
  870. { lonlat: [109.52078399510141, 36.610674577473965], value: 6 },
  871. { lonlat: [109.64885541010113, 36.68368750346818], value: 77 },
  872. { lonlat: [109.64418083988407, 36.684106217976854], value: 77 },
  873. { lonlat: [109.65730463327395, 36.68351820161691], value: 6 },
  874. { lonlat: [109.66382903341632, 36.683373146319866], value: 53 },
  875. { lonlat: [109.66365404950439, 36.68117431536967], value: 54 },
  876. { lonlat: [109.66952850940268, 36.687351497043785], value: 56 },
  877. { lonlat: [109.67765276245356, 36.68821312918963], value: 33 },
  878. { lonlat: [109.67907763145014, 36.68818888405842], value: 23 },
  879. { lonlat: [109.67620289575514, 36.68570831505293], value: 34 },
  880. { lonlat: [109.66992847262958, 36.6839122446761], value: 6 },
  881. { lonlat: [109.66315409547013, 36.68135099518023], value: 6 },
  882. { lonlat: [109.68433055291582, 36.68853913721367], value: 6 },
  883. { lonlat: [109.68255571609542, 36.69068926681356], value: 6 },
  884. { lonlat: [109.68633036905133, 36.69126900476532], value: 77 },
  885. { lonlat: [109.68605539433261, 36.69273456341231], value: 77 },
  886. { lonlat: [109.68383059888168, 36.693435078555396], value: 6 },
  887. { lonlat: [109.70500365221739, 36.69928917967537], value: 77 },
  888. { lonlat: [109.70692847524785, 36.69970780952815], value: 77 },
  889. { lonlat: [109.72405190090896, 36.70298488870231], value: 6 },
  890. { lonlat: [109.72712178240528, 36.70196817888451], value: 34 },
  891. { lonlat: [109.72395293859049, 36.701623796200366], value: 34 },
  892. ];
  893. let heatMapJeojson = {};
  894. let heatMapFeatures = [];
  895. heatMapList.forEach(element => {
  896. let heatmap = turf.point(element.lonlat);
  897. heatmap.properties.value = element.value;
  898. gcoord.transform(heatmap, gcoord.BD09, gcoord.WGS84);
  899. heatMapFeatures.push(heatmap);
  900. });
  901. heatMapJeojson = turf.featureCollection(heatMapFeatures);
  902.  
  903. mapBoxVectorLayer.addHeatMapLayer(item2.layerKey, heatMapJeojson, 'value', true);
  904. heatMapJeojson.features.forEach(feature => {
  905. gcoord.transform(feature, gcoord.WGS84, gcoord.BD09);
  906. });
  907. } else {
  908. mapBoxVectorLayer.removeByIds([item2.layerKey]);
  909. bus.emit('SiSeTuBol', false);
  910. }
  911. }
  912. //排水风险
  913. if (item2.layerKey == 'paishuiRisk') {
  914. if (item2.isCheck) {
  915. bus.emit('SiSeTuBol', true);
  916. let heatMapList = [
  917. { lonlat: [109.4583517767791, 36.64045660187989], value: 2 },
  918. { lonlat: [109.45915900059231, 36.639564923076406], value: 1 },
  919. { lonlat: [109.46064074624108, 36.63888888248738], value: 3 },
  920. { lonlat: [109.46175090337006, 36.63763347376713], value: 4 },
  921. { lonlat: [109.46233801013652, 36.63722780459428], value: 5 },
  922. { lonlat: [109.46275737211255, 36.63718265184453], value: 3 },
  923. { lonlat: [109.46340039380915, 36.63601087211503], value: 2 },
  924. { lonlat: [109.4634842662043, 36.639796184662536], value: 3 },
  925. { lonlat: [109.46681120454784, 36.635965630684304], value: 2 },
  926. { lonlat: [109.46751014117459, 36.63303623297878], value: 3 },
  927. { lonlat: [109.46764992849988, 36.63236013419859], value: 4 },
  928. { lonlat: [109.46801337554575, 36.63082773329404], value: 5 },
  929. { lonlat: [109.4677058434299, 36.629971339150515], value: 6 },
  930. { lonlat: [109.46790154568534, 36.62897972679855], value: 4 },
  931. { lonlat: [109.46820907780108, 36.62758246914724], value: 5 },
  932. { lonlat: [109.46846069498666, 36.625914758136716], value: 3 },
  933. { lonlat: [109.46435094762097, 36.63127797375913], value: 3 },
  934. { lonlat: [109.46493805438743, 36.62726670999692], value: 3 },
  935. { lonlat: [109.46518967157303, 36.625959563646546], value: 3 },
  936. { lonlat: [109.45336366384743, 36.6337564188794], value: 3 },
  937. { lonlat: [109.45450991991531, 36.63114241494354], value: 3 },
  938. { lonlat: [109.4557680058435, 36.6292043657803], value: 3 },
  939. { lonlat: [109.4545099199152, 36.62609442354592], value: 3 },
  940. { lonlat: [109.45330774891703, 36.62532758190564], value: 3 },
  941. { lonlat: [109.45825622023474, 36.62505706236186], value: 3 },
  942. { lonlat: [109.46314877662232, 36.62532740431396], value: 3 },
  943. { lonlat: [109.44662591476458, 36.62744565667445], value: 3 },
  944. { lonlat: [109.44139786879603, 36.62974412708136], value: 3 },
  945. { lonlat: [109.43645036088442, 36.63126842378145], value: 3 },
  946. { lonlat: [109.43211670920196, 36.63081469982216], value: 3 },
  947. { lonlat: [109.42868355657039, 36.632810587611026], value: 3 },
  948. { lonlat: [109.41793384915036, 36.634987868433505], value: 3 },
  949. { lonlat: [109.40921026459482, 36.63444344378062], value: 3 },
  950. { lonlat: [109.46858692076272, 36.62110590039618], value: 3 },
  951. { lonlat: [109.47035661856971, 36.61995354263662], value: 3 },
  952. { lonlat: [109.47258171472353, 36.61892777347618], value: 3 },
  953. { lonlat: [109.47334332481641, 36.6208153097412], value: 35 },
  954. { lonlat: [109.47401900156899, 36.620127962636424], value: 45 },
  955. { lonlat: [109.47436575670645, 36.61957709339732], value: 43 },
  956. { lonlat: [109.47556013551343, 36.61923328226432], value: 4 },
  957. { lonlat: [109.47708842667508, 36.61754354976672], value: 5 },
  958. { lonlat: [109.47910474358588, 36.61661993861554], value: 6 },
  959. { lonlat: [109.47944089622014, 36.616364726231225], value: 6 },
  960. { lonlat: [109.47757869270369, 36.615731001159105], value: 6 },
  961. { lonlat: [109.47590065021183, 36.61525895943912], value: 7 },
  962. { lonlat: [109.47548213080846, 36.614904203510264], value: 54 },
  963. { lonlat: [109.47457696093612, 36.61451805927941], value: 34 },
  964. { lonlat: [109.47548213080833, 36.61421038003272], value: 25 },
  965. { lonlat: [109.476835019112, 36.613808538791], value: 34 },
  966. { lonlat: [109.47752606277787, 36.61309282379784], value: 4 },
  967. { lonlat: [109.478197640425, 36.61383660779872], value: 5 },
  968. { lonlat: [109.47888868409086, 36.61442345137025], value: 6 },
  969. { lonlat: [109.47862589283756, 36.61518291568912], value: 4 },
  970. { lonlat: [109.47945319863473, 36.61438874695218], value: 4 },
  971. { lonlat: [109.48037783452571, 36.61392413291535], value: 4 },
  972. { lonlat: [109.48066009179765, 36.613381048298066], value: 4 },
  973. { lonlat: [109.47880108700613, 36.613057670788265], value: 4 },
  974. { lonlat: [109.47672795600828, 36.61215362328269], value: 3 },
  975. { lonlat: [109.47235706714471, 36.608714319110575], value: 4 },
  976. { lonlat: [109.47095953066176, 36.60900989208619], value: 4 },
  977. { lonlat: [109.47242414889578, 36.60820574067667], value: 4 },
  978. { lonlat: [109.47080300657555, 36.60720326624053], value: 4 },
  979. { lonlat: [109.46960671534613, 36.60677769970712], value: 4 },
  980. { lonlat: [109.4667110197535, 36.60586535117448], value: 4 },
  981. { lonlat: [109.46634207012195, 36.60571021211726], value: 4 },
  982. { lonlat: [109.48124809033756, 36.61305208261769], value: 4 },
  983. { lonlat: [109.48183684833916, 36.61249083700314], value: 4 },
  984. { lonlat: [109.48355078829951, 36.611592045362464], value: 4 },
  985. { lonlat: [109.4836162058552, 36.611030788941534], value: 4 },
  986. { lonlat: [109.48472830430275, 36.6098155271458], value: 4 },
  987. { lonlat: [109.4848983899476, 36.60950742186193], value: 4 },
  988. { lonlat: [109.48548714794921, 36.61046512927026], value: 4 },
  989. { lonlat: [109.48597123786165, 36.60922876138633], value: 4 },
  990. { lonlat: [109.48645532777408, 36.60856200129905], value: 4 },
  991. { lonlat: [109.48743659111014, 36.60781084557607], value: 4 },
  992. { lonlat: [109.48792068102257, 36.607355049157874], value: 5 },
  993. { lonlat: [109.48809076666744, 36.60711022678964], value: 5 },
  994. { lonlat: [109.48710950333127, 36.60684430590222], value: 5 },
  995. { lonlat: [109.48636374319577, 36.60624081857617], value: 5 },
  996. { lonlat: [109.48535859229459, 36.605997022060514], value: 28 },
  997. { lonlat: [109.48571114675235, 36.60507741447555], value: 26 },
  998. { lonlat: [109.4869629705518, 36.60486639408042], value: 32 },
  999. { lonlat: [109.48860822468815, 36.60652068303526], value: 43 },
  1000. { lonlat: [109.48959435527298, 36.606639238856765], value: 33 },
  1001. { lonlat: [109.49055507792285, 36.60707599046411], value: 23 },
  1002. { lonlat: [109.49062150122646, 36.606453011511526], value: 43 },
  1003. { lonlat: [109.4906824296868, 36.607181292824684], value: 23 },
  1004. { lonlat: [109.49173098572089, 36.60668830758674], value: 43 },
  1005. { lonlat: [109.49338196262373, 36.60598188730296], value: 56 },
  1006. { lonlat: [109.49414496601992, 36.605639090280604], value: 55 },
  1007. { lonlat: [109.49287133727367, 36.60487615143745], value: 55 },
  1008. { lonlat: [109.49244041494259, 36.604467862285254], value: 55 },
  1009. { lonlat: [109.49361186903214, 36.604247271956666], value: 55 },
  1010. { lonlat: [109.49395592159959, 36.603945994095234], value: 55 },
  1011. { lonlat: [109.49451061859614, 36.603633392114766], value: 55 },
  1012. { lonlat: [109.49505127263073, 36.603150944228496], value: 66 },
  1013. { lonlat: [109.49581661405635, 36.60443486991358], value: 55 },
  1014. { lonlat: [109.49529000298357, 36.604994123879244], value: 66 },
  1015. { lonlat: [109.49460891932945, 36.60451168465817], value: 66 },
  1016. { lonlat: [109.4949529718969, 36.60387072220969], value: 5 },
  1017. { lonlat: [109.4958166140561, 36.60367134909574], value: 5 },
  1018. { lonlat: [109.49568320591762, 36.60269068866781], value: 5 },
  1019. { lonlat: [109.49566916295554, 36.60080859328861], value: 6 },
  1020. { lonlat: [109.49566214147451, 36.60014495272406], value: 6 },
  1021. { lonlat: [109.494840628201, 36.599753070596016], value: 6 },
  1022. { lonlat: [109.4965608910385, 36.60014250723452], value: 6 },
  1023. { lonlat: [109.49708750211117, 36.60052061853767], value: 6 },
  1024. { lonlat: [109.49651876215258, 36.60062696783045], value: 6 },
  1025. { lonlat: [109.49725601765434, 36.60026905844781], value: 6 },
  1026. { lonlat: [109.49813370277548, 36.601100102081844], value: 6 },
  1027. { lonlat: [109.49785284353655, 36.60242247026715], value: 6 },
  1028. { lonlat: [109.49832328276145, 36.60081901303621], value: 6 },
  1029. { lonlat: [109.49783880057448, 36.59967978702087], value: 6 },
  1030. { lonlat: [109.49802838056061, 36.599299226039754], value: 6 },
  1031. { lonlat: [109.49848477682357, 36.59905454638016], value: 6 },
  1032. { lonlat: [109.49689090064342, 36.59891177851914], value: 6 },
  1033. { lonlat: [109.4978247576123, 36.59752340035382], value: 6 },
  1034. { lonlat: [109.49701728730074, 36.596542660729575], value: 6 },
  1035. { lonlat: [109.49685645137883, 36.595212452415], value: 6 },
  1036. { lonlat: [109.49616132476278, 36.59372208751017], value: 6 },
  1037. { lonlat: [109.497713072057, 36.59436068924544], value: 6 },
  1038. { lonlat: [109.49829530434499, 36.59627757677923], value: 7 },
  1039. { lonlat: [109.49801374925752, 36.593942855465386], value: 7 },
  1040. { lonlat: [109.49621402796436, 36.59244561043963], value: 7 },
  1041. { lonlat: [109.49611930579097, 36.591341185842126], value: 7 },
  1042. { lonlat: [109.49618696448614, 36.58984388974645], value: 7 },
  1043. { lonlat: [109.49579789965442, 36.589368310214226], value: 7 },
  1044. { lonlat: [109.4920496079386, 36.58885313566361], value: 7 },
  1045. { lonlat: [109.48960036317119, 36.588970902925006], value: 7 },
  1046. { lonlat: [109.48761119753136, 36.58913232115246], value: 7 },
  1047. { lonlat: [109.48470187363641, 36.58831158443507], value: 7 },
  1048. { lonlat: [109.48200905756617, 36.589389680113165], value: 56 },
  1049. { lonlat: [109.48023639975108, 36.58902015763719], value: 7 },
  1050. { lonlat: [109.47394414109459, 36.58837402615219], value: 80 },
  1051. { lonlat: [109.4728480702318, 36.59023783394082], value: 78 },
  1052. { lonlat: [109.46961398459973, 36.588434956116345], value: 77 },
  1053. { lonlat: [109.46908624677688, 36.587439603702165], value: 55 },
  1054. { lonlat: [109.4652161694096, 36.58760966434236], value: 7 },
  1055. { lonlat: [109.46463430463056, 36.58702899938492], value: 55 },
  1056. { lonlat: [109.46321347203066, 36.585073258863616], value: 7 },
  1057. { lonlat: [109.46482374897708, 36.583968727419084], value: 7 },
  1058. { lonlat: [109.46692116852915, 36.58347534338372], value: 55 },
  1059. { lonlat: [109.4688020802565, 36.58344032845259], value: 55 },
  1060. { lonlat: [109.47236092762554, 36.58305607754432], value: 66 },
  1061. { lonlat: [109.47351112544439, 36.58086012847229], value: 55 },
  1062. { lonlat: [109.47357878413955, 36.58486317336802], value: 5 },
  1063. { lonlat: [109.46054812145172, 36.592050037038575], value: 55 },
  1064. { lonlat: [109.45958516192611, 36.59014334083254], value: 45 },
  1065. { lonlat: [109.441690631703, 36.574861874203556], value: 45 },
  1066. { lonlat: [109.44624550826747, 36.57378190194129], value: 7 },
  1067. { lonlat: [109.4509010450875, 36.57331087985171], value: 7 },
  1068. { lonlat: [109.45600955305757, 36.573692403602315], value: 7 },
  1069. { lonlat: [109.45623603863253, 36.573058990448956], value: 7 },
  1070. { lonlat: [109.46174718762488, 36.57201959088281], value: 7 },
  1071. { lonlat: [109.46564777252813, 36.57459338262966], value: 7 },
  1072. { lonlat: [109.47100793113714, 36.57481251327233], value: 7 },
  1073. { lonlat: [109.47073111543428, 36.57287999199309], value: 7 },
  1074. { lonlat: [109.47181321318158, 36.57139400720595], value: 7 },
  1075. { lonlat: [109.47722370191836, 36.57685016603991], value: 7 },
  1076. { lonlat: [109.48097329643825, 36.57962676684916], value: 7 },
  1077. { lonlat: [109.49076250629228, 36.580657760474004], value: 7 },
  1078. { lonlat: [109.4908883316117, 36.57815705967815], value: 7 },
  1079. { lonlat: [109.48588048389708, 36.575696873317725], value: 7 },
  1080. { lonlat: [109.48555333806642, 36.57234345586721], value: 7 },
  1081. { lonlat: [109.48462223070236, 36.57114165197099], value: 7 },
  1082. { lonlat: [109.48494937653292, 36.569168438097215], value: 7 },
  1083. { lonlat: [109.48789368900827, 36.568575587318655], value: 7 },
  1084. { lonlat: [109.48701291177198, 36.56741432474017], value: 77 },
  1085. { lonlat: [109.48668576594132, 36.565197403953434], value: 77 },
  1086. { lonlat: [109.48661027074958, 36.56200594032002], value: 77 },
  1087. { lonlat: [109.48643411530227, 36.55950462918852], value: 7 },
  1088. { lonlat: [109.47872714141864, 36.55363535583412], value: 7 },
  1089. { lonlat: [109.47752130169793, 36.55237880798815], value: 7 },
  1090. { lonlat: [109.47659108248483, 36.550399478960415], value: 7 },
  1091. { lonlat: [109.47531633763725, 36.54680772057538], value: 7 },
  1092. { lonlat: [109.47714232349988, 36.538378228993835], value: 7 },
  1093. { lonlat: [109.47628100941364, 36.53678778825302], value: 7 },
  1094. { lonlat: [109.49119798128915, 36.57421937037934], value: 7 },
  1095. { lonlat: [109.49316811330803, 36.5763548006588], value: 7 },
  1096. { lonlat: [109.49201320833134, 36.5772533638739], value: 7 },
  1097. { lonlat: [109.49206173375048, 36.57869986536457], value: 7 },
  1098. { lonlat: [109.49288666587658, 36.57962971205523], value: 7 },
  1099. { lonlat: [109.4948373877278, 36.579792436760556], value: 7 },
  1100. { lonlat: [109.49405127593694, 36.581677232061956], value: 7 },
  1101. { lonlat: [109.49497325890142, 36.582200016243696], value: 7 },
  1102. { lonlat: [109.49599229270427, 36.581908742939454], value: 7 },
  1103. { lonlat: [109.49642902147689, 36.583276883316856], value: 56 },
  1104. { lonlat: [109.49692398075254, 36.58497374115537], value: 4 },
  1105. { lonlat: [109.49697250617166, 36.58646705928871], value: 4 },
  1106. { lonlat: [109.49781684846545, 36.58750638888238], value: 4 },
  1107. { lonlat: [109.49951870129331, 36.59430380170364], value: 3 },
  1108. { lonlat: [109.49965804385573, 36.59486501809594], value: 65 },
  1109. { lonlat: [109.49988842408676, 36.59649457072071], value: 76 },
  1110. { lonlat: [109.50008437575242, 36.59732109333835], value: 64 },
  1111. { lonlat: [109.49935516493218, 36.59831527959685], value: 43 },
  1112. { lonlat: [109.50060236752009, 36.60104441193055], value: 45 },
  1113. { lonlat: [109.50126321265897, 36.60358057739102], value: 23 },
  1114. { lonlat: [109.49942472380532, 36.604173438687546], value: 34 },
  1115. { lonlat: [109.5007026398301, 36.60501144006829], value: 6 },
  1116. { lonlat: [109.49901617072663, 36.605443415517875], value: 5 },
  1117. { lonlat: [109.50014206700124, 36.6054693718935], value: 5 },
  1118. { lonlat: [109.50184753857336, 36.6066137836571], value: 6 },
  1119. { lonlat: [109.50264089164449, 36.606042210978295], value: 6 },
  1120. { lonlat: [109.50362426940333, 36.606627392739135], value: 6 },
  1121. { lonlat: [109.5029639336135, 36.60551750543657], value: 6 },
  1122. { lonlat: [109.50313970644957, 36.60497656754981], value: 6 },
  1123. { lonlat: [109.50333489978382, 36.60424830824475], value: 6 },
  1124. { lonlat: [109.50498336394963, 36.60554595245176], value: 6 },
  1125. { lonlat: [109.5062137738025, 36.60733384990011], value: 6 },
  1126. { lonlat: [109.50681710218589, 36.607903700917404], value: 6 },
  1127. { lonlat: [109.5058527268957, 36.60992901196387], value: 6 },
  1128. { lonlat: [109.50458431210518, 36.61083589220665], value: 6 },
  1129. { lonlat: [109.5035629294087, 36.61163552050199], value: 6 },
  1130. { lonlat: [109.50728675442862, 36.60816923300994], value: 6 },
  1131. { lonlat: [109.50862770454853, 36.60957898993155], value: 6 },
  1132. { lonlat: [109.50900738849452, 36.611329111002924], value: 6 },
  1133. { lonlat: [109.5087728725542, 36.61263215550033], value: 6 },
  1134. { lonlat: [109.51196589727925, 36.61287834022912], value: 6 },
  1135. { lonlat: [109.51194785759148, 36.614481923277204], value: 6 },
  1136. { lonlat: [109.5131805695851, 36.614291799340485], value: 6 },
  1137. { lonlat: [109.51506271033638, 36.61535240611497], value: 6 },
  1138. { lonlat: [109.51550167607066, 36.616878374906946], value: 6 },
  1139. { lonlat: [109.5174078697389, 36.6167755151019], value: 6 },
  1140. { lonlat: [109.51728159192487, 36.61817541867955], value: 6 },
  1141. { lonlat: [109.51805729849644, 36.61931353190943], value: 6 },
  1142. { lonlat: [109.52015591550028, 36.61910403021254], value: 6 },
  1143. { lonlat: [109.52326378422758, 36.618323942249155], value: 6 },
  1144. { lonlat: [109.52535504124248, 36.621157617292155], value: 6 },
  1145. { lonlat: [109.52708365253223, 36.622782899894624], value: 6 },
  1146. { lonlat: [109.53062549244765, 36.62553845807305], value: 6 },
  1147. { lonlat: [109.53329698262276, 36.62472766573882], value: 6 },
  1148. { lonlat: [109.53529153411093, 36.62401430655811], value: 6 },
  1149. { lonlat: [109.53622232480538, 36.62273577119326], value: 6 },
  1150. { lonlat: [109.53555747430924, 36.62184699338395], value: 6 },
  1151. { lonlat: [109.5376787067582, 36.627153166827114], value: 6 },
  1152. { lonlat: [109.53979414015477, 36.62881729653026], value: 6 },
  1153. { lonlat: [109.54130516400943, 36.63016960226274], value: 6 },
  1154. { lonlat: [109.54008425673476, 36.63148291126323], value: 6 },
  1155. { lonlat: [109.53755782484959, 36.63369255351504], value: 6 },
  1156. { lonlat: [109.53614579982442, 36.6360575522797], value: 6 },
  1157. { lonlat: [109.53343812543821, 36.62040741435609], value: 6 },
  1158. { lonlat: [109.53580803843838, 36.62277137411824], value: 6 },
  1159. { lonlat: [109.54168042409255, 36.62849933558428], value: 6 },
  1160. { lonlat: [109.54288050769686, 36.63006645029258], value: 6 },
  1161. { lonlat: [109.54573448803326, 36.63312914358253], value: 6 },
  1162. { lonlat: [109.54725728319507, 36.636077923401025], value: 6 },
  1163. { lonlat: [109.54490753966712, 36.63712470479035], value: 6 },
  1164. { lonlat: [109.54219474563702, 36.63804142854716], value: 6 },
  1165. { lonlat: [109.53998618841547, 36.636568584052085], value: 6 },
  1166. { lonlat: [109.53464796833235, 36.63649472525616], value: 6 },
  1167. { lonlat: [109.53531650653413, 36.633497267658136], value: 6 },
  1168. { lonlat: [109.52895761991671, 36.63899560790742], value: 6 },
  1169. { lonlat: [109.52561492890752, 36.6410855206062], value: 6 },
  1170. { lonlat: [109.52130829909568, 36.6436264356986], value: 6 },
  1171. { lonlat: [109.51955144289083, 36.64125575007403], value: 6 },
  1172. { lonlat: [109.51807443988673, 36.63976209758932], value: 6 },
  1173. { lonlat: [109.51690838488348, 36.64107514503131], value: 6 },
  1174. { lonlat: [109.51689283748337, 36.643941824018825], value: 6 },
  1175. { lonlat: [109.51588225648054, 36.646106775610676], value: 6 },
  1176. { lonlat: [109.51409430547558, 36.64724431137258], value: 6 },
  1177. { lonlat: [109.51174664806909, 36.646327110237564], value: 6 },
  1178. { lonlat: [109.51070497226618, 36.648567165872755], value: 6 },
  1179. { lonlat: [109.50978767566362, 36.64972972191704], value: 6 },
  1180. { lonlat: [109.51067387746598, 36.650967429494266], value: 6 },
  1181. { lonlat: [109.51146679486808, 36.652280284952866], value: 6 },
  1182. { lonlat: [109.51191766946926, 36.65361817342491], value: 6 },
  1183. { lonlat: [109.51199540646942, 36.65525669873434], value: 6 },
  1184. { lonlat: [109.51428087427561, 36.655191468743396], value: 6 },
  1185. { lonlat: [109.51460736967644, 36.65357281224559], value: 6 },
  1186. { lonlat: [109.51353459907345, 36.65593792955656], value: 6 },
  1187. { lonlat: [109.50664710085456, 36.64933312632619], value: 6 },
  1188. { lonlat: [109.50327331504526, 36.64723825232908], value: 6 },
  1189. { lonlat: [109.50558987765153, 36.64807508399961], value: 28 },
  1190. { lonlat: [109.50703578585542, 36.64720800813199], value: 29 },
  1191. { lonlat: [109.50596301525242, 36.6462406907215], value: 28 },
  1192. { lonlat: [109.50380192664646, 36.647478454644535], value: 6 },
  1193. { lonlat: [109.50293172446254, 36.64689822474207], value: 6 },
  1194. { lonlat: [109.49977744553338, 36.648514140036085], value: 6 },
  1195. { lonlat: [109.49841675260586, 36.64788286957943], value: 5 },
  1196. { lonlat: [109.49667830356817, 36.64754979371535], value: 5 },
  1197. { lonlat: [109.49480514097309, 36.64623412909707], value: 5 },
  1198. { lonlat: [109.49194575265034, 36.64800589561177], value: 5 },
  1199. { lonlat: [109.48774678808107, 36.64818660580967], value: 5 },
  1200. { lonlat: [109.48778573951488, 36.65030081450137], value: 23 },
  1201. { lonlat: [109.49052013017122, 36.65182489248657], value: 34 },
  1202. { lonlat: [109.49386216319564, 36.653097849178344], value: 23 },
  1203. { lonlat: [109.49541243026289, 36.655375126863646], value: 34 },
  1204. { lonlat: [109.49376867975428, 36.65881983304358], value: 5 },
  1205. { lonlat: [109.49594216976315, 36.66097140773642], value: 5 },
  1206. { lonlat: [109.49674456930045, 36.662419955163955], value: 5 },
  1207. { lonlat: [109.49257676587825, 36.66373039429423], value: 5 },
  1208. { lonlat: [109.48954634432454, 36.66561822861078], value: 5 },
  1209. { lonlat: [109.48265911535468, 36.654995428105366], value: 5 },
  1210. { lonlat: [109.47853819629543, 36.65495490425706], value: 5 },
  1211. { lonlat: [109.47794031082658, 36.64600156969751], value: 5 },
  1212. { lonlat: [109.47947610116441, 36.638089580666374], value: 65 },
  1213. { lonlat: [109.48196313342223, 36.63989201277776], value: 66 },
  1214. { lonlat: [109.48007581107044, 36.63626409608854], value: 45 },
  1215. { lonlat: [109.48312727618112, 36.63616165277856], value: 43 },
  1216. { lonlat: [109.48487349031957, 36.63719648127574], value: 23 },
  1217. { lonlat: [109.48806606364347, 36.640221454017194], value: 65 },
  1218. { lonlat: [109.48968880809531, 36.64396832101501], value: 66 },
  1219. { lonlat: [109.49199945508674, 36.64370117513442], value: 77 },
  1220. { lonlat: [109.4886481350228, 36.64628232413764], value: 5 },
  1221. { lonlat: [109.48693719793754, 36.6481698459415], value: 5 },
  1222. { lonlat: [109.49295193552571, 36.64621960689284], value: 6 },
  1223. { lonlat: [109.4960034006364, 36.647282727565546], value: 5 },
  1224. { lonlat: [109.4991959739603, 36.64675388047846], value: 5 },
  1225. { lonlat: [109.50401129173616, 36.64690730406689], value: 5 },
  1226. { lonlat: [109.50575750587461, 36.64410416698772], value: 5 },
  1227. { lonlat: [109.5035879670964, 36.64221068329797], value: 5 },
  1228. { lonlat: [109.49916069690676, 36.63886718707988], value: 5 },
  1229. { lonlat: [109.4955447989431, 36.639105918699926], value: 34 },
  1230. { lonlat: [109.49207000919266, 36.63564855779099], value: 34 },
  1231. { lonlat: [109.48792495542945, 36.63128116433782], value: 23 },
  1232. { lonlat: [109.4824393736407, 36.62725474513087], value: 43 },
  1233. { lonlat: [109.48350796628219, 36.6240399916917], value: 5 },
  1234. { lonlat: [109.47904752109281, 36.617139346998826], value: 5 },
  1235. { lonlat: [109.47973483856029, 36.6163530732266], value: 5 },
  1236. { lonlat: [109.48169304493001, 36.61519041973535], value: 6 },
  1237. { lonlat: [109.48128150577406, 36.61652725739157], value: 5 },
  1238. { lonlat: [109.4856636114327, 36.61250054572504], value: 6 },
  1239. { lonlat: [109.48669837172288, 36.61390464711184], value: 5 },
  1240. { lonlat: [109.48778868961256, 36.61110958729933], value: 5 },
  1241. { lonlat: [109.48832343150745, 36.61186423919422], value: 5 },
  1242. { lonlat: [109.48855260660523, 36.61062565266084], value: 5 },
  1243. { lonlat: [109.49005960649093, 36.60966700183684], value: 5 },
  1244. { lonlat: [109.49101103038188, 36.608943504005595], value: 5 },
  1245. { lonlat: [109.49269164776588, 36.607944427600174], value: 5 },
  1246. { lonlat: [109.49137909947821, 36.60774724442752], value: 5 },
  1247. { lonlat: [109.49426114995096, 36.60713571424016], value: 5 },
  1248. { lonlat: [109.4965699550399, 36.6053070257893], value: 5 },
  1249. { lonlat: [109.49771583052903, 36.60506504012202], value: 5 },
  1250. { lonlat: [109.49879225901881, 36.60545019078856], value: 5 },
  1251. { lonlat: [109.49911865991568, 36.6049954268223], value: 5 },
  1252. { lonlat: [109.50854172185717, 36.60498562319275], value: 5 },
  1253. { lonlat: [109.51044938269962, 36.60552218657323], value: 5 },
  1254. { lonlat: [109.51212316173265, 36.60707867359568], value: 5 },
  1255. { lonlat: [109.51372557809377, 36.60793013404142], value: 5 },
  1256. { lonlat: [109.51465329282912, 36.60842590572189], value: 5 },
  1257. { lonlat: [109.51604810869001, 36.60896351865908], value: 5 },
  1258. { lonlat: [109.51735209933206, 36.609239601548374], value: 6 },
  1259. { lonlat: [109.51869501506792, 36.61021656939483], value: 6 },
  1260. { lonlat: [109.51997305564743, 36.61025204679149], value: 6 },
  1261. { lonlat: [109.52078399510141, 36.610674577473965], value: 6 },
  1262. { lonlat: [109.64885541010113, 36.68368750346818], value: 77 },
  1263. { lonlat: [109.64418083988407, 36.684106217976854], value: 77 },
  1264. { lonlat: [109.65730463327395, 36.68351820161691], value: 6 },
  1265. { lonlat: [109.66382903341632, 36.683373146319866], value: 53 },
  1266. { lonlat: [109.66365404950439, 36.68117431536967], value: 54 },
  1267. { lonlat: [109.66952850940268, 36.687351497043785], value: 56 },
  1268. { lonlat: [109.67765276245356, 36.68821312918963], value: 33 },
  1269. { lonlat: [109.67907763145014, 36.68818888405842], value: 23 },
  1270. { lonlat: [109.67620289575514, 36.68570831505293], value: 34 },
  1271. { lonlat: [109.66992847262958, 36.6839122446761], value: 6 },
  1272. { lonlat: [109.66315409547013, 36.68135099518023], value: 6 },
  1273. { lonlat: [109.68433055291582, 36.68853913721367], value: 6 },
  1274. { lonlat: [109.68255571609542, 36.69068926681356], value: 6 },
  1275. { lonlat: [109.68633036905133, 36.69126900476532], value: 77 },
  1276. { lonlat: [109.68605539433261, 36.69273456341231], value: 77 },
  1277. { lonlat: [109.68383059888168, 36.693435078555396], value: 6 },
  1278. { lonlat: [109.70500365221739, 36.69928917967537], value: 77 },
  1279. { lonlat: [109.70692847524785, 36.69970780952815], value: 77 },
  1280. { lonlat: [109.72405190090896, 36.70298488870231], value: 6 },
  1281. { lonlat: [109.72712178240528, 36.70196817888451], value: 34 },
  1282. { lonlat: [109.72395293859049, 36.701623796200366], value: 34 },
  1283. ];
  1284. let heatMapJeojson = {};
  1285. let heatMapFeatures = [];
  1286. heatMapList.forEach(element => {
  1287. let heatmap = turf.point(element.lonlat);
  1288. heatmap.properties.value = element.value;
  1289. gcoord.transform(heatmap, gcoord.BD09, gcoord.WGS84);
  1290. heatMapFeatures.push(heatmap);
  1291. });
  1292. heatMapJeojson = turf.featureCollection(heatMapFeatures);
  1293. mapBoxVectorLayer.addHeatMapLayer(item2.layerKey, heatMapJeojson, 'value', true);
  1294. heatMapJeojson.features.forEach(feature => {
  1295. gcoord.transform(feature, gcoord.WGS84, gcoord.BD09);
  1296. });
  1297. } else {
  1298. mapBoxVectorLayer.removeByIds([item2.layerKey]);
  1299. bus.emit('SiSeTuBol', false);
  1300. }
  1301. }
  1302. //切换视角
  1303. if (item2.layerName.includes('视角')) {
  1304. AllData.LayerData[0]['children'][5].layerVisible = false;
  1305. AllData.LayerData[0]['children'][6].layerVisible = false;
  1306. AllData.LayerData[0]['children'][7].layerVisible = false;
  1307. AllData.LayerData[0]['children'][8].layerVisible = false;
  1308. item2.layerVisible = !item2.layerVisible;
  1309. item2.isCheck = item2.layerVisible;
  1310. newfiberMapbox.map.easeTo({
  1311. center: item2.lonlat,
  1312. zoom: item2.zoom,
  1313. bearing: item2.bearing,
  1314. pitch: item2.pitch,
  1315. });
  1316. if (item2.layerName == '燃气视角') {
  1317. bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: true });
  1318. bus.emit('setLayerVisible', { layername: 'sx_ya_smx_rq_line_sz', isCheck: true });
  1319. bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: true });
  1320. bus.emit('setLayerVisible', { layername: 'sx_ya_smx_rq_line_zg', isCheck: true });
  1321. } else {
  1322. bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
  1323. bus.emit('setLayerVisible', { layername: 'sx_ya_smx_rq_line_sz', isCheck: false });
  1324. bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
  1325. bus.emit('setLayerVisible', { layername: 'sx_ya_smx_rq_line_zg', isCheck: false });
  1326. }
  1327. }
  1328. //切换地图
  1329. if (item2.layerKey == 'whiteMap') {
  1330. AllData.LayerData[0]['children'][0].layerVisible = false;
  1331. AllData.LayerData[0]['children'][2].layerVisible = false;
  1332. let { data } = await axios.get('/static/libs/mapbox/style/customs/whiteMapStyle.json');
  1333. let newMapStyle;
  1334. let oldMapStyle = newfiberMapbox.map.getStyle();
  1335. let oldIds = [];
  1336. oldMapStyle.layers.forEach(layer => {
  1337. oldIds.push(layer.id);
  1338. });
  1339. let newIds = data.layers.map(i => i.id);
  1340. oldIds.forEach(id => {
  1341. let layer = data.layers[newIds.indexOf(id)];
  1342. if (!layer) return;
  1343. Object.keys(layer.layout || {}).forEach(key => newfiberMapbox.map.setLayoutProperty(id, key, layer.layout[key]));
  1344. Object.keys(layer.paint || {}).forEach(key => newfiberMapbox.map.setPaintProperty(id, key, layer.paint[key]));
  1345. });
  1346. newfiberMapbox.map.setLayoutProperty('newfiber-XYZLayer', 'visibility', 'none');
  1347. }
  1348. if (item2.layerKey == 'blackMap') {
  1349. AllData.LayerData[0]['children'][1].layerVisible = false;
  1350. AllData.LayerData[0]['children'][2].layerVisible = false;
  1351. let { data } = await axios.get('/static/libs/mapbox/style/customs/night-style.json');
  1352. let newMapStyle;
  1353. let oldMapStyle = newfiberMapbox.map.getStyle();
  1354. let oldIds = [];
  1355. oldMapStyle.layers.forEach(layer => {
  1356. oldIds.push(layer.id);
  1357. });
  1358. let newIds = data.layers.map(i => i.id);
  1359. oldIds.forEach(id => {
  1360. let layer = data.layers[newIds.indexOf(id)];
  1361. if (!layer) return;
  1362. Object.keys(layer.layout || {}).forEach(key => newfiberMapbox.map.setLayoutProperty(id, key, layer.layout[key]));
  1363. Object.keys(layer.paint || {}).forEach(key => newfiberMapbox.map.setPaintProperty(id, key, layer.paint[key]));
  1364. });
  1365. newfiberMapbox.map.setLayoutProperty('newfiber-XYZLayer', 'visibility', 'none');
  1366. }
  1367. if (item2.layerKey == 'imageMap') {
  1368. AllData.LayerData[0]['children'][0].layerVisible = false;
  1369. AllData.LayerData[0]['children'][1].layerVisible = false;
  1370. newfiberMapbox.map.setLayoutProperty('newfiber-XYZLayer', 'visibility', 'visible');
  1371. newfiberMapbox.map.moveLayer('newfiber-XYZLayer', 'buildingLayer', 'buildingLayer-top');
  1372. }
  1373. //分区类图层
  1374. if (item2.areaData) {
  1375. if (item2.isCheck) {
  1376. mapBoxVectorLayer.addGeojsonPolygonWithLabel(item2.layerKey, item2.areaData);
  1377. } else {
  1378. mapBoxVectorLayer.removeByIds([item2.layerKey, item2.layerKey + '_label']);
  1379. }
  1380. }
  1381. //三维建筑
  1382. if (item2.layerKey == 'buildingLayer') {
  1383. if (item2.isCheck) {
  1384. newfiberMapbox.map.setLayoutProperty('buildingLayer', 'visibility', 'visible');
  1385. newfiberMapbox.map.setLayoutProperty('buildingLayer-top', 'visibility', 'visible');
  1386. } else {
  1387. newfiberMapbox.map.setLayoutProperty('buildingLayer', 'visibility', 'none');
  1388. newfiberMapbox.map.setLayoutProperty('buildingLayer-top', 'visibility', 'none');
  1389. }
  1390. }
  1391. //河堤岸线
  1392. if (item2.lineWithLabel) {
  1393. if (item2.isCheck) {
  1394. mapBoxVectorLayer.addGeojsonLineWithLabel(item2.layerKey, item2.lineWithLabel);
  1395. if (item2.layerKey == 'fangHongWater') {
  1396. let layer = new mapboxL7.LineLayer({
  1397. name: 'fangHongWater',
  1398. })
  1399. .source(item2.lineWithLabel)
  1400. .size(3)
  1401. .shape('line')
  1402. .texture('arrow')
  1403. .color('rgba(243, 26, 237,1)')
  1404. .animate({
  1405. interval: 2, // 间隔
  1406. duration: 3, // 持续时间,延时
  1407. trailLength: 3, // 流线长度
  1408. })
  1409. .style({
  1410. opacity: 0.8,
  1411. lineTexture: true, // 开启线的贴图功能
  1412. iconStep: 200, // 设置贴图纹理的间距
  1413. borderWidth: 0.4, // 默认文 0,最大有效值为 0.5
  1414. borderColor: '#fff', // 默认为 #ccc
  1415. });
  1416. newfiberMapbox.addLayer(layer);
  1417. }
  1418. } else {
  1419. mapBoxVectorLayer.removeByIds([item2.layerKey, item2.layerKey + '_label']);
  1420. if (newfiberMapbox.getLayerByName('fangHongWater')) {
  1421. newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('fangHongWater'));
  1422. }
  1423. }
  1424. }
  1425. //路网
  1426. if (item2.layerKey == 'road') {
  1427. if (item2.isCheck) {
  1428. if (newfiberMapbox.getLayerByName('dynamicRoad')) {
  1429. newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('dynamicRoad'));
  1430. }
  1431. let layer = new mapboxL7.LineLayer({
  1432. name: 'dynamicRoad',
  1433. })
  1434. .source(item2.dynamicLineData)
  1435. .size(1.3)
  1436. .shape('line')
  1437. .color('rgb(184, 184, 184)')
  1438. .animate({
  1439. interval: 1, // 间隔
  1440. duration: 1.5, // 持续时间,延时
  1441. trailLength: 2, // 流线长度
  1442. })
  1443. .style({
  1444. opacity: 0.6,
  1445. });
  1446. newfiberMapbox.addLayer(layer);
  1447. } else {
  1448. newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('dynamicRoad'));
  1449. }
  1450. }
  1451. //水系
  1452. if (item2.layerKey == 'waterLake') {
  1453. if (item2.isCheck) {
  1454. if (newfiberMapbox.getLayerByName('waterLake')) {
  1455. newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('waterLake'));
  1456. }
  1457. let layer = new mapboxL7.LineLayer({
  1458. name: 'waterLake',
  1459. })
  1460. .source(item2.dynamicLineData)
  1461. .size(4)
  1462. .shape('line')
  1463. .texture('arrow')
  1464. .color('aqua')
  1465. .animate({
  1466. interval: 2, // 间隔
  1467. duration: 3, // 持续时间,延时
  1468. trailLength: 3, // 流线长度
  1469. })
  1470. .style({
  1471. opacity: 0.8,
  1472. lineTexture: true, // 开启线的贴图功能
  1473. iconStep: 200, // 设置贴图纹理的间距
  1474. borderWidth: 0.4, // 默认文 0,最大有效值为 0.5
  1475. borderColor: '#fff', // 默认为 #ccc
  1476. });
  1477. newfiberMapbox.addLayer(layer);
  1478. } else {
  1479. newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('waterLake'));
  1480. }
  1481. }
  1482. //仿真地图
  1483. if (item2.layerKey == 'fangZhenMap') {
  1484. if (item2.isCheck) {
  1485. mapBoxVectorLayer.load3DTiles();
  1486. AllData.LayerData[0]['children'][4].layerVisible = false;
  1487. newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('testProjection'));
  1488. mapBoxVectorLayer.removeByIds(['testProjection']);
  1489. } else {
  1490. mapBoxVectorLayer.remove3Dtiles();
  1491. }
  1492. }
  1493. //中心城区
  1494. if (item2.layerKey == 'centerCity') {
  1495. if (item2.isCheck) {
  1496. mapBoxVectorLayer.addGeojsonLine('centerCity', item2.dynamicLineData, 4, 1, 0.5);
  1497. } else {
  1498. mapBoxVectorLayer.removeByIds(['centerCity']);
  1499. }
  1500. }
  1501. };
  1502. onMounted(() => {
  1503. // 清除所有的图层选中
  1504. bus.on('clearAllLayer', () => {
  1505. AllData.LayerData.forEach(data => {
  1506. data.children.map(item => {
  1507. // item.layerVisible = true;
  1508. // 做优化,全局为True,再执行隐藏工作,页面调用api太多了,这里应该只将展示的图层进行取消操作就行
  1509. item.layerVisible ? layerClick(item) : '';
  1510. });
  1511. });
  1512.  
  1513. bus.emit('SiSeTuBol', false);
  1514. });
  1515.  
  1516. /**控制图层的显示
  1517. *@param LayerArraya:需要打开的图层名称,示例:["路网","中心城区"]
  1518. */
  1519. bus.on('SetLayerShow', LayerArraya => {
  1520. AllData.LayerData.forEach(data => {
  1521. data.children.map(item => {
  1522. LayerArraya.includes(item.layerName) ? layerClick(item) : '';
  1523. });
  1524. });
  1525. });
  1526. });
  1527. onBeforeUnmount(() => {
  1528. bus.off('clearAllLayer');
  1529. bus.off('SetLayerShow');
  1530. });
  1531. </script>
  1532.  
  1533. <style lang="scss" scoped>
  1534. .LayerControl {
  1535. width: 190px;
  1536. height: 688px;
  1537. position: absolute;
  1538. top: 150px;
  1539. right: 476px;
  1540. background: url('@/assets/images/Sponge_screen/TuChengBG.png') no-repeat center;
  1541. background-size: contain;
  1542. box-sizing: border-box;
  1543. padding: 25px 0px;
  1544. overflow: auto;
  1545. z-index: 998;
  1546.  
  1547. .GroupBox {
  1548. width: 100%;
  1549. height: auto;
  1550. margin-bottom: 5px;
  1551.  
  1552. .GroupName {
  1553. width: 190px;
  1554. height: 25px;
  1555. line-height: 25px;
  1556. background-image: url('@/assets/images/Sponge_screen/TuChengFenZuBG.png'),
  1557. linear-gradient(to right, #1c899600, #1c8996, #1c899600);
  1558. background-repeat: no-repeat;
  1559. background-position: center;
  1560. background-size: contain;
  1561. font-family: Source Han Sans CN;
  1562. font-weight: 500;
  1563. font-size: 14px;
  1564. color: #ffffff;
  1565. text-align: center;
  1566. cursor: pointer;
  1567. }
  1568. .TCListBox {
  1569. width: 100%;
  1570. height: auto;
  1571. .TCList {
  1572. width: 100%;
  1573. height: 14px;
  1574. margin-top: 10px;
  1575. display: flex;
  1576. color: #fff;
  1577. cursor: pointer;
  1578. flex-direction: row;
  1579. flex-wrap: nowrap;
  1580. align-content: center;
  1581. justify-content: flex-start;
  1582. align-items: center;
  1583. box-sizing: border-box;
  1584. padding-left: 20px;
  1585.  
  1586. .TCList_Select {
  1587. width: 14px;
  1588. height: 14px;
  1589. box-sizing: border-box;
  1590. border: 1px solid #fff;
  1591. }
  1592. .TCList_Icon {
  1593. width: 14px;
  1594. height: 14px;
  1595. margin: 0 10px;
  1596. }
  1597. .TCList_Name {
  1598. font-family: Source Han Sans CN;
  1599. font-weight: 500;
  1600. font-size: 14px;
  1601. height: 14px;
  1602. line-height: 14px;
  1603. }
  1604. }
  1605. .TCList_Check {
  1606. color: #12f3ff;
  1607. .TCList_Select {
  1608. border: 1px solid #12f3ff;
  1609. }
  1610. }
  1611. }
  1612. }
  1613. }
  1614. .TuChengImgTrue {
  1615. transform: translateX(460px);
  1616. transition: all 1s ease;
  1617. }
  1618. .TuChengImgFalse {
  1619. transform: translateX(0px);
  1620. transition: all 1s ease;
  1621. }
  1622. // 动画
  1623. /*
  1624. 进入和离开动画可以使用不同
  1625. 持续时间和速度曲线。
  1626. */
  1627. .slideTC-enter-active,
  1628. .slideTC-leave-active {
  1629. transition: all 0.2s ease-out;
  1630. }
  1631.  
  1632. .slideTC-enter-from,
  1633. .slideTC-leave-to {
  1634. height: 0px;
  1635. opacity: 0;
  1636. }
  1637. .Group-enter-active,
  1638. .Group-leave-active {
  1639. transition: all 1s ease;
  1640. }
  1641.  
  1642. .Group-enter-from,
  1643. .Group-leave-to {
  1644. height: 0px;
  1645. }
  1646. </style>