cesium添加多个geojson文件并分别控制显示和隐藏

Posted 2020-11-24 Haiszu

/*获取geojson数据*/
function get_geojson(name,h,n){
    let x=document.getElementById(n);
    if(x.className === "la"){
       loadgeojson(name,h,n);
       x.className = "la2";
    }else{
        x.className = "la";
        let len = viewer.dataSources.length;
        if(len>0){
            for(let i=0;i<len;i++){
                var dataSource = viewer.dataSources.get(i);
                if(dataSource._name === n){
                    viewer.dataSources.remove(dataSource);
                }
            }
        }
    }
}
var promise=new Array(9);
function loadgeojson(name,h,n){
    let xmlhttp,p;
    if (window.XMLHttpRequest)
    {
        xmlhttp=new XMLHttpRequest();
    } else
    {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP_geo");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200 )
        {
            p=xmlhttp.response;
            Cesium.Math.setRandomNumberSeed(0);//设置随机数种子
            promise[n] = Cesium.GeoJsonDataSource.load(p);
            promise[n].then(function (dataSource) {
                viewer.dataSources.add(dataSource);
                dataSource.name= n;
                let entities = dataSource.entities.values;
                entities.id=n;
                let colorHash = {};
                //可对单个实体进行设置
                for (let i = 0; i < entities.length; i++) {
                    let entity = entities[i];//geojson里面必须得有一个name属性，entity.name对应
                    let name = entity.name;//可以使两个同名要素使用同一种颜色
                    let color = colorHash[name];
                    if (!color) {
                        color = Cesium.Color.fromRandom({
                            alpha : 1.0
                        });
                        colorHash[name] = color;
                    }
                    entity.polygon.material = color;
                    entity.polygon.outline = true;// polygon边线显示与否
                    entity.polygon.height=h;//底面距离地面高度
                    entity.polygon.extrudedHeight =h+0.2;//顶面距离地面高度
                }
            });
            /*viewer.flyTo(promise[n]);*/
        }
    };
    xmlhttp.open("GET","./jsp/get_geojson.jsp?floor_name="+name,true);
    xmlhttp.send();
}

完整代码如上所示。

1创建promise数组，长度为geojson数据的个数；

2loadgeojson（name，h，n）函数异步加载geojson文件（服务器后台从数据库中下载json数据到本地，返回文件地址p），name为geojson数据名称，h为高度，n为id，设为datasource名称；

3getjson（name，h，n）函数，name为geojson数据名称，h为高度，n为datasource名称（参数与loadgeojson相同），datasource的id从1开始记录geojson加载顺序，判断名称是否一致，删除该资源（无序）。

4代码实现了在页面通过button控制geojson的加载和移除，对于已经加载的geojson数据，button.style.backgroundcolor变为红色（.la2样式），当移除该数据时，button回到.la样式。