1.因二维的效果过于单一，所以可用把二维的层级交互换为3D层级交互

以这个demo为列，我们可以看到 ，当鼠标点击武汉市后进行的是一个地图替换操作，把原本湖北省的地图数据替换为了武汉市的地图数据，观感较差

2.采用thingjs+森城市cityBuilder的方式实现三维层级交互

实现思路为在城市三维地图上加上最外层的表示点，当点击一个区划的时候，镜头会拉近到这个区划，并且最外层的表示点都会消失，而点击区划内的街道表示点都显示出来。

3.重新封装geojson点数据

可以把这种一般的点数据格式，改为包含关系，在点对象中添加属性children，并把其余的点放进去，这样就可以实现点的层级关系

4.代码实现

4.1 首先明确可能存在的数据交互方式属于父子通信跨域

这里 父向子源也可以写成'*'

4.2 主要代码

  //获取层级包含点
  // 这里的point为genjson中点的位置信息
    function getDetail(point){
                point.forEach(function (item) {
                    //这里的mapInfoList为点的数据信息
                    var info = mapInfoList.find((info) => { return info.name == item.properties.name });
                    //位置和数据信息合并一下
                    if (info) {
                        for (var i in info) {
                            var val = info[i];
                            item.properties[i] = val;
                        }
                    }
                    var geoPoint = app.create({
                        type: 'GeoPoint',
                        name: 'geoPoint0',
                        coordinates: item.geometry.coordinates,
                        userData: item.properties,
                        renderer: {
                            type: 'image',  // image代表创建图片类型的点
                            // url: 'image/uGeo/pop.png',  // 图片的url
                            url: url,  // 图片的url
                            size: 6   // 尺寸
                        },
                        //自定义悬浮框，其中customHtml可以直接用userData中的数据
                        infoWindow: {
                            title: item.properties.regionName,
                            displayMode: CMAP.DisplayMode.MouseEnter ,  // 点击显示
                            type: CMAP.InfoWindowType.Custom,  // 标准indoWindow改为自定义
                            style: CMAP.InfoWindowStyle.Default,  // 默认样式 黑色
                            pivot: [0.5, 1.15],  // 界面的轴心，以百分比表示界面轴心位置。[0,0] 代表界面左上；[1,1] 代表界面右下 pivot可大于1用于像素级的偏移
                            customHtml:'<div style="width:150px;height:150px;background-color:rgba(0,6,63,0.5)"><h3 style="color:#66dcff;margin:20px;0">{{name}}</h3> ',
                        },
                    });
                    //点击之后如果有子元素进行下一步操作
                    geoPoint.on('click',debounce(function(ae){
                         if(item.children){
                               app.query(".GeoPoint").forEach(item => item.destroy());
                            }
                           console.log(ae.object._userData)   
                           window.parent.postMessage({
                            msg:ae.object._userData
                            },'*')
                    app.camera.earthFlyTo({
                        time: 3000,
                        height: 4000,
                        lonlat: geoPoint.coordinates,
                        disablePick: false,
                        complete: function () {
                            if(item.children){
                                getDetail(item.children)
                            }
                        }
                    });
                    },1000,true))
                    pointLayer.add(geoPoint);
                })
    }

参考：使用postMessage来实现父子通信跨域