Cesium加载geojson线数据，并加高亮效果

1.前言
最近有需要加载一些三维的数据，所以研究了下Cesium，写了一个加载json的小程序，加载json线数据，点击线会加高亮效果，先看看效果图。


2.正文
照例还是先看看代码，在简单说一下思路。

    var viewer = new Cesium.Viewer('cesiumContainer');
    var promise = Cesium.GeoJsonDataSource.load('/data/geojson/lineback_1.json');  //显示管线数据  直接加载json数据 比把json转化成czml在加载 快很多
    promise.then(function (dataSource) {
        viewer.dataSources.add(dataSource);
        var entities = dataSource.entities.values;
        var colorHash = {};
        for (var o = 0; o < entities.length; o++) {
            var r = entities[o];
            r.nameID = o;   //给每条线添加一个编号，方便之后对线修改样式
            r.polyline.width = 10;  //添加默认样式
            (r.polyline.material = new Cesium.PolylineGlowMaterialProperty({
                glowPower: .1, //一个数字属性，指定发光强度，占总线宽的百分比。
                color: Cesium.Color.ORANGERED.withAlpha(.9)
            }), 10)
        }
        var temp = new Array();
        window.Hightlightline = function (nameid) {
            var exists = temp.indexOf(nameid);
            if (exists <= -1) {
                Highlight(nameid,50, 50);
                temp.push(nameid);  // 添加线nameID到数组，
            }
            else  //已经是高亮状态了 再次点击修改为原始状态
            {
                Highlight(nameid,10, 10);
                temp.splice(exists, 1);  //删除对应的nameID
            }
        }
        window.Highlight = function (nameid,width1, width2) {
            for (var o = 0; o < entities.length; o++) {
                var m = entities[o];
                if (nameid == o) {
                    m.polyline.width = width1;
                    (m.polyline.material = new Cesium.PolylineGlowMaterialProperty({
                        glowPower: .1, //一个数字属性，指定发光强度，占总线宽的百分比。
                        color: Cesium.Color.ORANGERED.withAlpha(.9)
                    }), width2)
                }
            }
        }
    });
    viewer.flyTo(promise);
    viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
        var pickedFeature = viewer.scene.pick(movement.position);
        if (typeof (pickedFeature) != "undefined")   //鼠标是否点到线上
        {
            var name_id = pickedFeature.id.nameID;  //获取每条线的nameID
            Hightlightline(name_id);
        }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

首先就是先加载json数据，这里需要注意下，该项目必须用IIS或者其他软件发布一下，效果才能出来。或者用hbuilder直接打开index.html也可以。加载json文件之后就是给画出线添加一个默认的样式。然后绑定一个左键点击事件，获取点击的线的nameID,这个nameID实在第一次加载线的时候，给每条线都加了一个编号，回头就通过这个编号找到是那条线，然后的线的样式进行修改。代码中定义了一个数组temp，这里保存的是，已经高亮的线的编号，如果该条线已经是高亮状态了，那么在此点击，就取消高亮状态。同时删除temp中的nameid值。