CODEWITHSUNDEEP
arcgis-js-api
Steven Yong
Steven Yong

Reputation: 5446

ArcGIS API: Drawing circle fixing center

I am using ArcGIS API v4.8 and the drawing tools to draw circle on my map.

1 issue I notice is when I draw a circle, the center of the circle moves when I move my mouse resizing the circle rather than fixed at the point of the 1st mouse click starts:

enter image description here

How do I fix the center regardless of how I move the radius of the circle? What is missing in my code?

  const options = {view, layer: tempGraphicsLayer, pointSymbol, polylineSymbol, polygonSymbol}
  let sketchViewModel = new SketchViewModel(options)

  let drawCircleButton = document.getElementById('circleButton')
  drawCircleButton.onclick = function () {
    clear()
    isDrawLine = false
    sketchViewModel.create('polygon', {mode: 'click'})
    sketchViewModel.create('circle')
  }

EDIT:

I have found a similar sample, choose the Draw Circle tool, start drawing a circle on the map, you will notice that the center of the circle moves when you move your mouse, I want it to fix the center instead.

The problem when the center moves along with your mouse move is that the circle drawn is not accurate, as I want to start with the center of the circle I want, the circle can expand outward but the center should not move.

Upvotes: 3

Views: 1598

Answers (1)

CodeBox
CodeBox

Reputation: 111

That is because the circle, in the given example, is being draw inside the square object. Basically your start and end point are representing corners, not the center point and outer layer of the circle. So every time you expand circle object, it expands from one corner, while the rest is dragging along your mouse.

Visual example:

visual example

There are workarounds for this of course. I've made a small sample code of one of the possible ways to draw a circle from a fixed center point.

https://jsfiddle.net/wLd46g8k/9/

Basically I used an ArcGis JS API 4.x constructor called Circle, where you pass a starting point and radius. In my example I've calculated the radius from these two points.

    function drawCircle(){//draws the circle
            graphicsLayer.graphics.removeAll();
            var graphic = new Graphic({
                geometry: new Circle({//circle constructor
                center: startPoint,//pass the pointer-down event X Y as a starting point
                radius: Math.floor(Math.sqrt(Math.pow(startPoint.x - endPoint.x, 2) + Math.pow(startPoint.y - endPoint.y, 2)))
              }), //calculates endpoint distance from the startpoint and pass it as a radius
              symbol: {//circle design
                type: "simple-fill",
                color: "orange",
                style: "solid",
                outline:{
                    color:"darkorange",
                  width:4
                }
              }
            });
            
            graphicsLayer.graphics.add(graphic);//adds the circle
          };

Upvotes: 4

Related Questions