Merge pull request #956 from openlayers/updates

Draw canvas when cloning overlay and update dependencies
openlayers · May 21, 2021 · eccdab1 · eccdab1
2 parents 3d17933 + c9eebe3
commit eccdab1
Show file tree

Hide file tree

Showing 11 changed files with 64 additions and 47 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -1,5 +1,13 @@
 # Changelog
 
+# v 2.13 - 2021-05-20
+
+* Changes
+  * Port to CesiumJS 1.81
+  * Port dev environment to webpack5
+  * Copy canvas image when cloning overlay
+  * Use tile fonction in MVT imagery provider (handle minus, ...)
+
 # v 2.12 - 2021-01-18
 
 * Changes

diff --git a/buildtools/webpack.commons.js b/buildtools/webpack.commons.js
@@ -1,6 +1,5 @@
 const path = require('path');
 
-
 const babelPresets = [['@babel/preset-env', {
   'targets': {
     'browsers': ['ie 11'],
@@ -31,16 +30,6 @@ const olcsRule = {
   }
 };
 
-const htmlRule = {
-  test: /\.html$/,
-  use: [{
-    loader: 'html-loader',
-    options: {
-      minimize: false,
-      attributes: false
-    }
-  }]
-};
 
 const iconRule = {
   test: /\.(png|svg)$/,
@@ -59,7 +48,6 @@ const config = {
     rules: [
       olRule,
       olcsRule,
-      htmlRule,
       iconRule
     ]
   },

diff --git a/buildtools/webpack.examples.js b/buildtools/webpack.examples.js
@@ -24,7 +24,6 @@ for (const filename of glob.sync('examples/*.html', {onlyFiles: true})) {
   plugins.push(
       new HtmlWebpackPlugin({
         template: `examples/${name}.html`,
-        chunksSortMode: 'manual',
         filename: `${exampleFilenamePrefix + name}.html`,
         chunks: ['commons', name],
       })

diff --git a/buildtools/webpack.prod.js b/buildtools/webpack.prod.js
@@ -1,25 +1,22 @@
-const webpack = require('webpack');
 const TerserPlugin = require('terser-webpack-plugin');
 
 module.exports = {
   mode: 'production',
   output: {
     filename: '[name].[chunkhash:20].js'
   },
-  plugins: [
-    new webpack.optimize.ModuleConcatenationPlugin(),
-  ],
   optimization: {
     minimizer: [
       new TerserPlugin({
         terserOptions: {
+          sourceMap: true,
+          ecma: 5,
           compress: {
-            drop_console: true
+            drop_console: true,
+            drop_debugger: true,
           }
         },
-        cache: true,
         parallel: true,
-        sourceMap: true,
       })
     ]
   }

diff --git a/examples/lazy.html b/examples/lazy.html
@@ -9,7 +9,6 @@
   </head>
   <body>
     <div>Delay downloading the Cesium script and initializing the 3D globe.</div>
-    <div>This is an experimental feature.</div>
     <div id="map" style="width:600px;height:400px;"></div>
     <input type="button" value="Enable/disable 3D" onclick="javascript:manager.toggle3d()" />
     <script>LAZY_CESIUM = true</script>

diff --git a/examples/oldfashioned.html b/examples/oldfashioned.html
@@ -1,14 +1,15 @@
 <html>
 <head>
   <meta charset="UTF-8">
-  <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v6.0.1/css/ol.css" integrity="sha384-HXAuTFMQWNDZ/4IG/MfVsEkypK3j3m+YAkkiTtRL8t9eQ7r/8SVUUQBndfB07tc3" crossorigin="anonymous" type="text/css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" crossorigin="anonymous" type="text/css">
   <link rel="stylesheet" href="../olcs.css" type="text/css">
   <style>
     #map { height: 300px; width: 500px }
   </style>
-  <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v6.0.1/build/ol.js" integrity="sha384-UCAz1oyIBXM+bvGDRT5xTIbyMXZH6HZPNcnmcx3G4t7GK8oH7NyHUazlQiihaPOl" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js" crossorigin="anonymous"></script>
   <script src="../olcesium.js"></script>
-  <script src="https://cesiumjs.org/releases/1.62/Build/CesiumUnminified/Cesium.js" integrity="sha384-xdu1zCj18Cxd087NG9y3HKgg8M4sni94AL0zjbuV2Hpi6E955z4Wq24aKNr4fBcJ" crossorigin="anonymous"></script>
+  <!-- In production you should use the minified Cesium for better performances -->
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/Build/CesiumUnminified/Cesium.js" crossorigin="anonymous"></script>
 </head>
 <body>
   <p>Old-fashioned example</p>
@@ -28,12 +29,12 @@
       zoom: 3
     })
   });
-  
+
   var ol3d = new olcs.OLCesium({
     map: ol2d,
   });
   ol3d.setEnabled(true);
-  
+
   var setEnabled = function() {ol3d.setEnabled(!ol3d.getEnabled())};
   document.getElementById('enable').addEventListener('click', setEnabled);
 </script>

diff --git a/jsconfig.json b/jsconfig.json
@@ -0,0 +1,15 @@
+{
+    "compilerOptions": {
+      "module": "esnext",
+      "baseUrl": ".",
+      "paths": {
+        "cesium/*": ["./node_modules/@camptocamp/cesium/Source/*"]
+      },
+      "target": "es6"
+    },
+    "include": [
+        "src/**/*",
+        "./node_modules/@camptocamp/cesium/Source/**/*"
+        "./node_modules/ol/**/*"
+    ]
+  }
diff --git a/package.json b/package.json
@@ -1,13 +1,13 @@
 {
   "name": "ol-cesium",
-  "version": "2.12.1",
+  "version": "2.13.0",
   "description": "OpenLayers Cesium integration library",
   "scripts": {
     "build-examples": "cross-env NODE_ENV=production TARGET=examples webpack --progress --bail",
     "build-library": "cross-env NODE_ENV=production TARGET=library webpack --progress --bail",
     "build-library-debug": "cross-env NODE_ENV=development TARGET=library webpack --progress --bail",
     "build-umd": "cross-env NODE_ENV=production TARGET=umd webpack --progress --bail",
-    "start": "cross-env DEV_SERVER=1 NODE_ENV=development TARGET=examples webpack-dev-server --port 3000 --progress --watch --bail --debug",
+    "start": "cross-env DEV_SERVER=1 NODE_ENV=development TARGET=examples webpack serve --port 3000 --progress --bail",
     "typecheck": "tsc --pretty",
     "doc": "typedoc --name ol-cesium --excludeExternals --out dist/apidoc --entryPoints src/index.library.js --tsconfig ./tsconfig.json"
   },
@@ -26,30 +26,31 @@
     "cesium": ">= 1.62.0"
   },
   "devDependencies": {
-    "@babel/core": "7.12.10",
-    "@babel/preset-env": "7.12.11",
-    "@mapbox/geojsonhint": "3.0.0",
+    "@babel/core": "^7.14.3",
+    "@babel/preset-env": "^7.14.2",
+    "@mapbox/geojsonhint": "^3.0.1",
+    "@types/webpack": "^5.28.0",
     "babel-loader": "8.2.2",
-    "cesium": "1.77.0",
-    "copy-webpack-plugin": "6.2.1",
+    "cesium": "^1.81.0",
+    "copy-webpack-plugin": "^8.1.1",
     "cross-env": "7.0.3",
-    "eslint": "7.18.0",
+    "eslint": "^7.26.0",
     "eslint-config-openlayers": "12.0.0",
-    "eslint-import-resolver-webpack": "0.13.0",
+    "eslint-import-resolver-webpack": "^0.13.1",
     "fast-glob": "3.2.5",
-    "fs-extra": "9.0.1",
-    "html-loader": "1.3.2",
-    "html-webpack-plugin": "4.5.1",
-    "htmlparser2": "6.0.0",
-    "jsdoc": "3.6.6",
+    "fs-extra": "^10.0.0",
+    "html-loader": "^2.1.2",
+    "html-webpack-plugin": "^5.3.1",
+    "htmlparser2": "^6.1.0",
+    "jsdoc": "^3.6.7",
     "nomnom": "1.8.1",
     "ol": "6.5.0",
-    "proj4": "2.7.0",
+    "proj4": "^2.7.2",
     "temp": "0.9.4",
-    "typedoc": "0.20.16",
-    "typescript": "4.1.3",
-    "webpack": "4.44.2",
-    "webpack-cli": "3.3.12",
+    "typedoc": "^0.20.36",
+    "typescript": "^4.2.4",
+    "webpack": "^5.37.1",
+    "webpack-cli": "^4.7.0",
     "webpack-dev-server": "3.11.2",
     "webpack-merge": "5.7.3"
   }

diff --git a/src/olcs/MVTImageryProvider.js b/src/olcs/MVTImageryProvider.js
@@ -5,6 +5,8 @@ import {toContext} from 'ol/render.js';
 import {get as getProjection} from 'ol/proj.js';
 import {VERSION as OL_VERSION} from 'ol/util.js';
 import LRUCache from 'ol/structs/LRUCache.js';
+import {getForProjection as getTilegridForProjection} from 'ol/tilegrid.js';
+import {createFromTemplates as createTileUrlFunctions} from 'ol/tileurlfunction.js';
 
 
 const format = new MVT();
@@ -40,6 +42,9 @@ export default class MVTImageryProvider {
     this.tileCache = new LRUCache(cacheSize);
     this.featureCache = options.featureCache || new LRUCache(cacheSize);
     // to avoid too frequent cache grooming we allow x2 capacity
+
+    const tileGrid = getTilegridForProjection(this.projection_);
+    this.tileFunction_ = createTileUrlFunctions(this.urls, tileGrid);
   }
 
   getTileCredits() {
@@ -103,7 +108,7 @@ export default class MVTImageryProvider {
   }
 
   getUrl_(z, x, y) {
-    const url = this.urls[0].replace('{x}', x).replace('{y}', y).replace('{z}', z);
+    const url = this.tileFunction_([z, x, y]);
     return url;
   }
 

diff --git a/src/olcs/SynchronizedOverlay.js b/src/olcs/SynchronizedOverlay.js
@@ -184,6 +184,10 @@ class SynchronizedOverlay extends olOverlay {
   handleElementChanged() {
     function cloneNode(node, parent) {
       const clone = node.cloneNode();
+      if (node.nodeName === 'CANVAS') {
+        const ctx = clone.getContext('2d');
+        ctx.drawImage(node, 0, 0);
+      }
       if (parent) {
         parent.appendChild(clone);
       }

diff --git a/webpack.config.js b/webpack.config.js
@@ -1,6 +1,6 @@
 // eslint-disable-next-line import/no-unresolved
 const {merge} = require('webpack-merge');
-const commons = require('./buildtools/webpack.commons');
+const commons = require('./buildtools/webpack.commons.js');
 
 let config = commons.config;