cesium 实战系列之独栋建筑选中特效

在某个项目中有这样一个需求，在众多建筑中选中其中的一个，并给其加上选中效果，我在网上找了很多篇文章都是说的模棱两可的，要不就是根本不能实现，要不就是实现出来的效果不对，我这里给出我的实现思路和效果。

最终效果：

实现思路：通过鼠标拾取事件获取建筑物信息，我这里是拿到建筑物的bsm唯一标识码，然后通过后端拿到建筑物的geojson数据，根据geojson和建筑物高度，生成面之后拉伸高度，就有了这个建筑物的外部轮廓，然后利用canvas 生成渐变色材质给entity的material贴图即可。有了geojson也就可以知道中心点坐标，然后再生成其他图标，将他们放在合适的位置即可。

代码实现：

点击获取建筑物信息，后端请求获取geojson

initMapListener() { var that = this; handler.setInputAction((movement) => { //获取点击模型 let pick = viewer.scene.pick(movement.position); if (pick instanceof Cesium.Cesium3DTileFeature) { that.api .queryBuildingRange({ BSM: pick.getProperty("bsm") }) .then((res) => { if (res.build_range) { createBuildEntity( JSON.parse(res.build_range), pick.getProperty("jzgd") ); } }); } }, Cesium.ScreenSpaceEventType.LEFT_CLICK); },

根据geojson生成建筑物外轮廓，attach渐变色材质。

//生成渐变色材质 var getColorRamp = function () { var ramp = document.createElement('canvas'); let ctx = ramp.getContext("2d"); var grad = ctx.createLinearGradient(0, 0, 200,200) // 创建一个渐变色径向/圆对象 grad.addColorStop(0, "rgba(18,56,254,0.60)"); // 设置渐变颜色 grad.addColorStop(1, "rgba(167,254,254,0.37)"); ctx.fillStyle = grad; // 设置fillStyle为当前的渐变对象 ctx.fillRect(0,0,500,500); // 绘制渐变图形 return ramp; } //根据geojson生成建筑物外轮廓 function createBuildEntity(geojson,height) { viewer.dataSources.removeAll(); Cesium.GeoJsonDataSource.load(geojson).then(function(dataSource) { viewer.dataSources.add(dataSource); // viewer.flyTo(dataSource) let entities = dataSource.entities.values; for (let i = 0; i < entities.length; i++) { let entity = entities[i]; entity.polygon.material = new Cesium.ImageMaterialProperty({ image: getColorRamp(), transparent: true }) entity.polygon.outline = true; entity.polygon.outlineColor = Cesium.Color.fromCssColorString('#02d8fe') // 将高度拉伸至35米 entity.polygon.extrudedHeight = height+2; } }); }

根据建筑物中心坐标生成其余entities，放上去。

function addLeftEntity(lng,lat,height){ removeEntityById("left_1"); removeEntityById("left_2"); let position0 = Cesium.Cartesian3.fromDegrees(lng,lat,height) let entity = viewer.entities.add({ id: `left_1`, position: position0, billboard: { image: "static/img/center.png", scale: 0.5, horizontalOrigin: Cesium.HorizontalOrigin.CENTER, verticalOrigin: Cesium.VerticalOrigin.CENTER, disableDepthTestDistance: Number.POSITIVE_INFINITY,//被建筑物遮挡问题 } }) var polyline1 = viewer.entities.add({ id:"left_2", polyline: { positions: [ Cesium.Cartesian3.fromDegrees(lng,lat,height), Cesium.Cartesian3.fromDegrees(lng,lat,height+60), Cesium.Cartesian3.fromDegrees(lng+0.0002,lat,height+60) ], width: 1, material: new Cesium.PolylineDashMaterialProperty({ color: Cesium.Color.WHITE, dashLength: 20 //短划线长度 }) } }); }

至此就结束了，至于弹框内容就是个div，通过经纬度转换平面像素给定位置，显示出来即可，这里就不过多介绍。