javascript - 在 Node.js View 中创建 OpenLayers map

转载作者：行者123 更新时间：2023-11-30 00:10:39

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

代码:

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>

知道我做错了什么吗？

最佳答案

第一个问题是 view.jade 中的 Javascript block 没有缩进。 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")

关于javascript - 在 Node.js View 中创建 OpenLayers map ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36632467/

文章推荐： java - 在将 CRUD 插入 TopComponent 后，CRUD 按钮不起作用

文章推荐： mysql - 使用一对多关系进行关联时，JDO 尝试创建新记录

文章推荐： php - 在链接到数据库行中 id 的 URL 上使用 $_get

文章推荐： javascript - 从 HTML

首页

博学

6Ren·AI

商城

javascript - 在 Node.js View 中创建 OpenLayers map

代码:

结果: