【问题标题】：Creating an OpenLayers map in Node.js View在 Node.js 视图中创建 OpenLayers 地图
【发布时间】：2016-04-14 19:40:17
【问题描述】：

我是 node.js 的新手，正在尝试在页面上放置一个简单的 OpenLayers 地图。但是，地图没有显示出来。

代码：

app.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...'); 
});

layout.jade

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

view.jade

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>

知道我做错了什么吗？

【问题讨论】：

标签： javascript node.js express pug openlayers-3

【解决方案1】：

第一个问题是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")

【讨论】：