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