arcgis api 实现在线编辑(3)：修改要素属性

 

前面

相关的可访问arcgis api 实现在线编辑(1)：添加要素
rcgis api 实现在线编辑(2)：删除要素

实现步骤

实现步骤首先点击选择查看要素的属性值，然后修改要素的属性值

1、选择要素，查看属性值

1.1 绑定view中的click事件，获取点击的graphic

    this.currentView.on("click",event => {
        /**
         * hitTest
         * @param event 点击对象
         * @return Promise 返回点击的graphic
         */
        this.currentView.hitTest(event)
        .then(response => {
          if (response.results.length) {
            // 遍历点击的graphic数组
            response.results.forEach(item => {
              let graphic = item.graphic;
              this.currentView.whenLayerView(graphic.layer).then(layerView =>{
                // 如果view中存在高亮，则取消
                if(this.currentHighLight){
                  this.currentHighLight.remove(); 
                }
                // 如果不存在高亮，则保存选择的graphic并高亮显示
                this.currentGraphic = graphic;
                this.currentHighLight = layerView.highlight(graphic);
              });
            })
          }
        })
        .catch(error => {
          console.log(error.message)
        })
    })
    // 清除logo
    this.currentView.ui.remove("attribution");
  }

1.2 上述的currentGraphic即为点击获取到的graphic，接下来需要将其中的attributes渲染出来

      <form method="post" v-show="Object.keys(currentGraphic.attributes).length">
        <ul>
          <li v-for="(value,name) in currentGraphic.attributes" :key="name">
            <label :for="name">{{name}}</label>
            <input :name="name" type="text" :value="value"/>
          </li>
        </ul>
        <button @click="handleSubmitForm" type="button">提交</button>
        <button type="reset">重置</button>
      </form>

2、修改属性值

2.1 获取表单数据

   let OBJECTID = document.forms[0].elements["OBJECTID"].value;
   let NAME = document.forms[0].elements["NAME"].value;
   let CITY = document.forms[0].elements["CITY"].value;

2.2 调用接口，修改属性

    this.currentFeatureLayer.applyEdits({
       updateFeatures:[{
         "geometry": geometry,
         "attributes":{
           "OBJECTID": attributes.OBJECTID,
           "NAME": NAME,
           "CITY": CITY
         }
       }]
     })
     .then(result => {
       console.log(result)
     })
     .catch(error => {
       console.log(error.message)
     })

结尾

源码可访问github