Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
be31679e 1 parent 7fc80353

fix 建筑文字方向优化-文字水平显示补全

Inline Side-by-side
Showing 2 changed files with 208 additions and 12 deletions
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-11-06 11:41:43
* @LastEditTime: 2025-02-10 17:45:25
* @FilePath: /map-demo/src/views/bieyuan/map.vue
* @Description: 公众地图主体页面
-->
......@@ -221,6 +221,44 @@ export default {
"justify-content": "center",
"align-items": "center",
},
markerStyle2_horizontal: { // 选中
//设置文本样式，Object 同 css 样式表
"padding": ".2rem .5rem .2rem .5rem",
// "margin-bottom": "1rem",
"border-color": "#DD7850",
"border-radius": ".25rem",
"background-color": "#FFF",
// "width": "1rem",
// "border-width": 0,
// "box-shadow": "0 2px 6px 0 rgba(114, 124, 245, .5)",
// "text-align": "center",
"font-size": "0.8rem",
"color": "#DD7850",
"writing-mode": "horizontal",
"text-orientation": "mixed",
"display": "flex",
"justify-content": "center",
"align-items": "center",
},
markerStyle1_horizontal: { // 未选中
//设置文本样式，Object 同 css 样式表
"padding": ".2rem .5rem .2rem .5rem",
// "margin-bottom": "1rem",
"border-color": "#fcfbfa",
"border-radius": ".25rem",
"background-color": "#DD7850",
// "width": "1rem",
// "border-width": 0,
// "box-shadow": "0 2px 6px 0 rgba(114, 124, 245, .5)",
// "text-align": "center",
"font-size": "0.8rem",
"color": "white",
"writing-mode": "horizontal",
"text-orientation": "mixed",
"display": "flex",
"justify-content": "center",
"align-items": "center",
},
current_safe_route: [],
route_safe_marker: [],
show_walk_route: true,
......@@ -351,7 +389,7 @@ export default {
} else {
marker_icon = entity_info[i].icon;
}
if (entity_info[i]?.writing_mode === 'vertical') { // 标题文字垂直
let text_direction = entity_info[i]?.writing_mode === 'vertical' ? 'vertical' : 'horizontal';
let textMarker = new AMap.Text({
zooms: [18, 20], // 点标记显示的层级范围，超过范围不显示。
text: entity_info[i].name, //标记显示的文本内容
......@@ -359,7 +397,7 @@ export default {
// draggable: true, //是否可拖拽
// cursor: "pointer", //指定鼠标悬停时的鼠标样式。
// angle: 10, //点标记的旋转角度
style: this.markerStyle1,
style: text_direction === 'vertical' ? this.markerStyle1 : this.markerStyle1_horizontal,
position: entity_info[i].position, //点标记在地图上显示的位置
});
textMarker.setMap(this.map); //将文本标记设置到地图上
......@@ -373,11 +411,11 @@ export default {
this.markerSum.forEach(item => {
if (e.target.hS !== item.hS) {
// 修改文本的样式
item.setStyle(this.markerStyle2);
item.setStyle(item._x['writing-mode'] === 'vertical-rl' ? this.markerStyle2 : this.markerStyle2_horizontal);
}
})
// 修改文本的样式
e.target.setStyle(this.markerStyle1);
e.target.setStyle(text_direction === 'vertical' ? this.markerStyle1 : this.markerStyle1_horizontal);
// 修改文本内容
// textMarker.setText('样式已修改');
......@@ -411,7 +449,67 @@ export default {
// 使用 panBy 方法进行视图偏移
this.map.panBy(0, offsetY);
})
}
// if (entity_info[i]?.writing_mode === 'vertical') { // 标题文字垂直
// let textMarker = new AMap.Text({
// zooms: [18, 20], // 点标记显示的层级范围，超过范围不显示。
// text: entity_info[i].name, //标记显示的文本内容
// anchor: "center", //设置文本标记锚点位置
// // draggable: true, //是否可拖拽
// // cursor: "pointer", //指定鼠标悬停时的鼠标样式。
// // angle: 10, //点标记的旋转角度
// style: this.markerStyle1,
// position: entity_info[i].position, //点标记在地图上显示的位置
// });
// textMarker.setMap(this.map); //将文本标记设置到地图上
// this.markerSum.push(textMarker);
// if (clickListener1) {
// textMarker.off('click', clickListener)
// }
// // 绑定景点的点击事件 - 文字出现才能触发
// var clickListener1 = textMarker.on('click', (e) => {
// // 还原样式
// this.markerSum.forEach(item => {
// if (e.target.hS !== item.hS) {
// // 修改文本的样式
// item.setStyle(this.markerStyle2);
// }
// })
// // 修改文本的样式
// e.target.setStyle(this.markerStyle1);
// // 修改文本内容
// // textMarker.setText('样式已修改');
// //
// // console.warn(e);
// this.itemInfo = entity_info[i];
// // 详情为空提示
// if (!this.itemInfo.details.length) {
// this.show_toast = true;
// this.toast_text = '该景点暂无详情'
// return;
// }
// // 打开浮动面板
// this.info_height = (0.65 * window.innerHeight);
// // 浮动面板样式
// $('.van-floating-panel__content').css('borderRadius', '1.25rem');
// $('.van-floating-panel').css('boxShadow', '0 0 15px black');
// // 定位到当前位置中心
// this.map.setZoomAndCenter(this.zoom, this.itemInfo.position);
// // 获取地图容器的高度
// const mapHeight = this.map.getSize().height;
// // 计算需要向上移动的像素值，比如向上移动地图高度的一半左右
// const offsetY = -mapHeight / 3.5;
// // 使用 panBy 方法进行视图偏移
// this.map.panBy(0, offsetY);
// })
// }
// TODO： 获取详情定位信息用来导航
// 导航路径
let marker_id = this.$route.query.marker_id;
......
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-02-10 16:15:37
* @LastEditTime: 2025-02-10 17:45:00
* @FilePath: /map-demo/src/views/by/map.vue
* @Description: 公众地图主体页面
-->
......@@ -221,6 +221,44 @@ export default {
"justify-content": "center",
"align-items": "center",
},
markerStyle2_horizontal: { // 选中
//设置文本样式，Object 同 css 样式表
"padding": ".2rem .5rem .2rem .5rem",
// "margin-bottom": "1rem",
"border-color": "#DD7850",
"border-radius": ".25rem",
"background-color": "#FFF",
// "width": "1rem",
// "border-width": 0,
// "box-shadow": "0 2px 6px 0 rgba(114, 124, 245, .5)",
// "text-align": "center",
"font-size": "0.8rem",
"color": "#DD7850",
"writing-mode": "horizontal",
"text-orientation": "mixed",
"display": "flex",
"justify-content": "center",
"align-items": "center",
},
markerStyle1_horizontal: { // 未选中
//设置文本样式，Object 同 css 样式表
"padding": ".2rem .5rem .2rem .5rem",
// "margin-bottom": "1rem",
"border-color": "#fcfbfa",
"border-radius": ".25rem",
"background-color": "#DD7850",
// "width": "1rem",
// "border-width": 0,
// "box-shadow": "0 2px 6px 0 rgba(114, 124, 245, .5)",
// "text-align": "center",
"font-size": "0.8rem",
"color": "white",
"writing-mode": "horizontal",
"text-orientation": "mixed",
"display": "flex",
"justify-content": "center",
"align-items": "center",
},
current_safe_route: [],
route_safe_marker: [],
show_walk_route: true,
......@@ -359,7 +397,7 @@ export default {
} else {
marker_icon = entity_info[i].icon;
}
if (entity_info[i]?.writing_mode === 'vertical') { // 标题文字垂直
let text_direction = entity_info[i]?.writing_mode === 'vertical' ? 'vertical' : 'horizontal';
let textMarker = new AMap.Text({
zooms: [18, 20], // 点标记显示的层级范围，超过范围不显示。
text: entity_info[i].name, //标记显示的文本内容
......@@ -367,7 +405,7 @@ export default {
// draggable: true, //是否可拖拽
// cursor: "pointer", //指定鼠标悬停时的鼠标样式。
// angle: 10, //点标记的旋转角度
style: this.markerStyle1,
style: text_direction === 'vertical' ? this.markerStyle1 : this.markerStyle1_horizontal,
position: entity_info[i].position, //点标记在地图上显示的位置
});
textMarker.setMap(this.map); //将文本标记设置到地图上
......@@ -381,11 +419,11 @@ export default {
this.markerSum.forEach(item => {
if (e.target.hS !== item.hS) {
// 修改文本的样式
item.setStyle(this.markerStyle2);
item.setStyle(item._x['writing-mode'] === 'vertical-rl' ? this.markerStyle2 : this.markerStyle2_horizontal);
}
})
// 修改文本的样式
e.target.setStyle(this.markerStyle1);
e.target.setStyle(text_direction === 'vertical' ? this.markerStyle1 : this.markerStyle1_horizontal);
// 修改文本内容
// textMarker.setText('样式已修改');
......@@ -419,7 +457,67 @@ export default {
// 使用 panBy 方法进行视图偏移
this.map.panBy(0, offsetY);
})
}
// if (entity_info[i]?.writing_mode === 'vertical') { // 标题文字垂直
// let textMarker = new AMap.Text({
// zooms: [18, 20], // 点标记显示的层级范围，超过范围不显示。
// text: entity_info[i].name, //标记显示的文本内容
// anchor: "center", //设置文本标记锚点位置
// // draggable: true, //是否可拖拽
// // cursor: "pointer", //指定鼠标悬停时的鼠标样式。
// // angle: 10, //点标记的旋转角度
// style: this.markerStyle1,
// position: entity_info[i].position, //点标记在地图上显示的位置
// });
// textMarker.setMap(this.map); //将文本标记设置到地图上
// this.markerSum.push(textMarker);
// if (clickListener1) {
// textMarker.off('click', clickListener)
// }
// // 绑定景点的点击事件 - 文字出现才能触发
// var clickListener1 = textMarker.on('click', (e) => {
// // 还原样式
// this.markerSum.forEach(item => {
// if (e.target.hS !== item.hS) {
// // 修改文本的样式
// item.setStyle(this.markerStyle2);
// }
// })
// // 修改文本的样式
// e.target.setStyle(this.markerStyle1);
// // 修改文本内容
// // textMarker.setText('样式已修改');
// //
// // console.warn(e);
// this.itemInfo = entity_info[i];
// // 详情为空提示
// if (!this.itemInfo.details.length) {
// this.show_toast = true;
// this.toast_text = '该景点暂无详情'
// return;
// }
// // 打开浮动面板
// this.info_height = (0.65 * window.innerHeight);
// // 浮动面板样式
// $('.van-floating-panel__content').css('borderRadius', '1.25rem');
// $('.van-floating-panel').css('boxShadow', '0 0 15px black');
// // 定位到当前位置中心
// this.map.setZoomAndCenter(this.zoom, this.itemInfo.position);
// // 获取地图容器的高度
// const mapHeight = this.map.getSize().height;
// // 计算需要向上移动的像素值，比如向上移动地图高度的一半左右
// const offsetY = -mapHeight / 3.5;
// // 使用 panBy 方法进行视图偏移
// this.map.panBy(0, offsetY);
// })
// }
// TODO： 获取详情定位信息用来导航
// 导航路径
let marker_id = this.$route.query.marker_id;
......