码迷，mamicode.com
首页 > Web开发 > 详细

【GIS】postgres（postgis） --》nodejs+express --》geojson --》leaflet

时间：2018-09-17 19:38:40      阅读：198      评论：0      收藏：0      [点我收藏+]

标签：tst   param   sof   回调   bar   csdn   ast   set   splay   

一、基本架构

1、数据存储层：PostgreSQL-9.2.13 + postgis_2_0_pg92

2、业务处理层：Nodejs + Express + PG驱动

3、前端展示层：Leaflet

二、参考资料

1、POSTGIS 函数接口：

https://blog.csdn.net/pzysoft/article/details/76944160

2、POSTGIS官方文档：

http://www.postgres.cn/index.php/home

http://postgis.net/docs/manual-2.3/ST_AsGeoJSON.html

http://www.postgres.cn/

3、NODEJS+POSTGRES：

http://yijiebuyi.com/blog/d70c54b7de06d6151b3c68b1474e4bf8.html

https://blog.csdn.net/wan_yanyan528/article/details/49250717

https://blog.csdn.net/cheneypao/article/details/51378053

 

三、关键代码

1、geojson处理：GeoJsonUtil.js

function ToGeoJson(jsonObject) {
    //移除geometry
    //把其他属性变为properties
    var geoJson = {
        "type": "Feature"
    };
    // console.log(jsonObject)
    // console.log(jsonObject.geometry)
    geoJson.geometry = eval(‘(‘ + jsonObject.geometry + ‘)‘);
    delete jsonObject.geometry;
    // console.log(jsonObject)
    geoJson.properties = jsonObject;
    return geoJson;
}

exports.ToGeoJson = ToGeoJson;

2、PG访问：pg.js

var pg = require(‘pg‘);

var server = ‘localhost‘
var db = ‘ecodb‘
var user = ‘postgres‘
var pwd = ‘*******‘
var port = ‘5432‘
var conString = "tcp://" + user + ":" + pwd + "@" + server + "/" + db + "";

var pgConfig = {
    user: user,
    database: db,
    password: pwd,
    host: server,
    port: port,
    poolSize: 5,
    poolIdleTimeout: 30000,
    reapIntervalMillis: 10000
};

var pgPool = new pg.Pool(pgConfig);
var client = new pg.Client(conString);

var PG = function () {
    console.log("准备向****数据库连接...");
};

PG.prototype.getConnection = function () {
    client.connect(function (err) {
        if (err) {
            return console.error(‘could not connect to postgres‘, err);
        }
        client.query(‘set client_encoding to "utf8";SELECT NOW() AS "theTime"‘, function (err, result) {
            if (err) {
                return console.error(‘error running query‘, err);
            }
            console.log(db + "数据库连接成功...");
        });
    });
};

// 查询函数
//@param str 查询语句
//@param value 相关值
//@param cb 回调函数
var clientHelper = function (str, value, cb) {
    client.query(str, value, function (err, result) {
        if (err) {
            cb("err");
            console.log(err);
        } else {
            // console.log(result)
            if (result.rows != undefined)
                cb(result.rows);
            else
                cb();
        }
    });
}

PG.prototype.exec = function (strSql, cb) {
    client.query(strSql, "", function (err, result) {
        if (err) {
            cb("err");
            console.log(err);
        } else {
            // console.log(result)
            if (result.rows != undefined)
                cb(result.rows);
            else
                cb();
        }
    });
}

//增
//@param tablename 数据表名称
//@param fields 更新的字段和值，json格式
//@param cb 回调函数
PG.prototype.save = function (tablename, fields, cb) {
    if (!tablename) return;
    var str = "insert into " + tablename + "(";
    var field = [];
    var value = [];
    var num = [];
    var count = 0;
    for (var i in fields) {
        count++;
        field.push(i);
        value.push(fields[i]);
        num.push("$" + count);
    }
    str += field.join(",") + ") values(" + num.join(",") + ")";
    clientHelper(str, value, cb);
};

