/**
|
* 高德地图点标记绘制相关
|
*/
|
|
import { map } from './index_old';
|
import { useToolboxStore } from '@/stores/toolbox';
|
|
const toolboxStore = useToolboxStore();
|
|
var _massMarks = undefined;
|
|
function _parseData(fDatas, _factor) {
|
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
|
});
|
}
|
return data;
|
}
|
|
function _drawMassMarks(data, onClick) {
|
// 创建样式对象
|
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;
|
// 3. 自定义点击事件
|
if (typeof onClick === 'function') {
|
onClick(i);
|
}
|
});
|
// 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);
|
|
return massMarks;
|
}
|
|
function _drawMark(lnglat) {
|
//创建一个 Marker 实例：
|
// eslint-disable-next-line no-undef
|
const marker = new AMap.Marker({
|
// eslint-disable-next-line no-undef
|
position: new AMap.LngLat(lnglat[0], lnglat[1]), //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
|
title: '北京'
|
});
|
//将创建的点标记添加到已有的地图实例：
|
map.add(marker);
|
}
|
|
export default {
|
/**
|
* 绘制海量点标记
|
* @param fDatas 完整监测数据
|
* @param _factor 当前展示的监测因子对象
|
*/
|
drawMassMarks(fDatas, _factor, onClick) {
|
if (!toolboxStore.dataMarkerStatus) {
|
return;
|
}
|
this.clearMassMarks();
|
const data = _parseData(fDatas, _factor);
|
_drawMassMarks(data, onClick);
|
},
|
|
drawMassMarks2(data, onClick) {
|
return _drawMassMarks(data, onClick);
|
},
|
|
clearMassMarks() {
|
if (_massMarks) {
|
map.remove(_massMarks);
|
_massMarks = undefined;
|
}
|
},
|
|
/**
|
* 创建标记点
|
* @param {string | Array} img 图标或图标数组
|
* @param {Array} dataList 监测数据
|
* @param {boolean} collision 标注避让
|
* @returns
|
*/
|
createLabelMarks(img, dataList, collision = true) {
|
// eslint-disable-next-line no-undef
|
const layer = new AMap.LabelsLayer({
|
zooms: [3, 20],
|
zIndex: 1000,
|
// 开启标注避让，默认为开启，v1.4.15 新增属性
|
collision: collision,
|
// 开启标注淡入动画，默认为开启，v1.4.15 新增属性
|
animation: true
|
});
|
|
map.add(layer);
|
|
// var markers = [];
|
for (var i = 0; i < dataList.length; i++) {
|
const data = dataList[i];
|
var curData = {
|
name: data.name,
|
position: [data.longitude, data.latitude],
|
zooms: [10, 20],
|
opacity: 1,
|
zIndex: 10,
|
icon: {
|
type: 'image',
|
image: typeof img === 'string' ? img : img[i],
|
// clipOrigin: [14, 92],
|
// clipSize: [50, 68],
|
size: [30, 30],
|
anchor: 'bottom-center',
|
angel: 0,
|
retina: true
|
},
|
text: {
|
content: data.name,
|
direction: 'top',
|
offset: [0, -5],
|
style: {
|
fontSize: 16,
|
fontWeight: 'normal',
|
fillColor: '#fff',
|
strokeColor: '#333',
|
strokeWidth: 0,
|
backgroundColor: '#122b54a9'
|
}
|
}
|
};
|
curData.extData = {
|
index: i
|
};
|
|
// eslint-disable-next-line no-undef
|
var labelMarker = new AMap.LabelMarker(curData);
|
|
// markers.push(labelMarker);
|
|
layer.add(labelMarker);
|
}
|
|
return layer;
|
},
|
|
drawMark: _drawMark
|
};
|
