英文字体有问题

[liho00]

问题描述

英文字体不整齐，设置了fontFamily也不行

https://l7plot.antv.vision/examples/area/division#us-states-density

重现链接

https://codesandbox.io/s/amazing-wright-vnh5d9
https://l7plot.antv.vision/examples/area/division#us-states-density

重现步骤

import { GaodeMap, Scene } from "@antv/l7";
import { Choropleth } from "@antv/l7plot";

const scene = new Scene({
  id: "map",
  map: new GaodeMap({
    style: "blank",
    center: [120.19382669582967, 30.258134],
    zoom: 3
  })
});

scene.on("loaded", () => {
  fetch(
    "https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/administrative-data/area-list.json"
  )
    .then((response) => response.json())
    .then((list) => {
      const data = list
        .filter(({ level, parent }) => level === "city" && parent === 330000)
        .map((item) => ({ ...item, value: Math.random() * 5000 }));

      const choropleth = new Choropleth({
        source: {
          data,
          joinBy: {
            sourceField: "adcode",
            geoField: "adcode"
          }
        },
        viewLevel: {
          level: "province",
          adcode: 330000
        },
        autoFit: true,
        color: {
          field: "value",
          value: ["#B8E1FF", "#7DAAFF", "#3D76DD", "#0047A5", "#001D70"],
          scale: { type: "quantize" }
        },
        style: {
          opacity: 1,
          stroke: "#ccc",
          lineWidth: 0.6,
          lineOpacity: 1
        },
        label: {
          visible: true,
          // field: 'name',
          content: "cheshi",
          style: {
            fill: "#000",
            opacity: 0.8,
            fontSize: 10,
            stroke: "#fff",
            strokeWidth: 1.5,
            textAllowOverlap: false,
            padding: [5, 5]
          }
        },
        state: {
          active: { stroke: "black", lineWidth: 1 }
        },
        tooltip: {
          items: ["name", "adcode", "value"]
        },
        zoom: {
          position: "bottomright"
        },
        legend: {
          position: "bottomleft"
        }
      });

      choropleth.addToScene(scene);
    });
});

预期行为

正常字体
https://ant-design-charts.antgroup.com/examples/map-area/division#us-states-density

平台

• 操作系统: macOS
• 网页浏览器: Google Chrome

    "@antv/l7": "^2.19.9",
    "@antv/l7-maps": "^2.19.9",
    "@antv/l7plot": "^0.5.6",

屏幕截图或视频（可选）

补充说明（可选）

No response

[github-actions]

hi @liho00, welcome!

[github-actions]

Hi @liho00, Please star this repo if you find it useful! Thanks ⭐!
你好 @liho00。如果该仓库对你有用，可以 star 一下，感谢你的 ⭐!

[liho00]

star 了

2.17.12的版本没有英文字体问题

    "@antv/l7": "2.17.12",
    "@antv/l7-maps": "^2.19.9",
    "@antv/l7plot": "^0.5.6",

[lzxue]

感谢反馈

[lzxue]

https://l7.antv.antgroup.com/examples/point/text/#polygon_text @liho00 官网这个demo 好像没有问题

[liho00]

https://codesandbox.io/s/amazing-wright-vnh5d9

不一样吧，@lzxue

请查看这个codesandbox重现链接 https://codesandbox.io/s/amazing-wright-vnh5d9

我是使用area地图和其label property

你的是polygonLayer然后不是使用label的property

[Jerome-lara]

预计什么时候会修复字体对齐问题？