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

在某个项目中有这样一个需求在众多建筑中选中其中的一个并给其加上选中效果我在网上找了很多篇文章都是说的模棱两可的要不就是根本不能实现要不就是实现出来的效果不对我这里给出我的实现思路和效果。最终效果实现思路通过鼠标拾取事件获取建筑物信息我这里是拿到建筑物的bsm唯一标识码然后通过后端拿到建筑物的geojson数据根据geojson和建筑物高度生成面之后拉伸高度就有了这个建筑物的外部轮廓然后利用canvas 生成渐变色材质给entity的material贴图即可。有了geojson也就可以知道中心点坐标然后再生成其他图标将他们放在合适的位置即可。代码实现点击获取建筑物信息后端请求获取geojsoninitMapListener() { 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 height2; } }); }根据建筑物中心坐标生成其余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,height60), Cesium.Cartesian3.fromDegrees(lng0.0002,lat,height60) ], width: 1, material: new Cesium.PolylineDashMaterialProperty({ color: Cesium.Color.WHITE, dashLength: 20 //短划线长度 }) } }); }至此就结束了至于弹框内容就是个div通过经纬度转换平面像素给定位置显示出来即可这里就不过多介绍。