ArcGIS API: Центр фиксации окружности рисования - PullRequest
Новая
       12

ArcGIS API: Центр фиксации окружности рисования

0 голосов
/ 05 ноября 2018

Я использую ArcGIS API v4.8 и инструменты рисования для рисования круга на карте.

1 проблема, которую я замечаю, это то, что когда я рисую круг, центр круга перемещается, когда я перемещаю свою мышь, изменяя размер круга, а не фиксируясь в точке первого щелчка мыши, начинается:

enter image description here

Как мне исправить центр независимо от того, как я перемещаю радиус круга? Чего не хватает в моем коде? 

  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:

Я нашел похожий образец , выберите инструмент Draw Circle, начните рисовать круг на карте, вы заметите, что центр круга перемещается при перемещении мыши, я хочу, чтобы он вместо этого зафиксируйте центр.

Проблема, когда центр перемещается вместе с движением мыши, состоит в том, что нарисованный круг не точен, так как я хочу начать с центра круга, который я хочу, круг может расширяться наружу, но центр не должен двигаться.

1 Ответ

0 голосов
/ 07 ноября 2018

Это потому, что круг, в данном примере , рисуется внутри квадратного объекта. В основном, ваша начальная и конечная точки представляют углы, а не центральную точку и внешний слой круга. Таким образом, каждый раз, когда вы расширяете объект круга, он расширяется из одного угла, в то время как остальная часть перемещается вдоль вашей мыши.

визуальный пример

Есть обходные пути для этого, конечно. Я сделал небольшой пример кода одного из возможных способов нарисовать круг из фиксированной центральной точки.

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

В основном я использовал конструктор ArcGis JS API 4.x под названием Circle, где вы передаете начальную точку и радиус. В моем примере я рассчитал радиус от этих двух точек. 

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
      };
...