| | |
| | | } |
| | | |
| | | gridGroupId; |
| | | |
| | | |
| | | // 默认地图网格相关对象 |
| | | mapViews; |
| | | |
| | | gridDataDetail; |
| | | |
| | | infoMap = new Map(); |
| | | |
| | | // 地图网格对象Map结构,存储对应key下的网格对象、网格坐标信息 |
| | | mapViewsMap = new Map(); |
| | | |
| | | gridStateMap = new Map(); |
| | | |
| | | // 网格数据Map结构,存储对应key下的网格监测数据信息 |
| | | gridDataDetailMap = new Map(); |
| | |
| | | drawTagGrid({ tag, data, grid, dataTxt, rankTxt, extData }) { |
| | | if (!this.mapViewsMap.has(tag)) { |
| | | const newMapViews = this._createNewMapViews({ extData }); |
| | | this.infoMap.set(tag, extData); |
| | | const newGridState = this._createNewGridState({ extData }); |
| | | this.gridStateMap.set(tag, newGridState); |
| | | this.mapViewsMap.set(tag, newMapViews); |
| | | this.gridDataDetailMap.set(tag, data); |
| | | } |
| | |
| | | tags.forEach((t) => { |
| | | this.mapViewsMap.delete(t); |
| | | this.gridDataDetailMap.delete(t); |
| | | this.gridStateMap.delete(t); |
| | | }); |
| | | } |
| | | |
| | |
| | | _mapViewsList.forEach((v) => { |
| | | if (v.dataTxt) { |
| | | map.add(v.dataTxt); |
| | | v.show = true; |
| | | v.showData = true; |
| | | } |
| | | }); |
| | | } else { |
| | |
| | | _mapViewsList.forEach((v) => { |
| | | if (v.dataTxt) { |
| | | map.remove(v.dataTxt); |
| | | v.show = false; |
| | | v.showData = false; |
| | | } |
| | | }); |
| | | } |
| | |
| | | _mapViewsList.forEach((v) => { |
| | | if (v.rankTxt) { |
| | | map.add(v.rankTxt); |
| | | v.show = true; |
| | | v.showRank = true; |
| | | } |
| | | }); |
| | | } else { |
| | |
| | | _mapViewsList.forEach((v) => { |
| | | if (v.rankTxt) { |
| | | map.remove(v.rankTxt); |
| | | v.show = false; |
| | | v.showRank = false; |
| | | } |
| | | }); |
| | | } |
| | |
| | | if (_mapViewsList.length == _gridDataDetailList.length) { |
| | | _mapViewsList.forEach((v, i) => { |
| | | if (v.lastGridViews) { |
| | | if (useCustomColor != undefined) v.useCustomColor = useCustomColor; |
| | | if (useCustomColor != undefined) v.showCustomColor = useCustomColor; |
| | | const lastGridDataDetail = _gridDataDetailList[i]; |
| | | if (v.useCustomColor) { |
| | | if (v.showCustomColor) { |
| | | gridMapUtil.drawGridColorCustom( |
| | | v.lastGridViews, |
| | | lastGridDataDetail, |
| | |
| | | }); |
| | | this.changeGridColor({ tags: [mixTag], isMixGridHighlight }); |
| | | } else { |
| | | // const mixMapViews = this._createNewMapViews(); |
| | | // 根据标签tag,获取对应多组网格数据 |
| | | let { _gridDataDetailList } = this._getMapViews(...tags); |
| | | const _dataMap = new Map(); |
| | |
| | | } |
| | | |
| | | return mixTag; |
| | | } |
| | | |
| | | /** |
| | | * 绘制热力图网格 |
| | | * @param {string} tag |
| | | */ |
| | | drawHeatGrid(tag) { |
| | | if (!this.mapViewsMap.has(tag) || !this.gridDataDetailMap.has(tag)) { |
| | | return; |
| | | } |
| | | |
| | | const heatTag = `heat-${tag}`; |
| | | if (this.mapViewsMap.has(heatTag)) { |
| | | this.changeVisibility({ |
| | | tags: [heatTag], |
| | | showGridViews: true |
| | | }); |
| | | } else { |
| | | const _mapViews = this.mapViewsMap.get(tag); |
| | | const _gridDataDetail = this.gridDataDetailMap.get(tag); |
| | | // const groupId = _gridDataDetail[0].groupId; |
| | | // const cellId = _gridDataDetail.cellId; |
| | | |
| | | const originCellIdList = _gridDataDetail.map((v) => v.cellId); |
| | | let headGridDataDetailList = []; |
| | | |
| | | const width = 120; |
| | | const height = 90; |
| | | const eachwidth = 10; |
| | | const eachheight = 10; |
| | | |
| | | const searchLength = 3; |
| | | |
| | | const _dataMap = new Map(); |
| | | |
| | | _gridDataDetail.forEach((gdd) => { |
| | | const searchRes = this.search( |
| | | gdd, |
| | | width, |
| | | height, |
| | | eachwidth, |
| | | eachheight, |
| | | searchLength |
| | | ); |
| | | if (searchRes.find((v) => v.cellId == 1670)) { |
| | | console.log(); |
| | | } |
| | | searchRes.forEach((e) => { |
| | | if (originCellIdList.indexOf(e.cellId) == -1) { |
| | | if (!_dataMap.has(e.cellId)) { |
| | | _dataMap.set(e.cellId, { |
| | | source: [], |
| | | res: {} |
| | | }); |
| | | } |
| | | _dataMap.get(e.cellId).source.push(e); |
| | | } |
| | | }); |
| | | }); |
| | | |
| | | _dataMap.forEach((v, k) => { |
| | | let total = 0, |
| | | count = v.source.length; |
| | | v.source.forEach((s) => { |
| | | total += s.pm25; |
| | | }); |
| | | v.res = { |
| | | isHeatData: true, |
| | | groupId: v.source[0].groupId, |
| | | cellId: v.source[0].cellId, |
| | | pm25: count == 0 ? null : Math.round((total / count) * 10) / 10, |
| | | originData: v.source |
| | | }; |
| | | headGridDataDetailList.push(v.res); |
| | | }); |
| | | headGridDataDetailList = headGridDataDetailList.concat(_gridDataDetail); |
| | | |
| | | // 重新按照监测数据排序并标记排名 |
| | | headGridDataDetailList.sort((a, b) => { |
| | | return b.pm25 - a.pm25; |
| | | }); |
| | | headGridDataDetailList.forEach((gdd, i) => { |
| | | gdd.rank = i + 1; |
| | | }); |
| | | |
| | | this.drawTagGrid({ |
| | | tag: heatTag, |
| | | data: headGridDataDetailList, |
| | | // grid: { |
| | | // style: { |
| | | // isMixGridHighlight: |
| | | // isMixGridHighlight == undefined ? true : isMixGridHighlight |
| | | // } |
| | | // }, |
| | | extData: { |
| | | name: `走航热力图 - ${heatTag}`, |
| | | type: 2 |
| | | } |
| | | }); |
| | | } |
| | | |
| | | return heatTag; |
| | | } |
| | | |
| | | drawHeatGrid2(tag, headGridDataDetailList) { |
| | |
| | | show: true |
| | | }; |
| | | } |
| | | |
| | | _createNewGridState({ extData }) { |
| | | return { |
| | | type: undefined, |
| | | name: '', |
| | | showGrid: true, |
| | | showRank: false, |
| | | showData: false, |
| | | showCustomColor: false, |
| | | showHeatMap: false, |
| | | highlightFusionGrid: false, |
| | | showUnderway: false, |
| | | opacityValue: 1 |
| | | }; |
| | | } |
| | | } |