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 308 additions and 112 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,67 +389,127 @@ export default { ...@@ -351,67 +389,127 @@ 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, //标记显示的文本内容
358 - anchor: "center", //设置文本标记锚点位置 396 + anchor: "center", //设置文本标记锚点位置
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); //将文本标记设置到地图上
366 - this.markerSum.push(textMarker); 404 + this.markerSum.push(textMarker);
367 - if (clickListener1) { 405 + if (clickListener1) {
368 - textMarker.off('click', clickListener) 406 + textMarker.off('click', clickListener)
369 - } 407 + }
370 - // 绑定景点的点击事件 - 文字出现才能触发 408 + // 绑定景点的点击事件 - 文字出现才能触发
371 - var clickListener1 = textMarker.on('click', (e) => { 409 + var clickListener1 = textMarker.on('click', (e) => {
372 - // 还原样式 410 + // 还原样式
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 - }
378 - })
379 - // 修改文本的样式
380 - e.target.setStyle(this.markerStyle1);
381 -
382 - // 修改文本内容
383 - // textMarker.setText('样式已修改');
384 - //
385 -
386 - // console.warn(e);
387 - this.itemInfo = entity_info[i];
388 -
389 - // 详情为空提示
390 - if (!this.itemInfo.details.length) {
391 - this.show_toast = true;
392 - this.toast_text = '该景点暂无详情'
393 - return;
394 } 415 }
416 + })
417 + // 修改文本的样式
418 + e.target.setStyle(text_direction === 'vertical' ? this.markerStyle1 : this.markerStyle1_horizontal);
395 419
420 + // 修改文本内容
421 + // textMarker.setText('样式已修改');
422 + //
396 423
397 - // 打开浮动面板 424 + // console.warn(e);
398 - this.info_height = (0.65 * window.innerHeight); 425 + this.itemInfo = entity_info[i];
399 - // 浮动面板样式
400 - $('.van-floating-panel__content').css('borderRadius', '1.25rem');
401 - $('.van-floating-panel').css('boxShadow', '0 0 15px black');
402 426
403 - // 定位到当前位置中心 427 + // 详情为空提示
404 - this.map.setZoomAndCenter(this.zoom, this.itemInfo.position); 428 + if (!this.itemInfo.details.length) {
405 - // 获取地图容器的高度 429 + this.show_toast = true;
406 - const mapHeight = this.map.getSize().height; 430 + this.toast_text = '该景点暂无详情'
431 + return;
432 + }
407 433
408 - // 计算需要向上移动的像素值，比如向上移动地图高度的一半左右
409 - const offsetY = -mapHeight / 3.5;
410 434
411 - // 使用 panBy 方法进行视图偏移 435 + // 打开浮动面板
412 - this.map.panBy(0, offsetY); 436 + this.info_height = (0.65 * window.innerHeight);
413 - }) 437 + // 浮动面板样式
414 - } 438 + $('.van-floating-panel__content').css('borderRadius', '1.25rem');
439 + $('.van-floating-panel').css('boxShadow', '0 0 15px black');
440 +
441 + // 定位到当前位置中心
442 + this.map.setZoomAndCenter(this.zoom, this.itemInfo.position);
443 + // 获取地图容器的高度
444 + const mapHeight = this.map.getSize().height;
445 +
446 + // 计算需要向上移动的像素值，比如向上移动地图高度的一半左右
447 + const offsetY = -mapHeight / 3.5;
448 +
449 + // 使用 panBy 方法进行视图偏移
450 + this.map.panBy(0, offsetY);
451 + })
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,67 +397,127 @@ export default { ...@@ -359,67 +397,127 @@ 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, //标记显示的文本内容
366 - anchor: "center", //设置文本标记锚点位置 404 + anchor: "center", //设置文本标记锚点位置
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); //将文本标记设置到地图上
374 - this.markerSum.push(textMarker); 412 + this.markerSum.push(textMarker);
375 - if (clickListener1) { 413 + if (clickListener1) {
376 - textMarker.off('click', clickListener) 414 + textMarker.off('click', clickListener)
377 - } 415 + }
378 - // 绑定景点的点击事件 - 文字出现才能触发 416 + // 绑定景点的点击事件 - 文字出现才能触发
379 - var clickListener1 = textMarker.on('click', (e) => { 417 + var clickListener1 = textMarker.on('click', (e) => {
380 - // 还原样式 418 + // 还原样式
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 - }
386 - })
387 - // 修改文本的样式
388 - e.target.setStyle(this.markerStyle1);
389 -
390 - // 修改文本内容
391 - // textMarker.setText('样式已修改');
392 - //
393 -
394 - // console.warn(e);
395 - this.itemInfo = entity_info[i];
396 -
397 - // 详情为空提示
398 - if (!this.itemInfo.details.length) {
399 - this.show_toast = true;
400 - this.toast_text = '该景点暂无详情'
401 - return;
402 } 423 }
424 + })
425 + // 修改文本的样式
426 + e.target.setStyle(text_direction === 'vertical' ? this.markerStyle1 : this.markerStyle1_horizontal);
403 427
428 + // 修改文本内容
429 + // textMarker.setText('样式已修改');
430 + //
404 431
405 - // 打开浮动面板 432 + // console.warn(e);
406 - this.info_height = (0.65 * window.innerHeight); 433 + this.itemInfo = entity_info[i];
407 - // 浮动面板样式
408 - $('.van-floating-panel__content').css('borderRadius', '1.25rem');
409 - $('.van-floating-panel').css('boxShadow', '0 0 15px black');
410 434
411 - // 定位到当前位置中心 435 + // 详情为空提示
412 - this.map.setZoomAndCenter(this.zoom, this.itemInfo.position); 436 + if (!this.itemInfo.details.length) {
413 - // 获取地图容器的高度 437 + this.show_toast = true;
414 - const mapHeight = this.map.getSize().height; 438 + this.toast_text = '该景点暂无详情'
439 + return;
440 + }
415 441
416 - // 计算需要向上移动的像素值，比如向上移动地图高度的一半左右
417 - const offsetY = -mapHeight / 3.5;
418 442
419 - // 使用 panBy 方法进行视图偏移 443 + // 打开浮动面板
420 - this.map.panBy(0, offsetY); 444 + this.info_height = (0.65 * window.innerHeight);
421 - }) 445 + // 浮动面板样式
422 - } 446 + $('.van-floating-panel__content').css('borderRadius', '1.25rem');
447 + $('.van-floating-panel').css('boxShadow', '0 0 15px black');
448 +
449 + // 定位到当前位置中心
450 + this.map.setZoomAndCenter(this.zoom, this.itemInfo.position);
451 + // 获取地图容器的高度
452 + const mapHeight = this.map.getSize().height;
453 +
454 + // 计算需要向上移动的像素值，比如向上移动地图高度的一半左右
455 + const offsetY = -mapHeight / 3.5;
456 +
457 + // 使用 panBy 方法进行视图偏移
458 + this.map.panBy(0, offsetY);
459 + })
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;
......