使用 Express.js 和 PostGIS 实现 GIS 应用程序的完整指南-JavaScript中文网-JavaScript教程资源分享门户

GIS（地理信息系统）应用程序是在地图上展示和分析地理数据的重要工具。在前端开发中，使用 Express.js 和 PostGIS 来实现 GIS 应用程序是一个不错的选择。本文将介绍如何使用这两个工具来构建一个完整的 GIS 应用程序，并提供示例代码和详细的指导。

什么是 Express.js？

Express.js 是一个流行的 Node.js Web 应用程序框架，它可以帮助我们快速地构建 Web 应用程序。该框架提供了许多有用的功能，如路由、中间件、模板引擎等。使用 Express.js 可以帮助我们轻松地构建一个 Web 应用程序的后端。

什么是 PostGIS？

PostGIS 是一个开源的空间数据库扩展，它可以让我们在 PostgreSQL 数据库中存储和查询地理数据。PostGIS 可以处理各种地理数据类型，如点、线、面等，并提供了许多有用的地理函数和操作符。使用 PostGIS 可以帮助我们在 Web 应用程序中存储和查询地理数据。

步骤一：安装和配置 Express.js 和 PostGIS

在使用 Express.js 和 PostGIS 构建 GIS 应用程序之前，我们需要先安装和配置它们。下面是安装和配置的步骤：

安装 Node.js 和 Express.js

首先，我们需要安装 Node.js。可以从 Node.js 官网下载 Node.js 安装包，并按照提示进行安装。

安装完 Node.js 后，我们可以使用 npm（Node.js 包管理器）来安装 Express.js。在命令行中执行以下命令即可：

npm install express

安装 PostgreSQL 和 PostGIS

接下来，我们需要安装 PostgreSQL 数据库和 PostGIS 扩展。可以从 PostgreSQL 官网下载 PostgreSQL 安装包，并按照提示进行安装。

安装完 PostgreSQL 后，我们可以使用 PostgreSQL 的扩展管理工具 pgAdmin 来安装 PostGIS。在 pgAdmin 中，选择我们要安装 PostGIS 的数据库，右键点击 Extensions，选择 PostGIS 并点击 OK，即可安装 PostGIS 扩展。

配置 Express.js 和 PostGIS

安装完 Express.js 和 PostGIS 后，我们需要在 Express.js 中配置数据库连接。在 Express.js 的应用程序中，我们可以使用 node-postgres 模块来连接 PostgreSQL 数据库。在命令行中执行以下命令即可安装 node-postgres 模块：

npm install pg

在 Express.js 中连接 PostgreSQL 数据库的代码如下：

// javascriptcn.com 代码示例
const { Pool } = require('pg');

const pool = new Pool({
  user: 'postgres',
  host: 'localhost',
  database: 'mydatabase',
  password: 'mypassword',
  port: 5432,
});

module.exports = pool;

在上面的代码中，我们创建了一个连接池，使用连接池可以提高数据库连接的效率。连接池的配置包括数据库的用户名、主机名、数据库名、密码和端口号。

步骤二：创建数据库表和插入数据

在使用 PostGIS 存储和查询地理数据之前，我们需要先创建数据库表和插入数据。下面是创建数据库表和插入数据的步骤：

创建数据库表

在 PostgreSQL 中创建数据库表的代码如下：

CREATE TABLE mytable (
  id SERIAL PRIMARY KEY,
  name TEXT,
  geom GEOMETRY(Point, 4326)
);

在上面的代码中，我们创建了一个名为 mytable 的表，包括 id、name 和 geom 三个字段。其中 id 是自增的主键，name 是文本类型，geom 是地理数据类型。在 PostGIS 中，地理数据类型可以是 Point、LineString、Polygon 等。

插入数据

在 PostgreSQL 中插入数据的代码如下：

INSERT INTO mytable (name, geom) VALUES
  ('Beijing', ST_SetSRID(ST_MakePoint(116.3975, 39.9086), 4326)),
  ('Shanghai', ST_SetSRID(ST_MakePoint(121.4737, 31.2304), 4326)),
  ('Guangzhou', ST_SetSRID(ST_MakePoint(113.2644, 23.1291), 4326)),
  ('Shenzhen', ST_SetSRID(ST_MakePoint(114.0579, 22.5431), 4326));

