import calculate from '@/utils/map/calculate';
|
import gridMapUtil from '@/utils/map/grid';
|
import { map, onMapMounted } from '@/utils/map/index_old';
|
|
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.textViews === 'object') {
|
map.remove(mapViews.textViews);
|
}
|
if (typeof mapViews.gridViews === 'object') {
|
map.remove(mapViews.gridViews);
|
}
|
}
|
}
|
|
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 };
|
}
|
|
export default {
|
drawDistrict,
|
drawPolyline,
|
drawDataText,
|
drawRankText,
|
drawColor,
|
clearText,
|
clearAll
|
};
|
