「这是我参与11月更文挑战的第8天，活动详情查看：2021最后一次更文挑战」
在做用户画像的时候，有很多数据分析的模块，需要用到图表，给大家推荐几个图标库
1.antv L7地图 绘制大小不受控制bug
原因： 地图的画布原本底层就设置了相对定位，所以会出现地图绘制出来的相对定位的差错\
.l7-marker-container{
width:100%;
height:100%;
overflow:hidden;
position:absolute;
}
所以为了绘制时候的定位，需要对画布进行相对定位，不然相对定位到页面上更上层的元素，甚至会到页面body层，那样页面绘制就更不可控制了
#box {
position: relative;
width: 100px;
height: 100px;
}
2.两个绘制版本的地图
有几个关键的API单独描述一下：
- logoVisible: false, // 是否显示logo
- scale('value',{type: 'cat',})//数据映射类型,默认值cat--大坑
- dragEnable: false, // 是否允许地图拖拽
- keyboardEnable: false, // 是否允许形键盘事件
- doubleClickZoom: false, // 双击放大
- zoomEnable: false, // 滚动缩放
- rotateEnable: false, // 旋转
地图的数据映射---度量
连续型 linear 线性 log pow 指数型
连续分类型 quantile 等分位 quantize 等间距
枚举型 cat 枚举----默认
import { Scene, PolygonLayer, LineLayer, PointLayer ,Popup} from "@antv/l7";
import { CountryLayer } from "@antv/l7-district";
import { Mapbox } from "@antv/l7-maps";
initscene() {
const scene = new Scene({
id: "map",
logoVisible: false, // 是否显示logo
map: new Mapbox({
pitch: 0,
style: "blank",
center: [ 116.368652, 39.93866 ],
zoom: 10.07
}),
});
scene.setMapStatus({
dragEnable: false, // 是否允许地图拖拽
keyboardEnable: false, // 是否允许形键盘事件
doubleClickZoom: false, // 双击放大
zoomEnable: false, // 滚动缩放
rotateEnable: false, // 旋转
});
scene.on("loaded", () => {
//CountryLayer地图组件，展示会有bug--上面度量默认值导致
new CountryLayer(scene, {
data: this.ProvinceData,
joinBy: ["NAME_CHN", "name"],
depth: 1,
showBorder: false,
fill: {
color: {
field: "value",
values: this.colors,
},
},
label: {
enable: false,
},
popup: {
enable: true,
Html: (props) => {
return `<div class="flex-sb" style="width:100px;"><div>${props.name}</div><div>${props.value}%</div></div>`;
},
},
});
//PolygonLayer地图组件----------------
const chinaPolygonLayer = new PolygonLayer({
autoFit: true
})
.source(this.chinachat)
.color('value', this.colors)
.shape('fill')
.scale('value',{
type: 'quantize',
})
.style({
opacity: 1
});
scene.addLayer(chinaPolygonLayer);
chinaPolygonLayer.on('mousemove', (ev) => {
const popup = new Popup({
offsets: [ 0, 0 ],
closeButton: false
})
.setLnglat(ev.lngLat)
.setHTML(`<span>${ev.feature.properties.name}: ${ev.feature.properties.value}%</span>`);
scene.addPopup(popup);
});
//----------------------------
});
}
