我是新來的node.js，並試圖在頁面上放置一個簡單的OpenLayers地圖。但是，地圖沒有顯示出來。在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>

任何想法wh在我做錯了？

來源

2016-04-14 Sara Tibbetts

第一個問題是，在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")

來源

2016-04-15 12:34:37

在Node.js視圖中創建OpenLayers地圖

代碼：

結果：

回答

相關問題