设计高性能树形菜单，支持数十万条数据加载。
原创
Geobuilding是一款傻瓜化高可用的GIS数据生产工具，可以导出GEOJSON、SHP、三维模型等格式。在软件中增加[自定义树形菜单]一直悬而未决，直到最近更新了增加树形菜单功能。
传统树形菜单使用dom处理，如果根结点数据有1万个，至少为产生1万个dom，这对应用来说是无法接受的。有人说分页处理？如果是5级结构，选择最底数据时，他的父级会全部展开。这又会产生大量dom。
如何解决大数据量的树形数据展示、选择？
下图是在***Geobuilding***软件中绘制的几个polygon要素。发现了什么？这看起来像极了树形菜单！
我们知道Geojson数据有点/线/面。而高德地图、maplibre-gl、mapbox-gl、openlayers等都可以自定义样式渲染geojson数据，比如线颜色、面填充色、文字标记等。并且支持click事件，支持通过setData方法更新数据。 这样树形菜单的样式和点击事件不是都有了吗？
生成树形菜单Geojson数据
树形数据格式一般如下
css复制代码[{"text":"北京市","id":"11"},{"text":"市辖区","id":"1101","pid":"11"},{"text":"东城区","id":"110101","pid":"1101"},{"text":"西城区","id":"110102","pid":"1101"}]首先确定一个起始经纬度坐标点。 每一行生成一个polygon，根据固定高度和宽度计算polygon所有坐标点。如果有子集按固定长度缩近生成polygon，并在每个polygon中设置属性，用于点击获取属性值。
设置地图样式
我选择基于maplibre-gl实现。去掉卫星图等其他图层，使用空白样式渲染。仅仅使用webgl框架渲染geojson数据，保障性能。
php复制代码const map = new maplibregl.Map({
style: {
"sources": {},
"glyphs": "http://host/{fontstack}/{range}.pbf",//字体
"layers": [{"id": "background", "type": "background", "paint": {"background-color": "rgba(255,255,255,1)"}}]
},
container: 'map',
pitch: 0,
antialias: false,
center: [117.6224008825, 26.264068048],
zoom: 20.
});添加数据源
arduino复制代码map.addSource('treeview', {
'type': 'geojson',
'data': {
'type': 'FeatureCollection',
'features': features//生成的polygon数组
}
});添加三个层
1 面层用于填充按钮背景 mian 2 线层对按钮描边 xian 3 符号层 显示文字 dian
arduino复制代码map.addLayer(....添加点击事件
javascript复制代码//在面图层上监听点击事件
map.on('click', 'mian', function (e) {
let prop = e.features[0].properties;
//根据属性中的id、pid去更新高亮样式，动态生成新的polygon数组，使用setdata更新数据
})视频演示
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。