Cesium教程 (2) 点击元素高亮-地球旋转-搜索定位

Cesium教程 (2) 点击元素高亮-地球旋转-搜索定位

目录

1. 点击geojson面元素高亮

2. 地球自转

3. 搜索定位


1. 点击geojson面元素高亮

        

// 定义鼠标事件处理函数
var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);

handler.setInputAction(function(movement) {
    // 获取鼠标位置
    var pickedObject = viewer.scene.pick(movement.position);

    // 判断是否有实体被选中 直接使用pickedObject.id.polygon
    if (Cesium.defined(pickedObject) && pickedObject.id instanceof Cesium.Entity && pickedObject.id.polygon) {
        // pickedObject.id.polygon.material.color = highlightColor;

        var geometry = pickedObject.id.polygon.hierarchy;
        console.log(geometry,111);
        // height 是高程,必须加 否则不显示(一样的geometry)
        // 创建一个新实体来高亮选中的面
        var highlightEntity = new Cesium.Entity({
            polygon: {
                hierarchy: geometry,
                height: 1,  //必须加上才显示customdatasource,与在z上加10 不一样,那样不会高亮(不明白)?因为height是地球表面垂直高度,而xyz z是指向北极方向 不是高程
                material: highlightColor.withAlpha(1.0),
                outlineColor: highlightColor,
                outlineWidth: 10
            }
        });
        
        if (tempObject != highlightEntity){
            highlightDataSource.entities.remove(tempObject);
            tempObject = highlightEntity;
            highlightDataSource.entities.add(tempObject);
        }
    }else{
        highlightDataSource.entities.remove(tempObject);
    }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

2. 地球自转

        参考里面的地球自转:vue3 cesium datav 可视化大屏_LEILEI18A的博客-CSDN博客

3. 搜索定位

        参考自定义搜索控件geocoder:https://sandcastle.cesium.com/index.html?src=Custom%20Geocoder.html​​​​​​​

// 字符串简单相似度匹配函数
function like(str1, str2){
    // str1 检索关键字; str2 被检索字符串
    var result = str2.toLowerCase().indexOf(str1.toLowerCase());
    if(result < 0){
        return false;
    }else{
        return true;
    }
}

// 实现自定义搜索 覆盖掉geocoder
function GeoJsonDataSearch() {}
// 参考
var geojsonPromise = Cesium.GeoJsonDataSource.load('http://192.168.1.127/HBQD.geojson');
GeoJsonDataSearch.prototype.geocode = function (input) {
    return geojsonPromise.then(function (dataSource) {
        // 判断关闭图层了么
        if (!dataSource.show){
            return {
                
            }
        }
        return dataSource.entities.values.filter(function (entity) {
            return like(input, entity.properties['图幅名称'].getValue()) || like(input, entity.properties['图幅号'].getValue())
        }).map(
            function (resultObject) {
                // console.log(resultObject);
                var rectangle = Cesium.Rectangle.fromCartesianArray(resultObject.polygon.hierarchy.getValue().positions);
                return {
                    displayName: resultObject.properties['图幅名称'].getValue() + "-" + resultObject.properties['图幅号'].getValue(),
                    destination: rectangle,
                };
            }
        );
    });
};

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,您想了解有关自定义几何体的内容,我很乐意为您解答。首先,让我们了解一下什么是几何体。 在Cesium中,几何体是由一些点、线和三角形组成的图形。几何体可以在地球上显示各种形状的物体,如建筑、飞机、汽车等。Cesium提供了一些内置的几何体,如BoxGeometry、CylinderGeometry、SphereGeometry等,但是有时候我们需要展示一些特殊形状的物体,这时候就需要自定义几何体了。 下面是一个简单的自定义几何体的例子: ```javascript var geometry = new Cesium.Geometry({ attributes: { position: new Cesium.GeometryAttribute({ componentDatatype: Cesium.ComponentDatatype.DOUBLE, componentsPerAttribute: 3, values: new Float64Array([ 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 1.0, 0.0, 0.0, 1.0, 0.0 ]) }) }, indices: new Uint16Array([ 0, 1, 2, 0, 2, 3 ]), primitiveType: Cesium.PrimitiveType.TRIANGLES }); ``` 这个例子中,我们创建了一个由四个点组成的矩形,并用这些点的索引定义了两个三角形。这个几何体可以用来在地球上显示一个矩形。 接下来,让我们逐步了解这个例子中的代码。首先是Cesium.GeometryAttribute。 Cesium.GeometryAttribute是几何体属性的容器。在这个例子中,我们定义了一个名为position的属性,它有三个分量:x、y和z。这个属性使用的数据类型是Cesium.ComponentDatatype.DOUBLE,表示每个分量有一个双精度浮点数。componentsPerAttribute表示每个属性有几个分量。在这个例子中,每个属性都有三个分量。最后,我们用一个Float64Array数组来定义这个属性的值。 接下来是indices,它定义了几何体使用哪些点来组成三角形。在这个例子中,我们定义了两个三角形,每个三角形使用三个顶点。在indices数组中,我们用顶点在attributes数组中的索引来定义每个三角形。 最后,我们定义了几何体的primitiveType,它表示几何体的类型。在这个例子中,我们使用的是三角形类型,所以primitiveType为Cesium.PrimitiveType.TRIANGLES。 希望这个例子可以帮助您更好地理解自定义几何体的实现。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值