4

我正在制作一个天气应用程序。

为了开发这个，我将 Node.js 与 NPM 和 Parcel 一起使用。（我需要这样做，否则 OpenLayers 将无法工作，但我之前没有使用过它。）

我需要能够使用用户输入。例如，我希望用户单击一个按钮，然后需要发生一些事情。

下面是一个非常简单的解释，我需要完成什么。

我需要在 index.html 中的按钮

<input type="button" name="bt" value="test" onclick="clickKnop()">

点击后需要执行的函数，我需要在index.js中

    function clickKnop(){
        console.log('Hello World'); 
    };

当然，在我的应用程序中，功能需要有所不同，但这不是我的问题。

当我在 Node.js 环境中编码时，它仅在我将 clickKnop 函数放在我的 HTML 的脚本部分中时才有效。

当我把函数放在我的 index.js 文件中时，它不再起作用了。我收到以下错误：Uncaught ReferenceError: clickKnop is not defined at HTMLInputElement.onclick

当我在我的服务器上使用创建的 /dist 文件时也会发生这种情况，一旦应用程序完成，它们将在该服务器上显示。

我怎样才能使这项工作？

希望大家帮忙！！

编辑：

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';
import OSM from 'ol/source/OSM.js';
import TileWMS from 'ol/source/TileWMS.js';
import {fromLonLat} from 'ol/proj';
import {ZoomSlider} from 'ol/control.js';

	/*
		Hieronder komt het stukje code voor de datum en tijd.
		Default moet present datetime zijn, afgerond op 10 min (naar beneden).
		Vervolgens moeten er stapjes van 10 minuten terug gemaakt worden om uit te kiezen.
		De eindgebruiker moet zelf ook een datetime in kunnen voeren welke dan opgehaald wordt.
		Hiervoor worden ook de stapjes van 10 minuten gebruikt.
	*/

	// Current datetime
	const date = new Date();
	
	//Round current datetime to last 10 min
	const coeff = 1000 * 60 * 10;
	const floorDate = new Date(Math.floor(date.getTime() / coeff) * coeff);

	//Format the current datetime so that it can be used as input for the WMS viewparams
	const floorDateFormat = new Date(floorDate.toString().split('GMT')[0]+' UTC').toISOString().split('.')[0].replace('T',' ');
	
	console.log(floorDateFormat);
	
	
	// -10 minutes from current time + formatting for input viewparams
	const minusTenMinutes = floorDate;
	minusTenMinutes.setMinutes(minusTenMinutes.getMinutes() - 10);
	const minusTenMinutesFormat =	new Date(minusTenMinutes.toString().split('GMT')[0]+' UTC').toISOString().split('.')[0].replace('T',' ');
	
	console.log(minusTenMinutesFormat);
	console.log(floorDate);


	/*
		Hieronder wordt de map gemaakt.
		De verschillende layers en layergroepen worden aangeroepen.
		De viewparams + datetime moet mee gaan met de hierboven gedefinieerde datetime
		Daarnaast moet de gebruiker ook kunnen wisselen tussen de verschillende weersoorten,
		hiervoor moeten de params geüpdatet worden.
	*/
	let datetime = "2018-10-16 08:00:00";
	
	//Base Europe
	const wmsSourceBaseLayer = new TileWMS({
      url: 'http://localhost:8080/geoserver/O/wms',
      params: {
        'LAYERS': 'O:Europe_Polygons',
        'TILED': true
      },
      serverType: 'geoserver',
      crossOrigin: ''
    });

    const wmsBaseLayer = new TileLayer({
      source: wmsSourceBaseLayer
    });
	
	//Weather || DEFAULT TEMPERATURE
	const wmsSourceTemperature = new TileWMS ({
      url: 'http://localhost:8080/geoserver/O/wms',
      params: {
        'LAYERS': 'O:Temperature',
        'TILED': true,
		'viewparams': 'chosen_timestamp:' + datetime
      },
      serverType: 'geoserver',
      crossOrigin: 'anonymous'
    });
	
	const wmsWeatherLayer = new TileLayer({
		source: wmsSourceTemperature
	});

	//Update de params zodat er ander weer komt
	//wmsSourceTemperature.updateParams({'LAYERS': 'Observations:observations_v'});
	
	//LonLat of germany converted for use in view
	const germanyLonLat = [10.018343, 51.133481];
	const germanyConvertedLonLat = fromLonLat(germanyLonLat);
	
	//Making a view for the map
    const view = new View({
      center: germanyConvertedLonLat,
      zoom: 5
    });
	
	//Building the map with the layers
    const map = new Map({
      layers: [wmsBaseLayer, wmsWeatherLayer],
      target: 'map',
      view: view
    });
	
  
  
  
  
	function clickKnop(){
		console.log('Hello World');	
	};
    
<head>
  <title>Tiled WMS</title>
  <!--<meta http-equiv="refresh" content="10"/>-->
  <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
  <style>
    #map {
      width: 450px;
      height: 500px;
	  border: 3px solid grey;
    }
  </style>
</head>

<body>
		<div id="map" class="map"></div>
		<script src="./index.js"></script>
		<input type="button" name="bt" value="test" onclick="clickKnop()">
</body>

现在有点乱，但我想要完成的是，不同的地理服务器 WMS 层会根据时间使用不同的参数调用。

为此，我想从我的 HTML 中输入（我还想制作一个按钮以 10 分钟的步长返回）。

所以我想制作调用改变时间变量的 WMS 层的函数。

同样，我现在拥有的代码真的很乱，但我仍在努力，所以请看过去..

希望这可以帮助...

4

1 回答 1

1

看起来您好像混淆了前端和后端脚本之间的区别。

您必须开发一个能够与您的 node.js 应用程序对话的前端应用程序。您的 HTML 代码无法读取 NodeJS 源代码，这就是您收到错误消息的原因Uncaught ReferenceError: clickKnop is not defined at HTMLInputElement.onclick。

从外观上看，您将不得不分离出前端代码以使用类似https://expressjs.com/的方式调用 NodeJS 应用程序上的端点。

这方面的一个例子是：

使用 JQuery 的前端

<body>
<a id="UpdateMap">Update Map</a>
<script src="jquery..." />
<script>
    $('#UpdateMap').click(function(){
       $.get( "myNodeJSServer:Port/UpdateMap", function( data ) {
          $( ".map" ).html( data );
          alert( "Load was performed." );
        });
    });
</script>
</body>

使用 Express 和 NodeJS 的后端

...
//In your NodeJS Express Routes Application Page
app.get('/UpdateMap', function (req, res) {
  clickKnop();
})
于 2019-01-07T15:45:36.153 回答