无法在Arcgis JS 4.11中使用SketchViewModel()创建多边形图形

时间:2019-06-27 05:46:22

标签: arcgis-js-api

我正在使用vuejs作为前端框架,并使用esri-loader在vue中加载arcgis js 4.11。我是arcgis js api的初学者,并尝试使用SketchViewModel绘制多边形。但是,当我使用create()函数时,我得到sketchVM.create is not a function作为错误。

我遵循了arcgis js 4.11 SketchViewModel的documentation

我将arcgis js的代码分为两种方法:-一种方法负责加载地图和视图,另一种方法用于绘制多边形。

views / 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>

0 个答案:

没有答案