//删除
//@param tablename 数据表名称
//@param fields 条件字段和值，json格式
//@param cb 回调函数
PG.prototype.remove = function (tablename, fields, cb) {
    if (!tablename) return;
    var str = "delete from " + tablename + " where ";
    var field = [];
    var value = [];
    var count = 0;
    for (var i in fields) {
        count++;
        field.push(i + "=$" + count);
        value.push(fields[i]);
    }
    str += field.join(" and ");
    clientHelper(str, value, cb);
}

//修改
//@param tablename 数据表名称
//@param fields 更新的字段和值，json格式
//@param mainfields 条件字段和值，json格式
PG.prototype.update = function (tablename, mainfields, fields, cb) {
    if (!tablename) return;
    var str = "update " + tablename + " set ";
    var field = [];
    var value = [];
    var count = 0;
    for (var i in fields) {
        count++;
        field.push(i + "=$" + count);
        value.push(fields[i]);
    }
    str += field.join(",") + " where ";
    field = [];
    for (var j in mainfields) {
        count++;
        field.push(j + "=$" + count);
        value.push(mainfields[j]);
    }
    str += field.join(" and ");
    clientHelper(str, value, cb);
}

//查询
//@param tablename 数据表名称
//@param fields 条件字段和值，json格式
//@param returnfields 返回字段,字段数组
//@param cb 回调函数
PG.prototype.select = function (tablename, fields, returnfields, cb) {
    if (!tablename) return;
    var returnStr = "";
    console.log(returnfields)
    if (returnfields.length == 0)
        returnStr = ‘*‘;
    else
        returnStr = returnfields.join(",");
    var str = "select " + returnStr + " from " + tablename; // + " where ";
    console.log(‘select:‘ + str)
    var field = [];
    var value = [];
    var count = 0;
    if (fields != ‘‘) {
        for (var i in fields) {
            count++;
            field.push(i + "=‘" + fields[i] + "‘");
            value.push(fields[i]);
        }
    }
    if (count != 0) {
        str += " where " + field.join(" and ");
    }
    console.log(‘select:‘ + str)
    clientHelper(str, value, cb);
};

module.exports = new PG();

3、geojson服务：pgclient.js

var pgclient = require(‘./PG‘)
var express = require(‘express‘);
var app = express();
var bodyParser = require("body-parser");
var geoJson = require(‘./GeoJsonUtil‘)

//访问端口
var port = 9999

//接受post数据
app.use(bodyParser.urlencoded({
    extended: false
}));

//初始化数据库连接
pgclient.getConnection();

//设置跨域
function setCross(res) {
    //设置允许跨域的域名，*代表允许任意域名跨域
    res.header("Access-Control-Allow-Origin", "*");
    //允许的header类型
    res.header("Access-Control-Allow-Headers", "content-type");
    //跨域允许的请求方式 
    res.header("Access-Control-Allow-Methods", "DELETE,PUT,POST,GET,OPTIONS");
}

//数据记录转换为GeoJson
function DataToGeoJson(ds) {
    var jsonDS = JSON.stringify(ds);
    var geojson = {
        "type": "FeatureCollection"
    }
    var features = [];
    jsonDS = eval(‘(‘ + jsonDS + ‘)‘)

    for (var p in jsonDS) {
        var PO = jsonDS[p]

        var pRet = geoJson.ToGeoJson(PO);

        features.push(pRet)
    }
    geojson.features = features;
    return geojson;
}
app.get(‘/ListSTSAreaJson2‘, function (req, res) {
    console.log(req.query)
    console.log(req.body)

    setCross(res)

    var sql = "select id,name,code,color,show_on_map,ST_AsGeoJson(shape,6)  as geometry from chinastsarea ";
    var strSql = req.query.code == undefined ? sql :
        sql + " where code=‘" + req.query.code + "‘";

    pgclient.exec(strSql, function (ds) {
        // console.log(ds)
        res.writeHead(200, {
            ‘Content-Type‘: ‘text/plain; charset=utf-8‘
        });
        try {
            var geojson = DataToGeoJson(ds)

            res.end(JSON.stringify(geojson));
        } catch (error) {

        }
    })
})

