hookehuyr

feat(地图标记): 重构地图标记样式逻辑,支持图标和文字组合显示

重构地图标记的创建和样式管理逻辑,新增createMarkerContent方法统一处理标记内容生成。支持根据文字方向和选中状态动态调整样式,并优化标记点击时的样式切换逻辑。同时将Text标记改为Marker以支持自定义HTML内容。
......@@ -2,9 +2,9 @@
VITE_PORT = 8006
# 反向代理服务器地址
# VITE_PROXY_TARGET = https://oa-dev.onwall.cn
VITE_PROXY_TARGET = https://oa-dev.onwall.cn
# VITE_PROXY_TARGET = https://bm.jiqun.com
VITE_PROXY_TARGET = https://oa.onwall.cn
# VITE_PROXY_TARGET = https://oa.onwall.cn
# API请求前缀
VITE_PROXY_PREFIX = /srv/
......
......@@ -414,6 +414,42 @@ export default {
methods: {
...mapActions(mainStore, ['changeAudio', 'changeAudioSrc', 'changeAudioStatus']),
/**
* 创建标记点的HTML内容,包含图标和文字
* @param {Object} entityInfo - 实体信息
* @param {String} textDirection - 文字方向 ('vertical' 或 'horizontal')
* @param {Boolean} isSelected - 是否选中状态
* @returns {String} HTML字符串
*/
createMarkerContent(entityInfo, textDirection, isSelected) {
const iconUrl = entityInfo.icon || '';
const name = entityInfo.name || '';
// 根据选中状态和文字方向选择样式
let textStyle, containerStyle;
if (textDirection === 'vertical') {
textStyle = isSelected ? this.markerStyle2 : this.markerStyle1;
containerStyle = 'flex-direction: column; align-items: center;';
} else {
textStyle = isSelected ? this.markerStyle2_horizontal : this.markerStyle1_horizontal;
containerStyle = 'flex-direction: row; align-items: center;';
}
// 将样式对象转换为CSS字符串
const textStyleStr = Object.entries(textStyle)
.map(([key, value]) => `${key}: ${value}`)
.join('; ');
// 创建HTML内容
const html = `
<div style="display: flex; ${containerStyle} cursor: pointer;">
${iconUrl ? `<img src="${iconUrl}" style="width: 20px; height: 20px; margin: ${textDirection === 'vertical' ? '0 0 4px 0' : '0 4px 0 0'};" />` : ''}
<div style="${textStyleStr}">${name}</div>
</div>
`;
return html;
},
initMap() {
// 初始化地图
this.map = new AMap.Map('container', {
......@@ -462,15 +498,15 @@ export default {
marker_icon = entity_info[i].icon;
}
let text_direction = entity_info[i]?.writing_mode === 'vertical' ? 'vertical' : 'horizontal';
let textMarker = new AMap.Text({
// 创建自定义HTML内容,包含图标和文字
const markerContent = this.createMarkerContent(entity_info[i], text_direction, false);
let textMarker = new AMap.Marker({
zooms: this.data_zooms, // 点标记显示的层级范围,使用地图配置的缩放范围
text: entity_info[i].name, //标记显示的文本内容
anchor: "center", //设置文本标记锚点位置
// draggable: true, //是否可拖拽
// cursor: "pointer", //指定鼠标悬停时的鼠标样式。
// angle: 10, //点标记的旋转角度
style: text_direction === 'vertical' ? this.markerStyle1 : this.markerStyle1_horizontal,
position: entity_info[i].position, //点标记在地图上显示的位置
content: markerContent, // 自定义HTML内容
anchor: "center", // 设置标记锚点位置
position: entity_info[i].position, // 点标记在地图上显示的位置
});
textMarker.setMap(this.map); //将文本标记设置到地图上
this.markerSum.push(textMarker);
......@@ -479,15 +515,21 @@ export default {
}
// 绑定景点的点击事件 - 文字出现才能触发
var clickListener1 = textMarker.on('click', async (e) => {
// 还原样式
this.markerSum.forEach(item => {
if (e.target.hS !== item.hS) {
// 修改文本的样式
item.setStyle(item._x['writing-mode'] === 'vertical-rl' ? this.markerStyle2 : this.markerStyle2_horizontal);
// 还原样式 - 将其他标记设为未选中状态
this.markerSum.forEach((item, index) => {
if (item !== textMarker) {
const itemInfo = entity_info[index] || entity_info.find(info => info.position[0] === item.getPosition().lng && info.position[1] === item.getPosition().lat);
if (itemInfo) {
const itemDirection = itemInfo?.writing_mode === 'vertical' ? 'vertical' : 'horizontal';
const newContent = this.createMarkerContent(itemInfo, itemDirection, false);
item.setContent(newContent);
}
})
// 修改文本的样式
e.target.setStyle(text_direction === 'vertical' ? this.markerStyle1 : this.markerStyle1_horizontal);
}
});
// 设置当前标记为选中状态
const newContent = this.createMarkerContent(entity_info[i], text_direction, true);
textMarker.setContent(newContent);
// 修改文本内容
// textMarker.setText('样式已修改');
......@@ -941,9 +983,16 @@ export default {
this.$refs.pageInfo.outerStopAudio();
},
resetMarkStyle () {
this.markerSum.forEach(item => {
item.setStyle(item._x['writing-mode'] === 'vertical-rl' ? this.markerStyle1 : this.markerStyle1_horizontal);
})
// 重置所有标记为未选中状态
this.markerSum.forEach((item, index) => {
// 获取对应的实体信息
const entityInfo = this.navList[index];
if (entityInfo) {
const textDirection = entityInfo?.writing_mode === 'vertical' ? 'vertical' : 'horizontal';
const newContent = this.createMarkerContent(entityInfo, textDirection, false);
item.setContent(newContent);
}
});
},
onCloseFloat () {
this.info_height = 0;
......