Monday, December 03, 2018
Layout planning with 2D drawings Maps and Autodesk FORGE
By
Ashish Shete
Vocab
Before we dive into the topic, let me introduce some terms frequently used in this article.
Component
A 2D representation of a mechanical or electric equipment. For example - Transformers, Power generation units, Fuel storage, Water tank, Cooling towers etc.
Map
Google Map or MS Bing Map. Both these maps have equivalent capacities. In my experience Google Map has more recent imagery. For this project we chose to use Bing map because the app needs to work across geographies including China.
Requirement
Following is the overall requirement for this development
Implementation
There were following possibilities to achieve this:
1Add the component on map as an overlay
NOT SELECTED
It required converting the 2D drawing files to SVG (Scalable Vector Graphics) files using a DWG to SVG converter. SVGs could be inserted on Bing map by resizing them according to the zoom level. Once the component is placed correctly, zoom in zoom out worked well as the SVG would act as a part of map now. The problem with this approach was it needed a third party application to convert DWG to SVG.
2Add Bing map as an overlay in Autodesk FORGE Viewer
NOT SELECTED
The resizing of the map on Forge window did not work well.
3Bing Map and Autodesk FORGE Viewer in separate canvas which will be placed on top of each other
SELECTED
We chose the third option after some trial and error as it seemed the best way to use full capabilities of Autodesk FORGE viewer. Autodesk FORGE canvas was given a transparency value through which underlying map is visible. This required to give transparency only to viewer background and not to the 2D objects. Autodesk support team promptly helped us to find out methods to achieve this.
It’s more like glass tracing
Autodesk FORGE viewer was a good choice as:
DWG conversion to native Autodesk FORGE viewer format (F2D) could be easily achieved using Autodesk FORGE Model Derivative API on cloud
Manipulated drawings could be converted back to DWG and published as PDF by Autodesk FORGE Design Automation API
Autodesk FORGE viewer has great built in features for 2D and 3D model viewing with scope for extension
What is explained here?
The final developed application has many components and functionalities. The interesting problem of syncing the map window with the Autodesk FORGE viewer window was tackled using some tricks. The effect was that these both separate windows started acting as if they are embedded in one another. The next part of the article contains details about the solution we used to achieve this.
Map + Model Synchronization
Zoom Synchronization
This is how the algorithm worked
Step 1
Two points in Autodesk FORGE which are 1 meter apart were taken. This can be done in two ways (One-time activity per session)
a) Assuming that the opened drawing is in meters, just take origin and 1,0,0 in model space. Convert these points in page space (referred as world space in code)
_findBoundingBoxAssumingMilimeterUnitsForModelSpace
b) Have a scale in each base template drawing with predefined block name such as “MeterScale”. MeterScale is of 20 meters. Find the bounds of this block and get your 1-meter distance first in Model Space and then in Page Space.
Step 2
Map to Autodesk FORGE Scaling Factor (to be calculated on each zoom on Autodesk FORGE)
_getMaptoForgeScalingFactor
Convert the meter distance in Pixels. We now know that X number of pixels are equivalent to 1 meter on Autodesk FORGE canvas. We need to know how much of X pixel mean on the map in meters.
Now, there is catch. This correlation between pixels to distance depends on where on earth the underlying location is. This is vital to calculate resolution at a particular latitude. The maps we see use Mercator projection and the resolution changes with a change in the latitude. So we first need to find the resolution
let resolution = 156543.04 * Math.cos((referenceLatitude * Math.PI) / 180.0) / Math.pow(2, map.getZoom());
After adjusting the pixel count in maps according to the resolution, we get a scaling factor.
let mapToForgeScalingFactor = twentyMetersInPixelInForge / twentyMetersInPixelInMap;
Step 3
If the mapToForgeScalingFactor is less or greater than 1, that means either Autodesk FORGE or Map needs to adjust its zoom level. adjustMapToSyncWithForge() does exactly that. It checks the current Autodesk FORGE scaling factor by and uses it to set new zoom level for map.
There are around 22 to 24 discrete zoom levels on map. As per the scale factor, the map zoom is set to the nearest matching zoom level. Still, it’s not a perfect scale match. So, we need to fill the difference by adjusting the FORGE viewer zoom setting.
We need to fine tune the Autodesk FORGE zoom level to match it perfectly with Map. This is achieved by listening to the view change events of the map and adjusting Autodesk FORGE Zoom accordingly.
this.viewChangedHandlerId = Microsoft.Maps.Events.addHandler(map, 'viewchangeend', this.mapViewChanged.bind(this));
mapViewChanged and adjustForgeCameraToSyncWithMap() takes care of the zoom fine tuning.
Pan Synchronization
To be able to move map and Autodesk FORGE in unison, we need to decide a point on map and a point on Autodesk FORGE which will be our anchor points.
mappingInformation.forgeLocationInWorldCoords and mappingInformation.geoLocationOnMap
Once we get this information, get the pixel coords of the Autodesk FORGE anchor point
Get pixel coords of Map anchor point
Get the difference in pixel coords
Get the current center of map in pixel coords
Subtract this difference from current Center pixel coords. We get a new center of map in pixel coords
Convert this new center in pixel coords back into Geo coords
Set this new point as a center of map and it will follow Autodesk FORGE pans just like charm.
We can choose when to relay the events and when to stop. Thus, Lock and Unlock can be easily done. By this, Map and Viewer becomes detached and it makes it possible to shift anchor points in case user wants to move the drawing to a new location on map.
This is how it looks
This is a demonstration of final application. Apart from map and Autodesk FORGE viewer syncing, this also showcase other features of the application, such as drag-drop, model editing, rules verifications, measurements, publishing and sharing of the drawing etc.
Conclusion
Using Autodesk FORGE Viewer capacities mixed with our creativity provided seamless ways to interact with maps. I believe that with little efforts this trick can be used to synchronize any CAD viewer with Google or Bing Map. We found that Autodesk’s Forge Platform is not only a great tool for development of 2D and 3D apps, it also is highly customizable to suit the user's needs.
About author
Ashish Shete
Ashish Shete has been building CAD softwares for over 10 years. He has been part of development teams who created applications for shipping, Oil-field exploration, Aerospace, and Automotive domain. He developed his interest in programming playing with AutoCAD drawings and AutoLisp while still in college. He made programming his career and went on implementing features like Oil well completion, Walk-through, animation recording, and playback and has led teams of motivated programmers so far. He has grown to be a proponent of agile software development practices and claims to have seen both the good and ugly sides of it. Currently, Ashish and his team are the go-to guys for any queries on Autodesk Forge platform in CCTech. Ashish took a break from his work a few years ago to explore the world. He went to Europe to get a master's degree in Automotive engineering. He traveled whenever he got a breather from the studies; well, it could be another way around as far as we can tell. Ashish considers himself a technology enthusiast and a cinephile. He records his thoughts on his blog and frequently writes about his experiences on Quora.
Comments
Recent posts