Невозможно создать многоугольную графику с помощью SketchViewModel () в arcgis js 4.11 - PullRequest
0 голосов
/ 27 июня 2019

Я использую vuejs в качестве основы веб-интерфейса и esri-loader для загрузки arcgis js 4.11 в vue. Я новичок в arcgis js API и пытаюсь использовать SketchViewModel для рисования многоугольника. Однако, когда я использую функцию create(), я получаю sketchVM.create is not a function как ошибку.

Я следовал arcgis js 4.11 Документация SketchViewModel

Я разделил код для arcgis js на два метода: - один метод отвечает за загрузку карты и вида, а другой - для рисования многоугольника.

вид / mapView.vue

<script>
...
draw(){
    loadModules(
        [
          "esri/layers/GraphicsLayer",
          "esri/widgets/Sketch/SketchViewModel",
          "esri/geometry/geometryEngine"
        ],
        {
          url: "https://js.arcgis.com/4.11/" // use a specific version
        }
      ).then(
        ([
          SketchViewModel,
          geometryEngine,
          GraphicsLayer
         ]) => {

          console.log("Area section active")
          this.view.surface.style.cursor = "crosshair"; // change cursor style to crosshair
          this.graphicsLayer = new GraphicsLayer();

          // needed to sketch polygon
          var sketchVM = new SketchViewModel({
            layer: this.graphicsLayer,       // graphics layer over which polygon will be added
            view: this.view,                 // view where polygon will be rendered
            updateOnGraphicClick: true, // to allow graphic updation on through click event
            defaultUpdateOptions:{
              tool:'reshape',           // this will set reshape as default tool for update event
            },
            polygonSymbol: {            // style and type for polygon symbol
              type: "simple-fill",
              color: "rgba(138,43,226, 0.8)",
              style: "solid",
              outline: {
                color: "white",
                width: 1
              }
            }
          });

          sketchVM.on("create", (event)=>{
            if(event.state === "complete"){
              console.log(geometryEngine.planarArea(this.graphicsLayer.graphics.items[0].geometry, "square-meters"))
            }
          });

          sketchVM.on("update", (event)=>{
            // if()  // event to remove graphic on pressing delete key
            console.log("Updated value state : ",event.state)
          });

          console.log("drawing mode on")

          sketchVM.create("polygon", {mode:"click"}); // getting error at this line

          console.log("draw view returned") 
          return this.view;
          }  
      );
    },
...
</script>
...