Last active
October 24, 2017 09:30
-
-
Save odoe/2fee4a638c19dff01824acb5268acad9 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> | |
| <title>Workers!</title> | |
| <style> | |
| html, | |
| body, | |
| #viewDiv { | |
| margin: 0; | |
| padding: 0; | |
| height: 100%; | |
| width: 100%; | |
| } | |
| </style> | |
| <link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css"> | |
| <script src="https://js.arcgis.com/4.3/"></script> | |
| <script> | |
| require([ | |
| "esri/config", | |
| "esri/core/promiseUtils", | |
| "esri/core/workers/workers", | |
| "esri/Map", | |
| "esri/views/MapView", | |
| "esri/geometry/Polygon" | |
| ], function( | |
| esriConfig, | |
| promiseUtils, workers, | |
| EsriMap, MapView, Polygon | |
| ) { | |
| const map = new EsriMap({ | |
| basemap: "topo" | |
| }); | |
| const view = new MapView({ | |
| container: "viewDiv", | |
| map: map, | |
| center: [-118.244, 34.052], | |
| zoom: 12 | |
| }); | |
| view.then(() => { | |
| const extent = view.extent.toJSON(); | |
| const local = window.location.href.substring(0, window.location.href.lastIndexOf('/')); | |
| const workerUrl = `${local}/worker.js`; | |
| workers.open({ | |
| progress: (msg) => { | |
| console.log("progress:", msg); | |
| return promiseUtils.resolve(msg); | |
| } | |
| }, workerUrl) | |
| .then(function(connection) { | |
| return connection.invoke("magic", { extent }); | |
| }) | |
| .then(function(result) { | |
| const geometry = Polygon.fromJSON(result); | |
| view.goTo({ | |
| target: geometry | |
| }); | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <div id="viewDiv"></div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| define([ | |
| "esri/config", | |
| "esri/core/promiseUtils", | |
| "esri/geometry/geometryEngine", | |
| "esri/geometry/Extent", | |
| "esri/geometry/Polygon" | |
| ], | |
| function(esriConfig, promiseUtils, geometryEngine, Extent, Polygon) { | |
| const Request = function() {} | |
| Request.prototype.magic = function magic({ extent }, { proxy }) { | |
| proxy.connection.invoke("progress", "starting"); | |
| const area = Polygon.fromExtent(Extent.fromJSON(extent)); | |
| proxy.connection.invoke("progress", "polygon created"); | |
| const centroid = area.centroid; | |
| proxy.connection.invoke("progress", "centroid found"); | |
| const ptBuff = geometryEngine.buffer(centroid, 1000, "feet"); | |
| proxy.connection.invoke("progress", "buffer created"); | |
| const data = ptBuff.toJSON(); | |
| proxy.connection.invoke("progress", "buffer serialized"); | |
| return promiseUtils.resolve({ data }); | |
| } | |
| return Request; | |
| }); |
I have added some modifications Rene did in this video, I would like to share it, in case anyone is interested: https://github.com/esri-es/conferencia-usuarios/tree/master/2017/subiendo-nivel/demos/web-workers
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hey @odoe - I was wondering how this specific 'workerUrl' is created when rolling an app in Webpack. Should this particular worker not be built with the rest of our JavaScript? Thanks!