iClient for OpenLayers绘制图形入库

iClient for OpenLayers绘制图形入库

作者:yangjl

在支持的过程中，我曾遇到过一个客户小伙伴问我怎么将绘制的图形入库，其实方式有很多种，我就挑选了一种较为简单的方式，利用nodejs创建自己的服务并连接mysql对数据库进行图形入库。此次实现功能主要利用iClient for OpenLayers以及Express 构建node.js Web。
话不多少，进入正题。

实现原理：

1. 利用express构建简单的web服务，
2. 利用Node.js GET/POST请求，渲染网页，以及向服务器提交绘制的geojson对象
3. 监控到入库成功，返回成功信息

开发准备：

图形入库功能的呈现与实现，需要node.js相关知识以及SuperMap iClient for OpenLayers

1. node.js，Express框架，nodejs连接mysql数据库相关知识地址：
   https://www.runoob.com/nodejs/nodejs-express-framework.html.
2. SuperMap iClient for OpenLayers产品开发指南 地址：
   http://iclient.supermap.io/web/introduction/openlayersDevelop.html.

基于iClient for OpenLayers+nodejs实现图形入库:

首先利用experss构建web服务，具体步骤如下
具体步骤如下：

1. 利用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 }));

2. 以客户端发送get请求的方式渲染html

app.get('/',function(req,res){
    console.log(req.body)
    res.render('index.html')   
});

3. 构建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>

4. 初始化地图

   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);

5. 添加交互控件，点击进行面图形的绘制

//绘制
$("#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)
})

6. 在server.js里面通过get请求渲染index.html

app.get('/',function(req,res){
    console.log(req.body)
    res.render('index.html')
});

7. server.js设置启动web服务

//启动服务
app.listen(3000,function(){
    console.log("localhost:3000")

8. 在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)
            }
        })

9. 服务端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("成功")
        }
       
             });
   }
})

10. 连接数据库

var conn=mysql.createConnection({
    host:"localhost",
    user:'mysql',
    password:'123456',
    port:'3306',
    database:'mysqldb',
    dateStrings:true
})
conn.connect();

最后我们启动服务node server.js 并在浏览器输入localhost:3000

效果展示

以上就是绘制图形入库的所有内容。