Highlight Countries when hovering

CesiumJS
1

Hi,

I am new to using cesium plugin.

I want to highlight the countries when hovering over it.

It would really appreciate if anyone guides me on how to achieve this in cesium plugin.

Thank You.

2

var viewer = new Cesium.Viewer(ā€˜cesiumContainerā€™);

var geoJsonDatasource;

viewer.dataSources.add(Cesium.GeoJsonDataSource.load(ā€™ā€¦/ā€¦/ā€¦/ā€¦/Apps/SampleData/ne_10m_us_states.topojsonā€™, {

stroke: Cesium.Color.HOTPINK,

fill: Cesium.Color.PINK.withAlpha(0.5),

strokeWidth: 3

})).then(function(dataSource){

viewer.zoomTo(dataSource);

geoJsonDatasource = dataSource;

console.log(viewer.dataSources);

});

var entityColorARR = {

entityid: undefined,

color: undefined

};

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

handler.setInputAction(function(movement) {

if (entityColorARR.entityid !== undefined) {

if (geoJsonDatasource.entities.getById(entityColorARR.entityid)) {

var entt =geoJsonDatasource.entities.getById(entityColorARR.entityid);

entt.polygon.material = entityColorARR.color;

}

}var pickedObject = viewer.scene.pick(movement.endPosition);

if (Cesium.defined(pickedObject)) {

var id = pickedObject.id.id;

if (geoJsonDatasource.entities.getById(id)) {

var ent = geoJsonDatasource.entities.getById(id);

entityColorARR.entityid = id;

entityColorARR.color = ent.polygon.material;

ent.polygon.material = Cesium.Color.WHITE;

}

} else{

entityColorARR.entityid = undefined;

entityColorARR.color = undefined;

}

}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

See this link https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/?src=Picking.html

1 Like
3

Hi,
Thanks for the solution.

I have achieved the same output using below code.

4

Hi, For highlighting all countries, it requires all countries geojson data. I have a data, but it will show countries outline in Cesium Viewer because it has MultiPolygon geometry in it. You can remove the MultiPolygon geometry and use that in Cesium (If you remove MultiPolygon geometry, some countries wiil be removed).

countries.geojson (250 KB)

1 Like
5

I have succeeded in implementing a country highlight on hover using this attachment countries.geojson. I had to edit it a little bit to set height values to ā€œ0ā€ and add a ā€œtessellateā€ parameter to allow for terrain clamping.

However I see that it is not very detailed. It works fine when the globe is zoomed out enough, but when you start zooming in on any country (Iā€™m using satellite imagery), you can see the borders of the countries donā€™t align with the satellite imagery layer.

Being new to all this, Iā€™m experimenting ways of getting better results. Iā€™m trying to use the files offered by topojson/world-atlas, for example countries-10m.json .

I tried to convert the topojson file to a geojson file in order to switch it out with the countries.geojson (I believe I used this online converter), Iā€™m not getting results so far (Iā€™m thinking maybe itā€™s too heavy and the application is crashing internally or something? or thereā€™s some small error somewhere in the countries-10m.geojson file that Iā€™ve produced, but if thatā€™s the case then finding it will be fun, seeing how heavy the file is). Any chance anyone has a better detailed countries.geojson?