p90524618
/
antv-l7
mirror of https://gitee.com/antv-l7/antv-l7
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

style: lint style

This commit is contained in:
shihui 2022-01-11 23:33:34 +08:00
parent 59ac9a005d
commit 4e336d590e
1 changed files with 11 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
docs/api/point_layer/iconfont.zh.md
View File

@ -18,12 +18,12 @@ import { PointLayer } from '@antv/l7';
<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*WdOfSI_uyxIAAAAAAAAAAAAAARQnAQ'> <img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*WdOfSI_uyxIAAAAAAAAAAAAAARQnAQ'>
```javascript ```javascript
// 指定 iconfont 映射为字体样式的名称 // 指定 iconfont 映射为字体样式的名称
const fontFamily = 'iconfont'; const fontFamily = 'iconfont';
// 指定 iconfont 字体文件 // 指定 iconfont 字体文件
const fontPath = '//at.alicdn.com/t/font_2534097_fcae9o2mxbv.woff2?t=1622200439140'; const fontPath =
'//at.alicdn.com/t/font_2534097_fcae9o2mxbv.woff2?t=1622200439140';
// 全局添加资源 // 全局添加资源
scene.addFontFace(fontFamily, fontPath); scene.addFontFace(fontFamily, fontPath);
@ -33,37 +33,35 @@ scene.addIconFont('icon1', '&#xe6d4;');
scene.on('loaded', () => { scene.on('loaded', () => {
fetch( fetch(
'https://gw.alipayobjects.com/os/bmw-prod/70408903-80db-4278-a318-461604acb2df.json' 'https://gw.alipayobjects.com/os/bmw-prod/70408903-80db-4278-a318-461604acb2df.json',
) )
.then(res => res.json()) .then((res) => res.json())
.then(data => { .then((data) => {
const pointLayer = new PointLayer({}) const pointLayer = new PointLayer({})
.source(data.list, { .source(data.list, {
parser: { parser: {
type: 'json', type: 'json',
x: 'j', x: 'j',
y: 'w' y: 'w',
} },
}) })
.shape('icon', 'text') // 指定需要映射字段为 icon、shape 类型和普通的文字标注一样为 text .shape('icon', 'text') // 指定需要映射字段为 icon、shape 类型和普通的文字标注一样为 text
.size(20) .size(20)
.color('w', [ '#a6cee3', '#1f78b4', '#b2df8a', '#33a02c', '#fb9a99' ]) .color('w', ['#a6cee3', '#1f78b4', '#b2df8a', '#33a02c', '#fb9a99'])
.style({ .style({
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
textOffset: [ 40, 0 ], // 文本相对锚点的偏移量 [水平, 垂直] textOffset: [40, 0], // 文本相对锚点的偏移量 [水平, 垂直]
padding: [ 0, 0 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 padding: [0, 0], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
stroke: '#ffffff', // 描边颜色 stroke: '#ffffff', // 描边颜色
fontFamily, fontFamily,
iconfont: true, // 开启 iconfont 映射 iconfont: true, // 开启 iconfont 映射
textAllowOverlap: true textAllowOverlap: true,
}); });
scene.addLayer(pointLayer); scene.addLayer(pointLayer);
}); });
}); });
``` ```
🌟 关于 iconfont 资源使用可以前往 iconfont 官网 [官网传送门](https://iconfont.cn/) 🌟 关于 iconfont 资源使用可以前往 iconfont 官网 [官网传送门](https://iconfont.cn/)
<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*PMuES7vfcKEAAAAAAAAAAAAAARQnAQ'> <img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*PMuES7vfcKEAAAAAAAAAAAAAARQnAQ'>