在上面的代码中，我们向 mytable 表中插入了四条数据，包括城市名称和经纬度坐标。在插入数据时，我们使用了 PostGIS 的 ST_SetSRID 和 ST_MakePoint 函数来创建地理数据类型。

步骤三：查询地理数据

在创建数据库表和插入数据之后，我们可以使用 PostGIS 来查询地理数据。下面是查询地理数据的步骤：

查询点

在 PostGIS 中查询点的代码如下：

SELECT name, ST_AsText(geom) FROM mytable WHERE ST_Contains(ST_MakeEnvelope(110, 20, 130, 40, 4326), geom);

在上面的代码中，我们查询了位于经度范围在 110 到 130 之间，纬度范围在 20 到 40 之间的点。在查询时，我们使用了 PostGIS 的 ST_Contains 函数和 ST_MakeEnvelope 函数来查询包含在指定范围内的点，并使用 ST_AsText 函数将地理数据类型转换为文本类型。

查询距离

在 PostGIS 中查询距离的代码如下：

SELECT name, ST_Distance(geom, ST_SetSRID(ST_MakePoint(121.4914, 31.2330), 4326)) AS distance FROM mytable ORDER BY distance;

在上面的代码中，我们查询了离指定点（上海市中心）最近的四个城市，并按照距离从近到远排序。在查询时，我们使用了 PostGIS 的 ST_Distance 函数来计算点与指定点之间的距离，并使用 ORDER BY 子句来按照距离排序。

步骤四：使用 Express.js 构建 Web 应用程序

在完成数据库表和数据的创建和查询之后，我们可以使用 Express.js 来构建一个 Web 应用程序，将查询结果展示在网页上。下面是使用 Express.js 构建 Web 应用程序的步骤：

创建路由

在 Express.js 中创建路由的代码如下：

// javascriptcn.com 代码示例
const express = require('express');
const pool = require('./db');

const router = express.Router();

router.get('/points', async (req, res) => {
  const { xmin, ymin, xmax, ymax } = req.query;

  const { rows } = await pool.query(
    'SELECT name, ST_AsText(geom) FROM mytable WHERE ST_Contains(ST_MakeEnvelope($1, $2, $3, $4, 4326), geom)',
    [xmin, ymin, xmax, ymax]
  );

  res.json(rows);
});

router.get('/distance', async (req, res) => {
  const { lon, lat } = req.query;

  const { rows } = await pool.query(
    'SELECT name, ST_Distance(geom, ST_SetSRID(ST_MakePoint($1, $2), 4326)) AS distance FROM mytable ORDER BY distance',
    [lon, lat]
  );

  res.json(rows.slice(0, 4));
});

module.exports = router;

在上面的代码中，我们创建了两个路由，分别用于查询点和查询距离。在查询点时，我们从查询参数中获取 xmin、ymin、xmax 和 ymax 四个参数，并使用这些参数来构建 ST_MakeEnvelope 函数，查询包含在指定范围内的点。在查询距离时，我们从查询参数中获取经纬度坐标，并使用这些坐标来计算点与指定点之间的距离，并将结果按照距离排序。

创建 Web 应用程序

在 Express.js 中创建 Web 应用程序的代码如下：

// javascriptcn.com 代码示例
const express = require('express');
const cors = require('cors');
const apiRouter = require('./api');

const app = express();

app.use(cors());
app.use('/api', apiRouter);

const port = process.env.PORT || 3000;

app.listen(port, () => {
  console.log(`Listening on port ${port}`);
});

在上面的代码中，我们创建了一个 Express.js 应用程序，并使用 cors 中间件来处理跨域请求。我们将路由挂载在 /api 路径下，并监听 3000 端口。

步骤五：使用 Leaflet 和 Vue.js 构建前端界面

在完成后端的构建之后，我们可以使用 Leaflet 和 Vue.js 来构建一个简单的前端界面，展示查询结果。下面是使用 Leaflet 和 Vue.js 构建前端界面的步骤：

创建 Leaflet 地图

