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
|
// };
|
