arcgis api实现前端绘制图形保存数据库

一、实现效果

使用arcgis api绘制图形模块，绘制好完成后保存后台数据库，同步更新前端图案，实现增加、删除图形功能。更新功能自己鼓捣，同理。项目懒得启动 懒得截图 大家知道这是不是需要的功能即可。

二、搭建环境

该案例采用前端VUE框架+后端spring boot。原则上采用什么都行，但一定得有后台。只有一个前端加arcgis server不适用于本案例。

***重点***：图形文件采用数据库postgresql，在arcgis进行建立企业级数据库，使其具有空间属性。然后对这个数据库新建一张表（字段含有空间信息），用arcgis进行发布。这样我们后端就可以把前端绘制好的图形传给后端，后端进行保存。

三、前端代码实现

1. 添加绘制工具，我们画的临时图形保存在graphLayer图层上。

   this.graphLayer = new GraphicsLayer();
   map.layers.add(this.graphLayer)
   this.sketch = new Sketch({
         layer: this.graphLayer,
         view: this.view,
         // graphic will be selected as soon as it is created
         creationMode: "update"
       })
   this.view.ui.add(this.sketch, "top-left")
   this.sketch.availableCreateTools = ['polygon'] // 我只需要绘制多边形 

2.   添加绘制完成后的按钮操作。我的应用场景是绘制多个图形后，点击入库，会把当前所有图形添加到后台数据库。

updatePolygon(command) {

        let rings = []
        baseMap.sketch.layer.graphics.items.forEach((item) => {
          // console.log(item.geometry.rings[0])
          rings.push(item.geometry.rings[0])

        })
        if (rings.length === 0) return this.$message.info('请先在图上画出范围线')
        if (command === 'a') {
          this.$confirm('请确认是否入库为正摄类型?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async () => {
            let {data:data} = await this.$http({
              url: this.$http.adornUrl(`/UAVItem/uavitem/uploadLine/${this.id}/1`),
              method: 'post',
              data: this.$http.adornData(rings,false)
            })
            console.log(data)
            if (data.code === 0) {
              this.$message({
                type: 'success',
                message: '入库成功!'
              });
              baseMap.graphLayer.removeAll()
              baseMap.mapServer.refresh()
            }



          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消入库'
            });
          })
        }
        else if (command==='b') {
          this.$confirm('请确认入库为三维倾斜类型?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async () => {
            let {data:data} = await this.$http({
              url: this.$http.adornUrl(`/UAVItem/uavitem/uploadLine/${this.id}/2`),
              method: 'post',
              data: this.$http.adornData(rings,false)
            })
            console.log(data)
            if (data.code === 0) {
              this.$message({
                type: 'success',
                message: '入库成功!'
              });
              baseMap.graphLayer.removeAll()
              baseMap.mapServer.refresh()
            }



          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消入库'
            });
          })
        }


      },

代码解读：我原原本本把我得代码复制进去了，需要的童鞋自己看下对自己有用的代码，主要就是把 ring属性存储成列表，传给后端，后端去处理列表进行存储。重要的是思想，怎么拿到ring。复制代码是跑不起来的

        3. 后端处理 首先是controller层

@PostMapping("/uploadLine/{item_id}/{item_type}")
    public R uploadLine(@RequestBody String[][][] list,@PathVariable("item_id") Integer item_id,@PathVariable("item_type") Integer item_type) {
        if (list.length==0) return R.error(201,"无范围");
        Integer integer = 0;
        for (int i=0;i<list.length;i++) {
            String xy = getXY(list[i]);
            integer = uavitemService.insertGeom(xy, item_id, item_type);
            // System.out.println(xy);
        }
        if (integer == 0) return R.error(202,"插入失败");
        else return R.ok();
    }
    public String getXY(String[][] list) {
        StringBuilder sb = new StringBuilder("polygon ((");
        for (String[] s1:list
        ) {
            sb.append(s1[0]).append(" ").append(s1[1]).append(",");
        }
        sb.deleteCharAt(sb.length()-1);
        sb.append("))");
        return sb.toString();
    }

 dao层

Integer insertGeom(@Param("XY") String XY,@Param("item_id") Integer item_id,@Param("item_type") Integer item_type);

mapper层代码 

<insert id="insertGeom">
        INSERT INTO extent_line (gemo,item_id,line_type) VALUES (
  ST_Polygon(#{XY}, 2385),#{item_id},#{item_type})
    </insert>

 说明：接受前端的ring坐标之后，后端进行裁剪拼接，然后用sql语句进行插入，如果后端不是用spring boot，只需要知道怎么处理成sql所需要插入语句的格式，具体格式查看向包含 ST_Geometry 列的表中插入要素—帮助 | ArcGIS Desktop

好了 有什么没说清楚的请留言