antv/l7 设置图例

引入Control 基类

import { Control } from "@antv/l7";

初始化基类

 const legend = new Control({position: "bottomright"});

设置Control 展示的内容,

通过扩展Control 的onAdd 方法我们自由定制control 需要展示内容和交互。

legend.onAdd = function () {let  el = document.createElement("div");el.className = "infolegend legend";let  grades = [0, 10, 20, 50, 100, 200, 500];let color= ["#FFF5B8", "#FFDC7D", "#FFAB5C", "#F27049", "#D42F31", "#730D1C"]for (var i = 0; i < grades.length; i++) {el.innerHTML +='<i style="background:' +color[i] +'"></i> ' +grades[i] +(grades[i + 1] ? "–" + grades[i + 1] + "<br>" : "+");}return el;};

添加到地图中

scene.addControl(legend)

还要加上css

.legend {line-height: 18px;color: #555;
}
.legend i {width: 18px;height: 18px;float: left;margin-right: 8px;opacity: 0.7;
}

效果图

antv/l7 设置图例相关推荐

【数据可视化】Antv L7给地图添加图例Legend
地图组件用于控制地图的状态如果平移,缩放,或者展示地图一些的辅助信息如图例.比例尺 L7 目前支持 Control Zoom 放大缩小 Scale 比例尺 Layers 图层列表组件介绍: impo ...
@antv/l7绘制地图，添加图例，修改地图上颜色，是否允许地图拖拽，是否滚动缩放等
html <div class="charts-box"><div style="min-height: 300px; justify-content: ...
在vue项目中使用AntV L7地图下钻，异步调用不重复生成
AntV L7 地图下钻的踩坑生成实现地图下钻.样式.数据异步调用生成,以及细节. ==注释后有'@#@#*'为重要== ==如有不对请指出== 1.安装AntV L7以及相关的组件引用 2.在da ...
html Antv L7 + mapbox 实现3D地图 3D中国地图不限于中国地图
echarts的3D地图实在太丑了,还一堆bug 使用阿里的Antv可视化库L7,实现3D地图,底图是mapbox 参考示例:https://l7.antv.antgroup.com/zh/examp ...
mapbox 使用antv/l7添加下雨效果
AntV 是蚂蚁金服全新一代数据可视化解决方案,致力于提供一套简单.方便.专业可靠.无限可能的数据可视化最佳实践.AntV包括以下解决方案 G2:可视化引擎 G2Plot:图表库 G6 : 图可视化引 ...
antv L7地图报错：context lost at Funciton
某天疯狂渲染地图组件,大概17次来回切换,屏幕重新渲染地图,最终它还是没能扛下所有,不幸崩塌. 分析可能的原因: 1.由于L7地图画布一直累加在页面上,old context 无法回溯更新," ...
antV/L7@1.3.20-」实现北京地图+散点图
现在是2020年07月04日 17:57,刚整理好了antV/L7@2.2.19版本的世界地图+散点图,有兴趣可移步链接,文章最后同样有源码获取方式.加油呀~ ------------------- ...
AntV L7地图可视化入坑笔记
先用 HTML CDN的方式跑起来一个地图案例: 官方案例地址:https://codesandbox.io/s/laughing-fermat-fjy5y?file=/index.html:491- ...
antV/L7@2.2.19-」世界地图+散点图
之前更新过@antv/L7->1.3.20版本->北京地图+散点图,链接可点,源码也放在了公众号里,这一篇@antv/L7->2.2.19版本的源码也会放在公众号里,可在最后提取.以 ...

antv/l7 设置图例

引入Control 基类

初始化基类

设置Control 展示的内容,

添加到地图中

还要加上css

效果图

antv/l7 设置图例相关推荐

最新文章

热门文章