Cesium教程 (2) 点击元素高亮-地球旋转-搜索定位
目录
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,
};
}
);
});
};