Geobuilding是一款傻瓜化高可用的GIS数据生产工具，可以导出GEOJSON、SHP、三维模型等格式。在软件中增加[自定义树形菜单]一直悬而未决，直到最近更新了增加树形菜单功能。
【更新】240523 属性扩展支持自定义树形菜单，大容量树形结构，制作层级网格
传统树形菜单使用dom处理，如果根结点数据有1万个，至少为产生1万个dom，这对应用来说是无法接受的。有人说分页处理？如果是5级结构，选择最底数据时，他的父级会全部展开。这又会产生大量dom。
如何解决大数据量的树形数据展示、选择？
下图是在***Geobuilding***软件中绘制的几个polygon要素。发现了什么？这看起来像极了树形菜单！
我们知道Geojson数据有点/线/面。而高德地图、maplibre-gl、mapbox-gl、openlayers等都可以自定义样式渲染geojson数据，比如线颜色、面填充色、文字标记等。并且支持click事件，支持通过setData方法更新数据。 这样树形菜单的样式和点击事件不是都有了吗？
生成树形菜单Geojson数据
树形数据格式一般如下
代码语言：javascript复制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数据，保障性能。
代码语言：javascript复制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.
});添加数据源
代码语言：javascript复制arduino复制代码map.addSource('treeview', {
'type': 'geojson',
'data': {
'type': 'FeatureCollection',
'features': features//生成的polygon数组
}
});添加三个层
1 面层用于填充按钮背景 mian 2 线层对按钮描边 xian 3 符号层 显示文字 dian
代码语言：javascript复制arduino复制代码map.addLayer(....添加点击事件
代码语言：javascript复制javascript复制代码//在面图层上监听点击事件
map.on('click', 'mian', function (e) {
let prop = e.features[0].properties;
//根据属性中的id、pid去更新高亮样式，动态生成新的polygon数组，使用setdata更新数据
})
