iClient for OpenLayers绘制图形入库
作者:yangjl
在支持的过程中,我曾遇到过一个客户小伙伴问我怎么将绘制的图形入库,其实方式有很多种,我就挑选了一种较为简单的方式,利用nodejs创建自己的服务并连接mysql对数据库进行图形入库。此次实现功能主要利用iClient for OpenLayers以及Express 构建node.js Web。
话不多少,进入正题。
实现原理:
- 利用express构建简单的web服务,
- 利用Node.js GET/POST请求,渲染网页,以及向服务器提交绘制的geojson对象
- 监控到入库成功,返回成功信息
开发准备:
图形入库功能的呈现与实现,需要node.js相关知识以及SuperMap iClient for OpenLayers
- node.js,Express框架,nodejs连接mysql数据库相关知识地址:
https://www.runoob.com/nodejs/nodejs-express-framework.html. - SuperMap iClient for OpenLayers产品开发指南 地址:
http://iclient.supermap.io/web/introduction/openlayersDevelop.html.
基于iClient for OpenLayers+nodejs实现图形入库:
首先利用experss构建web服务,具体步骤如下
具体步骤如下:
- 利用require分别引入experss,mysql驱动,render引擎,以及nodejs自带的解析post请求参数的body-parser接口
var express = require('express');
var mysql=require('mysql');
var app=new express();
//render的引擎 需要npminstall
app.engine('html',require('express-art-template'))
//post请求获得参数
var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: true }));
- 以客户端发送get请求的方式渲染html
app.get('/',function(req,res){
console.log(req.body)
res.render('index.html')
});
- 构建index.html首页,为代码简洁实现利用CDN在线引入OpenLayers文件,进行单网页的开发。
<link href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.css" rel="stylesheet" />
<link href='http://iclient.supermap.io/dist/openlayers/iclient-openlayers.min.css' rel='stylesheet' />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.js"></script>
<script type="text/javascript" src="http://iclient.supermap.io/dist/openlayers/iclient-openlayers.min.js"></script>
- 初始化地图
map = new ol.Map({
target: 'map',
controls: ol.control.defaults({attributionOptions: {collapsed: false}})
.extend([new ol.supermap.control.Logo()]),
view: new ol.View({
center: [100, 0],
zoom: 3,
projection: 'EPSG:4326'
})
});
var layer = new ol.layer.Tile({
source: new ol.source.TileSuperMapRest({
url: baseUrl,
wrapX: true
}),
projection: 'EPSG:4326'
})
map.addLayer(layer);
- 添加交互控件,点击进行面图形的绘制
//绘制
$("#draw").click(function(){
draw = new ol.interaction.Draw({
source: source,
type: "Polygon",
snapTolerance: 20
});
map.addInteraction(draw);
draw.on("drawend",function(e){
feas_geojson.push(format.writeFeature(e.feature))
});
map.addLayer(vector)
})
- 在server.js里面通过get请求渲染index.html
app.get('/',function(req,res){
console.log(req.body)
res.render('index.html')
});
- server.js设置启动web服务
//启动服务
app.listen(3000,function(){
console.log("localhost:3000")
- 在index.html中当绘制完成后,解析绘制出的feature对象为geojson,并向服务发送post请求,将数据传送到服务端
var format=new ol.format.GeoJSON();
feas_geojson.push(format.writeFeature(e.feature))//解析feature转为geojson
$.ajax({
url:'/two',
type:"post",
data:{
id:cout,
geojson:feas_geojson
},
contentType:"application/x-www-form-urlencoded",
success:function(e){
alert(e)
}
})
- 服务端server.js里面监听到post请求,解析传来的geojson参数,并对mysql进行inset插入数据的操作,如果对数据库操作成功则向客户端返回成功字符
//post请求发送数据,并返回结果
app.post('/two',function(req,res){
console.log(req.body) //解析post请求传入的参数
for(var i=0;i<req.body.geojson.length;i++)
{
//进行对数据的整加操作
var sql="insert into mysqldb.geo(id,geojson) values(?,?)"
var sqlpar=[req.body.id,req.body.geojson[i]]
conn.query(sql,sqlpar,function(err,e){
if(err){
throw err
}
else{
results=JSON.parse(JSON.stringify(e));
console.log(results);
res.end("成功")
}
});
}
})
- 连接数据库
var conn=mysql.createConnection({
host:"localhost",
user:'mysql',
password:'123456',
port:'3306',
database:'mysqldb',
dateStrings:true
})
conn.connect();
最后我们启动服务node server.js 并在浏览器输入localhost:3000
效果展示
以上就是绘制图形入库的所有内容。