1.前言

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

Video_2018-11-21_172143.gif

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值。

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

爱游戏爱编程.jpg