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
1 <!-- 1 <!--
2 * @Date: 2023-05-19 14:54:27 2 * @Date: 2023-05-19 14:54:27
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-11-06 11:41:43 4 + * @LastEditTime: 2025-02-10 17:45:25
5 * @FilePath: /map-demo/src/views/bieyuan/map.vue 5 * @FilePath: /map-demo/src/views/bieyuan/map.vue
6 * @Description: 公众地图主体页面 6 * @Description: 公众地图主体页面
7 --> 7 -->
...@@ -221,6 +221,44 @@ export default { ...@@ -221,6 +221,44 @@ export default {
221 "justify-content": "center", 221 "justify-content": "center",
222 "align-items": "center", 222 "align-items": "center",
223 }, 223 },
224 + markerStyle2_horizontal: { // 选中
225 + //设置文本样式，Object 同 css 样式表
226 + "padding": ".2rem .5rem .2rem .5rem",
227 + // "margin-bottom": "1rem",
228 + "border-color": "#DD7850",
229 + "border-radius": ".25rem",
230 + "background-color": "#FFF",
231 + // "width": "1rem",
232 + // "border-width": 0,
233 + // "box-shadow": "0 2px 6px 0 rgba(114, 124, 245, .5)",
234 + // "text-align": "center",
235 + "font-size": "0.8rem",
236 + "color": "#DD7850",
237 + "writing-mode": "horizontal",
238 + "text-orientation": "mixed",
239 + "display": "flex",
240 + "justify-content": "center",
241 + "align-items": "center",
242 + },
243 + markerStyle1_horizontal: { // 未选中
244 + //设置文本样式，Object 同 css 样式表
245 + "padding": ".2rem .5rem .2rem .5rem",
246 + // "margin-bottom": "1rem",
247 + "border-color": "#fcfbfa",
248 + "border-radius": ".25rem",
249 + "background-color": "#DD7850",
250 + // "width": "1rem",
251 + // "border-width": 0,
252 + // "box-shadow": "0 2px 6px 0 rgba(114, 124, 245, .5)",
253 + // "text-align": "center",
254 + "font-size": "0.8rem",
255 + "color": "white",
256 + "writing-mode": "horizontal",
257 + "text-orientation": "mixed",
258 + "display": "flex",
259 + "justify-content": "center",
260 + "align-items": "center",
261 + },
224 current_safe_route: [], 262 current_safe_route: [],
225 route_safe_marker: [], 263 route_safe_marker: [],
226 show_walk_route: true, 264 show_walk_route: true,
...@@ -351,7 +389,7 @@ export default { ...@@ -351,7 +389,7 @@ export default {
351 } else { 389 } else {
352 marker_icon = entity_info[i].icon; 390 marker_icon = entity_info[i].icon;
353 } 391 }
354 - if (entity_info[i]?.writing_mode === 'vertical') { // 标题文字垂直 392 + let text_direction = entity_info[i]?.writing_mode === 'vertical' ? 'vertical' : 'horizontal';
355 let textMarker = new AMap.Text({ 393 let textMarker = new AMap.Text({
356 zooms: [18, 20], // 点标记显示的层级范围，超过范围不显示。 394 zooms: [18, 20], // 点标记显示的层级范围，超过范围不显示。
357 text: entity_info[i].name, //标记显示的文本内容 395 text: entity_info[i].name, //标记显示的文本内容
...@@ -359,7 +397,7 @@ export default { ...@@ -359,7 +397,7 @@ export default {
359 // draggable: true, //是否可拖拽 397 // draggable: true, //是否可拖拽
360 // cursor: "pointer", //指定鼠标悬停时的鼠标样式。 398 // cursor: "pointer", //指定鼠标悬停时的鼠标样式。
361 // angle: 10, //点标记的旋转角度 399 // angle: 10, //点标记的旋转角度
362 - style: this.markerStyle1, 400 + style: text_direction === 'vertical' ? this.markerStyle1 : this.markerStyle1_horizontal,
363 position: entity_info[i].position, //点标记在地图上显示的位置 401 position: entity_info[i].position, //点标记在地图上显示的位置
364 }); 402 });
365 textMarker.setMap(this.map); //将文本标记设置到地图上 403 textMarker.setMap(this.map); //将文本标记设置到地图上
...@@ -373,11 +411,11 @@ export default { ...@@ -373,11 +411,11 @@ export default {
373 this.markerSum.forEach(item => { 411 this.markerSum.forEach(item => {
374 if (e.target.hS !== item.hS) { 412 if (e.target.hS !== item.hS) {
375 // 修改文本的样式 413 // 修改文本的样式
376 - item.setStyle(this.markerStyle2); 414 + item.setStyle(item._x['writing-mode'] === 'vertical-rl' ? this.markerStyle2 : this.markerStyle2_horizontal);
377 } 415 }
378 }) 416 })
379 // 修改文本的样式 417 // 修改文本的样式
380 - e.target.setStyle(this.markerStyle1); 418 + e.target.setStyle(text_direction === 'vertical' ? this.markerStyle1 : this.markerStyle1_horizontal);
381 419
382 // 修改文本内容 420 // 修改文本内容
383 // textMarker.setText('样式已修改'); 421 // textMarker.setText('样式已修改');
...@@ -411,7 +449,67 @@ export default { ...@@ -411,7 +449,67 @@ export default {
411 // 使用 panBy 方法进行视图偏移 449 // 使用 panBy 方法进行视图偏移
412 this.map.panBy(0, offsetY); 450 this.map.panBy(0, offsetY);
413 }) 451 })
414 - } 452 + // if (entity_info[i]?.writing_mode === 'vertical') { // 标题文字垂直
453 + // let textMarker = new AMap.Text({
454 + // zooms: [18, 20], // 点标记显示的层级范围，超过范围不显示。
455 + // text: entity_info[i].name, //标记显示的文本内容
456 + // anchor: "center", //设置文本标记锚点位置
457 + // // draggable: true, //是否可拖拽
458 + // // cursor: "pointer", //指定鼠标悬停时的鼠标样式。
459 + // // angle: 10, //点标记的旋转角度
460 + // style: this.markerStyle1,
461 + // position: entity_info[i].position, //点标记在地图上显示的位置
462 + // });
463 + // textMarker.setMap(this.map); //将文本标记设置到地图上
464 + // this.markerSum.push(textMarker);
465 + // if (clickListener1) {
466 + // textMarker.off('click', clickListener)
467 + // }
468 + // // 绑定景点的点击事件 - 文字出现才能触发
469 + // var clickListener1 = textMarker.on('click', (e) => {
470 + // // 还原样式
471 + // this.markerSum.forEach(item => {
472 + // if (e.target.hS !== item.hS) {
473 + // // 修改文本的样式
474 + // item.setStyle(this.markerStyle2);
475 + // }
476 + // })
477 + // // 修改文本的样式
478 + // e.target.setStyle(this.markerStyle1);
479 +
480 + // // 修改文本内容
481 + // // textMarker.setText('样式已修改');
482 + // //
483 +
484 + // // console.warn(e);
485 + // this.itemInfo = entity_info[i];
486 +
487 + // // 详情为空提示
488 + // if (!this.itemInfo.details.length) {
489 + // this.show_toast = true;
490 + // this.toast_text = '该景点暂无详情'
491 + // return;
492 + // }
493 +
494 +
495 + // // 打开浮动面板
496 + // this.info_height = (0.65 * window.innerHeight);
497 + // // 浮动面板样式
498 + // $('.van-floating-panel__content').css('borderRadius', '1.25rem');
499 + // $('.van-floating-panel').css('boxShadow', '0 0 15px black');
500 +
501 + // // 定位到当前位置中心
502 + // this.map.setZoomAndCenter(this.zoom, this.itemInfo.position);
503 + // // 获取地图容器的高度
504 + // const mapHeight = this.map.getSize().height;
505 +
506 + // // 计算需要向上移动的像素值，比如向上移动地图高度的一半左右
507 + // const offsetY = -mapHeight / 3.5;
508 +
509 + // // 使用 panBy 方法进行视图偏移
510 + // this.map.panBy(0, offsetY);
511 + // })
512 + // }
415 // TODO： 获取详情定位信息用来导航 513 // TODO： 获取详情定位信息用来导航
416 // 导航路径 514 // 导航路径
417 let marker_id = this.$route.query.marker_id; 515 let marker_id = this.$route.query.marker_id;
......
1 <!-- 1 <!--
2 * @Date: 2023-05-19 14:54:27 2 * @Date: 2023-05-19 14:54:27
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-02-10 16:15:37 4 + * @LastEditTime: 2025-02-10 17:45:00
5 * @FilePath: /map-demo/src/views/by/map.vue 5 * @FilePath: /map-demo/src/views/by/map.vue
6 * @Description: 公众地图主体页面 6 * @Description: 公众地图主体页面
7 --> 7 -->
...@@ -221,6 +221,44 @@ export default { ...@@ -221,6 +221,44 @@ export default {
221 "justify-content": "center", 221 "justify-content": "center",
222 "align-items": "center", 222 "align-items": "center",
223 }, 223 },
224 + markerStyle2_horizontal: { // 选中
225 + //设置文本样式，Object 同 css 样式表
226 + "padding": ".2rem .5rem .2rem .5rem",
227 + // "margin-bottom": "1rem",
228 + "border-color": "#DD7850",
229 + "border-radius": ".25rem",
230 + "background-color": "#FFF",
231 + // "width": "1rem",
232 + // "border-width": 0,
233 + // "box-shadow": "0 2px 6px 0 rgba(114, 124, 245, .5)",
234 + // "text-align": "center",
235 + "font-size": "0.8rem",
236 + "color": "#DD7850",
237 + "writing-mode": "horizontal",
238 + "text-orientation": "mixed",
239 + "display": "flex",
240 + "justify-content": "center",
241 + "align-items": "center",
242 + },
243 + markerStyle1_horizontal: { // 未选中
244 + //设置文本样式，Object 同 css 样式表
245 + "padding": ".2rem .5rem .2rem .5rem",
246 + // "margin-bottom": "1rem",
247 + "border-color": "#fcfbfa",
248 + "border-radius": ".25rem",
249 + "background-color": "#DD7850",
250 + // "width": "1rem",
251 + // "border-width": 0,
252 + // "box-shadow": "0 2px 6px 0 rgba(114, 124, 245, .5)",
253 + // "text-align": "center",
254 + "font-size": "0.8rem",
255 + "color": "white",
256 + "writing-mode": "horizontal",
257 + "text-orientation": "mixed",
258 + "display": "flex",
259 + "justify-content": "center",
260 + "align-items": "center",
261 + },
224 current_safe_route: [], 262 current_safe_route: [],
225 route_safe_marker: [], 263 route_safe_marker: [],
226 show_walk_route: true, 264 show_walk_route: true,
...@@ -359,7 +397,7 @@ export default { ...@@ -359,7 +397,7 @@ export default {
359 } else { 397 } else {
360 marker_icon = entity_info[i].icon; 398 marker_icon = entity_info[i].icon;
361 } 399 }
362 - if (entity_info[i]?.writing_mode === 'vertical') { // 标题文字垂直 400 + let text_direction = entity_info[i]?.writing_mode === 'vertical' ? 'vertical' : 'horizontal';
363 let textMarker = new AMap.Text({ 401 let textMarker = new AMap.Text({
364 zooms: [18, 20], // 点标记显示的层级范围，超过范围不显示。 402 zooms: [18, 20], // 点标记显示的层级范围，超过范围不显示。
365 text: entity_info[i].name, //标记显示的文本内容 403 text: entity_info[i].name, //标记显示的文本内容
...@@ -367,7 +405,7 @@ export default { ...@@ -367,7 +405,7 @@ export default {
367 // draggable: true, //是否可拖拽 405 // draggable: true, //是否可拖拽
368 // cursor: "pointer", //指定鼠标悬停时的鼠标样式。 406 // cursor: "pointer", //指定鼠标悬停时的鼠标样式。
369 // angle: 10, //点标记的旋转角度 407 // angle: 10, //点标记的旋转角度
370 - style: this.markerStyle1, 408 + style: text_direction === 'vertical' ? this.markerStyle1 : this.markerStyle1_horizontal,
371 position: entity_info[i].position, //点标记在地图上显示的位置 409 position: entity_info[i].position, //点标记在地图上显示的位置
372 }); 410 });
373 textMarker.setMap(this.map); //将文本标记设置到地图上 411 textMarker.setMap(this.map); //将文本标记设置到地图上
...@@ -381,11 +419,11 @@ export default { ...@@ -381,11 +419,11 @@ export default {
381 this.markerSum.forEach(item => { 419 this.markerSum.forEach(item => {
382 if (e.target.hS !== item.hS) { 420 if (e.target.hS !== item.hS) {
383 // 修改文本的样式 421 // 修改文本的样式
384 - item.setStyle(this.markerStyle2); 422 + item.setStyle(item._x['writing-mode'] === 'vertical-rl' ? this.markerStyle2 : this.markerStyle2_horizontal);
385 } 423 }
386 }) 424 })
387 // 修改文本的样式 425 // 修改文本的样式
388 - e.target.setStyle(this.markerStyle1); 426 + e.target.setStyle(text_direction === 'vertical' ? this.markerStyle1 : this.markerStyle1_horizontal);
389 427
390 // 修改文本内容 428 // 修改文本内容
391 // textMarker.setText('样式已修改'); 429 // textMarker.setText('样式已修改');
...@@ -419,7 +457,67 @@ export default { ...@@ -419,7 +457,67 @@ export default {
419 // 使用 panBy 方法进行视图偏移 457 // 使用 panBy 方法进行视图偏移
420 this.map.panBy(0, offsetY); 458 this.map.panBy(0, offsetY);
421 }) 459 })
422 - } 460 + // if (entity_info[i]?.writing_mode === 'vertical') { // 标题文字垂直
461 + // let textMarker = new AMap.Text({
462 + // zooms: [18, 20], // 点标记显示的层级范围，超过范围不显示。
463 + // text: entity_info[i].name, //标记显示的文本内容
464 + // anchor: "center", //设置文本标记锚点位置
465 + // // draggable: true, //是否可拖拽
466 + // // cursor: "pointer", //指定鼠标悬停时的鼠标样式。
467 + // // angle: 10, //点标记的旋转角度
468 + // style: this.markerStyle1,
469 + // position: entity_info[i].position, //点标记在地图上显示的位置
470 + // });
471 + // textMarker.setMap(this.map); //将文本标记设置到地图上
472 + // this.markerSum.push(textMarker);
473 + // if (clickListener1) {
474 + // textMarker.off('click', clickListener)
475 + // }
476 + // // 绑定景点的点击事件 - 文字出现才能触发
477 + // var clickListener1 = textMarker.on('click', (e) => {
478 + // // 还原样式
479 + // this.markerSum.forEach(item => {
480 + // if (e.target.hS !== item.hS) {
481 + // // 修改文本的样式
482 + // item.setStyle(this.markerStyle2);
483 + // }
484 + // })
485 + // // 修改文本的样式
486 + // e.target.setStyle(this.markerStyle1);
487 +
488 + // // 修改文本内容
489 + // // textMarker.setText('样式已修改');
490 + // //
491 +
492 + // // console.warn(e);
493 + // this.itemInfo = entity_info[i];
494 +
495 + // // 详情为空提示
496 + // if (!this.itemInfo.details.length) {
497 + // this.show_toast = true;
498 + // this.toast_text = '该景点暂无详情'
499 + // return;
500 + // }
501 +
502 +
503 + // // 打开浮动面板
504 + // this.info_height = (0.65 * window.innerHeight);
505 + // // 浮动面板样式
506 + // $('.van-floating-panel__content').css('borderRadius', '1.25rem');
507 + // $('.van-floating-panel').css('boxShadow', '0 0 15px black');
508 +
509 + // // 定位到当前位置中心
510 + // this.map.setZoomAndCenter(this.zoom, this.itemInfo.position);
511 + // // 获取地图容器的高度
512 + // const mapHeight = this.map.getSize().height;
513 +
514 + // // 计算需要向上移动的像素值，比如向上移动地图高度的一半左右
515 + // const offsetY = -mapHeight / 3.5;
516 +
517 + // // 使用 panBy 方法进行视图偏移
518 + // this.map.panBy(0, offsetY);
519 + // })
520 + // }
423 // TODO： 获取详情定位信息用来导航 521 // TODO： 获取详情定位信息用来导航
424 // 导航路径 522 // 导航路径
425 let marker_id = this.$route.query.marker_id; 523 let marker_id = this.$route.query.marker_id;
......