title: CesiumJS Rectangle Entity Overlap and Size Issue
body: <p>My team and I are attempting to develop an application on Cesium that requires circle and rectangle points. We are using the native PointGraphics to make the circles, but are creating entities for the rectangles. The code is shown below:</p>
  
  <pre><code>var entity = {
      id: point.id,
      box: {
          dimensions: new Cesium.Cartesian3(20000,
                                            20000,
                                            0),
          outline: true,
          material: Cesium.Color.fromHsl(hue, 1, 0.5)
      },
      position: Cesium.Cartesian3.fromDegrees(point.lon, point.lat)
  };
  </code></pre>
  
  <p>We are getting the boxes to draw but with some issues. First, when two boxes overlap, the graphic distorts as shown below:</p>
  
  <p><a href="https://i.stack.imgur.com/ibgiJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ibgiJ.png" alt="Box Distortion"></a></p>
  
  <p>I'm not sure if it's a code or browser issue. This screenshot is from Chrome, but we have tried it on Chrome and Firefox on two different machines.</p>
  
  <p>Second, there is no automated zoom scaling. When we zoom out, the boxes stay the absolute size instead of relative to the zoom number like the PointGraphics. Compare the example below to the image above:</p>
  
  <p><a href="https://i.stack.imgur.com/lZx4R.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lZx4R.png" alt="Zoom"></a></p>
  
  <p>We may try multiplying the dimensions (not sure what unit they are in) by the zoom level as soon as we figure out how to get the zoom from Cesium, but I'm not sure if that will work since the entity creation may be static? </p>
  
  <p>As a side note, we are using an angular version of Cesium, but I don't think that will prevent us from implementing a solution even if it's solved in regular JS.</p>