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

1.前言

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

 

Video_2018-11-21_172143.gif

2.正文

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

<script>
        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);

    </script>

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

想要源码的同学，欢迎关注微信公众号爱游戏爱编程，回复高亮线,即可获取源码。

爱游戏爱编程.jpg