| | |
| | | import calculate from '@/utils/map/calculate'; |
| | | import gridMapUtil from '@/utils/map/grid'; |
| | | import { map, onMapMounted } from '@/utils/map/index_old'; |
| | | import { useCloned } from '@vueuse/core'; |
| | | import { getGridDataDetailFactorValue } from '@/model/GridDataDetail'; |
| | | import { useGridStore } from '@/stores/grid-info'; |
| | | |
| | | const gridStore = useGridStore(); |
| | | |
| | | /** |
| | | * 卫星遥测网格管理 |
| | |
| | | constructor(name) { |
| | | this.name = name; |
| | | } |
| | | |
| | | gridGroupId; |
| | | |
| | | // 默认地图网格相关对象 |
| | | mapViews; |
| | | |
| | |
| | | firstEvent; |
| | | |
| | | events = new Map(); |
| | | |
| | | selectedFactorType; |
| | | |
| | | setShowFactorType(e) { |
| | | this.selectedFactorType = e; |
| | | this.changeGridColor({ factorName: e.name }); |
| | | this.changeText({ factorName: e.name }); |
| | | } |
| | | |
| | | // 绘制区县边界 |
| | | drawDistrict(districtName, isNew) { |
| | |
| | | const data = gridDataDetail.map((v, i) => { |
| | | return { |
| | | lnglat_GD: points[i], |
| | | // data: v.pm25 ? (v.pm25 + 'μg/m³') : '' |
| | | data: v.pm25 ? v.pm25 : '' |
| | | data: getGridDataDetailFactorValue(v, this.selectedFactorType.name) |
| | | }; |
| | | }); |
| | | // return gridMapUtil.drawGridTextLabel(data, textViews, labelsLayer, 'bottom'); |
| | |
| | | anchor: 'top-center', |
| | | type: 'data', |
| | | isCustomColor, |
| | | useColor |
| | | useColor, |
| | | factorName: this.selectedFactorType.name |
| | | }); |
| | | } |
| | | |
| | | changeText({ tags = [], factorName, isCustomColor, useColor, type }) { |
| | | let { _mapViewsList, _gridDataDetailList } = this._getMapViews(...tags); |
| | | if (_mapViewsList.length == _gridDataDetailList.length) { |
| | | _mapViewsList.forEach((v, i) => { |
| | | if (v.dataTxt) { |
| | | let dataList = []; |
| | | if (type == 'data' || type == undefined) { |
| | | dataList.push({ |
| | | type: 'data', |
| | | data: _gridDataDetailList[i].map((v) => { |
| | | return { |
| | | data: getGridDataDetailFactorValue( |
| | | v, |
| | | factorName ? factorName : this.selectedFactorType.name |
| | | ) |
| | | }; |
| | | }) |
| | | }); |
| | | } |
| | | if (type == 'rank' || type == undefined) { |
| | | dataList.push({ |
| | | type: 'rank', |
| | | data: _gridDataDetailList[i].map((v) => { |
| | | return { |
| | | data: v.rank ? v.rank : '' |
| | | }; |
| | | }) |
| | | }); |
| | | } |
| | | |
| | | dataList.forEach((d) => { |
| | | gridMapUtil.changeGridText({ |
| | | points: d.data, |
| | | textViews: d.type == 'data' ? v.dataTxt : v.rankTxt, |
| | | type: d.type, |
| | | isCustomColor, |
| | | useColor, |
| | | factorName: factorName ? factorName : this.selectedFactorType.name |
| | | }); |
| | | }); |
| | | } |
| | | }); |
| | | } |
| | | } |
| | | |
| | | // 绘制监测数据排名文本 |
| | |
| | | const data = gridDataDetail.map((v, i) => { |
| | | return { |
| | | lnglat_GD: points[i], |
| | | // data: v.pm25 ? ('排名: ' + v.rank) : '' |
| | | data: v.pm25 ? v.rank : '' |
| | | data: v.rank ? v.rank : '' |
| | | }; |
| | | }); |
| | | // return gridMapUtil.drawGridTextLabel(data, textViews, labelsLayer, 'top'); |
| | |
| | | points: data, |
| | | textViews, |
| | | anchor: 'bottom-center', |
| | | type: 'rank' |
| | | type: 'rank', |
| | | factorName: this.selectedFactorType.name |
| | | }); |
| | | } |
| | | |
| | |
| | | // 根据绘制颜色方式绘制网格 |
| | | let resGridViews; |
| | | if (customColor) { |
| | | resGridViews = gridMapUtil.drawGridColorCustom(res, gridDataDetail); |
| | | resGridViews = gridMapUtil.drawGridColorCustom( |
| | | res, |
| | | gridDataDetail, |
| | | this.selectedFactorType.name |
| | | ); |
| | | } else { |
| | | resGridViews = gridMapUtil.drawGridColor( |
| | | res, |
| | | gridDataDetail, |
| | | 'PM25', |
| | | this.selectedFactorType.name, |
| | | style |
| | | ); |
| | | } |
| | |
| | | }); |
| | | } |
| | | |
| | | deleteTagGrid(tags) { |
| | | this.changeVisibility({ |
| | | tags, |
| | | showGridViews: false, |
| | | showDataTxt: false, |
| | | showRankTxt: false |
| | | }); |
| | | tags.forEach((t) => { |
| | | this.mapViewsMap.delete(t); |
| | | this.gridDataDetailMap.delete(t); |
| | | }); |
| | | } |
| | | |
| | | // 调整各类地图覆盖物的可见性 |
| | | changeVisibility({ tags = [], showGridViews, showDataTxt, showRankTxt }) { |
| | | let { _mapViewsList } = this._getMapViews(...tags); |
| | |
| | | if (showGridViews) { |
| | | // map.add(this.mapViews.lastGridViews); |
| | | _mapViewsList.forEach((v) => { |
| | | if (v.lastGridViews) map.add(v.lastGridViews); |
| | | if (v.lastGridViews) { |
| | | map.add(v.lastGridViews); |
| | | v.show = true; |
| | | } |
| | | }); |
| | | } else { |
| | | // map.remove(this.mapViews.lastGridViews); |
| | | _mapViewsList.forEach((v) => { |
| | | if (v.lastGridViews) map.remove(v.lastGridViews); |
| | | if (v.lastGridViews) { |
| | | map.remove(v.lastGridViews); |
| | | v.show = false; |
| | | } |
| | | }); |
| | | } |
| | | } |
| | |
| | | if (showDataTxt) { |
| | | // map.add(this.mapViews.dataTxt); |
| | | _mapViewsList.forEach((v) => { |
| | | if (v.dataTxt) map.add(v.dataTxt); |
| | | if (v.dataTxt) { |
| | | map.add(v.dataTxt); |
| | | v.show = true; |
| | | } |
| | | }); |
| | | } else { |
| | | // map.remove(this.mapViews.dataTxt); |
| | | _mapViewsList.forEach((v) => { |
| | | if (v.dataTxt) map.remove(v.dataTxt); |
| | | if (v.dataTxt) { |
| | | map.remove(v.dataTxt); |
| | | v.show = false; |
| | | } |
| | | }); |
| | | } |
| | | } |
| | |
| | | if (showRankTxt) { |
| | | // map.add(this.mapViews.rankTxt); |
| | | _mapViewsList.forEach((v) => { |
| | | if (v.rankTxt) map.add(v.rankTxt); |
| | | if (v.rankTxt) { |
| | | map.add(v.rankTxt); |
| | | v.show = true; |
| | | } |
| | | }); |
| | | } else { |
| | | // map.remove(this.mapViews.rankTxt); |
| | | _mapViewsList.forEach((v) => { |
| | | if (v.rankTxt) map.remove(v.rankTxt); |
| | | if (v.rankTxt) { |
| | | map.remove(v.rankTxt); |
| | | v.show = false; |
| | | } |
| | | }); |
| | | } |
| | | } |
| | |
| | | } |
| | | |
| | | changeGridColor({ |
| | | tag, |
| | | tags = [], |
| | | factorName, |
| | | useCustomColor, |
| | | opacity, |
| | | zIndex, |
| | | isMixGridHighlight |
| | | }) { |
| | | let { _mapViewsList, _gridDataDetailList } = this._getMapViews(tag); |
| | | let { _mapViewsList, _gridDataDetailList } = this._getMapViews(...tags); |
| | | if (_mapViewsList.length == _gridDataDetailList.length) { |
| | | _mapViewsList.forEach((v, i) => { |
| | | if (v.lastGridViews) { |
| | | if (useCustomColor != undefined) v.useCustomColor = useCustomColor; |
| | | const lastGridDataDetail = _gridDataDetailList[i]; |
| | | if (useCustomColor) { |
| | | if (v.useCustomColor) { |
| | | gridMapUtil.drawGridColorCustom( |
| | | v.lastGridViews, |
| | | lastGridDataDetail |
| | | lastGridDataDetail, |
| | | factorName ? factorName : this.selectedFactorType.name |
| | | ); |
| | | } else { |
| | | gridMapUtil.drawGridColor( |
| | | v.lastGridViews, |
| | | lastGridDataDetail, |
| | | 'PM25', |
| | | factorName ? factorName : this.selectedFactorType.name, |
| | | { opacity, zIndex, isMixGridHighlight } |
| | | ); |
| | | } |
| | |
| | | (v) => v.cellId == cellIndex |
| | | ); |
| | | polygon.on(name, (e) => { |
| | | event(gridCell, gridDataDetail); |
| | | event({ gridCell, gridDataDetail, polygon, extData: v.extData }); |
| | | }); |
| | | }); |
| | | }); |
| | | } |
| | | |
| | | setDefaultGridClickEvent(tags) { |
| | | this.setGridEvent( |
| | | tags, |
| | | 'click', |
| | | ({ gridCell, gridDataDetail, extData }) => { |
| | | gridStore.selectedGridCellAndDataDetail = { |
| | | gridCell, |
| | | gridDataDetail, |
| | | extData |
| | | }; |
| | | } |
| | | ); |
| | | |
| | | //鼠标移入事件 |
| | | this.setGridEvent(tags, 'mouseover', ({ polygon }) => { |
| | | const ext = polygon.getExtData(); |
| | | const originOption = polygon.getOptions(); |
| | | ext.originOption = originOption; |
| | | polygon.setOptions({ |
| | | strokeWeight: 2, |
| | | strokeColor: 'red' |
| | | }); |
| | | polygon.setExtData(ext); |
| | | }); |
| | | |
| | | //鼠标移出事件 |
| | | this.setGridEvent(tags, 'mouseout', ({ polygon }) => { |
| | | const ext = polygon.getExtData(); |
| | | polygon.setOptions(ext.originOption); |
| | | }); |
| | | } |
| | | |
| | |
| | | * 重叠的网格进行监测数据均值计算并重新计算对应颜色,形成新的一组融合网格 |
| | | * @param {Array} tags 需要融合的网格标签,当为空时,默认融合所有网格 |
| | | */ |
| | | mixGrid(tags, isMixGridHighlight) { |
| | | mixGrid({ tags, isMixGridHighlight = true }) { |
| | | tags.sort((a, b) => { |
| | | return a < b ? -1 : 1; |
| | | }); |
| | |
| | | tags: [mixTag], |
| | | showGridViews: true |
| | | }); |
| | | this.changeGridColor({ tag: mixTag, isMixGridHighlight }); |
| | | this.changeGridColor({ tags: [mixTag], isMixGridHighlight }); |
| | | } else { |
| | | // const mixMapViews = this._createNewMapViews(); |
| | | // 根据标签tag,获取对应多组网格数据 |
| | |
| | | if (count > 1) { |
| | | v.res.gridStyle = { |
| | | strokeWeight: 2, |
| | | strokeColor: 'blue' |
| | | strokeColor: '#23dad1' |
| | | }; |
| | | } |
| | | resGridDataDetail.push(v.res); |
| | |
| | | data: resGridDataDetail, |
| | | grid: { |
| | | style: { |
| | | isMixGridHighlight: |
| | | isMixGridHighlight == undefined ? true : isMixGridHighlight |
| | | isMixGridHighlight |
| | | } |
| | | }, |
| | | extData: { |
| | | name: `走航融合 - ${mixTag}`, |
| | | type: 1 |
| | | } |
| | | }); |
| | | } |
| | | |
| | | return mixTag; |
| | | } |
| | | |
| | | mixGrid2({ tags, isMixGridHighlight = true, gridDataDetailList }) { |
| | | tags.sort((a, b) => { |
| | | return a < b ? -1 : 1; |
| | | }); |
| | | const mixTag = tags.join('-'); |
| | | if (this.mapViewsMap.has(mixTag)) { |
| | | this.changeVisibility({ |
| | | tags: [mixTag], |
| | | showGridViews: true |
| | | }); |
| | | this.changeGridColor({ tags: [mixTag], isMixGridHighlight }); |
| | | } else { |
| | | gridDataDetailList.forEach((gdd) => { |
| | | // 网格数据是融合的,展示高亮的样式 |
| | | if (gdd.mixData) { |
| | | gdd.gridStyle = { |
| | | strokeWeight: 2, |
| | | strokeColor: '#23dad1' |
| | | }; |
| | | } |
| | | }); |
| | | this.drawTagGrid({ |
| | | tag: mixTag, |
| | | data: gridDataDetailList, |
| | | grid: { |
| | | style: { |
| | | isMixGridHighlight |
| | | } |
| | | }, |
| | | extData: { |
| | |
| | | eachheight, |
| | | searchLength |
| | | ); |
| | | if (searchRes.find(v=> v.cellId == 1670)) { |
| | | if (searchRes.find((v) => v.cellId == 1670)) { |
| | | console.log(); |
| | | |
| | | } |
| | | searchRes.forEach((e) => { |
| | | if (originCellIdList.indexOf(e.cellId) == -1) { |
| | |
| | | }), |
| | | gridPoints: JSON.parse(JSON.stringify(this.mapViews.gridPoints)), |
| | | points: JSON.parse(JSON.stringify(this.mapViews.points)), |
| | | extData |
| | | extData, |
| | | show: true |
| | | }; |
| | | } |
| | | } |