vue+openlayer+postgis添加點要素一例

vue+openlayer+postgis添加點要素一例

<!--標記工具-->
<template>
  <div>
    <el-button-group>
      <el-button type="primary" size="small" @click="add_bzMarkClick">添加標記</el-button>      
      <el-button type="primary" size="small" @click="refresh_bzMarkClick">加載標記</el-button>     
    </el-button-group>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="bzmc" label="標記名稱" width="250"></el-table-column>
      <el-table-column fixed="right" label="#" width="80">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small" icon="el-icon-location" ></el-button>
          <el-button @click="deleteClick(scope.row)" type="text" size="small" icon="el-icon-delete"></el-button>
        </template>        
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {
  execute_ajax,
  execute_ajax_tb,
  execute_async,
  ArrayContains,
  IsNull,
  getEditObj,
  ajax_login,
  setSession,
  getSession
} from "../../static/js/common/ajax";

import {execute_ajaxbody,execute_ajaxbody_tb,execute_ajaxbody_async} from "../../static/js/common/ajax";

import {
  cwgisCommand,
  cwgisTool
} from "../../static/js/toolbox/cwgisToolBarClass";

import {Draw2,Mode,getMode,DrawEventType}  from "../../static/js/toolbox/Draw2";

import {
  cwgisDrawTool,
  cwgisDrawLineTool,
  cwgisDrawPointTool,
  cwgisDrawClearTool
} from "../../static/js/toolbox/cwgisDrawTool";

//添加標註工具
class cwgisDrawBzMarkTool extends cwgisDrawTool
{
    constructor(mapWrap)
    {
        super(mapWrap);
        this.draw_type="Point";
        this.init(mapWrap);
    }
    activate(){
        //createDrawDefaultStyle();
        //draw_type=Point,LineString,Polygon,Circle
        var that=this;
        this.draw = new Draw2({
            type: this.draw_type,
            source: that.mapWrap.draw_source,
            style:[new ol.style.Style({//繪製幾何圖形樣式
                fill: new ol.style.Fill({//填充樣式
                    color: 'rgba(255, 255, 255, 0.2)'
                }),
                stroke: new ol.style.Stroke({//邊線樣式
                    color: 'rgba(255, 0, 0, 0.5)',
                    lineDash: [10, 10],
                    width: 2
                }),
                image: new ol.style.Circle({//點樣式
                    radius: 4,
                    stroke: new ol.style.Stroke({
                        color: 'rgba(255, 0, 0, 0.7)'
                    }),
                    fill: new ol.style.Fill({
                        color: 'rgba(255, 255, 255, 0.2)'
                    })
                })
            })]            
        });        
        this.mapWrap.map.removeLayer(this.mapWrap.draw_vector);
        this.mapWrap.map.addLayer(this.mapWrap.draw_vector);
        this.mapWrap.map.addInteraction(this.draw);    
        //
        this.mapWrap.map.removeLayer(this.mapWrap.buffer_vector);
        this.mapWrap.map.addLayer(this.mapWrap.buffer_vector);
        //   
        this.draw.onDrawEnd=function(geometry){
              var m_p=geometry.getLastCoordinate();
              var p=mapHelper.Mercator2lonLat(m_p);
              var wkt="POINT("+p[0]+" "+p[1]+")";
              //that.getWktString(geometry);
              //alert(wkt);
              var loginUserId=getSession('loginUserId');
              var loginUserName=getSession('loginUserName');
               //表編號 bz_point
              var bz_table_id="39db0b1d-1bf9-4e1b-8bcb-326e61026e26"; 
              var maxV_url="/api/data/table/maxvalue_1/"+bz_table_id+"/id";
              execute_ajax(maxV_url,"get",{},function(r){
                    var id=r.data;   //獲取表中id字段最大值加1
                    //添加純屬性數據
                    var params={};
                    params["table_id"]=bz_table_id;
                    //
                    var fields=[];                   
                    fields.push(getEditObj("id","Int",id));
                    fields.push(getEditObj("bzmc","string","標註"+id));
                    fields.push(getEditObj("userid","string",loginUserId));
                    params["fields"]=fields;              
                    //
                    var jsonStr=JSON.stringify(params); 
                    execute_ajaxbody("/api/data/table/insert","post",jsonStr,function(r){
                          //修改幾何對象數據
                          var params={};
                          params["table_id"]=bz_table_id;
                          params["nowherestr"]="id="+id;
                          params["wkt"]=wkt;
                          params["shapename"]="geom";
                          params["srid"]="4326";    //wgs 1984
                          var uGeojsonStr=JSON.stringify(params); 
                          execute_ajaxbody("/api/data/table/updateGeometry","post",uGeojsonStr,function(r){
                          });

                    });
              }) 
              
              
         };
    }
};

