I want to add a drag and drop image functionality in my cesium app. If the user drag any image (.png, .jpg) on globe then will create a billboard and then user can resize that image on map after uploading.
In my app (ASP.NET Web application) I am using old version of cesium. I got one solution to drag-drop file into cesium i.e. viewerDragDropMixin. But it didn’t allow image uploading.
I have download the latest version of cesium with viewerDragDropMixin.js file and try to modify it but this file is not working on my local system.
Is there another way to drag-and-drop images in cesium app?
Why isn’t it working on your local system? Are you getting any errors in the console?
You should be able to implement this with just regular JavaScript, there’s nothing you need to do to make it work for CesiumJS. For example, here’s a tutorial on doing drag and drop image upload:
Instead of uploading to a server, you would just get the image data and pass that into a CesiumJS entity to add it to the scene. Allowing the user to then resize/move would be a matter of detecting mouse/pointer clicks, using viewer.scene.pick to figure out what entity is under the mouse, then moving it (you’d want to use CallbackProperties to get a responsive dynamic entity like in the drawing on terrain Sandcastle example). You would need to write code yourself to handle when a user clicks on a corner of the image in the CesiumJS scene, and track where the mouse is released, and resize it that way etc.
There isn’t any helper functions built into the CesiumJS library, so you’d have to code that part yourself. There have been some community projects that do this, like this draw helper library:
It’s rather outdated now, but it might provide some implementation guidance. Their live demo still works: notice if you create a square, you can resize it by dragging any of its corner. You’d have to do the same thing for your billboards, creating points around the edges, detect when the user clicks on them, and change the size of the billboard when that happens (so the billboard would have to have a CallbackProperty on its size so it can be updated dynamically).