/**
|
* 高德地图点标记绘制相关
|
*/
|
|
import { map } from './index_old';
|
import sector from './sector';
|
import { DialogUtil } from './dialog';
|
import { useToolboxStore } from '@/stores/toolbox';
|
|
const toolboxStore = useToolboxStore();
|
|
var _massMarks = undefined;
|
|
export default {
|
/**
|
* 绘制海量点标记
|
* @param fDatas 完整监测数据
|
* @param _factor 当前展示的监测因子对象
|
*/
|
drawMassMarks(fDatas, _factor, onClick) {
|
if (!toolboxStore.dataMarkerStatus) {
|
return;
|
}
|
if (_massMarks) {
|
map.remove(_massMarks);
|
_massMarks = undefined;
|
}
|
const lnglats = fDatas.lnglats_GD;
|
var data = [];
|
for (let i = 0; i < lnglats.length; i++) {
|
data.push({
|
lnglat: lnglats[i], //点标记位置
|
name: `${fDatas.times[i]}<br/>${_factor.factorName}: ${_factor.datas[i].factorData} mg/m³`,
|
id: i
|
});
|
}
|
|
// 创建样式对象
|
var styleObject = {
|
url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
|
// url: './asset/mipmap/ic_up_white.png', // 图标地址
|
// eslint-disable-next-line no-undef
|
size: new AMap.Size(11, 11), // 图标大小
|
// eslint-disable-next-line no-undef
|
anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
|
};
|
// eslint-disable-next-line no-undef
|
var massMarks = new AMap.MassMarks(data, {
|
zIndex: 5, // 海量点图层叠加的顺序
|
zooms: [15, 18], // 在指定地图缩放级别范围内展示海量点图层
|
style: styleObject // 设置样式对象
|
});
|
massMarks.on('click', (event) => {
|
const i = event.data.id;
|
// 1. 绘制扇形区域
|
sector.drawSector(fDatas, i);
|
|
// 2. 绘制对话框
|
DialogUtil.openNewWindow(fDatas, i, map, lnglats[i], () => {
|
// 移除扇形区域
|
// clearSector3();
|
});
|
|
// 3. 自定义点击事件
|
onClick();
|
});
|
// eslint-disable-next-line no-undef
|
var marker = new AMap.Marker({
|
content: ' ',
|
map: map,
|
// eslint-disable-next-line no-undef
|
offset: new AMap.Pixel(13, 12)
|
});
|
var timeout;
|
massMarks.on('mouseover', (e) => {
|
if (timeout) {
|
clearTimeout(timeout);
|
}
|
marker.setPosition(e.data.lnglat);
|
marker.setLabel({ content: e.data.name });
|
map.add(marker);
|
timeout = setTimeout(() => {
|
map.remove(marker);
|
}, 2000);
|
});
|
_massMarks = massMarks;
|
map.add(massMarks);
|
}
|
};
|
