Я делаю заявку на погоду.
Для разработки я использую 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 не определен
на HTMLInputElement.onclick
Это также происходит, когда я использую созданные / dist файлы на моем сервере, на которых они будут представлены после завершения приложения.
Как я могу сделать эту работу?
Надеюсь, вы, ребята, можете помочь !!
EDIT:
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-слои, которые изменяют переменную времени.
Опять же, код, который у меня сейчас есть, действительно грязный, но я все еще работаю над этим, поэтому, пожалуйста, посмотрите на это ..
Надеюсь, это поможет ...