Cesium实现被点击的省边界变色,生成示例给我看看
时间: 2024-05-26 13:10:27 浏览: 97
输入框点击时边框变色效果的实现方法
当然可以,以下是实现被点击的省边界变色的Cesium示例代码:
```javascript
var viewer = new Cesium.Viewer('cesiumContainer');
var previousEntity = null;
viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
var pickedObject = viewer.scene.pick(movement.endPosition);
if (Cesium.defined(pickedObject) && pickedObject.id && pickedObject.id.isPicked) {
var entity = pickedObject.id.entity;
if (previousEntity != entity) {
if (Cesium.defined(previousEntity)) {
previousEntity.polygon.material = Cesium.Color.RED;
previousEntity.billboard.color = Cesium.Color.RED;
}
entity.polygon.material = Cesium.Color.YELLOW;
entity.billboard.color = Cesium.Color.YELLOW;
previousEntity = entity;
}
} else {
if (Cesium.defined(previousEntity)) {
previousEntity.polygon.material = Cesium.Color.RED;
previousEntity.billboard.color = Cesium.Color.RED;
previousEntity = null;
}
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
var options = {
stroke: Cesium.Color.YELLOW,
strokeWidth: 2,
fill: Cesium.Color.RED.withAlpha(0.1),
outline: true,
outlineColor: Cesium.Color.RED
};
var promise = Cesium.GeoJsonDataSource.load('China_Provinces.geojson');
promise.then(function(dataSource) {
viewer.dataSources.add(dataSource);
var entities = dataSource.entities.values;
for (var i = 0; i < entities.length; i++) {
var entity = entities[i];
entity.isPicked = true;
entity.polygon = options;
entity.billboard = {
image: 'https://cesium.com/downloads/images/Cesium_Logo_overlay.png',
scale: 0.1,
color: Cesium.Color.RED,
heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND
};
entity.description = '<div style="padding: 20px"><h3>' + entity.name + '</h3></div>';
}
});
```
您可以将此代码复制到您的项目中,并将`China_Provinces.geojson`替换为您的省份边界数据,即可实现被点击的省边界变色。
阅读全文