在 Vue.js 中创建 Leaflet 地图的代码如下：

// javascriptcn.com 代码示例
<template>
  <div id="map"></div>
</template>

<script>
import L from 'leaflet';

export default {
  mounted() {
    const map = L.map('map').setView([30, 120], 4);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
      maxZoom: 18,
    }).addTo(map);
  },
};
</script>

<style>
#map {
  height: 100vh;
}
</style>

在上面的代码中，我们使用 Leaflet 创建了一个地图，并将地图显示在 id 为 map 的 div 元素中。我们使用 OpenStreetMap 的瓦片服务作为底图，并设置了地图的初始中心点和缩放级别。

创建查询表单

在 Vue.js 中创建查询表单的代码如下：

// javascriptcn.com 代码示例
<template>
  <form @submit.prevent="submit">
    <div>
      <label for="xmin">xmin:</label>
      <input type="number" id="xmin" v-model="xmin" />
    </div>
    <div>
      <label for="ymin">ymin:</label>
      <input type="number" id="ymin" v-model="ymin" />
    </div>
    <div>
      <label for="xmax">xmax:</label>
      <input type="number" id="xmax" v-model="xmax" />
    </div>
    <div>
      <label for="ymax">ymax:</label>
      <input type="number" id="ymax" v-model="ymax" />
    </div>
    <button type="submit">查询点</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      xmin: 110,
      ymin: 20,
      xmax: 130,
      ymax: 40,
    };
  },
  methods: {
    async submit() {
      const url = `http://localhost:3000/api/points?xmin=${this.xmin}&ymin=${this.ymin}&xmax=${this.xmax}&ymax=${this.ymax}`;
      const response = await fetch(url);
      const data = await response.json();
      console.log(data);
    },
  },
};
</script>

在上面的代码中，我们创建了一个查询表单，包括 xmin、ymin、xmax 和 ymax 四个输入框和一个查询按钮。在用户提交表单时，我们使用 fetch API 发送 GET 请求，将查询参数作为查询字符串传递给后端，并将查询结果输出到控制台中。

创建查询结果列表

在 Vue.js 中创建查询结果列表的代码如下：

// javascriptcn.com 代码示例
<template>
  <ul>
    <li v-for="item in items" :key="item.name">
      {{ item.name }}: {{ item.st_astext }}
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      required: true,
      default: () => [],
    },
  },
};
</script>

在上面的代码中，我们创建了一个查询结果列表，使用 v-for 指令将查询结果循环输出为列表项。

创建 Vue.js 应用程序

在 Vue.js 中创建应用程序的代码如下：

// javascriptcn.com 代码示例
<template>
  <div>
    <app-map />
    <app-form @submit="handleFormSubmit" />
    <app-list :items="items" />
  </div>
</template>

<script>
import AppMap from './AppMap.vue';
import AppForm from './AppForm.vue';
import AppList from './AppList.vue';

export default {
  components: {
    AppMap,
    AppForm,
    AppList,
  },
  data() {
    return {
      items: [],
    };
  },
  methods: {
    async handleFormSubmit({ xmin, ymin, xmax, ymax }) {
      const url = `http://localhost:3000/api/points?xmin=${xmin}&ymin=${ymin}&xmax=${xmax}&ymax=${ymax}`;
      const response = await fetch(url);
      const data = await response.json();
      this.items = data.map((item) => ({
        name: item.name,
        st_astext: item.st_astext,
      }));
    },
  },
};
</script>

在上面的代码中，我们创建了一个 Vue.js 应用程序，并使用了前面创建的地图、查询表单和查询结果列表组件。在用户提交查询表单后，我们使用 fetch API 发送 GET 请求，将查询结果作为数组传递给查询结果列表组件，并将查询结果转换为包含城市名称和经纬度坐标的对象。

总结

使用 Express.js 和 PostGIS 可以帮助我们快速地构建一个 GIS 应用程序，并展示和分析地理数据。在本文中，我们介绍了如何使用 Express.js 和 PostGIS 来实现 GIS 应用程序，并提供了详细的步骤和示例代码。希望本文对你有所帮助！

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/656fe8dcd2f5e1655d86baf4