update
1.新需求2025.9.19新需求: 去掉"健康监测"副屏, 修改后健康终端报警点击查看详情弹出告警记录分页列表; 去掉【体检人数统计】【体检数据】【健康打卡数据】,增加【心血管监测】模块功能,【心血管监测】功能将原心血管监测大屏上的内容整理并移动到急救服务平台大屏中; 员工求助时,地图中推荐两个医院、两个健康小屋、两个AED坐标信息,并按距离排序,体现距离远近顺序; 地图中油田医院、健康小屋等各个图例,显示总数信息; 救护车坐标信息维护,并在大屏上标记; 右上角"增加【救助信息】板块, 当出现应急弹窗后或从今日应急选中应急事件 , 该板块需展示应急事件的相关信息(开发中);
This commit is contained in:
+111
-4
@@ -22,7 +22,6 @@ export const Map = {
|
||||
emergencyMarker: null, // 应急人员marker
|
||||
startMarker: null,
|
||||
endMarker: null,
|
||||
clearSOrE: null,
|
||||
/**
|
||||
* @desc 地图舒适化
|
||||
* @param el dom元素 id选择器
|
||||
@@ -140,6 +139,70 @@ export const Map = {
|
||||
* @param computedCenter 是否计算中心点
|
||||
*/
|
||||
createOverlay(result: ResultType[], extData?: ExtDataType, callback?: Callback, computedCenter?: boolean, iconType?: string) {
|
||||
this.removeOverlayGroup();
|
||||
this.overlayGroup = new AMap.OverlayGroup();
|
||||
// const list: any[] = getLonLat(result);
|
||||
// const center = getCenter(list);
|
||||
// const zoom = getZoom(list);
|
||||
let arr: any[] = [];
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let { type, lon, lat, longitude, latitude, lng, centerResource } = result[i];
|
||||
|
||||
if (longitude) {
|
||||
lon = longitude;
|
||||
}
|
||||
if (latitude) {
|
||||
lat = latitude;
|
||||
}
|
||||
if (lng) {
|
||||
lon = lng;
|
||||
}
|
||||
if (!lon || !lat || !type) {
|
||||
continue;
|
||||
}
|
||||
// 创建一个 Icon
|
||||
let startIcon = typeToIcon1(type);
|
||||
// 将 icon 传入 marker
|
||||
let startMarker = new AMap.Marker({
|
||||
// 点的坐标
|
||||
position: [lon, lat], // 指定点的icon,也可以是个url ,但这样就不能对图片进行设置了
|
||||
icon: startIcon, //启用点击事件 如果需要点击事件,必须开启
|
||||
clickable: true, //点额外携带的数据,用户自定义属性,支持JavaScript API任意数据类型
|
||||
offset: [-18, -32],
|
||||
maxZoom: 14,
|
||||
extData: result[i],
|
||||
label: {
|
||||
content: isFunction(extData?.content) && extData?.content(result[i]),
|
||||
},
|
||||
...extData?.extOption,
|
||||
});
|
||||
arr.push(startMarker);
|
||||
// 可以调用setExtData()设置自定义属性
|
||||
//将组 挂载到地图上
|
||||
this.overlayGroup && this.overlayGroup.setMap(this.map);
|
||||
//将需要批量控制的点放到一个组中,通过控制组,就可以操作组内所有所有覆盖物
|
||||
this.overlayGroup && this.overlayGroup.addOverlay(startMarker);
|
||||
}
|
||||
|
||||
this.overlayGroup &&
|
||||
this.overlayGroup.on('click', function (e: any) {
|
||||
//拿到点中携带的数据
|
||||
if (!isFunction(callback)) return;
|
||||
callback(e.target.getExtData());
|
||||
});
|
||||
if (computedCenter) {
|
||||
this.map && this.map.setFitView(arr, false, [50, 50, 0, 50]);
|
||||
}
|
||||
return arr;
|
||||
},
|
||||
/**
|
||||
* @desc 创建覆盖物组,用于批量处理点 (控制显隐,点击事件等)
|
||||
* @param result
|
||||
* @param extData
|
||||
* @param callback
|
||||
* @param computedCenter 是否计算中心点
|
||||
*/
|
||||
async createOverlay1(result: ResultType[], extData?: ExtDataType, callback?: Callback, computedCenter?: boolean, iconType?: string) {
|
||||
this.removeOverlayGroup();
|
||||
this.overlayGroup = new AMap.OverlayGroup();
|
||||
const list: any[] = getLonLat(result);
|
||||
@@ -148,6 +211,49 @@ export const Map = {
|
||||
if (computedCenter) {
|
||||
this.setZoomCenter(center, zoom);
|
||||
}
|
||||
function createTextOverlayIcon(originalIconUrl, text, options = {}) {
|
||||
return new Promise((resolve) => {
|
||||
const canvas = document.createElement('canvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const img = new Image();
|
||||
|
||||
img.crossOrigin = 'anonymous';
|
||||
img.onload = function () {
|
||||
// 设置画布大小(比原图稍大以容纳文字)
|
||||
canvas.width = 28;
|
||||
canvas.height = 49 + 15; // 为文字留出空间
|
||||
|
||||
// 绘制原始图标
|
||||
ctx.drawImage(img, 0, 10, 28, 49);
|
||||
// 绘制圆形文字背景
|
||||
const textX = 22; // 文字X坐标(居右对齐)
|
||||
|
||||
const textY = 11; // 文字Y坐标
|
||||
const textWidth = ctx.measureText(text).width;
|
||||
const circleRadius = Math.max(textWidth / 2 + 1, 6); // 根据文字宽度计算半径
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(textX, textY, circleRadius, 0, Math.PI * 2);
|
||||
ctx.fillStyle = 'red';
|
||||
ctx.fill();
|
||||
|
||||
// 绘制文字背景(可选)
|
||||
// ctx.fillStyle = 'red';
|
||||
// ctx.fillRect(0, 0, 28, 15);
|
||||
|
||||
// 绘制文字
|
||||
ctx.font = `bold 10px Arial`;
|
||||
ctx.textAlign = 'right';
|
||||
ctx.textBaseline = 'middle';
|
||||
ctx.fillStyle = '#ffffff';
|
||||
ctx.fillText(text, 25, 10);
|
||||
|
||||
resolve(canvas.toDataURL());
|
||||
};
|
||||
|
||||
img.src = originalIconUrl;
|
||||
});
|
||||
}
|
||||
let arr = [];
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let { type, lon, lat, longitude, latitude, lng, centerResource } = result[i];
|
||||
@@ -165,12 +271,13 @@ export const Map = {
|
||||
continue;
|
||||
}
|
||||
// 创建一个 Icon
|
||||
let startIcon = iconType === '1' ? typeToIcon(type) : typeToIcon1(type);
|
||||
const startIcon: any = typeToIcon(type);
|
||||
const newIconUrl = await createTextOverlayIcon(startIcon, i + 1 + '');
|
||||
// 将 icon 传入 marker
|
||||
let startMarker = new AMap.Marker({
|
||||
const startMarker = new AMap.Marker({
|
||||
// 点的坐标
|
||||
position: [lon, lat], // 指定点的icon,也可以是个url ,但这样就不能对图片进行设置了
|
||||
icon: startIcon, //启用点击事件 如果需要点击事件,必须开启
|
||||
icon: newIconUrl, //启用点击事件 如果需要点击事件,必须开启
|
||||
clickable: true, //点额外携带的数据,用户自定义属性,支持JavaScript API任意数据类型
|
||||
offset: [-18, -32],
|
||||
maxZoom: 14,
|
||||
|
||||
Reference in New Issue
Block a user