From 362b4e559a1b46f3db1eaf0a71d80ab348b7bdd1 Mon Sep 17 00:00:00 2001 From: Guillaume Beraudo Date: Tue, 27 Jun 2017 12:36:19 +0200 Subject: [PATCH 1/4] Port to OpenLayers 4.2.0 --- CHANGES.md | 7 ++++++- RELEASE.md | 2 +- ol | 2 +- package.json | 4 ++-- 4 files changed, 10 insertions(+), 5 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 89ca1210b..686acba66 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -1,6 +1,11 @@ # Changelog -# v 1.28 +# v 1.29 + +* Changes + * Port to OpenLayers 4.2.0. + +# v 1.28 - 2017-06-02 * Changes * Port to Cesium 1.34. diff --git a/RELEASE.md b/RELEASE.md index 255b9011e..4c4bdba73 100644 --- a/RELEASE.md +++ b/RELEASE.md @@ -12,7 +12,7 @@ Each month, a new release is published in accordance to https://github.com/openl - check examples both in development and hosted modes - Add the release to github - mentioning in the description the OpenLayers and Cesium version we compiled with - - adding the zip generated by `VERSION=ol-cesium-v`grep version package.json | cut -f4 -d'"' | cut -d. -f1-2` && cp -R dist/ $VERSION && zip -r $VERSION.zip $VERSION` + - adding the zip generated by `VERSION=ol-cesium-v`grep version package.json | cut -f4 -d'"' | cut -d. -f1-2` && cp -R dist/ $VERSION && zip -r $VERSION.zip $VERSION; rm -rf $VERSION` - Update npm by calling `npm publish`. - Update github.io examples by calling `build/publish-website.sh` - Announce the release diff --git a/ol b/ol index e7afe2cb9..4255e81b9 160000 --- a/ol +++ b/ol @@ -1 +1 @@ -Subproject commit e7afe2cb9cdd7488acd9a50526da402905e7da07 +Subproject commit 4255e81b930fa1d9fd13bfc078a7a00cc315c769 diff --git a/package.json b/package.json index f912511ec..c623d04c0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ol-cesium", - "version": "1.28.0", + "version": "1.29.0", "description": "OpenLayers Cesium integration library", "scripts": {}, "repository": { @@ -20,7 +20,7 @@ "@mapbox/geojsonhint": "2.0.1", "fs-extra": "3.0.1", "jsdoc": "~3.4.0", - "eslint": "3.19.0", + "eslint": "4.1.1", "eslint-config-openlayers": "7.0.0", "nomnom": "1.8.1", "temp": "0.8.3", From 0d21ce2776aaf162500012a787b504a5257fa475 Mon Sep 17 00:00:00 2001 From: Guillaume Beraudo Date: Tue, 27 Jun 2017 12:40:30 +0200 Subject: [PATCH 2/4] Stop building with obsolete node 4 --- .travis.yml | 1 - 1 file changed, 1 deletion(-) diff --git a/.travis.yml b/.travis.yml index c8e108308..3d227b467 100644 --- a/.travis.yml +++ b/.travis.yml @@ -3,7 +3,6 @@ sudo: false language: node_js node_js: - - "4" - "6" cache: From b52a5bc5377106245824dfb14cf5bdc0f111e38d Mon Sep 17 00:00:00 2001 From: Guillaume Beraudo Date: Tue, 27 Jun 2017 13:45:32 +0200 Subject: [PATCH 3/4] Fix eslint indentation --- .eslintrc | 18 +++++++++++++++++- src/camera.js | 18 ++++++++---------- src/core.js | 4 ++-- src/core/olimageryprovider.js | 6 ++---- src/olcesium.js | 15 ++++++--------- src/olcs.js | 4 +--- src/rastersynchronizer.js | 2 +- 7 files changed, 37 insertions(+), 30 deletions(-) diff --git a/.eslintrc b/.eslintrc index 214bed610..2c769e44e 100644 --- a/.eslintrc +++ b/.eslintrc @@ -8,7 +8,23 @@ "no-extra-boolean-cast": 0, "brace-style": 0, "no-multiple-empty-lines": 0, - "valid-jsdoc": 0 + "valid-jsdoc": 0, + "indent": [2, 2, { + "VariableDeclarator": 2, + "SwitchCase": 1, + "MemberExpression": 2, + "FunctionDeclaration": { + "parameters": 2, + "body": 1 + }, + "FunctionExpression": { + "parameters": 2, + "body": 1 + }, + "CallExpression": { + "arguments": 2 + } + }] }, "globals": { "ol": false, diff --git a/src/camera.js b/src/camera.js index c2482e10e..761087165 100644 --- a/src/camera.js +++ b/src/camera.js @@ -255,9 +255,10 @@ olcs.Camera.prototype.setPosition = function(position) { const ll = this.toLonLat_(position); goog.asserts.assert(ll); - const carto = new Cesium.Cartographic(ol.math.toRadians(ll[0]), - ol.math.toRadians(ll[1]), - this.getAltitude()); + const carto = new Cesium.Cartographic( + ol.math.toRadians(ll[0]), + ol.math.toRadians(ll[1]), + this.getAltitude()); this.cam_.position = Cesium.Ellipsoid.WGS84.cartographicToCartesian(carto); this.updateView(); @@ -273,8 +274,7 @@ olcs.Camera.prototype.getPosition = function() { if (!this.fromLonLat_) { return undefined; } - const carto = Cesium.Ellipsoid.WGS84.cartesianToCartographic( - this.cam_.position); + const carto = Cesium.Ellipsoid.WGS84.cartesianToCartographic(this.cam_.position); const pos = this.fromLonLat_([ ol.math.toDegrees(carto.longitude), @@ -347,7 +347,7 @@ olcs.Camera.prototype.updateCamera_ = function() { goog.asserts.assert(ll); const carto = new Cesium.Cartographic(ol.math.toRadians(ll[0]), - ol.math.toRadians(ll[1])); + ol.math.toRadians(ll[1])); if (this.scene_.globe) { const height = this.scene_.globe.getHeight(carto); carto.height = height || 0; @@ -496,8 +496,7 @@ olcs.Camera.prototype.checkCameraChange = function(opt_dontSync) { * @return {number} The calculated distance. * @private */ -olcs.Camera.prototype.calcDistanceForResolution_ = function(resolution, - latitude) { +olcs.Camera.prototype.calcDistanceForResolution_ = function(resolution, latitude) { const canvas = this.scene_.canvas; const fovy = this.cam_.frustum.fovy; // vertical field of view goog.asserts.assert(!isNaN(fovy)); @@ -537,8 +536,7 @@ olcs.Camera.prototype.calcDistanceForResolution_ = function(resolution, * @return {number} The calculated resolution. * @private */ -olcs.Camera.prototype.calcResolutionForDistance_ = function(distance, - latitude) { +olcs.Camera.prototype.calcResolutionForDistance_ = function(distance, latitude) { // See the reverse calculation (calcDistanceForResolution_) for details const canvas = this.scene_.canvas; const fovy = this.cam_.frustum.fovy; diff --git a/src/core.js b/src/core.js index b247a8096..851a41e92 100644 --- a/src/core.js +++ b/src/core.js @@ -431,8 +431,8 @@ olcs.core.updateCesiumLayerProperties = function(olLayer, csLayer) { olcs.core.ol4326CoordinateToCesiumCartesian = function(coordinate) { const coo = coordinate; return coo.length > 2 ? - Cesium.Cartesian3.fromDegrees(coo[0], coo[1], coo[2]) : - Cesium.Cartesian3.fromDegrees(coo[0], coo[1]); + Cesium.Cartesian3.fromDegrees(coo[0], coo[1], coo[2]) : + Cesium.Cartesian3.fromDegrees(coo[0], coo[1]); }; diff --git a/src/core/olimageryprovider.js b/src/core/olimageryprovider.js index 542b6f37b..43edec086 100644 --- a/src/core/olimageryprovider.js +++ b/src/core/olimageryprovider.js @@ -203,8 +203,7 @@ olcs.core.OLImageryProvider.createCreditForSource = function(source) { } } - return (imageUrl || text.length > 0) ? - new Cesium.Credit(text, imageUrl, link) : null; + return (imageUrl || text.length > 0) ? new Cesium.Credit(text, imageUrl, link) : null; }; @@ -228,8 +227,7 @@ olcs.core.OLImageryProvider.prototype.requestImage = function(x, y, level) { // Perform mapping of Cesium tile coordinates to OpenLayers tile coordinates: // 1) Cesium zoom level 0 is OpenLayers zoom level 1 for EPSG:4326 - const z_ = this.tilingScheme_ instanceof Cesium.GeographicTilingScheme ? - level + 1 : level; + const z_ = this.tilingScheme_ instanceof Cesium.GeographicTilingScheme ? level + 1 : level; // 2) OpenLayers tile coordinates increase from bottom to top const y_ = -y - 1; diff --git a/src/olcesium.js b/src/olcesium.js index 14a020e24..bd160e57b 100644 --- a/src/olcesium.js +++ b/src/olcesium.js @@ -105,8 +105,7 @@ olcs.OLCesium = function(options) { * @type {!HTMLCanvasElement} * @private */ - this.canvas_ = /** @type {!HTMLCanvasElement} */ ( - document.createElement('CANVAS')); + this.canvas_ = /** @type {!HTMLCanvasElement} */ (document.createElement('CANVAS')); const canvasAttribute = document.createAttribute('style'); canvasAttribute.value = fillArea; this.canvas_.setAttributeNode(canvasAttribute); @@ -188,10 +187,10 @@ olcs.OLCesium = function(options) { }); const synchronizers = options.createSynchronizers ? - options.createSynchronizers(this.map_, this.scene_, this.dataSourceCollection_) : [ - new olcs.RasterSynchronizer(this.map_, this.scene_), - new olcs.VectorSynchronizer(this.map_, this.scene_) - ]; + options.createSynchronizers(this.map_, this.scene_, this.dataSourceCollection_) : [ + new olcs.RasterSynchronizer(this.map_, this.scene_), + new olcs.VectorSynchronizer(this.map_, this.scene_) + ]; // Assures correct canvas size after initialisation this.handleResize_(); @@ -320,9 +319,7 @@ Object.defineProperties(olcs.OLCesium.prototype, { // Create an invisible point entity for tracking. // It is independant from the primitive/geometry created by the vector synchronizer. const options = { - 'position': new Cesium.CallbackProperty((time, result) => - toCesiumPosition() - , false), + 'position': new Cesium.CallbackProperty((time, result) => toCesiumPosition(), false), 'point': { 'pixelSize': 1, 'color': Cesium.Color.TRANSPARENT diff --git a/src/olcs.js b/src/olcs.js index 66843e415..0bbc230eb 100644 --- a/src/olcs.js +++ b/src/olcs.js @@ -31,9 +31,7 @@ olcs.util.imageRenderingValueResult_ = undefined; olcs.util.supportsImageRenderingPixelated = function() { if (olcs.util.supportsImageRenderingPixelatedResult_ === undefined) { const canvas = document.createElement('canvas'); - canvas.setAttribute('style', - 'image-rendering: -moz-crisp-edges;' + - 'image-rendering: pixelated;'); + canvas.setAttribute('style', 'image-rendering: -moz-crisp-edges; image-rendering: pixelated;'); // canvas.style.imageRendering will be undefined, null or an // empty string on unsupported browsers. const tmp = canvas.style['imageRendering']; // non standard diff --git a/src/rastersynchronizer.js b/src/rastersynchronizer.js index a44b71572..f23ecaea9 100644 --- a/src/rastersynchronizer.js +++ b/src/rastersynchronizer.js @@ -163,7 +163,7 @@ olcs.RasterSynchronizer.prototype.orderLayers = function() { } ol.array.stableSort(layers, (layer1, layer2) => - zIndices[ol.getUid(layer1)] - zIndices[ol.getUid(layer2)] + zIndices[ol.getUid(layer1)] - zIndices[ol.getUid(layer2)] ); layers.forEach(function(olLayer) { From 008d783ab3b5149a730d73db6735e55699b3f8d3 Mon Sep 17 00:00:00 2001 From: Guillaume Beraudo Date: Tue, 27 Jun 2017 14:13:04 +0200 Subject: [PATCH 4/4] Lint the javascript files of the examples An ES6 capable browser is now necessary to display the examples. --- CHANGES.md | 2 + Makefile | 4 +- examples/exports.js | 28 +++---- examples/inject_ol_cesium.js | 22 +++--- examples/kml.js | 18 ++--- examples/lazy.js | 14 ++-- examples/main.js | 24 +++--- examples/rastersync.js | 38 +++++----- examples/rotate.js | 51 +++++++------ examples/selection.js | 18 ++--- examples/sidebyside.js | 14 ++-- examples/synthvectors_batch.js | 133 +++++++++++++++++---------------- examples/tracking.js | 28 +++---- examples/vectors.js | 106 +++++++++++++------------- 14 files changed, 250 insertions(+), 250 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 686acba66..d4968ff3b 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -4,6 +4,8 @@ * Changes * Port to OpenLayers 4.2.0. + * Lint the examples with the same rules as the rest of the code, making + it necessary to display the examples using an ES6-capable browser. # v 1.28 - 2017-06-02 diff --git a/Makefile b/Makefile index 617a6e761..cc8dad276 100644 --- a/Makefile +++ b/Makefile @@ -81,8 +81,8 @@ cleanall: clean mkdir -p $(dir $@) touch $@ -.build/eslint.timestamp: $(SRC_JS_FILES) - ./node_modules/.bin/eslint $? +.build/eslint.timestamp: $(SRC_JS_FILES) $(EXAMPLES_JS_FILES) + ./node_modules/.bin/eslint --ignore-pattern examples/Jugl.js --ignore-pattern examples/example-list.js $^ touch $@ .build/dist-examples.timestamp: cesium/Build/Cesium/Cesium.js cesium/Build/CesiumUnminified/Cesium.js dist/olcesium.js $(EXAMPLES_JS_FILES) $(EXAMPLES_HTML_FILES) diff --git a/examples/exports.js b/examples/exports.js index f259dfd43..792d3e4c8 100644 --- a/examples/exports.js +++ b/examples/exports.js @@ -1,4 +1,4 @@ -var ol2d = new ol.Map({ +const ol2d = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM() @@ -11,23 +11,23 @@ var ol2d = new ol.Map({ }) }); -var ol3d = new olcs.OLCesium({map: ol2d}); -var scene = ol3d.getCesiumScene(); -var terrainProvider = new Cesium.CesiumTerrainProvider({ - url : '//assets.agi.com/stk-terrain/world' +const ol3d = new olcs.OLCesium({map: ol2d}); +const scene = ol3d.getCesiumScene(); +const terrainProvider = new Cesium.CesiumTerrainProvider({ + url: '//assets.agi.com/stk-terrain/world' }); scene.terrainProvider = terrainProvider; ol3d.setEnabled(true); -var camera = ol3d.getCamera(); +const camera = ol3d.getCamera(); -var infoDiv = document.getElementById('infoDiv'); -var printInfo = function() { - infoDiv.innerHTML = 'Center: ' + camera.getCenter() + '
' + - 'Distance: ' + camera.getDistance() + '
' + - 'Heading: ' + camera.getHeading() + '
' + - 'Tilt: ' + camera.getTilt() + '
' + - 'Position: ' + camera.getPosition() + '
' + - 'Altitude: ' + camera.getAltitude() + '
'; +const infoDiv = document.getElementById('infoDiv'); +const printInfo = function() { + infoDiv.innerHTML = `Center: ${camera.getCenter()}
` + + `Distance: ${camera.getDistance()}
` + + `Heading: ${camera.getHeading()}
` + + `Tilt: ${camera.getTilt()}
` + + `Position: ${camera.getPosition()}
` + + `Altitude: ${camera.getAltitude()}
`; }; setInterval(printInfo, 100); diff --git a/examples/inject_ol_cesium.js b/examples/inject_ol_cesium.js index 12857b7a3..bd26c384a 100644 --- a/examples/inject_ol_cesium.js +++ b/examples/inject_ol_cesium.js @@ -1,21 +1,21 @@ (function() { - var mode = window.location.href.match(/mode=([a-z0-9\-]+)\&?/i); - var DIST = false; - var isDev = mode && mode[1] === 'dev'; - var cs = isDev ? 'CesiumUnminified/Cesium.js' : 'Cesium/Cesium.js'; - var ol = (DIST && isDev) ? 'olcesium-debug.js' : '@loader'; + const mode = window.location.href.match(/mode=([a-z0-9\-]+)\&?/i); + const DIST = false; + const isDev = mode && mode[1] === 'dev'; + const cs = isDev ? 'CesiumUnminified/Cesium.js' : 'Cesium/Cesium.js'; + const ol = (DIST && isDev) ? 'olcesium-debug.js' : '@loader'; if (!window.LAZY_CESIUM) { - document.write(''); + document.write(`${''); } - document.write(''); + document.write(`${''); - var s; + let s; window.lazyLoadCesium = function() { if (!s) { - s = document.createElement("script"); - s.type = "text/javascript"; - s.src = '../cesium/Build/' + cs; + s = document.createElement('script'); + s.type = 'text/javascript'; + s.src = `../cesium/Build/${cs}`; console.log('loading Cesium...'); document.body.appendChild(s); } diff --git a/examples/kml.js b/examples/kml.js index de4b239eb..779e7cc90 100644 --- a/examples/kml.js +++ b/examples/kml.js @@ -1,4 +1,4 @@ -var ol2d = new ol.Map({ +const ol2d = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM() @@ -16,18 +16,18 @@ var ol2d = new ol.Map({ }) }); -var ol3d = new olcs.OLCesium({map: ol2d}); -var scene = ol3d.getCesiumScene(); -var terrainProvider = new Cesium.CesiumTerrainProvider({ - url : '//assets.agi.com/stk-terrain/world' +const ol3d = new olcs.OLCesium({map: ol2d}); +const scene = ol3d.getCesiumScene(); +const terrainProvider = new Cesium.CesiumTerrainProvider({ + url: '//assets.agi.com/stk-terrain/world' }); scene.terrainProvider = terrainProvider; ol3d.getDataSources().add(Cesium.KmlDataSource.load( - 'https://api3.geo.admin.ch/ogcproxy?url=' + + 'https://api3.geo.admin.ch/ogcproxy?url=' + 'https%3A%2F%2Fdav0.bgdi.admin.ch%2Fbazl_web%2FActive_Obstacles.kmz', { - camera: scene.camera, - canvas: scene.canvas - } + camera: scene.camera, + canvas: scene.canvas + } )); diff --git a/examples/lazy.js b/examples/lazy.js index 1d8308767..b503d32ad 100644 --- a/examples/lazy.js +++ b/examples/lazy.js @@ -1,4 +1,4 @@ -var ol2d = new ol.Map({ +const ol2d = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM() @@ -17,7 +17,7 @@ var ol2d = new ol.Map({ }); -var ol3d; +let ol3d; function _doToggle() { @@ -25,9 +25,9 @@ function _doToggle() { } -function toggle3D() { +function toggle3D() { // eslint-disable-line no-unused-vars if (!ol3d) { - var s = window.lazyLoadCesium(); + const s = window.lazyLoadCesium(); s.onload = function() { init3D(); _doToggle(); @@ -40,9 +40,9 @@ function toggle3D() { function init3D() { ol3d = new olcs.OLCesium({map: ol2d}); - var scene = ol3d.getCesiumScene(); - var terrainProvider = new Cesium.CesiumTerrainProvider({ - url : '//assets.agi.com/stk-terrain/world' + const scene = ol3d.getCesiumScene(); + const terrainProvider = new Cesium.CesiumTerrainProvider({ + url: '//assets.agi.com/stk-terrain/world' }); scene.terrainProvider = terrainProvider; } diff --git a/examples/main.js b/examples/main.js index ae472f5e1..76de9b5a1 100644 --- a/examples/main.js +++ b/examples/main.js @@ -1,4 +1,4 @@ -var ol2d = new ol.Map({ +const ol2d = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM() @@ -16,34 +16,34 @@ var ol2d = new ol.Map({ }) }); -var ol3d = new olcs.OLCesium({ +const timeElt = document.getElementById('time'); +const ol3d = new olcs.OLCesium({ map: ol2d, - time: function() { - var val = timeElt.value; - if (scene.globe.enableLighting && val) { - var d = new Date(); + time() { + const val = timeElt.value; + if (ol3d.getCesiumScene().globe.enableLighting && val) { + const d = new Date(); d.setUTCHours(val); return Cesium.JulianDate.fromDate(d); } return Cesium.JulianDate.now(); } }); -var scene = ol3d.getCesiumScene(); -var terrainProvider = new Cesium.CesiumTerrainProvider({ - url : '//assets.agi.com/stk-terrain/world', +const scene = ol3d.getCesiumScene(); +const terrainProvider = new Cesium.CesiumTerrainProvider({ + url: '//assets.agi.com/stk-terrain/world', requestVertexNormals: true }); scene.terrainProvider = terrainProvider; -var timeElt = document.getElementById('time'); timeElt.style.display = 'none'; -var toggleTime = function() { +const toggleTime = function() { // eslint-disable-line no-unused-vars scene.globe.enableLighting = !scene.globe.enableLighting; if (timeElt.style.display == 'none') { timeElt.style.display = 'inline-block'; } else { timeElt.style.display = 'none'; } -} +}; diff --git a/examples/rastersync.js b/examples/rastersync.js index 7ee0e6cba..4591c3d5c 100644 --- a/examples/rastersync.js +++ b/examples/rastersync.js @@ -1,44 +1,44 @@ -var view = new ol.View({ +const view = new ol.View({ center: ol.proj.transform([-112.2, 36.06], 'EPSG:4326', 'EPSG:3857'), zoom: 11 }); -var layer0 = new ol.layer.Tile({ +const layer0 = new ol.layer.Tile({ source: new ol.source.OSM() }); -var layer1 = new ol.layer.Tile({ +const layer1 = new ol.layer.Tile({ source: new ol.source.TileJSON({ url: 'https://tileserver.maptiler.com/grandcanyon.json', crossOrigin: 'anonymous' }) }); -var tileJsonSource = new ol.source.TileJSON({ +const tileJsonSource = new ol.source.TileJSON({ url: 'https://api.tiles.mapbox.com/v3/mapbox.world-borders-light.json', crossOrigin: 'anonymous' }); -var layer2 = new ol.layer.Tile({ +const layer2 = new ol.layer.Tile({ source: tileJsonSource }); -var ol2d = new ol.Map({ +const ol2d = new ol.Map({ layers: [layer0, new ol.layer.Group({layers: [layer1, layer2]})], target: 'map2d', - view: view, + view, renderer: 'webgl' }); -var ol3d = new olcs.OLCesium({map: ol2d, target: 'map3d'}); -var scene = ol3d.getCesiumScene(); -var terrainProvider = new Cesium.CesiumTerrainProvider({ - url : 'https://assets.agi.com/stk-terrain/world' +const ol3d = new olcs.OLCesium({map: ol2d, target: 'map3d'}); +const scene = ol3d.getCesiumScene(); +const terrainProvider = new Cesium.CesiumTerrainProvider({ + url: 'https://assets.agi.com/stk-terrain/world' }); scene.terrainProvider = terrainProvider; ol3d.setEnabled(true); -var addStamen = function() { +const addStamen = function() { // eslint-disable-line no-unused-vars ol2d.addLayer(new ol.layer.Tile({ source: new ol.source.Stamen({ opacity: 0.7, @@ -47,14 +47,14 @@ var addStamen = function() { })); }; -var tileWMSSource = new ol.source.TileWMS({ +const tileWMSSource = new ol.source.TileWMS({ url: 'http://demo.boundlessgeo.com/geoserver/wms', params: {'LAYERS': 'topp:states', 'TILED': true}, serverType: 'geoserver', crossOrigin: 'anonymous' }); -var addTileWMS = function() { +const addTileWMS = function() { // eslint-disable-line no-unused-vars ol2d.addLayer(new ol.layer.Tile({ opacity: 0.5, extent: [-13884991, 2870341, -7455066, 6338219], @@ -62,21 +62,21 @@ var addTileWMS = function() { })); }; -var changeI = 0; -var changeTileWMSParams = function() { +let changeI = 0; +const changeTileWMSParams = function() { // eslint-disable-line no-unused-vars tileWMSSource.updateParams({ 'LAYERS': (changeI++) % 2 == 0 ? 'nurc:Img_Sample' : 'topp:states' }); }; -var addTileJSON = function() { +const addTileJSON = function() { // eslint-disable-line no-unused-vars ol2d.addLayer(new ol.layer.Tile({ source: tileJsonSource })); }; -var removeLastLayer = function() { - var length = ol2d.getLayers().getLength(); +const removeLastLayer = function() { // eslint-disable-line no-unused-vars + const length = ol2d.getLayers().getLength(); if (length > 0) { ol2d.getLayers().removeAt(length - 1); } diff --git a/examples/rotate.js b/examples/rotate.js index 580cc76be..c45a9a2b1 100644 --- a/examples/rotate.js +++ b/examples/rotate.js @@ -1,5 +1,5 @@ -var map = new ol.Map({ +const map = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM() @@ -18,9 +18,9 @@ var map = new ol.Map({ }); -var ol3d = new olcs.OLCesium({map: map/*, target: 'map3d'*/}); -var scene = ol3d.getCesiumScene(); -var terrainProvider = new Cesium.CesiumTerrainProvider({ +const ol3d = new olcs.OLCesium({map/*, target: 'map3d'*/}); +const scene = ol3d.getCesiumScene(); +const terrainProvider = new Cesium.CesiumTerrainProvider({ url: '//assets.agi.com/stk-terrain/world', requestVertexNormals: false }); @@ -33,7 +33,7 @@ ol3d.setEnabled(true); * @param {!olcs.OLCesium} ol3d * @constructor */ -var OlcsControl = function(ol3d) { +const OlcsControl = function(ol3d) { /** * @type {!olcs.OLCesium} @@ -86,8 +86,8 @@ OlcsControl.prototype.getHeading = function() { * @return {number|undefined} */ OlcsControl.prototype.getTiltOnGlobe = function() { - var scene = this.ol3d_.getCesiumScene(); - var tiltOnGlobe = olcs.core.computeSignedTiltAngleOnGlobe(scene); + const scene = this.ol3d_.getCesiumScene(); + const tiltOnGlobe = olcs.core.computeSignedTiltAngleOnGlobe(scene); return -tiltOnGlobe; }; @@ -96,25 +96,25 @@ OlcsControl.prototype.getTiltOnGlobe = function() { * @param {function()} callback */ OlcsControl.prototype.resetToNorthZenith = function(callback) { - var scene = this.ol3d_.getCesiumScene(); - var camera = scene.camera; - var pivot = olcs.core.pickBottomPoint(scene); + const scene = this.ol3d_.getCesiumScene(); + const camera = scene.camera; + const pivot = olcs.core.pickBottomPoint(scene); if (!pivot) { callback(); return; } - var currentHeading = this.getHeading(); - var angle = olcs.core.computeAngleToZenith(scene, pivot); + const currentHeading = this.getHeading(); + const angle = olcs.core.computeAngleToZenith(scene, pivot); // Point to North olcs.core.setHeadingUsingBottomCenter(scene, currentHeading, pivot); // Go to zenith - var transform = Cesium.Matrix4.fromTranslation(pivot); - var axis = camera.right; - var options = {callback: callback}; + const transform = Cesium.Matrix4.fromTranslation(pivot); + const axis = camera.right; + const options = {callback}; olcs.core.rotateAroundAxis(camera, -angle, axis, transform, options); }; @@ -123,8 +123,8 @@ OlcsControl.prototype.resetToNorthZenith = function(callback) { * @param {number} angle */ OlcsControl.prototype.setHeading = function(angle) { - var scene = this.ol3d_.getCesiumScene(); - var bottom = olcs.core.pickBottomPoint(scene); + const scene = this.ol3d_.getCesiumScene(); + const bottom = olcs.core.pickBottomPoint(scene); if (bottom) { olcs.core.setHeadingUsingBottomCenter(scene, angle, bottom); } @@ -135,22 +135,21 @@ OlcsControl.prototype.setHeading = function(angle) { * @param {number} angle */ OlcsControl.prototype.tiltOnGlobe = function(angle) { - var scene = this.ol3d_.getCesiumScene(); - var camera = scene.camera; - var pivot = olcs.core.pickBottomPoint(scene); + const scene = this.ol3d_.getCesiumScene(); + const camera = scene.camera; + const pivot = olcs.core.pickBottomPoint(scene); if (!pivot) { // Could not find the bottom point return; } - var options = {}; - var transform = Cesium.Matrix4.fromTranslation(pivot); - var axis = camera.right; - var rotateAroundAxis = olcs.core.rotateAroundAxis; + const options = {}; + const transform = Cesium.Matrix4.fromTranslation(pivot); + const axis = camera.right; + const rotateAroundAxis = olcs.core.rotateAroundAxis; rotateAroundAxis(camera, -angle, axis, transform, options); }; -var control = new OlcsControl(ol3d); - +const control = new OlcsControl(ol3d); // eslint-disable-line no-unused-vars diff --git a/examples/selection.js b/examples/selection.js index 747961438..3a4484a1f 100644 --- a/examples/selection.js +++ b/examples/selection.js @@ -1,15 +1,15 @@ -var raster = new ol.layer.Tile({ +const raster = new ol.layer.Tile({ source: new ol.source.OSM() }); -var vector = new ol.layer.Vector({ +const vector = new ol.layer.Vector({ source: new ol.source.Vector({ format: new ol.format.GeoJSON(), url: 'data/geojson/countries.geojson' }) }); -var map = new ol.Map({ +const map = new ol.Map({ layers: [raster, vector], target: 'map2d', view: new ol.View({ @@ -19,12 +19,12 @@ var map = new ol.Map({ }); -var ol3d = new olcs.OLCesium({map: map, target: 'map3d'}); +const ol3d = new olcs.OLCesium({map, target: 'map3d'}); ol3d.setEnabled(true); -var selectionStyle = new ol.style.Style({ +const selectionStyle = new ol.style.Style({ fill: new ol.style.Fill({ color: [255, 255, 255, 0.6] }), @@ -34,16 +34,14 @@ var selectionStyle = new ol.style.Style({ }) }); -var selectedFeature; -map.on('click', function(e) { +let selectedFeature; +map.on('click', (e) => { if (selectedFeature) { selectedFeature.setStyle(null); } selectedFeature = map.forEachFeatureAtPixel( e.pixel, - function(feature, layer) { - return feature; - }); + (feature, layer) => feature); if (selectedFeature) { selectedFeature.setStyle(selectionStyle); } diff --git a/examples/sidebyside.js b/examples/sidebyside.js index c4b42874a..481f60316 100644 --- a/examples/sidebyside.js +++ b/examples/sidebyside.js @@ -1,23 +1,23 @@ -var view = new ol.View({ +const view = new ol.View({ center: ol.proj.transform([25, 20], 'EPSG:4326', 'EPSG:3857'), zoom: 3, rotation: Math.PI / 6 }); -var ol2d = new ol.Map({ +const ol2d = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], target: 'map2d', - view: view + view }); -var ol3d = new olcs.OLCesium({map: ol2d, target: 'map3d'}); -var scene = ol3d.getCesiumScene(); -var terrainProvider = new Cesium.CesiumTerrainProvider({ - url : '//assets.agi.com/stk-terrain/world' +const ol3d = new olcs.OLCesium({map: ol2d, target: 'map3d'}); +const scene = ol3d.getCesiumScene(); +const terrainProvider = new Cesium.CesiumTerrainProvider({ + url: '//assets.agi.com/stk-terrain/world' }); scene.terrainProvider = terrainProvider; ol3d.setEnabled(true); diff --git a/examples/synthvectors_batch.js b/examples/synthvectors_batch.js index bf71d3843..c3df6d382 100644 --- a/examples/synthvectors_batch.js +++ b/examples/synthvectors_batch.js @@ -1,22 +1,72 @@ -var total = 0; -var created = 0; -var added = 0; -var vectorLayers = []; +let total = 0; +let created = 0; +let added = 0; +const vectorLayers = []; -var addFeatures = function() { - var then = Date.now(); - var count = 1000; - var features = []; - var e = 18000000; - for (var i = 0; i < count; ++i) { - var feature = new ol.Feature({ +const tile = new ol.layer.Tile({ + source: new ol.source.OSM() +}); + +const map = new ol.Map({ + layers: [tile], + target: 'map2d', + view: new ol.View({ + center: [0, 0], + zoom: 2 + }) +}); + +const ol3d = new olcs.OLCesium({map}); +const scene = ol3d.getCesiumScene(); +const terrainProvider = new Cesium.CesiumTerrainProvider({ + url: '//assets.agi.com/stk-terrain/world' +}); +scene.terrainProvider = terrainProvider; +ol3d.setEnabled(true); + +// Show off 3D feature picking +const handler = new Cesium.ScreenSpaceEventHandler(scene.canvas); +let lastPicked; +handler.setInputAction((movement) => { + const pickedObjects = scene.drillPick(movement.position); + if (Cesium.defined(pickedObjects)) { + for (let i = 0; i < pickedObjects.length; ++i) { + const picked = pickedObjects[i].primitive; + if (picked.olFeature == lastPicked) {continue;} + const carto = Cesium.Ellipsoid.WGS84.cartesianToCartographic(picked.position); + console.log('Picked feature', picked.olFeature, ' is at ', carto); + lastPicked = picked.olFeature; + } + } else { + lastPicked = undefined; + } +}, Cesium.ScreenSpaceEventType.LEFT_CLICK); + + +function clearFeatures() { // eslint-disable-line no-unused-vars + vectorLayers.forEach((layer) => { + map.getLayers().remove(layer); + }); + vectorLayers.length = 0; + total = document.getElementById('total').innerHTML = 0; + document.getElementById('created').innerHTML = ''; + document.getElementById('added').innerHTML = ''; +} + +const addFeatures = function() { // eslint-disable-line no-unused-vars + let then = Date.now(); + const count = 1000; + const features = []; + const e = 18000000; + for (let i = 0; i < count; ++i) { + const feature = new ol.Feature({ geometry: new ol.geom.Point([ 2 * e * Math.random() - e, 2 * e * Math.random() - e, e * Math.random() ]) }); - var style = [new ol.style.Style({ + const style = [new ol.style.Style({ image: new ol.style.Circle({ radius: 2, fill: new ol.style.Fill({color: [ @@ -33,12 +83,12 @@ var addFeatures = function() { features.push(feature); } - var now = Date.now(); + let now = Date.now(); created = now - then; then = now; - var vectorSource = new ol.source.Vector({}); - var vector = new ol.layer.Vector({ + const vectorSource = new ol.source.Vector({}); + const vector = new ol.layer.Vector({ source: vectorSource }); vectorSource.addFeatures(features); @@ -49,56 +99,7 @@ var addFeatures = function() { total += count; document.getElementById('total').innerHTML = total; - document.getElementById('created').innerHTML = 'Features created in ' + created + 'ms.'; - document.getElementById('added').innerHTML = 'Features added in ' + added + 'ms.'; + document.getElementById('created').innerHTML = `Features created in ${created}ms.`; + document.getElementById('added').innerHTML = `Features added in ${added}ms.`; }; -var tile = new ol.layer.Tile({ - source: new ol.source.OSM() -}); - -var map = new ol.Map({ - layers: [tile], - target: 'map2d', - view: new ol.View({ - center: [0, 0], - zoom: 2 - }) -}); - -var ol3d = new olcs.OLCesium({map: map}); -var scene = ol3d.getCesiumScene(); -var terrainProvider = new Cesium.CesiumTerrainProvider({ - url: '//assets.agi.com/stk-terrain/world' -}); -scene.terrainProvider = terrainProvider; -ol3d.setEnabled(true); - - -// Show off 3D feature picking -var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas); -var lastPicked; -handler.setInputAction(function(movement) { - var pickedObjects = scene.drillPick(movement.position); - if (Cesium.defined(pickedObjects)) { - for (var i = 0; i < pickedObjects.length; ++i) { - var picked = pickedObjects[i].primitive; - if (picked.olFeature == lastPicked) continue; - var carto = Cesium.Ellipsoid.WGS84.cartesianToCartographic(picked.position); - console.log('Picked feature', picked.olFeature, ' is at ', carto); - lastPicked = picked.olFeature; - } - } else { - lastPicked = undefined; - } -}, Cesium.ScreenSpaceEventType.LEFT_CLICK); - -function clearFeatures() { - vectorLayers.forEach(function(layer) { - map.getLayers().remove(layer); - }); - vectorLayers.length = 0; - total = document.getElementById('total').innerHTML = 0; - document.getElementById('created').innerHTML = ''; - document.getElementById('added').innerHTML = ''; -} diff --git a/examples/tracking.js b/examples/tracking.js index dc01588c7..b2038fa99 100644 --- a/examples/tracking.js +++ b/examples/tracking.js @@ -1,11 +1,11 @@ -var point = new ol.geom.Point([700000, 200000, 100000]); +const point = new ol.geom.Point([700000, 200000, 100000]); -var iconFeature = new ol.Feature({ +const iconFeature = new ol.Feature({ geometry: point }); -var iconStyle = new ol.style.Style({ +const iconStyle = new ol.style.Style({ image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({ anchor: [0.5, 46], anchorXUnits: 'fraction', @@ -18,18 +18,18 @@ var iconStyle = new ol.style.Style({ iconFeature.setStyle(iconStyle); -var vectorSource2 = new ol.source.Vector({ +const vectorSource2 = new ol.source.Vector({ features: [iconFeature] }); -var imageVectorSource = new ol.source.ImageVector({ +const imageVectorSource = new ol.source.ImageVector({ source: vectorSource2 }); -var vectorLayer2 = new ol.layer.Image({ +const vectorLayer2 = new ol.layer.Image({ source: imageVectorSource }); -var map = new ol.Map({ +const map = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM() @@ -49,23 +49,23 @@ var map = new ol.Map({ }); -var ol3d = new olcs.OLCesium({map: map/*, target: 'map3d'*/}); -var scene = ol3d.getCesiumScene(); -var terrainProvider = new Cesium.CesiumTerrainProvider({ +const ol3d = new olcs.OLCesium({map/*, target: 'map3d'*/}); +const scene = ol3d.getCesiumScene(); +const terrainProvider = new Cesium.CesiumTerrainProvider({ url: '//assets.agi.com/stk-terrain/world', requestVertexNormals: false }); scene.terrainProvider = terrainProvider; ol3d.setEnabled(true); -var tracking = false; -function toggleTracking() { +let tracking = false; +function toggleTracking() { // eslint-disable-line no-unused-vars tracking = !tracking; ol3d.trackedFeature = tracking ? iconFeature : undefined; } -setInterval(function() { - var old = point.getCoordinates(); +setInterval(() => { + const old = point.getCoordinates(); point.setCoordinates([ old[0] + 1000 * Math.random(), old[1] + 1000 * Math.random(), diff --git a/examples/vectors.js b/examples/vectors.js index a852da759..da1c6ab4f 100644 --- a/examples/vectors.js +++ b/examples/vectors.js @@ -1,18 +1,18 @@ -var iconFeature = new ol.Feature({ +const iconFeature = new ol.Feature({ geometry: new ol.geom.Point([700000, 200000, 100000]) }); -var textFeature = new ol.Feature({ +const textFeature = new ol.Feature({ geometry: new ol.geom.Point([1000000, 3000000, 500000]) }); -var cervinFeature = new ol.Feature({ +const cervinFeature = new ol.Feature({ geometry: new ol.geom.Point([852541, 5776649]) }); cervinFeature.getGeometry().set('altitudeMode', 'clampToGround'); -var iconStyle = new ol.style.Style({ +const iconStyle = new ol.style.Style({ image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({ anchor: [0.5, 46], anchorXUnits: 'fraction', @@ -34,7 +34,7 @@ var iconStyle = new ol.style.Style({ }) }); -var textStyle = [new ol.style.Style({ +const textStyle = [new ol.style.Style({ text: new ol.style.Text({ text: 'Only text', textAlign: 'center', @@ -48,15 +48,15 @@ var textStyle = [new ol.style.Style({ }) }) }), new ol.style.Style({ - geometry: new ol.geom.Circle([1000000, 3000000, 10000], 2e6), - stroke: new ol.style.Stroke({ - color: 'blue', - width: 2 - }), - fill:new ol.style.Fill({ - color: 'rgba(0, 0, 255, 0.2)' - }) -})] + geometry: new ol.geom.Circle([1000000, 3000000, 10000], 2e6), + stroke: new ol.style.Stroke({ + color: 'blue', + width: 2 + }), + fill: new ol.style.Fill({ + color: 'rgba(0, 0, 255, 0.2)' + }) + })]; iconFeature.setStyle(iconStyle); @@ -65,15 +65,15 @@ textFeature.setStyle(textStyle); cervinFeature.setStyle(iconStyle); -var image = new ol.style.Circle({ +const image = new ol.style.Circle({ radius: 5, fill: null, stroke: new ol.style.Stroke({color: 'red', width: 1}) }); -var styles = { +const styles = { 'Point': [new ol.style.Style({ - image: image + image })], 'LineString': [new ol.style.Style({ stroke: new ol.style.Stroke({ @@ -89,7 +89,7 @@ var styles = { }) })], 'MultiPoint': [new ol.style.Style({ - image: image, + image, text: new ol.style.Text({ text: 'MP', stroke: new ol.style.Stroke({ @@ -143,21 +143,21 @@ var styles = { })] }; -var styleFunction = function(feature, resolution) { - var geo = feature.getGeometry(); +const styleFunction = function(feature, resolution) { + const geo = feature.getGeometry(); // always assign a style to prevent feature skipping return geo ? styles[geo.getType()] : styles['Point']; }; -var vectorSource = new ol.source.Vector({ +const vectorSource = new ol.source.Vector({ format: new ol.format.GeoJSON(), url: 'data/geojson/vector_data.geojson' }); -var theCircle = new ol.Feature(new ol.geom.Circle([5e6, 7e6, 5e5], 1e6)); +const theCircle = new ol.Feature(new ol.geom.Circle([5e6, 7e6, 5e5], 1e6)); // Add a Cesium rectangle, via setting the property olcs.polygon_kind -var cartographicRectangleStyle = new ol.style.Style({ +const cartographicRectangleStyle = new ol.style.Style({ fill: new ol.style.Fill({ color: 'rgba(255, 69, 0, 0.7)' }), @@ -166,16 +166,16 @@ var cartographicRectangleStyle = new ol.style.Style({ width: 1 }) }); -var cartographicRectangleGeometry = new ol.geom.Polygon([[[-5e6, 11e6], - [4e6, 11e6], [4e6, 10.5e6], [-5e6, 10.5e6], [-5e6, 11e6]]]); +const cartographicRectangleGeometry = new ol.geom.Polygon([[[-5e6, 11e6], + [4e6, 11e6], [4e6, 10.5e6], [-5e6, 10.5e6], [-5e6, 11e6]]]); cartographicRectangleGeometry.set('olcs.polygon_kind', 'rectangle'); -var cartographicRectangle = new ol.Feature({ +const cartographicRectangle = new ol.Feature({ geometry: cartographicRectangleGeometry }); cartographicRectangle.setStyle(cartographicRectangleStyle); // Add two Cesium rectangles with height and the property olcs.polygon_kind -var cartographicRectangleGeometry2 = new ol.geom.MultiPolygon([ +const cartographicRectangleGeometry2 = new ol.geom.MultiPolygon([ [[ [-5e6, 12e6, 0], [4e6, 12e6, 0], [4e6, 11.5e6, 0], [-5e6, 11.5e6, 0], [-5e6, 12e6, 0] @@ -186,28 +186,28 @@ var cartographicRectangleGeometry2 = new ol.geom.MultiPolygon([ ]] ]); cartographicRectangleGeometry2.set('olcs.polygon_kind', 'rectangle'); -var cartographicRectangle2 = new ol.Feature({ +const cartographicRectangle2 = new ol.Feature({ geometry: cartographicRectangleGeometry2 }); cartographicRectangle2.setStyle(cartographicRectangleStyle); -var vectorLayer = new ol.layer.Vector({ +const vectorLayer = new ol.layer.Vector({ source: vectorSource, style: styleFunction }); -var vectorSource2 = new ol.source.Vector({ +const vectorSource2 = new ol.source.Vector({ features: [iconFeature, textFeature, cervinFeature, cartographicRectangle, cartographicRectangle2] }); -var imageVectorSource = new ol.source.ImageVector({ +const imageVectorSource = new ol.source.ImageVector({ source: vectorSource2 }); -var vectorLayer2 = new ol.layer.Image({ +const vectorLayer2 = new ol.layer.Image({ source: imageVectorSource }); -var dragAndDropInteraction = new ol.interaction.DragAndDrop({ +const dragAndDropInteraction = new ol.interaction.DragAndDrop({ formatConstructors: [ ol.format.GPX, ol.format.GeoJSON, @@ -217,7 +217,7 @@ var dragAndDropInteraction = new ol.interaction.DragAndDrop({ ] }); -var map = new ol.Map({ +const map = new ol.Map({ interactions: ol.interaction.defaults().extend([dragAndDropInteraction]), layers: [ new ol.layer.Tile({ @@ -238,8 +238,8 @@ var map = new ol.Map({ }) }); -dragAndDropInteraction.on('addfeatures', function(event) { - var vectorSource = new ol.source.Vector({ +dragAndDropInteraction.on('addfeatures', (event) => { + const vectorSource = new ol.source.Vector({ features: event.features, projection: event.projection }); @@ -247,15 +247,15 @@ dragAndDropInteraction.on('addfeatures', function(event) { source: vectorSource, style: styleFunction })); - var view = map.getView(); + const view = map.getView(); view.fitExtent( vectorSource.getExtent(), /** @type {ol.Size} */ (map.getSize())); }); -var ol3d = new olcs.OLCesium({map: map, target: 'map3d'}); -var scene = ol3d.getCesiumScene(); -var terrainProvider = new Cesium.CesiumTerrainProvider({ +const ol3d = new olcs.OLCesium({map, target: 'map3d'}); +const scene = ol3d.getCesiumScene(); +const terrainProvider = new Cesium.CesiumTerrainProvider({ url: '//assets.agi.com/stk-terrain/world', requestVertexNormals: true }); @@ -263,7 +263,7 @@ scene.terrainProvider = terrainProvider; scene.globe.enableLighting = true; ol3d.setEnabled(true); -var csLabels = new Cesium.LabelCollection(); +const csLabels = new Cesium.LabelCollection(); csLabels.add({ position: Cesium.Cartesian3.fromRadians(20, 20, 0), text: 'Pre-existing primitive' @@ -273,8 +273,8 @@ scene.primitives.add(csLabels); // Adding a feature after the layer has been synchronized. vectorSource.addFeature(theCircle); -var hasTheVectorLayer = true; -function addOrRemoveOneVectorLayer() { +let hasTheVectorLayer = true; +function addOrRemoveOneVectorLayer() { // eslint-disable-line no-unused-vars if (hasTheVectorLayer) { map.getLayers().remove(vectorLayer); } else { @@ -283,8 +283,8 @@ function addOrRemoveOneVectorLayer() { hasTheVectorLayer = !hasTheVectorLayer; } -function addOrRemoveOneFeature() { - var found = vectorSource2.getFeatures().indexOf(iconFeature); +function addOrRemoveOneFeature() { // eslint-disable-line no-unused-vars + const found = vectorSource2.getFeatures().indexOf(iconFeature); if (found === -1) { vectorSource2.addFeature(iconFeature); } else { @@ -292,7 +292,7 @@ function addOrRemoveOneFeature() { } } -var oldStyle = new ol.style.Style({ +let oldStyle = new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'blue', width: 2 @@ -301,14 +301,14 @@ var oldStyle = new ol.style.Style({ color: 'green' }) }); -function toggleStyle() { - var swap = theCircle.getStyle(); +function toggleStyle() { // eslint-disable-line no-unused-vars + const swap = theCircle.getStyle(); theCircle.setStyle(oldStyle); oldStyle = swap; } -function toggleClampToGround() { - var altitudeMode; +function toggleClampToGround() { // eslint-disable-line no-unused-vars + let altitudeMode; if (!vectorLayer.get('altitudeMode')) { altitudeMode = 'clampToGround'; } @@ -320,9 +320,9 @@ function toggleClampToGround() { map.addLayer(vectorLayer2); } -function setTargetFrameRate() { - var fps; - var fpsEl = document.querySelector('#framerate'); +function setTargetFrameRate() { // eslint-disable-line no-unused-vars + let fps; + const fpsEl = document.querySelector('#framerate'); if (fpsEl) { fps = Number(fpsEl.value); ol3d.setTargetFrameRate(fps);