Javascript 在Node.js视图中创建OpenLayers映射_Javascript_Node.js_Express_Pug_Openlayers 3

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

javascript node.js express openlayers-3

Javascript 在Node.js视图中创建OpenLayers映射,javascript,node.js,express,pug,openlayers-3,Javascript,Node.js,Express,Pug,Openlayers 3,我是node.js新手，正在尝试在页面上放置一个简单的OpenLayers地图。然而，地图没有显示出来代码： app.js 杰德维·杰德在package.json中，我使用的是“openlayers”：“^3.15.1” 结果: 上述代码正在生成一个包含以下html的空白页面： <html> <head> </head> <title> </title> <link rel="

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

代码： app.js

杰德

维·杰德

在

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>

知道我做错了什么吗？

第一个问题是在

视图中.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")

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
    })
  }); 

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

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