码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2019-12-08 17:36:04      阅读:556      评论:0      收藏:0      [点我收藏+]

标签:XML   资源   使用   是否一致   隐藏   document   view   移除   属性   

/*获取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样式。

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

标签:XML   资源   使用   是否一致   隐藏   document   view   移除   属性   

原文地址:https://www.cnblogs.com/Haiszu/p/12006056.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!