Looking for advice on drawing 2d shapes on Cesium's canvas.

CesiumJS
1

Hello,

I have implemented a custom selection tool for my geographic video game and now I am wondering how to efficiently implement a tool for unit multi-selection tool. The idea is that MOUSE_DOWN+MOUSE_MOVE will draw a translucent rectangle on the screen that will select multiple units (entites) on the map just like in many well known RTS games.

The ways I see this can be done are:

  1. Draw a poligon using Cesium.PolygonGraphics.

  2. Draw an overlaying canvas with 2d context and communicate events between Cesium.

  3. Draw a poligon using standard webgl functionality using the webgl context from Cesium.Scene#canvas

  4. Add a transparent div overlay.

I think that option #1 seems to be the best but I’m not sure how to translate the point coordinates from canvas position to cartesian3.

Thanks for any tips you may have!

2

Hey Jan,

Option #1 is definitely the easiest. The wgs84ToDrawingBufferCoordinates function takes a screen position and outputs the Cartesian3 world position, so it should allow you to do just that! Another thing you might find useful, especially if you’ve got terrain, is this terrain drawing example I made a while back:

This video game sounds pretty cool! Do you have any screenshots or anything of it so far?