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';
|
|
export class SatelliteProxy {
|
constructor(name) {
|
this.name = name;
|
}
|
|
// 地图网格相关对象
|
mapViews;
|
|
mapViewsList = [];
|
|
mapViewsMap = new Map();
|
|
districtPolygon;
|
|
events = new Map();
|
|
// 绘制区县边界
|
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);
|
}
|
}
|
}
|
|
firstEvent;
|
|
// 绘制网格线
|
drawPolyline(gridInfo, event) {
|
this.firstEvent = 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: {
|
centerPoint: points[i],
|
// gridPoints,
|
gridCell: v
|
}
|
};
|
});
|
const gridViews = gridMapUtil.drawPolylines({ points: gridPoints, event });
|
return { gridViews, gridPoints, points };
|
}
|
|
// 绘制监测数据值
|
drawDataText(points, gridDataDetail, textViews, isCustomColor, useColor) {
|
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({
|
points: data,
|
textViews,
|
anchor: 'top-center',
|
type: 'data',
|
isCustomColor,
|
useColor
|
});
|
}
|
|
// 绘制监测数据排名文本
|
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({
|
points: data,
|
textViews,
|
anchor: 'bottom-center',
|
type: '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({
|
gridDataDetail,
|
useCustomColor,
|
opacity,
|
zIndex,
|
showDataTxt,
|
showRankTxt,
|
useDataTxtColor,
|
mapViews
|
}) {
|
const _mapViews = mapViews ? mapViews : this.mapViews;
|
// SatelliteProxy.clearText(mapViews);
|
const { resGridViews, pointsRes } = this.drawColor({
|
gridViews: _mapViews.gridViews,
|
points: _mapViews.points,
|
gridDataDetail: gridDataDetail,
|
lastGridViews: _mapViews.lastGridViews,
|
customColor: useCustomColor,
|
opacity: opacity,
|
zIndex: zIndex
|
});
|
_mapViews.lastGridViews = resGridViews;
|
_mapViews.lastPoints = pointsRes;
|
|
// 数据标记
|
const { textViews: dataTxt, labelsLayer: dataLayer } = this.drawDataText(
|
_mapViews.lastPoints,
|
gridDataDetail,
|
_mapViews.dataTxt,
|
useCustomColor,
|
useDataTxtColor
|
);
|
_mapViews.dataTxt = dataTxt;
|
_mapViews.dataLayer = dataLayer;
|
|
const { textViews: rankTxt, labelsLayer: rankLayer } = this.drawRankText(
|
_mapViews.lastPoints,
|
gridDataDetail,
|
_mapViews.rankTxt,
|
_mapViews.rankLayer
|
);
|
_mapViews.rankTxt = rankTxt;
|
_mapViews.rankLayer = rankLayer;
|
|
if (showDataTxt) {
|
map.add(_mapViews.dataTxt);
|
}
|
|
if (showRankTxt) {
|
map.add(_mapViews.rankTxt);
|
}
|
}
|
|
//
|
drawGrids({
|
gridDataDetailList,
|
useCustomColor,
|
opacity,
|
zIndex,
|
showDataTxt,
|
showRankTxt
|
}) {
|
if (this.mapViewsList.length < gridDataDetailList.length) {
|
let index = this.mapViewsList.length;
|
while (index < gridDataDetailList.length) {
|
const newMapViews = {
|
gridViews: gridMapUtil.drawPolylines({
|
points: this.mapViews.gridPoints,
|
event: this.firstEvent
|
}),
|
gridPoints: JSON.parse(JSON.stringify(this.mapViews.gridPoints)),
|
points: JSON.parse(JSON.stringify(this.mapViews.points))
|
};
|
this.mapViewsList.push(newMapViews);
|
}
|
}
|
|
this.mapViewsList.forEach((m, i) => {
|
this.drawGrid({
|
gridDataDetail: gridDataDetailList[i],
|
useCustomColor,
|
opacity,
|
zIndex,
|
showDataTxt,
|
showRankTxt,
|
mapViews: m
|
});
|
});
|
}
|
|
drawNewGrid({
|
gridDataDetail,
|
useCustomColor,
|
opacity,
|
zIndex,
|
showDataTxt,
|
showRankTxt
|
}) {
|
const newMapViews = {
|
gridViews: gridMapUtil.drawPolylines({
|
points: this.mapViews.gridPoints,
|
event: this.firstEvent
|
}),
|
gridPoints: JSON.parse(JSON.stringify(this.mapViews.gridPoints)),
|
points: JSON.parse(JSON.stringify(this.mapViews.points))
|
};
|
this.mapViewsList.push(newMapViews);
|
this.drawGrid({
|
gridDataDetail,
|
useCustomColor,
|
opacity,
|
zIndex,
|
showDataTxt,
|
showRankTxt,
|
mapViews: newMapViews
|
});
|
}
|
drawTagGrid({
|
tag,
|
gridDataDetail,
|
useCustomColor,
|
opacity,
|
zIndex,
|
showDataTxt,
|
showRankTxt
|
}) {
|
if (!this.mapViewsMap.has(tag)) {
|
const newMapViews = {
|
gridViews: gridMapUtil.drawPolylines({
|
points: this.mapViews.gridPoints,
|
event: this.firstEvent
|
}),
|
gridPoints: JSON.parse(JSON.stringify(this.mapViews.gridPoints)),
|
points: JSON.parse(JSON.stringify(this.mapViews.points))
|
};
|
this.mapViewsMap.set(tag, newMapViews);
|
}
|
const _mapViews = this.mapViewsMap.get(tag);
|
this.drawGrid({
|
gridDataDetail,
|
useCustomColor,
|
opacity,
|
zIndex,
|
showDataTxt,
|
showRankTxt,
|
mapViews: _mapViews
|
});
|
}
|
|
// 调整各类地图覆盖物的可见性
|
changeVisibility({ tag, showGridViews, showDataTxt, showRankTxt }) {
|
let _mapViewsList = [];
|
if (this.mapViews) {
|
_mapViewsList.push(this.mapViews);
|
}
|
if (tag && this.mapViewsMap.has(tag)) {
|
_mapViewsList.push(this.mapViewsMap.get(tag));
|
} else {
|
this.mapViewsMap.forEach((v) => {
|
_mapViewsList.push(v);
|
});
|
}
|
if (showGridViews != undefined) {
|
if (showGridViews) {
|
// map.add(this.mapViews.lastGridViews);
|
_mapViewsList.forEach((v) => {
|
if (v.lastGridViews) map.add(v.lastGridViews);
|
});
|
} else {
|
// map.remove(this.mapViews.lastGridViews);
|
_mapViewsList.forEach((v) => {
|
if (v.lastGridViews) map.remove(v.lastGridViews);
|
});
|
}
|
}
|
if (showDataTxt != undefined) {
|
if (showDataTxt) {
|
// map.add(this.mapViews.dataTxt);
|
_mapViewsList.forEach((v) => {
|
if (v.dataTxt) map.add(v.dataTxt);
|
});
|
} else {
|
// map.remove(this.mapViews.dataTxt);
|
_mapViewsList.forEach((v) => {
|
if (v.dataTxt) map.remove(v.dataTxt);
|
});
|
}
|
}
|
if (showRankTxt != undefined) {
|
if (showRankTxt) {
|
// map.add(this.mapViews.rankTxt);
|
_mapViewsList.forEach((v) => {
|
if (v.rankTxt) map.add(v.rankTxt);
|
});
|
} else {
|
// map.remove(this.mapViews.rankTxt);
|
_mapViewsList.forEach((v) => {
|
if (v.rankTxt) map.remove(v.rankTxt);
|
});
|
}
|
}
|
}
|
|
changeGridOpacity({ tag, isOpacity, opacityValue }) {
|
let _mapViewsList = [];
|
if (this.mapViews) {
|
_mapViewsList.push(this.mapViews);
|
}
|
if (tag && this.mapViewsMap.has(tag)) {
|
_mapViewsList.push(this.mapViewsMap.get(tag));
|
} else {
|
this.mapViewsMap.forEach((v) => {
|
_mapViewsList.push(v);
|
});
|
}
|
_mapViewsList.forEach((v) => {
|
if (v.lastGridViews) {
|
v.lastGridViews.forEach((e) => {
|
e.setOptions({
|
fillOpacity:
|
typeof opacityValue === 'number'
|
? opacityValue
|
: isOpacity
|
? 0.1
|
: 0.7
|
});
|
});
|
}
|
});
|
}
|
|
setGridEvent(name, event) {
|
if (!this.events.has(name)) {
|
this.events.set(name, []);
|
}
|
const list = this.events.get(name);
|
if (list.length > 0) {
|
const lastEvent = list[list.length - 1];
|
this.mapViews.gridViews.forEach((polygon) => {
|
polygon.off(name, lastEvent);
|
});
|
}
|
this.events.get(name).push(event);
|
this.mapViews.gridViews.forEach((polygon) => {
|
polygon.on(name, event);
|
});
|
}
|
|
goBackGridEvent(name) {
|
if (this.events.has(name)) {
|
const eventList = this.events.get(name);
|
//先移除原有的事件
|
const lastEvent = eventList.pop();
|
this.mapViews.gridViews.forEach((polygon) => {
|
polygon.off(name, lastEvent);
|
});
|
//获取上一个事件
|
const event = eventList.pop();
|
this.mapViews.gridViews.forEach((polygon) => {
|
polygon.on(name, event);
|
});
|
}
|
}
|
}
|