//
export default {
  name: "MarkerControl",
  props:["map"],
  data() {
    return {
      formInline: {
        user: "",
        region: ""
      },
      bz_table_id:"39db0b1d-1bf9-4e1b-8bcb-326e61026e26",   //表編號 bz_point
      tableData: [],
      bar_addBzMark:null,
      bzMarkLayer:null,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    readGeometry(wktString)
    {
        var wkt_c = new ol.format.WKT();
        var wktObj = wkt_c.readGeometry(wktString);        
        return wktObj;
    },
    //定位標註功能  OK
    handleClick(scopeRow){
      var that=this;
      //console.log(scopeRow);
      //console.log(this.map);
      //let view = _map.encmap.getView();
      //view.setZoom(_zoomLevel);
      //view.setCenter(ol.extent.getCenter(_feature.getGeometry().getExtent()));  
      var params={};
      params["table_id"]=this.bz_table_id;
      params["id"]=scopeRow.id;
      params["srid"]=3857;  //wgs 1984=4326    web mecator=3857
      execute_ajax("/api/data/table/geometry","post",params,function(r){           
           //console.log(r);
           var data=r.data;
           var row=data[0];
           var wkt=row["wkt"];
           var wktArray=wkt.split(";");           
           var geo=that.readGeometry(wktArray[1]);
           //console.log(row["wkt"]);
           let view=mapHelper.map.getView();
           view.setZoom(17);      //16=8521      17=4261  比例尺
           view.setCenter(ol.extent.getCenter(geo.getExtent()));
           //
      });
    },
    //刪除標註功能
    deleteClick(scopeRow)
    {
        var that=this;
        //
        if(confirm("是否要刪除當前選中標註:【"+scopeRow.bzmc+"】")==true)
        {
            var params={};
            params["table_id"]=this.bz_table_id;
            //
            var fields=[];        
            fields.push(getEditObj("id","Int",scopeRow.id));
            params["fields"]=fields;              
            //
            var jsonStr=JSON.stringify(params);
            execute_ajaxbody("/api/data/table/delete","post",jsonStr,function(r){
                  that.init();
            });
        }
    },
    init(){             
        this.tableData=[];
        var that=this;  
        var loginUserId=getSession('loginUserId');
        //加載標註列表數據
        var t_url="/api/data/table/"+this.bz_table_id+"/userid="+loginUserId;
        execute_ajax(t_url,"get",{},function(r){
              if (r.data) {  
                var row=null;       
                var data = r.data;
                for (var i = 0; i < data.length; i++) {
                    row = data[i]; //標註列表
                    that.tableData.push(row);
                }
              }              
        });        
    },
    //添加標註點功能 OK
    add_bzMarkClick()
    {         
        if (this.bar_addBzMark == null) {
          if (mapHelper != null) {
            this.bar_addBzMark = new cwgisDrawBzMarkTool(mapHelper);
            mapHelper.addTool(this.bar_addBzMark);
          }
        }
        if (this.bar_addBzMark != null) {
          this.bar_addBzMark.onClick();
        }
    },
    //刷新標註點列表，加載標註點列表
    refresh_bzMarkClick()
    {
       this.init();       
       /*
       //加載json格式的註記圖層
       if(this.bzMarkLayer!=null)
       {
         mapHelper.removeLayer("onemap_jianyang:bz_point");
         this.bzMarkLayer=null;
       }
       this.bzMarkLayer=mapHelper.createLayerByWFSJsonp("onemap_jianyang:bz_point","標註圖層","http://192.168.30.16:8080/geoserver");
       mapHelper.addLayer(this.bzMarkLayer);
       */
    }
  }
};
</script>

@ApiOperation("修改幾何對象數據{table_id,srid,nowherestr,wkt,shapename}")
    @PostMapping("/table/updateGeometry")
    public JsonResult updateGeometry(@RequestBody editGeometry editGeo)
    {
        JsonResult rbc=new JsonResult();
        List<Map> mapList=new ArrayList<Map>();
        dbUtil db=null;
        try {
            String table_id=editGeo.table_id;
            String srid=editGeo.srid;
            String nowherestr=editGeo.nowherestr;
            String wkt=editGeo.wkt;
            String shape=editGeo.shapename;
            if(shape!=null && shape.trim()=="")
            {   //幾何字段名稱爲空時默認爲geom字段名稱
                shape="geom";
            }
            if(nowherestr!=null && nowherestr.trim()=="")
            {
                return JsonResult.error("更改表記錄的條件不能爲空");
            }
            //
            MTable table = mTableService.selectMTableById(table_id);
            if(table==null)
            {
                return JsonResult.error("編號爲"+table_id+"的表不存在");
            }
            MDatabase m_db=mDatabaseService.selectMDatabaseById(table.getDsid());
            //
            configDatasource config_ds=this.getConfigDatasource(m_db);
            db = databaseConnPool.getFreeDbUtil(config_ds);
            //
            String sql="update "+table.getName()+" set "+shape+"=st_multi(ST_GeomFromText('" + wkt+ "'," + srid + "))";
            sql+=" where "+nowherestr;
            int r=db.executeSql(sql);
            if(r>=0)
            {
                rbc=JsonResult.ok("保存成功");
            }
            //
        }
        catch(Exception ex)
        {
            ex.printStackTrace();
            rbc=JsonResult.error(ex.getMessage());
        }
        finally {
            if (db != null) {
                db.free();
            }
        }
        return rbc;
    }

另附：OpenLayers 3 之 繪製圖形（ol.interaction.Draw）詳解
https://blog.csdn.net/qingyafan/article/details/48622467