5、Leaflet空间数据展示：leaflet.geojson.html

<html>

<head>
    <meta charset=utf-8 />
    <title>Leaflet Control.Layers</title>
    <meta name=‘viewport‘ content=‘initial-scale=1,maximum-scale=1,user-scalable=no‘ />

    <!-- Load Leaflet from CDN -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
        crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
        crossorigin=""></script>


    <!-- Load Esri Leaflet from CDN -->
    <script src="https://unpkg.com/esri-leaflet@2.2.3/dist/esri-leaflet.js" integrity="sha512-YZ6b5bXRVwipfqul5krehD9qlbJzc6KOGXYsDjU9HHXW2gK57xmWl2gU6nAegiErAqFXhygKIsWPKbjLPXVb2g=="
        crossorigin=""></script>


    <script src=‘../assets/libs/jquery/jquery-2.1.1.min.js‘></script>

    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
        }
    </style>
    <style>
        #selectedFeatures {
            position: absolute;
            bottom: 180px;
            right: 10px;
            z-index: 1000;
            background: white;
            padding: 1em;
        }

        #selectedFeatures2 {
            position: absolute;
            bottom: 240px;
            right: 10px;
            z-index: 1000;
            background: white;
            padding: 1em;
        }

        .leaflet-bar.map-text a {
            color: #79BD8F;
            display: inline;
        }
    </style>
    <style>
        #time-ranges {
            position: absolute;
            bottom: 300px;
            right: 10px;
            z-index: 1000;
            padding: 1em;
            background: white;
        }

        #time-ranges input {
            display: inline-block;
            border: 1px solid #999;
            font-size: 14px;
            border-radius: 4px;
            height: 28px;
            line-height: 28px;
        }

        #time-ranges input[type=‘submit‘] {
            box-sizing: content-box;
            padding: 0 1em;
            text-transform: uppercase;
            color: white;
            background: #5C7DB8;
            border-color: #5C7DB8;
        }
    </style>
</head>

<body>

    <div id="map"></div>


    <script>
        var gray = L.layerGroup();

        // more than one service can be grouped together and passed to the control together
        L.esri.basemapLayer("DarkGray").addTo(gray);
        L.esri.basemapLayer("GrayLabels").addTo(gray);



        var map = L.map(‘map‘, {
            zoom: 4,
            layers: [gray]
        });

        var stsAreaLayer, stsSTSChildAreaLayer, stsSTSDemoAreaLayer;

        $.ajax({
            dataType: "json",
            url: "http://192.168.198.21:9999/ListSTSAreaJson2",
            success: function (data) {

                console.log(data);

                stsAreaLayer = L.geoJSON(data).addTo(map);
            }
        }).error(function () {});

        $.ajax({
            dataType: "json",
            url: "http://192.168.198.21:9999/ListSTSChildAreaJson2",
            success: function (data) {

                console.log(data);

                stsSTSChildAreaLayer = L.geoJSON(data).addTo(map);
            }
        }).error(function () {});

        $.ajax({
            dataType: "json",
            url: "http://192.168.198.21:9999/ListSTSDemoAreaJson2",
            success: function (data) {

                console.log(data);

                stsSTSDemoAreaLayer = L.geoJSON(data).addTo(map);
            }
        }).error(function () {});



        map.setView([37.71, 109.88], 3);
    </script>

</body>

</html>

 

【GIS】postgres（postgis） --》nodejs+express --》geojson --》leaflet

标签：tst   param   sof   回调   bar   csdn   ast   set   splay   

原文地址：https://www.cnblogs.com/defineconst/p/9663363.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！