import calculate from '@/utils/map/calculate'; import gridMapUtil from '@/utils/map/grid'; import { map, onMapMounted } from '@/utils/map/index_old'; export class SatelliteProxy { // 地图网格相关对象 mapViews; districtPolygon; // 绘制区县边界 drawDistrict(districtName, isNew) { onMapMounted(() => { if (this.districtPolygon && !isNew) { map.remove(this.districtPolygon); map.add(this.districtPolygon); } else { // eslint-disable-next-line no-undef var district = new AMap.DistrictSearch({ extensions: 'all', //返回行政区边界坐标等具体信息 level: 'district' //设置查询行政区级别为区 }); district.search(districtName, (status, result) => { var bounds = result.districtList[0].boundaries; //获取朝阳区的边界信息 if (bounds) { for (var i = 0; i < bounds.length; i++) { //生成行政区划 polygon // eslint-disable-next-line no-undef this.districtPolygon = new AMap.Polygon({ map: map, //显示该覆盖物的地图对象 strokeWeight: 2, //轮廓线宽度 path: bounds[i], //多边形轮廓线的节点坐标数组 fillOpacity: 0, //多边形填充透明度 fillColor: '#CCF3FF', //多边形填充颜色 // strokeColor: '#ffffff' //线条颜色 strokeColor: '#0552f7', //线条颜色 zIndex: 9 }); } map.setFitView(); //将覆盖物调整到合适视野 } }); } }); } clearAll(mapViews) { if (mapViews) { if (typeof mapViews.gridViews === 'object') { map.remove(mapViews.gridViews); } } this.clearText(mapViews); } clearText(mapViews) { if (mapViews) { if (typeof mapViews.dataTxt === 'object') { map.remove(mapViews.dataTxt); } if (typeof mapViews.dataLayer === 'object') { map.remove(mapViews.dataLayer); } if (typeof mapViews.rankTxt === 'object') { map.remove(mapViews.rankTxt); } if (typeof mapViews.rankLayer === 'object') { map.remove(mapViews.rankLayer); } } } // 绘制网格线 drawPolyline(gridInfo, event) { // 绘制网格 const points = gridInfo.map((v) => { return calculate.wgs84_To_Gcj02(v.longitude, v.latitude); // return [v.longitude, v.latitude]; }); // const gridPoints = gridMapUtil.parseGridPoint(points); // console.log('gridPoints:', gridPoints); const gridPoints = gridInfo.map((v, i) => { return { path: [ calculate.wgs84_To_Gcj02(v.point1Lon, v.point1Lat), calculate.wgs84_To_Gcj02(v.point2Lon, v.point2Lat), calculate.wgs84_To_Gcj02(v.point3Lon, v.point3Lat), calculate.wgs84_To_Gcj02(v.point4Lon, v.point4Lat) // [v.point1Lon, v.point1Lat], // [v.point2Lon, v.point2Lat], // [v.point3Lon, v.point3Lat], // [v.point4Lon, v.point4Lat] ] // eslint-disable-next-line no-undef .map((d) => new AMap.LngLat(d[0], d[1])), extData: points[i] }; }); const gridViews = gridMapUtil.drawPolylines({ points: gridPoints, event }); return { gridViews, gridPoints, points }; } // 绘制监测数据值 drawDataText(points, gridDataDetail, textViews, labelsLayer) { const data = gridDataDetail.map((v, i) => { return { lnglat_GD: points[i], // data: v.pm25 ? (v.pm25 + 'μg/m³') : '' data: v.pm25 ? v.pm25 : '' }; }); // return gridMapUtil.drawGridTextLabel(data, textViews, labelsLayer, 'bottom'); return gridMapUtil.drawGridText(data, textViews, 'top-center', 'data'); } // 绘制监测数据排名文本 drawRankText(points, gridDataDetail, textViews, labelsLayer) { const data = gridDataDetail.map((v, i) => { return { lnglat_GD: points[i], // data: v.pm25 ? ('排名: ' + v.rank) : '' data: v.pm25 ? v.rank : '' }; }); // return gridMapUtil.drawGridTextLabel(data, textViews, labelsLayer, 'top'); return gridMapUtil.drawGridText(data, textViews, 'bottom-center', 'rank'); } // 绘制监测数据值对应网格颜色 drawColor({ gridViews, points, gridDataDetail, lastGridViews, opacity, zIndex, customColor }) { // 根据数据筛选有数据的网格 const res = []; // 以及对应的中心点坐标 const pointsRes = []; gridDataDetail.forEach((d) => { // 根据数据关联的网格编号,找到对应网格 const cellId = d.cellId; if (cellId > gridViews.length) { throw Error( '遥测数据的网格索引编号超出网格组范围,数据和网格组可能不对应' ); } res.push(gridViews[cellId - 1]); pointsRes.push(points[cellId - 1]); }); // 根据绘制颜色方式绘制网格 let resGridViews; if (customColor) { resGridViews = gridMapUtil.drawGridColorCustom( res, gridDataDetail, opacity, zIndex ); } else { resGridViews = gridMapUtil.drawGridColor( res, gridDataDetail, 'PM25', opacity, zIndex ); } if (lastGridViews) { map.remove(lastGridViews); } map.add(resGridViews); map.setFitView(resGridViews); return { resGridViews, pointsRes }; } // 卫星网格配置准备 gridPrepare(gridInfo, event) { // clearText(mapViews); this.clearAll(this.mapViews); this.mapViews = this.drawPolyline(gridInfo, event); } // 绘制网格遥感数据值和网格颜色 drawGrid({ gridData, useCustomColor, opacity, zIndex, showDataTxt, showRankTxt }) { // SatelliteProxy.clearText(mapViews); const { resGridViews, pointsRes } = this.drawColor({ gridViews: this.mapViews.gridViews, points: this.mapViews.points, gridDataDetail: gridData, lastGridViews: this.mapViews.lastGridViews, customColor: useCustomColor, opacity: opacity, zIndex: zIndex }); this.mapViews.lastGridViews = resGridViews; this.mapViews.lastPoints = pointsRes; // 数据标记 const { textViews: dataTxt, labelsLayer: dataLayer } = this.drawDataText( this.mapViews.lastPoints, gridData, this.mapViews.dataTxt, this.mapViews.dataLayer ); this.mapViews.dataTxt = dataTxt; this.mapViews.dataLayer = dataLayer; const { textViews: rankTxt, labelsLayer: rankLayer } = this.drawRankText( this.mapViews.lastPoints, gridData, this.mapViews.rankTxt, this.mapViews.rankLayer ); this.mapViews.rankTxt = rankTxt; this.mapViews.rankLayer = rankLayer; if (showDataTxt) { map.add(this.mapViews.dataTxt); } if (showRankTxt) { map.add(this.mapViews.rankTxt); } } // 调整各类地图覆盖物的可见性 changeVisibility({ showGridViews, showDataTxt, showRankTxt }) { if (showGridViews != undefined) { showGridViews ? map.add(this.mapViews.lastGridViews) : map.remove(this.mapViews.lastGridViews); } if (showDataTxt != undefined) { showDataTxt ? map.add(this.mapViews.dataTxt) : map.remove(this.mapViews.dataTxt); } if (showRankTxt != undefined) { showRankTxt ? map.add(this.mapViews.rankTxt) : map.remove(this.mapViews.rankTxt); } } changeGridOpacity({ isOpacity, opacityValue }) { this.mapViews.lastGridViews.forEach((e) => { e.setOptions({ fillOpacity: opacityValue ? opacityValue : isOpacity ? 0.1 : 0.7 }); }); } setGridEvent(event) { this.mapViews.gridViews.forEach((polygon) => { event(polygon); }); } } // // 地图网格相关对象 // let mapViews; // let districtPolygon; // // 绘制区县边界 // function drawDistrict(districtName, isNew) { // onMapMounted(() => { // if (districtPolygon && !isNew) { // map.remove(districtPolygon); // map.add(districtPolygon); // } else { // // eslint-disable-next-line no-undef // var district = new AMap.DistrictSearch({ // extensions: 'all', //返回行政区边界坐标等具体信息 // level: 'district' //设置查询行政区级别为区 // }); // district.search(districtName, function (status, result) { // var bounds = result.districtList[0].boundaries; //获取朝阳区的边界信息 // if (bounds) { // for (var i = 0; i < bounds.length; i++) { // //生成行政区划 polygon // // eslint-disable-next-line no-undef // districtPolygon = new AMap.Polygon({ // map: map, //显示该覆盖物的地图对象 // strokeWeight: 2, //轮廓线宽度 // path: bounds[i], //多边形轮廓线的节点坐标数组 // fillOpacity: 0, //多边形填充透明度 // fillColor: '#CCF3FF', //多边形填充颜色 // // strokeColor: '#ffffff' //线条颜色 // strokeColor: '#0552f7', //线条颜色 // zIndex: 9 // }); // } // map.setFitView(); //将覆盖物调整到合适视野 // } // }); // } // }); // } // function clearAll(mapViews) { // if (mapViews) { // if (typeof mapViews.gridViews === 'object') { // map.remove(mapViews.gridViews); // } // } // clearText(mapViews); // } // function clearText(mapViews) { // if (mapViews) { // if (typeof mapViews.dataTxt === 'object') { // map.remove(mapViews.dataTxt); // } // if (typeof mapViews.dataLayer === 'object') { // map.remove(mapViews.dataLayer); // } // if (typeof mapViews.rankTxt === 'object') { // map.remove(mapViews.rankTxt); // } // if (typeof mapViews.rankLayer === 'object') { // map.remove(mapViews.rankLayer); // } // } // } // // 绘制网格线 // function drawPolyline(gridInfo, event) { // // 绘制网格 // const points = gridInfo.map((v) => { // return calculate.wgs84_To_Gcj02(v.longitude, v.latitude); // // return [v.longitude, v.latitude]; // }); // // const gridPoints = gridMapUtil.parseGridPoint(points); // // console.log('gridPoints:', gridPoints); // const gridPoints = gridInfo.map((v, i) => { // return { // path: [ // calculate.wgs84_To_Gcj02(v.point1Lon, v.point1Lat), // calculate.wgs84_To_Gcj02(v.point2Lon, v.point2Lat), // calculate.wgs84_To_Gcj02(v.point3Lon, v.point3Lat), // calculate.wgs84_To_Gcj02(v.point4Lon, v.point4Lat) // // [v.point1Lon, v.point1Lat], // // [v.point2Lon, v.point2Lat], // // [v.point3Lon, v.point3Lat], // // [v.point4Lon, v.point4Lat] // ] // // eslint-disable-next-line no-undef // .map((d) => new AMap.LngLat(d[0], d[1])), // extData: points[i] // }; // }); // const gridViews = gridMapUtil.drawPolylines({ points: gridPoints, event }); // return { gridViews, gridPoints, points }; // } // // 绘制监测数据值 // function drawDataText(points, gridDataDetail, textViews, labelsLayer) { // const data = gridDataDetail.map((v, i) => { // return { // lnglat_GD: points[i], // // data: v.pm25 ? (v.pm25 + 'μg/m³') : '' // data: v.pm25 ? v.pm25 : '' // }; // }); // // return gridMapUtil.drawGridTextLabel(data, textViews, labelsLayer, 'bottom'); // return gridMapUtil.drawGridText(data, textViews, 'top-center', 'data'); // } // // 绘制监测数据排名文本 // function drawRankText(points, gridDataDetail, textViews, labelsLayer) { // const data = gridDataDetail.map((v, i) => { // return { // lnglat_GD: points[i], // // data: v.pm25 ? ('排名: ' + v.rank) : '' // data: v.pm25 ? v.rank : '' // }; // }); // // return gridMapUtil.drawGridTextLabel(data, textViews, labelsLayer, 'top'); // return gridMapUtil.drawGridText(data, textViews, 'bottom-center', 'rank'); // } // // 绘制监测数据值对应网格颜色 // function drawColor({ // gridViews, // points, // gridDataDetail, // lastGridViews, // opacity, // zIndex, // customColor // }) { // // 根据数据筛选有数据的网格 // const res = []; // // 以及对应的中心点坐标 // const pointsRes = []; // gridDataDetail.forEach((d) => { // // 根据数据关联的网格编号,找到对应网格 // const cellId = d.cellId; // if (cellId > gridViews.length) { // throw Error( // '遥测数据的网格索引编号超出网格组范围,数据和网格组可能不对应' // ); // } // res.push(gridViews[cellId - 1]); // pointsRes.push(points[cellId - 1]); // }); // // 根据绘制颜色方式绘制网格 // let resGridViews; // if (customColor) { // resGridViews = gridMapUtil.drawGridColorCustom( // res, // gridDataDetail, // opacity, // zIndex // ); // } else { // resGridViews = gridMapUtil.drawGridColor( // res, // gridDataDetail, // 'PM25', // opacity, // zIndex // ); // } // if (lastGridViews) { // map.remove(lastGridViews); // } // map.add(resGridViews); // map.setFitView(resGridViews); // return { resGridViews, pointsRes }; // } // // 卫星网格配置准备 // function gridPrepare(gridInfo, event) { // // clearText(mapViews); // clearAll(mapViews); // mapViews = drawPolyline(gridInfo, event); // } // // 绘制网格遥感数据值和网格颜色 // function drawGrid({ // gridData, // useCustomColor, // opacity, // zIndex, // showDataTxt, // showRankTxt // }) { // // SatelliteProxy.clearText(mapViews); // const { resGridViews, pointsRes } = drawColor({ // gridViews: mapViews.gridViews, // points: mapViews.points, // gridDataDetail: gridData, // lastGridViews: mapViews.lastGridViews, // customColor: useCustomColor, // opacity: opacity, // zIndex: zIndex // }); // mapViews.lastGridViews = resGridViews; // mapViews.lastPoints = pointsRes; // // 数据标记 // const { textViews: dataTxt, labelsLayer: dataLayer } = drawDataText( // mapViews.lastPoints, // gridData, // mapViews.dataTxt, // mapViews.dataLayer // ); // mapViews.dataTxt = dataTxt; // mapViews.dataLayer = dataLayer; // const { textViews: rankTxt, labelsLayer: rankLayer } = drawRankText( // mapViews.lastPoints, // gridData, // mapViews.rankTxt, // mapViews.rankLayer // ); // mapViews.rankTxt = rankTxt; // mapViews.rankLayer = rankLayer; // if (showDataTxt) { // map.add(mapViews.dataTxt); // } // if (showRankTxt) { // map.add(mapViews.rankTxt); // } // } // // 调整各类地图覆盖物的可见性 // function changeVisibility({ showGridViews, showDataTxt, showRankTxt }) { // if (showGridViews != undefined) { // showGridViews ? map.add(mapViews.lastGridViews) : map.remove(mapViews.lastGridViews); // } // if (showDataTxt != undefined) { // showDataTxt ? map.add(mapViews.dataTxt) : map.remove(mapViews.dataTxt); // } // if (showRankTxt != undefined) { // showRankTxt ? map.add(mapViews.rankTxt) : map.remove(mapViews.rankTxt); // } // } // function changeGridOpacity({ isOpacity, opacityValue }) { // mapViews.lastGridViews.forEach((e) => { // e.setOptions({ // fillOpacity: opacityValue ? opacityValue : isOpacity ? 0.1 : 0.7 // }); // }); // } // export default { // drawDistrict, // drawPolyline, // drawDataText, // drawRankText, // drawColor, // gridPrepare, // drawGrid, // changeVisibility, // changeGridOpacity, // clearText, // clearAll // };