在 Node.js 视图中创建 OpenLayers 映射

Creating an OpenLayers map in Node.js View

本文关键字：创建 OpenLayers 映射 视图 Node js      更新时间：2023-09-26

我是node的新手.js并且正在尝试在页面上放置一个简单的OpenLayers映射。 但是，地图未显示。

法典：

应用.js

var express = require('express'); 
var app = express(); 
app.set('view engine', 'jade');
app.use(express.static(__dirname + '/public'));

app.get('/', function(req, res){
    res.render('index', {title: 'Map Viewer'}); 
}); 
app.get('/map', function(req, res){
    res.render('view'); 
}); 
app.listen(3000, function(){
    console.log('Server listening on port 3000...'); 
});

布局.翡翠

doctype html
html
    head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  
    body
        block content

查看翡翠

extends layout 
block content 
    #map 

script(type='text/javascript').
var map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
        title: 'Global Imagery',
        source: new ol.source.TileWMS({
          url: 'http://demo.opengeo.org/geoserver/wms',
          params: {LAYERS: 'nasa:bluemarble', VERSION: '1.1.1'}
        })
      })
    ],
    view: new ol.View({
      projection: 'EPSG:4326',
      center: [0, 0],
      zoom: 0,
      maxResolution: 0.703125
    })
  });

package.json我正在使用"openlayers": "^3.15.1"

结果：

上面的代码正在生成一个包含以下 html 的空白页：

<html>
    <head>
    </head>
    <title>
    </title>
    <link rel="stylesheet" href="/stylesheets/style.css"> 
    <body>
        <div id="map"> 
        </div>
    </body>
</html>

知道我做错了什么吗？

第一个问题是，在view.jade中，Javascript块没有缩进。包括script(type='text/javascript').下的所有内容都需要缩进一个空格。

另一个问题是ol.js没有被导入。 在layout.jade中，必须添加以下行： 

script(type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.15.1/ol.js")
相关文章：