Question

我一直在尝试可视化Vector数据。我正在使用Tegola作为向量图块服务器。我对库的可视化的第一选择是Leaflet，但是Leaflet的Vector.Grid库似乎在点数据方面存在一些问题；

因此，我已切换到OpenLayers。 OpenLayers有一个非常全面的库，并且有很多examples和tutorials。

我花了半天的时间了解新版本并完成上面链接中的研讨会。 OpenLayers似乎是我需要的解决方案。但是我不知道如何重写代码，这些代码是我在工作坊中准备好的代码，可以在web.pack服务器上运行。我想渲染图层并添加一些节点，以完成地图上的需求。

我的地图在web.pack服务器上运行；

但是我想在Node中渲染这张地图。所以我写了一个服务器文件；

for count, elem in enumerate(itertools.islice(elements, elements.index('bar'), len(elements))
    print(count, elem)

令人困惑的部分从这里开始，我在研讨会服务器（web.pack）中使用了相同的HTML文件。但是我不知道如何将main.js文件引用到此HTML文件。如您在下面看到的，该文件内没有对main.js文件的引用。 web.pack如何将这两个文件结合在一起？在NodeJS中使用express是否可能相同？

index.html

// Get dependencies
const express = require('express');
const http = require('http');
const bodyParser = require('body-parser');
const dotenv = require('dotenv')
const logger = require('./services/logger');
const cors = require('cors');
const { Pool, Client } = require('pg')
const pool = new Pool()

dotenv.config();
// Get our API routes
const api = require('./routes/api.router');
const client = new Client()
const app = express();


// Parsers for POST data
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cors());

app.set('view engine', 'ejs');
app.use(express.static(__dirname + '/script'));
app.get('/', function (req, res) {
  // res.sendFile(__dirname + "/views/index.html");
  res.render('index', { title: 'Map' });
});

// Set our api routes
app.use('/api', api);

app.use((req, res, next) => {
  const err = new Error('Not Found');
  err.status = 404;
  logger.error(`Request Error ${req.url} - ${err.status}`)
  next(err);
});

app.use((err, req, res, next) => {
  res.status(err.status || 500);
  res.json({
    error: {
      message: err.message
    }
  });
});
/**
 * Get port from environment and store in Express.
 */
const port = process.env.PORT || '3000';
app.set('port', port);

const server = http.createServer(app);
server.listen(port, () => console.log(`API running on localhost:${port}`));

main.js

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>OpenLayers</title>
    <style>
        html,
    body,
    #map-container {
      margin: 0;
      height: 100%;
      width: 100%;
      font-family: sans-serif;
    }

    .arrow_box {
      position: relative;
      background: #000;
      border: 1px solid #003c88;
    }

    .arrow_box:after,
    .arrow_box:before {
      top: 100%;
      left: 50%;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
    }

    .arrow_box:after {
      border-color: rgba(0, 0, 0, 0);
      border-top-color: #000;
      border-width: 10px;
      margin-left: -10px;
    }

    .arrow_box:before {
      border-color: rgba(0, 60, 136, 0);
      border-top-color: #003c88;
      border-width: 11px;
      margin-left: -11px;
    }

    .arrow_box {
      border-radius: 5px;
      padding: 10px;
      opacity: 0.8;
      background-color: black;
      color: white;
    }

    #popup-content {
      max-height: 200px;
      overflow: auto;
    }

    #popup-content th {
      text-align: left;
      width: 125px;
    }
  </style>
</head>

<body>
    <div id="map-container"></div>
    <div class="arrow_box" id="popup-container">
        <div id="popup-content"></div>
    </div>
</body>

</html>

Answer 1

该研讨会使用webpack开发服务器为应用程序开发服务。上一章介绍了如何构建用于生产的应用程序：https://openlayers.org/workshop/en/deploying/。在那里解释的步骤说明了如何使用webpack为您提供静态Web应用程序，您将在Express应用程序中将生成的构件用作静态文件：https://expressjs.com/en/starter/static-files.html。

如何将OpenLayers 5与Node（Express）结合使用？

1 个答案: