From 5d4223634f038c9e2b2e9d330f5ce90d07e05c60 Mon Sep 17 00:00:00 2001 From: AlitaBernachot Date: Thu, 27 Apr 2023 12:41:07 +0200 Subject: [PATCH 01/35] add button 'open in codesandbox' --- examples/_code-sandbox.js | 19 +++++++ examples/exports.html | 50 ++++++++++++++----- examples/exports.js | 101 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 157 insertions(+), 13 deletions(-) create mode 100644 examples/_code-sandbox.js diff --git a/examples/_code-sandbox.js b/examples/_code-sandbox.js new file mode 100644 index 000000000..2e90ad8a8 --- /dev/null +++ b/examples/_code-sandbox.js @@ -0,0 +1,19 @@ +export function compress(json) { + return LZString.compressToBase64(JSON.stringify(json)) + .replace(/\+/g, '-') + .replace(/\//g, '_') + .replace(/=+$/, ''); +} + +export function initCodeSandboxButton(parameters) { + const button = document.getElementById('sandbox-button'); + const form = document.querySelector('#sandbox-form'); + + if (button && form) { + button.onclick = function(event) { + event.preventDefault(); + form.parameters.value = compress(parameters); + form.submit(); + } + } +} \ No newline at end of file diff --git a/examples/exports.html b/examples/exports.html index fb8e097cc..aea91d39d 100644 --- a/examples/exports.html +++ b/examples/exports.html @@ -1,25 +1,49 @@ - - + olcesium exported methods example + + -
-
- -
- - - -
- - - +
+ +
+ +
+
+ +
+
+
+
+
+
+
+
+
+
+
+ + + +
+
+ + + +
+
+
+
+
+
+ + diff --git a/examples/exports.js b/examples/exports.js index e92c63b58..9fc3f6a1e 100644 --- a/examples/exports.js +++ b/examples/exports.js @@ -5,6 +5,7 @@ import olSourceOSM from 'ol/source/OSM.js'; import olLayerTile from 'ol/layer/Tile.js'; import olMap from 'ol/Map.js'; import {OLCS_ION_TOKEN} from './_common.js'; +import {initCodeSandboxButton} from './_code-sandbox'; Cesium.Ion.defaultAccessToken = OLCS_ION_TOKEN; const ol2d = new olMap({ @@ -41,3 +42,103 @@ setInterval(printInfo, 100); document.getElementById('enable').addEventListener('click', () => ol3d.setEnabled(!ol3d.getEnabled())); window['camera'] = camera; window['olProjTransform'] = transform; + +/** + * Open code in sandbox + */ +let code = ` +import OLCesium from 'olcs/OLCesium.js'; +import {transform} from 'ol/proj.js'; +import olView from 'ol/View.js'; +import olSourceOSM from 'ol/source/OSM.js'; +import olLayerTile from 'ol/layer/Tile.js'; +import olMap from 'ol/Map.js'; + +const Cesium = window.Cesium; + +Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZWVhYmU0Mi1jNTZkLTQ3OGItYmUxYS00YTMyMDQyZTMwNDkiLCJpZCI6NjQ1LCJpYXQiOjE2MDYxMjE2OTF9.zQibbf5P0-moQ8KiV_K7KMtyLHbR-VlPghj8lyqWduU'; +const ol2d = new olMap({ + layers: [ + new olLayerTile({ + source: new olSourceOSM() + }) + ], + target: 'map', + view: new olView({ + center: transform([25, 20], 'EPSG:4326', 'EPSG:3857'), + zoom: 3 + }) +}); + +const ol3d = new OLCesium({map: ol2d}); +const scene = ol3d.getCesiumScene(); +scene.terrainProvider = Cesium.createWorldTerrain(); + +ol3d.setEnabled(true); +const camera = ol3d.getCamera(); + +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); + +document.getElementById('enable').addEventListener('click', () => ol3d.setEnabled(!ol3d.getEnabled())); +window['camera'] = camera; +window['olProjTransform'] = transform; +`; + +const divExampleCodeSource = document.createElement('div'); +divExampleCodeSource.innerHTML = document.getElementById('example-html-source').innerHTML; +divExampleCodeSource.querySelector("#map").innerHTML = ''; + +const html = ` + + + + Ol-Cesium example + + + + + + ${divExampleCodeSource.innerHTML} + + +`; + +const parameters = { + template: "parcel", + files: { + "package.json": { + content: { + "main": "index.html", + "scripts": { + "start": "parcel index.html --open", + "build": "parcel build index.html" + }, + "devDependencies": { + "@babel/core": "7.2.0", + "parcel-bundler": "^1.6.1" + }, + "dependencies": { + "ol": "latest", + "olcs": "^2.13.1" + } + }, + }, + "index.js": { + content: code, + }, + "index.html": { + content: html + }, + } +} + +initCodeSandboxButton(parameters); \ No newline at end of file From 60477eb8a05a13fed65d783d22ac3125169636e0 Mon Sep 17 00:00:00 2001 From: AlitaBernachot Date: Thu, 27 Apr 2023 13:59:13 +0200 Subject: [PATCH 02/35] improve reusability of initCodeSandboxButton() and update all examples --- buildtools/webpack.examples.js | 59 ++++++++++++++++ examples/_code-sandbox.js | 107 +++++++++++++++++++++++++---- examples/customProj.html | 26 +++++-- examples/customProj.js | 8 ++- examples/exports.html | 4 +- examples/exports.js | 105 ++-------------------------- examples/fillstyle.html | 33 ++++++--- examples/fillstyle.js | 12 ++-- examples/groundvectors.html | 37 ++++++---- examples/groundvectors.js | 6 ++ examples/icon-position.html | 41 +++++++---- examples/icon-position.js | 13 ++-- examples/image-static.html | 25 +++++-- examples/image-static.js | 10 ++- examples/imageWMS.html | 24 +++++-- examples/imageWMS.js | 8 ++- examples/kml.html | 24 +++++-- examples/kml.js | 19 +++-- examples/layer-group.html | 122 ++++++++++++++++++--------------- examples/layer-group.js | 8 ++- examples/lazy.html | 24 +++++-- examples/lazy.js | 7 +- examples/main.html | 46 ++++++++----- examples/main.js | 10 ++- examples/mvt.html | 24 +++++-- examples/mvt.js | 8 ++- 26 files changed, 526 insertions(+), 284 deletions(-) create mode 100644 buildtools/webpack.examples.js diff --git a/buildtools/webpack.examples.js b/buildtools/webpack.examples.js new file mode 100644 index 000000000..a01e36b10 --- /dev/null +++ b/buildtools/webpack.examples.js @@ -0,0 +1,59 @@ +import path from 'path'; +import fs from 'fs'; +import glob from 'fast-glob'; +import HtmlWebpackPlugin from 'html-webpack-plugin'; +import CopyWebpackPlugin from 'copy-webpack-plugin'; +import { fileURLToPath } from 'url'; +const __dirname = path.dirname(fileURLToPath(import.meta.url)); + +const plugins = []; +const entry = {}; + + +const exampleFilenamePrefix = process.env.DEV_SERVER ? 'examples/' : ''; + +const splitter = /.*\/(.*)\.html/; +for (const filename of glob.sync('examples/*.html', {onlyFiles: true})) { + const matches = filename.match(splitter); + const name = matches[1]; + const jsName = `./examples/${name}.js`; + if (!fs.existsSync(jsName)) { + continue; + } + entry[name] = [ + jsName + ]; + + plugins.push( + new HtmlWebpackPlugin({ + template: `examples/${name}.html`, + filename: `${exampleFilenamePrefix + name}.html`, + chunks: ['commons', '_code-sandbox', name], + }) + ); +} + +// move data folder +plugins.push(new CopyWebpackPlugin({ + patterns: [ + { + from: 'examples/data', + to: 'data/', + }, + ], +})); + +export default Object.assign({ + entry, + optimization: { + splitChunks: { + chunks: 'all', + name: 'commons', + } + }, + plugins, +}, !process.env.DEV_SERVER ? { + output: { + path: path.resolve(__dirname, '../dist/examples/'), + }, +} : {}); diff --git a/examples/_code-sandbox.js b/examples/_code-sandbox.js index 2e90ad8a8..abd83747c 100644 --- a/examples/_code-sandbox.js +++ b/examples/_code-sandbox.js @@ -1,19 +1,96 @@ -export function compress(json) { - return LZString.compressToBase64(JSON.stringify(json)) - .replace(/\+/g, '-') - .replace(/\//g, '_') - .replace(/=+$/, ''); +import {OLCS_ION_TOKEN} from './_common.js'; + +function compress(json) { + return window.LZString.compressToBase64(JSON.stringify(json)) + .replace(/\+/g, '-') + .replace(/\//g, '_') + .replace(/=+$/, ''); } -export function initCodeSandboxButton(parameters) { - const button = document.getElementById('sandbox-button'); - const form = document.querySelector('#sandbox-form'); +export async function initCodeSandbox(indexJsPath, ...filesPathes) { + const response = await fetch(indexJsPath); + const txtData = await response.text(); + let indexJsContent = txtData.split('//##REMOVE##')[0]; + + indexJsContent = indexJsContent.replace('import {OLCS_ION_TOKEN} from \'./_common.js\';', ''); + indexJsContent = indexJsContent.replace('OLCS_ION_TOKEN', `'${OLCS_ION_TOKEN}'`); + + const additionalJsFiles = {}; + + for (const filePath of filesPathes) { + const responseFile = await fetch(filePath); + const txtDataFile = await responseFile.text(); + + additionalJsFiles[filePath.replace('./', '')] = {content: txtDataFile}; + } + + initCodeSandboxButton({indexJsContent, additionalJsFiles}); +} - if (button && form) { - button.onclick = function(event) { - event.preventDefault(); - form.parameters.value = compress(parameters); - form.submit(); - } +function initCodeSandboxButton(options) { + const {indexJsContent, additionalJsFiles} = options; + let indexHtmlContent = ''; + const button = document.getElementById('sandbox-button'); + const form = document.querySelector('#sandbox-form'); + + if (!button || !form) { + return; + } + + const divExampleCodeSource = document.createElement('div'); + divExampleCodeSource.innerHTML = document.getElementById('example-html-source').innerHTML; + divExampleCodeSource.querySelectorAll('.clear-map-sandbox').forEach(map => map.innerHTML = ''); + indexHtmlContent = divExampleCodeSource.innerHTML; + + + const indexHtml = ` + + + + Ol-Cesium example + + + + + + ${indexHtmlContent} + + +`; + const parameters = { + template: 'parcel', + files: { + 'package.json': { + content: { + 'main': 'index.html', + 'scripts': { + 'start': 'parcel index.html --open', + 'build': 'parcel build index.html' + }, + 'devDependencies': { + '@babel/core': '7.2.0', + 'parcel-bundler': '^1.6.1', + }, + 'dependencies': { + 'ol': 'latest', + 'olcs': '^2.13.1', + 'proj4': '2.9.0', + } + }, + }, + 'index.js': { + content: indexJsContent, + }, + 'index.html': { + content: indexHtml + }, + ...additionalJsFiles } -} \ No newline at end of file + }; + + button.onclick = function(event) { + event.preventDefault(); + form.parameters.value = compress(parameters); + form.submit(); + }; +} diff --git a/examples/customProj.html b/examples/customProj.html index c6555c214..57de8f172 100644 --- a/examples/customProj.html +++ b/examples/customProj.html @@ -1,16 +1,28 @@ - - - + + - Custom projection example + Ol-Cesium | Custom projection example + + -
- +
+ +
+ +
+
+ +
+
+ +
- + + + diff --git a/examples/customProj.js b/examples/customProj.js index 623be1042..d46ace074 100644 --- a/examples/customProj.js +++ b/examples/customProj.js @@ -20,6 +20,7 @@ const customProjSource = new olSourceImageWMS({ customProjSource.set('olcs_projection', getProjection('EPSG:3857')); +const Cesium = window.Cesium; Cesium.Ion.defaultAccessToken = OLCS_ION_TOKEN; const ol2d = new olMap({ layers: [ @@ -30,7 +31,7 @@ const ol2d = new olMap({ source: customProjSource }) ], - target: 'map', + target: 'mapCesium', view: new olView({ center: [860434.6266531206, 6029479.0044273855], zoom: 6 @@ -48,3 +49,8 @@ Cesium.createWorldTerrainAsync().then(tp => scene.terrainProvider = tp); ol3d.setEnabled(true); document.getElementById('enable').addEventListener('click', () => ol3d.setEnabled(!ol3d.getEnabled())); + +//##REMOVE## Keep this tag, split code here for code sandbox + +import {initCodeSandbox} from './_code-sandbox.js'; +initCodeSandbox('./customProj.js', './_proj21781.js'); diff --git a/examples/exports.html b/examples/exports.html index aea91d39d..dd6dfbe99 100644 --- a/examples/exports.html +++ b/examples/exports.html @@ -3,7 +3,7 @@ - olcesium exported methods example + Ol-Cesium | Exported methods example @@ -19,7 +19,7 @@
-
+
diff --git a/examples/exports.js b/examples/exports.js index 9fc3f6a1e..338ea1bb7 100644 --- a/examples/exports.js +++ b/examples/exports.js @@ -5,8 +5,8 @@ import olSourceOSM from 'ol/source/OSM.js'; import olLayerTile from 'ol/layer/Tile.js'; import olMap from 'ol/Map.js'; import {OLCS_ION_TOKEN} from './_common.js'; -import {initCodeSandboxButton} from './_code-sandbox'; +const Cesium = window.Cesium; Cesium.Ion.defaultAccessToken = OLCS_ION_TOKEN; const ol2d = new olMap({ layers: [ @@ -14,7 +14,7 @@ const ol2d = new olMap({ source: new olSourceOSM() }) ], - target: 'map', + target: 'mapCesium', view: new olView({ center: transform([25, 20], 'EPSG:4326', 'EPSG:3857'), zoom: 3 @@ -43,102 +43,7 @@ document.getElementById('enable').addEventListener('click', () => ol3d.setEnable window['camera'] = camera; window['olProjTransform'] = transform; -/** - * Open code in sandbox - */ -let code = ` -import OLCesium from 'olcs/OLCesium.js'; -import {transform} from 'ol/proj.js'; -import olView from 'ol/View.js'; -import olSourceOSM from 'ol/source/OSM.js'; -import olLayerTile from 'ol/layer/Tile.js'; -import olMap from 'ol/Map.js'; - -const Cesium = window.Cesium; - -Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZWVhYmU0Mi1jNTZkLTQ3OGItYmUxYS00YTMyMDQyZTMwNDkiLCJpZCI6NjQ1LCJpYXQiOjE2MDYxMjE2OTF9.zQibbf5P0-moQ8KiV_K7KMtyLHbR-VlPghj8lyqWduU'; -const ol2d = new olMap({ - layers: [ - new olLayerTile({ - source: new olSourceOSM() - }) - ], - target: 'map', - view: new olView({ - center: transform([25, 20], 'EPSG:4326', 'EPSG:3857'), - zoom: 3 - }) -}); - -const ol3d = new OLCesium({map: ol2d}); -const scene = ol3d.getCesiumScene(); -scene.terrainProvider = Cesium.createWorldTerrain(); - -ol3d.setEnabled(true); -const camera = ol3d.getCamera(); - -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); - -document.getElementById('enable').addEventListener('click', () => ol3d.setEnabled(!ol3d.getEnabled())); -window['camera'] = camera; -window['olProjTransform'] = transform; -`; - -const divExampleCodeSource = document.createElement('div'); -divExampleCodeSource.innerHTML = document.getElementById('example-html-source').innerHTML; -divExampleCodeSource.querySelector("#map").innerHTML = ''; - -const html = ` - - - - Ol-Cesium example - - - - - - ${divExampleCodeSource.innerHTML} - - -`; - -const parameters = { - template: "parcel", - files: { - "package.json": { - content: { - "main": "index.html", - "scripts": { - "start": "parcel index.html --open", - "build": "parcel build index.html" - }, - "devDependencies": { - "@babel/core": "7.2.0", - "parcel-bundler": "^1.6.1" - }, - "dependencies": { - "ol": "latest", - "olcs": "^2.13.1" - } - }, - }, - "index.js": { - content: code, - }, - "index.html": { - content: html - }, - } -} +//##REMOVE## Keep this tag, split code here for code sandbox -initCodeSandboxButton(parameters); \ No newline at end of file +import {initCodeSandbox} from './_code-sandbox.js'; +initCodeSandbox('./exports.js'); diff --git a/examples/fillstyle.html b/examples/fillstyle.html index 3eb308b86..669267b5d 100644 --- a/examples/fillstyle.html +++ b/examples/fillstyle.html @@ -1,19 +1,32 @@ - - + - olcesium vectors example + Ol-Cesium | Vectors example + + -
-
-
-
- - +
+ +
+ +
+
+ +
+
+
+
+
+
+ + + + + diff --git a/examples/fillstyle.js b/examples/fillstyle.js index 603cfbda0..7b21571f8 100644 --- a/examples/fillstyle.js +++ b/examples/fillstyle.js @@ -14,7 +14,6 @@ import olGeomPolygon from 'ol/geom/Polygon.js'; import olLayerVector from 'ol/layer/Vector.js'; import {OLCS_ION_TOKEN} from './_common.js'; - const vectorSource = new olSourceVector({ features: [] }); @@ -49,8 +48,7 @@ image.onload = () => { })); vectorSource.addFeature(polygonFeature); }; -image.src = 'data/icon.png'; - +image.src = 'data:image/png;base64,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'; const map = new olMap({ interactions: interactionDefaults(), @@ -72,8 +70,9 @@ const map = new olMap({ }) }); +const Cesium = window.Cesium; Cesium.Ion.defaultAccessToken = OLCS_ION_TOKEN; -const ol3d = new OLCesium({map, target: 'map3d'}); +const ol3d = new OLCesium({map, target: 'mapCesium'}); const scene = ol3d.getCesiumScene(); Cesium.createWorldTerrainAsync().then(tp => scene.terrainProvider = tp); ol3d.setEnabled(true); @@ -93,3 +92,8 @@ window['toggleClampToGround'] = function() { map.removeLayer(vectorLayer); map.addLayer(vectorLayer); }; + +//##REMOVE## Keep this tag, split code here for code sandbox + +import {initCodeSandbox} from './_code-sandbox.js'; +initCodeSandbox('./fillstyle.js'); diff --git a/examples/groundvectors.html b/examples/groundvectors.html index 0e6f82cdc..5e8f15782 100644 --- a/examples/groundvectors.html +++ b/examples/groundvectors.html @@ -1,21 +1,34 @@ - - + - olcesium ground vectors example + Ol-Cesium | Ground vectors example + + -
-
-
-
-
Vectors are synchronized from the OpenLayers map to the Cesium scene. -
3D positioning and some styling is supported, with optional clamping to the ground.
- - +
+ +
+ +
+
+ +
+
+
+
+
+
Vectors are synchronized from the OpenLayers map to the Cesium scene. +
3D positioning and some styling is supported, with optional clamping to the ground.
+
+ + + + + diff --git a/examples/groundvectors.js b/examples/groundvectors.js index f2e139e1b..e495333d5 100644 --- a/examples/groundvectors.js +++ b/examples/groundvectors.js @@ -131,6 +131,7 @@ const map = new olMap({ }) }); +const Cesium = window.Cesium; Cesium.Ion.defaultAccessToken = OLCS_ION_TOKEN; vectorLayer.set('altitudeMode', 'clampToGround'); const ol3d = new OLCesium({map, target: 'map3d'}); @@ -153,3 +154,8 @@ window['scene'] = scene; document.getElementById('enable').addEventListener('click', () => ol3d.setEnabled(!ol3d.getEnabled())); ol3d.enableAutoRenderLoop(); + +//##REMOVE## Keep this tag, split code here for code sandbox + +import {initCodeSandbox} from './_code-sandbox.js'; +initCodeSandbox('./groundvectors.js', './data/geojson/ground_vector_data.geojson'); diff --git a/examples/icon-position.html b/examples/icon-position.html index 2bca7b12a..06b2e7de6 100644 --- a/examples/icon-position.html +++ b/examples/icon-position.html @@ -1,23 +1,36 @@ - - + - olcesium vectors example + Ol-Cesium | Icon position example + + -
-
-
-
-
-
Icon on the right has default placement: it is centered on the point position.
- The icon on the left has its anchor on the bottom center
- - +
+ +
+ +
+
+ +
+
+
+
+
+
+
Icon on the right has default placement: it is centered on the point position.
+ The icon on the left has its anchor on the bottom center
+
+ + + + + diff --git a/examples/icon-position.js b/examples/icon-position.js index a4710faf7..621e4e658 100644 --- a/examples/icon-position.js +++ b/examples/icon-position.js @@ -23,7 +23,7 @@ const icon1Feature = new olFeature({ icon1Feature.setStyle(new olStyleStyle({ image: new olStyleIcon(/** @type {olx.style.IconOptions} */ ({ anchor: [0.5, 1], - src: 'data/icon.png', + src: 'data:image/png;base64,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', })), text: new olStyleText({ text: 'Icon with anchor on the bottom center', @@ -42,7 +42,7 @@ const icon2Feature = new olFeature({ }); icon2Feature.setStyle(new olStyleStyle({ image: new olStyleIcon(/** @type {olx.style.IconOptions} */ ({ - src: 'data/image-static.png' + src: 'data:image/png;base64,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' })), text: new olStyleText({ text: 'Default positioning', @@ -87,8 +87,9 @@ const map = new olMap({ }) }); +const Cesium = window.Cesium; Cesium.Ion.defaultAccessToken = OLCS_ION_TOKEN; -const ol3d = new OLCesium({map, target: 'map3d'}); +const ol3d = new OLCesium({map, target: 'mapCesium'}); const scene = ol3d.getCesiumScene(); Cesium.createWorldTerrainAsync().then(tp => scene.terrainProvider = tp); ol3d.setEnabled(true); @@ -109,7 +110,6 @@ document.getElementById('enable').addEventListener('click', () => ol3d.setEnable ol3d.enableAutoRenderLoop(); - // Tilt camera const camera = scene.camera; const pivot = pickBottomPoint(scene); @@ -119,3 +119,8 @@ if (pivot) { const axis = camera.right; rotateAroundAxis(camera, -Math.PI / 4, axis, transform, options); } + +//##REMOVE## Keep this tag, split code here for code sandbox + +import {initCodeSandbox} from './_code-sandbox.js'; +initCodeSandbox('./icon-position.js'); diff --git a/examples/image-static.html b/examples/image-static.html index 1d902e1b5..aa0628b36 100644 --- a/examples/image-static.html +++ b/examples/image-static.html @@ -1,15 +1,28 @@ - - + - olcesium example + Ol-Cesium | Image static example + + -
- +
+ +
+ +
+
+ +
+
+ +
+ - + + + diff --git a/examples/image-static.js b/examples/image-static.js index 25bc12663..1c809c899 100644 --- a/examples/image-static.js +++ b/examples/image-static.js @@ -13,6 +13,7 @@ import {OLCS_ION_TOKEN} from './_common.js'; const imageExtent = [-40, 50, -10, 65]; +const Cesium = window.Cesium; Cesium.Ion.defaultAccessToken = OLCS_ION_TOKEN; const ol2d = new olMap({ layers: [ @@ -21,7 +22,7 @@ const ol2d = new olMap({ }), new ImageLayer({ source: new Static({ - url: 'data/image-static.png', + url: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGCAYAAABxLuKEAAAWK0lEQVR4Xt2bC5QdRZnH/19Vdd/HPBnyfk+CeCC8knCOiyEyOeDu8SgsJBkSgqgBErPs0V0EcfXoGlcWZRUEjxhIYMEASWA0YNCovBIww1vkNSERAgHyhkkyjztzb3dXfdtdtyf3ZjozwyLBxDqnz63bdW/dU//+6vf9q7ov4aMozNSwDnLddAoA4Lzm14cIyp/Jhs4gwvEAxgAYDsCAsQOC3gL4FTCvS5mqR5dPG7sXABrWsrJ9fATlkAuziFksAhhEPKN5w1gwX0GEOSpbMVgoBdYaxvegPR8gQDouhOOApLTn/e7u7cRY5ufNDavPOnHXokUsbL+LyByxwpRf4ZlPtCwA41q3qro2yHfDeL4GQQMgMAQIdsBgGBCMrYGkcB2pUml4ne07DfPl9009YWWx77Vh39ODI06YBc895yw59VTfirK+5VanqvoSXeiG8W1oEABZ9vsM7K8RqOwdrHgs3ZRDSkF35a775dSJV5b/xpEhjBWFQ1HIP6/5xSECqsmtrvmU19amQVYAGQ+eDwxcHii0AwZkGHHCa297QPg0t2n6xM7Ge1vcpvMneoe3MBay62QU4o3NLacYxiq3urre62j3ADgJQUqi2LM9bQnhSucMAB0K7YR9vqRZz7h/6ombLZQboEHEh50wjffeK5vOP9+yYdaTr85gbZarTCYV8qQoSlKMAd/3U/wQ3m6Qy+0jgVm//OTERxZxDGUic9gIU4Ks5cl/CNf5ARgwgeeDyTlolDDHUVEeMcQAlyImiaByDnkhd1ztFUCEhaE4t3yYUBYfBmStKMw0o7nlf8Op8wPj+xFkA6CXKAzqqRw48HLW0oHcYabE54p9RqL4JARUtvLmmetfuR4AIlEiKP8NhElmnsbHnx8844kNa1PVNfNCngQAaYAUcCBgSyJRLBKj7ylmRSpFUbIwAIe10X6u07g1tZeH4qy+6MUXK6JMFSWAj14YZopCNhIl9CeTjEw961ZWnxFmC7+YdVgm4ckUizIA4qjXK9MB55LiSADw2vYFoThnd3U6TzU+0XJMlBUjKIOZDr0wMWR7QjacOrPAaFbpzFi/s80DoEqh3qsQcRwlfwUOOX6l3tOKQCS99n2eymZPMIynz1u/4dMR9xYBZMF8CIWxkA0zj7b2/skNVyk31SSUkwnyXT5AbhKw5SNg+v/xnosHIwlgcKJ/W5jcoCsXQblOSnowcttRloqOCMqHQpgSZAEKQXeHm628NoRfCbJJEJSYkoRs/2IApcigfoQj4r6gDAAqU3HLzOaWGz4IlMX7d7KnWicbTp+1Iei+6Hd06INClntGw+X1JEeSUZGYJuVtA5cklMPoMaEZ/LdZzS2/blzbUhmNIXLKf70wzNTILCOQhVNnsoB6JlVlIeuBIJKQBZWyCPUK+4GjIjldBk4CvaxAAspRQnCqa84xLp6a+diGj0XLBzutBoCyGAiyTUR6ZvOrM8lws0ynx/bY+4ND1oqSiJKEq01GzACCcJmkDD5YncC23hvKgArFiaA8EYqfmvnkhrPskqWpSfQHZdUnZGMnO2P9y9+SrvpvZobOd8eQPeh6p5yLyTb70h9fkoulUkKjPhM9Ex20KwaXvw+h3GWhrH3voZnNGy5rmnr84qZ+nDL1ZdqiiNEjJy4NV7Pz/PZ2gDjoxZOktY/Ds/x9+VhjYCYWiszx8IiYKO4n/pwxhhjEBgwTD5hj9JR/jphJCMEEQBBBxHQjovJp54PIkdkKBJ0dP/nV6Sd8ra/tC3UwUc5+btMgUwhWhU52mt0uKHaeFKV8oOUJKAncxHuOlSEiiLjVAPC1QWAMPAYCZgTR+7jNMB/YEzNQGrjtiwiQDBKCWBEhOhxhX9mJRCFo05WjdOiUZz2x4WMFt3b2klNHdE0JxflTmThxr6WQanzq1SlGm1VOZdUYv7PDIyLFhgUI3I/zSkZMrysKZluhsqhggANmeNpQXhsUmNlnhjFMXBYJ1FNPZn3q/VscK8cc91E2UEmAS0QpEsaVpCtrax3T2dFSodIzln1iwl/KF8NULsqs9S2fYWCVymTSie2CxPTpa7okUMFcGqCNsCgi8oGmLsOcNwxtTEk0q2uPGATu6T9RksL3nqY9nOL92gFchkEB+FVVVa7Id+3xQZ97rOGkJ3u0UD0qzfzjhrMgaY2QCrEoFrJ9GytOAtYe1Gu6CAirHyOvNXKa0aUNfGOAeBoJooS9YSDZJ/pBZJK+xL2iiXr5RWa4+9rbPZnO1FEh/+jkP/zp9HXTp/wpEkdEopyzfuMISL5TuG7kZEuiDOgfuBc/qHR94gEzGLlAY3fBx868j7awrpltWCsbQCUB+hv8wAtPStbj0tfOHhFYEbko5AsiW5GWAndP/fX6qggptofQNt/mVtdeHC7CeomSuIyUgG1yBWMhyMzo1gZtvkbemFiov2YvjftZVHLiXBL8yelXamICyFPVNW7Q3vbDZz89+Zvi3ObXJgA8JwQtYrd4sI2lXnWTcJwMQBT5SHldjJBdeY8iUQQV28BMfbpWxsFdLDMlpm3ic9SrzpTov6+tC9ofUUJ3dwHAvElrnh9MM59sWehkqxb70QYTkez7StGAUaINo80P0B5omDgLHCkl1t6ITFbqXFejYsNTSNhrbXq8SiI8+506BCJYjuz1AngxPySOuEIAG6GUNITJSoCGsGVAYm91QFEEkQXpvkIxSgiAep9bUX2J//7bPoRwTDKqxy8NFQyY5CqEqTRXyw9QDx8kEQraYGd3gdoCHVtwJn6fHEnwhrnvtj5Kf9/5QG0lJGk6f/2Gn6namn8ttJVnpIF50ukHaPWC/SxhHOGFQQz2U9W1Djraviu2QT9eKBQgAMVA/6k4dkh7PR+7vQB8JIuSHJ9RIKc914lmzevFjSNrvAmK0MGA7EtJZhIAsTHUWggiyJKMzVli6vSZdvHB2/ooH8pvxat7F8AWw2hISbQcN9intl07rvuzTn3tkte3eZ+Qws0DTD1AihdiggiGGe8WfOS0OYLS8Pt/aCADwuO+DppPGuecnDLfFF2ax02ucnFh1sEbmpEhKi26YlE0M3bni6IoOiIB0g+/gWqyotCi2jRPOiqL9rxXL3zDjiOAOYOyNNkVeFsbpIlipsSRkvfRZUyfqfhIlqpKEB7xNRZWOLhwRA0EAANyhCS0ahAGu4q/MrwKp6UUXgs0pYgAY2h33qMurUnFqThxVzHBikPAmISdKP9tStT77684DgUgDcJaL6CvV6Vwxdg6VLsSATOI8B7t2rXrsmw2e1O4/A5SgmRnYHD/e124q8NDndboCDQ0AYS/j2IYdkYEYDwdGNxwdBYzhtcgJQmeNlxVWSk8z5stfvfHJ/Z2dXfDEYIiw1YhBS4YWomvVLt4uBCgECtr+O9DlAoi7OFQFM1YPrwaF4yqhSsiUZgdJamtowN3rXlwn/jS9Xec9trbW5FKuRrMZLcWmemzoTgPjKqmDsO0XRuqBJJTKRn2h0m6TrpbjnmySWuqBNPDY2rx6aFVCLShgBlgI1zHDTZueRtf++4tnyCc1XjfF6edeu73L57ruUq5gdZMJAAw0lJgY3seV2/dh9/5Bg1KIMdcBPPhl46T9dJ2CLJEWOcbzE5JXDm6FuMrU3a/iEAwxsB1HerI5byvLv6Fu+bljbeKj48cIn7x5ItY+fuHCUSQUoLZAID94ser0/hR/dFYmHFsxxkQJA637MQHrTMDCoCLSBSNr1e5+K/xR6M+FKWrRxQ2cByFIAhwx+rfY82GzThu2CAhtniF3cNHDMJV967he//wCKLiKGXTtCCy4gxNO7iqvg5X16bxeKCtMK4F2eHNk1RsO9YHGj+py+IrYeY5ypV2TDYtG42U48APAty+eg2ufmAtjR52NDZ5/k6pT5gyUgv5uSHZNN+77hnKIsAJE+qRTaftFyQRfGMoLYlOrk7TiQB+1l6gOkEWZD4zHXhTi6hsp+DAOvDB2qifdE3ldy4oFoWpAkStAF4wjBXDquicETV2LJ4xxeUNgEw6jb3tHfjpPffhmvsexphRg7FTs9A6+CmlZi+Y4Al+MS1ExVAp9Jatu8UXPjkJX587E8MHD0K+UADFygsiOER4qjWHK3a0R6JgjBTIGQbR4TOpKonQog3GC4GrR1YjcrOeNjA9BGJGOp3CW9t24Hu/WInVL7+GCcMH69DcKm30rmwQnCgK9yzZLBgrC8rBO76vJ4weSsueeQmX3HALNr6xxaqKUoeR4jhtUAXuGHsUjlUCjwUGFbEqfBhQpgJFyDY4EjfVH4XJoSiRDeHS3Uo7phde3YTP/XgxVm98ExNGDKLNvmeMUhDg2zubbn9XAIBW9B3y8juhHHdzwfMmDB9Ez+xuxenX3oT1z78Ax3Eg4p1/gNAdaDo2hPJ1IZQvyyiKxMmCIDmxUXWI0zVTjyiKmTIgPBZoXFXp0Pfr62hcRRGyXLQaUFJCSoEHn3gaZ/3w59jR1Y36QbW0uRAUlOO6oQabgpy5BgAIDYsU1i0K1Jwvn8mCHyYhIkJ7oxzlbi14jNZ2LLl0Ns5uON2K40XcEQKai+m809e4e1sbvr2vG6cpYeFQsOA+pKk54WQ9MJ4NOHSyGetk05JQMAwJQDNbyHp+gKaHHsXld6yCHH40hihFO8KxKsdxOdDdQuJ0/64lz0eaWMXR0BCKsy6Qs+d/BoJ+RUplAt/zhkjpMBjvvrMb3571T7j4nM+gKptFvuBBCIIB4AgCM/D7ne2Y924Ok2Iodx9ScUqiZGMn22IYK4dVYfqQSnD8QAAVQYxMKoU9bW246ZerceOaxzFqzDB0scEebXzlui77/h4h+LP+3bc+1RMoAgAiUaIT+p6lvxNkpnHgv6VCK7zbaL+LwfXjhtPVqx7E9267Gzvfa0U2k7K8EQCCOGd/NrTXvxlVg30MbDXGArB/5lCvOvXblpxFRSf7qjFIA4ic7Jmhk9WG94vCzDa7vrV9B65afDtufKgZE+pH0LvG8F7DgUqlXfh+xOnTrCiLiqIg8YsLFjhYssTHBQsGSfAqSqWm6UJeCxDGuY7cvLOVTx49FDfNvwjHTai3GYvLnkZICaJN7Xlcs62df+trNEiiHEo39Q+4XcoY6GGAZD3mCcVO9jFP0wUZh68YXYNxWZfyhpniZ2qklOw6Dl7Y+Becc/MydO1rx4RBR9Fmz9MCRMJNCS4UfqNzNBsPLOnqGXvi0iTEWbRIyE3blpKbupi9AjQjGO8q9UZ7J0Mp3D9/LqZOOtl6HWNMT0q33NnZ7eNn7+zDzV0+zlACeTA0AOqHFRiwLXayBDgg/DEw1sleOqoWdSmFfGzamNm6dyEEHnnqWcy9dQXgOhhXkaEtvu8rEg6UAnz/+mDF0ivKx9zvM3hWlBA+oTBGr1h6CbzCtyBlRHT1huf7o6sqCIJw7rU3475HHkNUHCfplL9RX4dratM2SwgAbmKFzv1MF+7TyRogFEXjxhCyXx1nnawVRcabaq7rINAad//2D5h7/W1ARQYjMmna4vmeko7DAEzBu8yKEvPVivK+/33S2CjR1GQAsLxg/kwAd5FS6cD3vcFSOoqAHW/vwndCKM8rhzKBDBG7giL+0IO7Onneu504kUBHC0JpavV6tgV00AeOeqZqBPTtmrGFGctCyDZEkDVMGmACoI2hTDrFe9va8fNfPYAbfvsYxowdhk4TQ9ZxXQ78PUSYHSxf+rAd38SJHAXAB/hbDhMazxehQNqZs3CSIX0fuamxgZf3KkDOIKXorXd28UVTJ+GqC2dhxJDB6M7n908rSQQlCE+35vDN7e142TCmSlGENgANhunncVIJgoo/90TAmOYIfHdENU45mJNNpSiELH/3jpX4zUt/wfiRg2lboE2BWatUykGh0BJIcy7uuu31OPPoRGgOJEyf3GmcN1gqdW8oToP2ilAe7zrytZ3v8ZQxw3HDJRfi+GPqbeSUl5QUeDvnYUWY0n/UWWw7UZDdhJbouQ1TRpdYuLY4DUflP6tTaBxWjeEZx/KkRxBBBNd18efQyV649C7sbm3DMYOPotfLIesVVmtVMxd3/jgXRoqLpibvQ/sjVzmg5Nz5t5Pjfok9z0K53lXqzfacNS6/XngRPnnKSXYZry2UBRiMlBAoGINX2/NYt7cb67p8NAemlGeSt6gxXQlMzzr4VBghx4bCKLsI5CLojbFOloTA2qefw5xb7gbSLsaGkH3rAMgGNwQrllyegOyHJowFVSnPiwsWXEVSXEvMEez80Y5y3omd8uKLG/HP06eRIIKvNUshLAMkEVwp2Df2zgNtzwe8Pe+j1dOUMwYiYokUqFOCRqYdHplxUOdKcqTgSJAY8FFf1skWPI/uefBRvnLZ/dbJDlWKtkdOVik3Eg7GfFmvvHVJuYk9VH/9S0KZsIykyvZAWQDYtXU3vjPzHzHv7BDKFVnrd4QQZU9JAIooXn/FrGHYIgn2fI9rDdi+7oehMcYuAlv3tWHxqhCyoZMdPWaoheze/U42aCXiORayoe0AAAvZQ/+fSCY0TJfRFXDmzj/FMO4vQrngVxDJIUrSm2/txOenTsY3Ph9BeVAIZbt9YQ9mLp8x9lxcbBuARHskCIisvd+ybTssZF/YhAmjh9DWCLKGTQhZBc97JQj0eWgKIbvI2o4SZA+lMP045aYIyqZQCIhA9a4jX9+9hyePGmqhPPGY8SgUCqQNsxCEoh7EHKdkMEClP4/aNsQb88xgpSQcpSxkZy+5C3v2deCYo2sOAtl8CNk7cwmefGTCJKFM4dS6NXbKJSi3RU5ZYsUXZmHalFOs1/B8H0Gge5YSsSbAfqGM2d8mhKCU63KuuxsPPfkMLrlzFeAojK3M7ocsKwfke3072Y9emCSU1Zz532ApfkiAhfJIRznbPJ+xey/+5cx/wKyG0/GxsaMtJwgME0O1lK8teyyTmBm57jw2vrkFyx9+HMvWP49MCNkaKWhnoIuQ1RoMWmhWLLklAdm/sTBJKM+9dAYMLSdHpSIo1wrhVAqBra37LHnnTTkRZ5x0XMiHkairqbbckFICRTEjk2jhGt3vevSFDVj+5xZASoypq8YerdFpOIasv5dYNAYrb3kkAdnDRJgklD//5ZON5lXkuuO1V/AkQQ2TUuS04b0hH9DZDVRlcdzQOhx7VA1VplMAE7d3d2Pj3jZ6bVcrI5cHqrMYXFMFR1AUJQaAFkUn+1JgaAbCrdkEZA8LYQZ2yhGUz2CvoJnBDkEOUpJSRNwaaLQVPMAPAG1gixSAG/kXB7VKotsw3tMaGggIkNQD2cC5EE0/70w42cNYmKRTvuDSpXBTlyIIQMb4AYMAlhkhqDK+8yAIHK+iyWNGJxvkLXxIKwKzlA5IgALvumDFrVcmIHtkCJOEspwzfz4I/wM3VUtBABit2caJFUmAIWLqGYCMAJgAGcGHpQKizXrGv4dO9p4EZI80YWIYivBgAIwvLBijAnMFQ8yBVENICIAZbDSgNUAECAESEhzVo/NBsI3AdwZK/QR33rw7AdkjVZi4UCiODI/ANly0cIgMgjMBOgPA8QBGAxgOkAHMDoDeBuMVENZpUo9i+eK9sRjK9vERlP8DbeQPaAcMhSIAAAAASUVORK5CYII=', crossOrigin: '', projection: 'EPSG:4326', imageExtent @@ -33,7 +34,7 @@ const ol2d = new olMap({ collapsible: false } }), - target: 'map', + target: 'mapCesium', view: new olView({ center: transform(getCenter(imageExtent), 'EPSG:4326', 'EPSG:3857'), zoom: 4, @@ -50,3 +51,8 @@ ol3d.setEnabled(true); document.getElementById('enable').addEventListener('click', () => ol3d.setEnabled(!ol3d.getEnabled())); + +//##REMOVE## Keep this tag, split code here for code sandbox + +import {initCodeSandbox} from './_code-sandbox.js'; +initCodeSandbox('./image-static.js'); \ No newline at end of file diff --git a/examples/imageWMS.html b/examples/imageWMS.html index 0e981b384..3c3065622 100644 --- a/examples/imageWMS.html +++ b/examples/imageWMS.html @@ -1,16 +1,28 @@ - - + - Image WMS example + Ol-Cesium | Image WMS example + + -
- +
+ +
+ +
+
+ +
+
+ +
- + + + diff --git a/examples/imageWMS.js b/examples/imageWMS.js index 818a6fdf7..89382cf70 100644 --- a/examples/imageWMS.js +++ b/examples/imageWMS.js @@ -14,6 +14,7 @@ const imageWMSSource = new olSourceImageWMS({ ratio: 1 }); +const Cesium = window.Cesium; Cesium.Ion.defaultAccessToken = OLCS_ION_TOKEN; const ol2d = new olMap({ layers: [ @@ -30,7 +31,7 @@ const ol2d = new olMap({ collapsible: false } }), - target: 'map', + target: 'mapCesium', view: new olView({ center: [-10967567.978507737, 4204193.972847062], zoom: 3 @@ -48,3 +49,8 @@ Cesium.createWorldTerrainAsync().then(tp => scene.terrainProvider = tp); ol3d.setEnabled(true); document.getElementById('enable').addEventListener('click', () => ol3d.setEnabled(!ol3d.getEnabled())); + +//##REMOVE## Keep this tag, split code here for code sandbox + +import {initCodeSandbox} from './_code-sandbox.js'; +initCodeSandbox('./imageWMS.js'); \ No newline at end of file diff --git a/examples/kml.html b/examples/kml.html index 4eebeb980..903dd25f7 100644 --- a/examples/kml.html +++ b/examples/kml.html @@ -1,15 +1,27 @@ - - + - olcesium kml example + Ol-Cesium | Kml example + -
- +
+ +
+ +
+
+ +
+
+ +
+ - + + + diff --git a/examples/kml.js b/examples/kml.js index 245f5bd19..39be6241b 100644 --- a/examples/kml.js +++ b/examples/kml.js @@ -7,6 +7,7 @@ import olLayerTile from 'ol/layer/Tile.js'; import olMap from 'ol/Map.js'; import {OLCS_ION_TOKEN} from './_common.js'; +const Cesium = window.Cesium; Cesium.Ion.defaultAccessToken = OLCS_ION_TOKEN; const ol2d = new olMap({ layers: [ @@ -19,7 +20,7 @@ const ol2d = new olMap({ collapsible: false } }), - target: 'map', + target: 'mapCesium', view: new olView({ center: transform([25, 20], 'EPSG:4326', 'EPSG:3857'), zoom: 3 @@ -30,12 +31,20 @@ const ol3d = new OLCesium({map: ol2d}); const scene = ol3d.getCesiumScene(); Cesium.createWorldTerrainAsync().then(tp => scene.terrainProvider = tp); -ol3d.getDataSources().add(Cesium.KmlDataSource.load( - 'https://api3.geo.admin.ch/ogcproxy?url=' + - 'https%3A%2F%2Fdav0.bgdi.admin.ch%2Fbazl_web%2FActive_Obstacles.kmz', { +ol3d.getDataSources().add( + Cesium.KmlDataSource.load( + "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 } -)); + ) +); document.getElementById('enable').addEventListener('click', () => ol3d.setEnabled(!ol3d.getEnabled())); + +//##REMOVE## Keep this tag, split code here for code sandbox + +import { initCodeSandbox } from './_code-sandbox.js'; +initCodeSandbox('./kml.js'); \ No newline at end of file diff --git a/examples/layer-group.html b/examples/layer-group.html index f5cda7e3a..042dd76dd 100644 --- a/examples/layer-group.html +++ b/examples/layer-group.html @@ -1,72 +1,84 @@ - - + - olcesium layergroup synchronization + Ol-Cesium | Layergroup synchronization + + -
-
-
-
Click on layer nodes below to change their properties.
-
    -
  • OSM layer -
    - - - -
    -
    • -
  • Layer group -
    - - - -
    -
      -
    • Food insecurity layer -
      - - - -
      -
      • -
    • World borders layer -
      - - - -
      -
      • -
    -
    • -
+
+ +
+ +
+ +
+
+
+
+
Click on layer nodes below to change their properties.
+
    +
  • OSM layer +
    + + + +
    +
    • +
  • Layer group +
    + + + +
    +
      +
    • Food insecurity layer +
      + + + +
      +
      • +
    • World borders layer +
      + + + +
      +
      • +
    +
    • +
+
+
+ + diff --git a/examples/layer-group.js b/examples/layer-group.js index 4e4b4206c..cf48f247e 100644 --- a/examples/layer-group.js +++ b/examples/layer-group.js @@ -44,8 +44,9 @@ const ol2d = new olMap({ }) }); +const Cesium = window.Cesium; Cesium.Ion.defaultAccessToken = OLCS_ION_TOKEN; -const ol3d = new OLCesium({map: ol2d, target: 'map3d'}); +const ol3d = new OLCesium({map: ol2d, target: 'mapCesium'}); ol3d.setEnabled(true); function getLayer(layername) { @@ -69,3 +70,8 @@ window['toggleLayer'] = function(element, name) { window['setLayerOpacity'] = function(element, name) { getLayer(name).setOpacity(parseFloat(element.value)); }; + +//##REMOVE## Keep this tag, split code here for code sandbox + +import {initCodeSandbox} from './_code-sandbox.js'; +initCodeSandbox('./layer-group.js'); diff --git a/examples/lazy.html b/examples/lazy.html index ee95fcbb7..905aa2c9c 100644 --- a/examples/lazy.html +++ b/examples/lazy.html @@ -1,18 +1,30 @@ - - + - olcesium lazy initialization + Ol-Cesium | Lazy initialization + + -
Delay downloading the Cesium script and initializing the 3D globe.
-
- +
+ +
+ +
+
+ +
+
Delay downloading the Cesium script and initializing the 3D globe.
+
+ +
+ + diff --git a/examples/lazy.js b/examples/lazy.js index a1a7f1dfc..b9772c494 100644 --- a/examples/lazy.js +++ b/examples/lazy.js @@ -18,7 +18,7 @@ const ol2d = new olMap({ collapsible: false } }), - target: 'map', + target: 'mapCesium', view: new olView({ center: transform([25, 20], 'EPSG:4326', 'EPSG:3857'), zoom: 3 @@ -30,3 +30,8 @@ window['manager'] = new ContribManager(window.CESIUM_URL, { cameraExtentInRadians: [0.0897, 0.7923, 0.2003, 0.8417], cesiumIonDefaultAccessToken: OLCS_ION_TOKEN }); + +//##REMOVE## Keep this tag, split code here for code sandbox + +import {initCodeSandbox} from './_code-sandbox.js'; +initCodeSandbox('./lazy.js'); diff --git a/examples/main.html b/examples/main.html index 1fd4d0037..befaade49 100644 --- a/examples/main.html +++ b/examples/main.html @@ -1,29 +1,41 @@ - - + - olcesium example + Ol-Cesium | Example + + -
- +
+ +
+ +
+
+ +
+
+ + + + +
- - + diff --git a/examples/main.js b/examples/main.js index 1cc12dfb2..2bea0c73c 100644 --- a/examples/main.js +++ b/examples/main.js @@ -7,6 +7,7 @@ import olLayerTile from 'ol/layer/Tile.js'; import olMap from 'ol/Map.js'; import {OLCS_ION_TOKEN} from './_common.js'; +const Cesium = window.Cesium; Cesium.Ion.defaultAccessToken = OLCS_ION_TOKEN; const ol2d = new olMap({ layers: [ @@ -19,7 +20,7 @@ const ol2d = new olMap({ collapsible: false } }), - target: 'map', + target: 'mapCesium', view: new olView({ center: transform([25, 20], 'EPSG:4326', 'EPSG:3857'), zoom: 3 @@ -49,9 +50,14 @@ timeElt.style.display = 'none'; document.getElementById('enable').addEventListener('click', () => ol3d.setEnabled(!ol3d.getEnabled())); window['toggleTime'] = function() { scene.globe.enableLighting = !scene.globe.enableLighting; - if (timeElt.style.display == 'none') { + if (timeElt.style.display === 'none') { timeElt.style.display = 'inline-block'; } else { timeElt.style.display = 'none'; } }; + +//##REMOVE## Keep this tag, split code here for code sandbox + +import {initCodeSandbox} from './_code-sandbox.js'; +initCodeSandbox('./main.js'); diff --git a/examples/mvt.html b/examples/mvt.html index 9bf9afa0c..8189482a9 100644 --- a/examples/mvt.html +++ b/examples/mvt.html @@ -1,17 +1,29 @@ - - + - olcesium MapBox rasterized Imagery Provider example + Ol-Cesium | MapBox rasterized Imagery Provider example + + -
- - +
+ +
+ +
+
+ +
+
+ + +
+ + diff --git a/examples/mvt.js b/examples/mvt.js index 0aba73c13..237561025 100644 --- a/examples/mvt.js +++ b/examples/mvt.js @@ -12,6 +12,7 @@ import Style from 'ol/style/Style.js'; import OSMSource from 'ol/source/OSM.js'; import {OLCS_ION_TOKEN} from './_common.js'; +const Cesium = window.Cesium; Cesium.Ion.defaultAccessToken = OLCS_ION_TOKEN; const projection = getProjection('EPSG:3857'); @@ -75,7 +76,7 @@ const ol2d = new olMap({ createOSMLayer(), mvtLayer ], - target: 'map', + target: 'mapCesium', view: new View() }); @@ -99,3 +100,8 @@ document.getElementById('toggle').addEventListener('click', () => { styleNumber = (styleNumber + 1) % 2; mvtLayer.setStyle(allStyles[styleNumber]); }); + +//##REMOVE## Keep this tag, split code here for code sandbox + +import {initCodeSandbox} from './_code-sandbox.js'; +initCodeSandbox('./mvt.js'); From 935dcfba53ec0b493f4b68088b68df11086d550c Mon Sep 17 00:00:00 2001 From: AlitaBernachot Date: Wed, 6 Dec 2023 10:47:31 +0100 Subject: [PATCH 03/35] fix: update dep version and build with vite --- examples/_code-sandbox.js | 30 ++++++++++++++++-------------- 1 file changed, 16 insertions(+), 14 deletions(-) diff --git a/examples/_code-sandbox.js b/examples/_code-sandbox.js index abd83747c..0f2e59b8a 100644 --- a/examples/_code-sandbox.js +++ b/examples/_code-sandbox.js @@ -11,7 +11,9 @@ export async function initCodeSandbox(indexJsPath, ...filesPathes) { const response = await fetch(indexJsPath); const txtData = await response.text(); let indexJsContent = txtData.split('//##REMOVE##')[0]; - + + indexJsContent = indexJsContent.replace('olcs/core.ts', 'olcs/core.js'); + indexJsContent = indexJsContent.replace('import OLCesium from \'olcs/OLCesium.ts\';', 'import OLCesium from \'olcs/OLCesium.js\';'); indexJsContent = indexJsContent.replace('import {OLCS_ION_TOKEN} from \'./_common.js\';', ''); indexJsContent = indexJsContent.replace('OLCS_ION_TOKEN', `'${OLCS_ION_TOKEN}'`); @@ -50,31 +52,31 @@ function initCodeSandboxButton(options) { Ol-Cesium example - + ${indexHtmlContent} - + `; const parameters = { - template: 'parcel', files: { 'package.json': { content: { - 'main': 'index.html', + 'source': 'index.html', 'scripts': { - 'start': 'parcel index.html --open', - 'build': 'parcel build index.html' + "start": "vite", + "build": "vite build" }, - 'devDependencies': { - '@babel/core': '7.2.0', - 'parcel-bundler': '^1.6.1', + "devDependencies": { + "vite": "^3.2.3", + "typescript": "latest" }, - 'dependencies': { - 'ol': 'latest', - 'olcs': '^2.13.1', - 'proj4': '2.9.0', + "dependencies": { + "olcs": "^2.15.2", + "proj4": "2.9.0", + "cesium": "1.110", + "ol": "8.1.0" } }, }, From 7a8561f58cb2d99c38fc92a1ba531642820bb10f Mon Sep 17 00:00:00 2001 From: AlitaBernachot Date: Wed, 6 Dec 2023 12:06:13 +0100 Subject: [PATCH 04/35] feat(code-sandbox): enable tracking example in cs --- examples/_code-sandbox.js | 4 ++++ examples/tracking.html | 28 +++++++++++++++++++--------- examples/tracking.js | 16 +++++++++------- 3 files changed, 32 insertions(+), 16 deletions(-) diff --git a/examples/_code-sandbox.js b/examples/_code-sandbox.js index 0f2e59b8a..202c3b243 100644 --- a/examples/_code-sandbox.js +++ b/examples/_code-sandbox.js @@ -80,6 +80,10 @@ function initCodeSandboxButton(options) { } }, }, + 'data/icon.png': { + "isBinary": true, + content: "https://openlayers.org/ol-cesium/examples/data/icon.png" + }, 'index.js': { content: indexJsContent, }, diff --git a/examples/tracking.html b/examples/tracking.html index b845bee9d..5259ca1b8 100644 --- a/examples/tracking.html +++ b/examples/tracking.html @@ -1,19 +1,29 @@ - - + - olcesium tracking example + Ol-Cesium | Tracking example + -
- -
-
An OpenLayers point moves randomly. It is tracked in 3D. - - +
+ +
+ +
+
+ +
+
+
+
An OpenLayers point moves randomly. It is tracked in 3D. +
+ + + + diff --git a/examples/tracking.js b/examples/tracking.js index a828eea04..6711d5e4a 100644 --- a/examples/tracking.js +++ b/examples/tracking.js @@ -12,6 +12,8 @@ import olGeomPoint from 'ol/geom/Point.js'; import olMap from 'ol/Map.js'; import {OLCS_ION_TOKEN} from './_common.js'; +const Cesium = window.Cesium; +Cesium.Ion.defaultAccessToken = OLCS_ION_TOKEN; const point = new olGeomPoint([700000, 200000, 100000]); @@ -19,7 +21,6 @@ const iconFeature = new olFeature({ geometry: point }); - const iconStyle = new olStyleStyle({ image: new olStyleIcon(/** @type {olx.style.IconOptions} */ ({ anchor: [0.5, 46], @@ -32,7 +33,6 @@ const iconStyle = new olStyleStyle({ iconFeature.setStyle(iconStyle); - const vectorSource2 = new olSourceVector({ features: [iconFeature] }); @@ -41,7 +41,6 @@ const vectorLayer2 = new olLayerVector({ source: vectorSource2 }); - const map = new olMap({ layers: [ new olLayerTile({ @@ -49,7 +48,7 @@ const map = new olMap({ }), vectorLayer2 ], - target: 'map2d', + target: 'mapCesium', controls: olControlDefaults({ attributionOptions: { collapsible: false @@ -61,9 +60,7 @@ const map = new olMap({ }) }); - -Cesium.Ion.defaultAccessToken = OLCS_ION_TOKEN; -const ol3d = new OLCesium({map/*, target: 'map3d'*/}); +const ol3d = new OLCesium({map}); const scene = ol3d.getCesiumScene(); Cesium.createWorldTerrainAsync().then(tp => scene.terrainProvider = tp); ol3d.setEnabled(true); @@ -83,3 +80,8 @@ setInterval(() => { ]); iconFeature.changed(); }, 100); + +//##REMOVE## Keep this tag, split code here for code sandbox + +import {initCodeSandbox} from './_code-sandbox.js'; +initCodeSandbox('./tracking.js'); From 395ba27b5237922d6b25f6e6239e25156bad3b00 Mon Sep 17 00:00:00 2001 From: AlitaBernachot Date: Wed, 6 Dec 2023 14:45:31 +0100 Subject: [PATCH 05/35] feat(code-sandbox): enable selection example in cs --- examples/_code-sandbox.js | 4 ++++ examples/selection.html | 31 +++++++++++++++++++++---------- examples/selection.js | 7 ++++++- 3 files changed, 31 insertions(+), 11 deletions(-) diff --git a/examples/_code-sandbox.js b/examples/_code-sandbox.js index 202c3b243..2d4643a14 100644 --- a/examples/_code-sandbox.js +++ b/examples/_code-sandbox.js @@ -80,6 +80,10 @@ function initCodeSandboxButton(options) { } }, }, + 'data/geojson/countries.geojson': { + "isBinary": true, + content: "https://openlayers.org/ol-cesium/examples/data/geojson/countries.geojson" + }, 'data/icon.png': { "isBinary": true, content: "https://openlayers.org/ol-cesium/examples/data/icon.png" diff --git a/examples/selection.html b/examples/selection.html index ed4682ae4..bfdd2cdf0 100644 --- a/examples/selection.html +++ b/examples/selection.html @@ -1,19 +1,30 @@ - - + - olcesium selection example + Ol-Cesium | Selection example + -
-
-
A country may be highlighted by clicking it on the OpenLayers map. -
It gets automatically selected in Cesium. -
If you see flickering in Cesium, please check your graphic card drivers.
- - +
+ +
+ +
+
+ +
+
+
+
A country may be highlighted by clicking it on the OpenLayers map. +
It gets automatically selected in Cesium. +
If you see flickering in Cesium, please check your graphic card drivers.
+
+ + + + diff --git a/examples/selection.js b/examples/selection.js index f9c090757..ad3f064bb 100644 --- a/examples/selection.js +++ b/examples/selection.js @@ -32,7 +32,7 @@ const map = new olMap({ }); -const ol3d = new OLCesium({map, target: 'map3d'}); +const ol3d = new OLCesium({map, target: 'mapCesium'}); ol3d.setEnabled(true); @@ -59,3 +59,8 @@ map.on('click', (e) => { selectedFeature.setStyle(selectionStyle); } }); + +//##REMOVE## Keep this tag, split code here for code sandbox + +import {initCodeSandbox} from './_code-sandbox.js'; +initCodeSandbox('./selection.js'); \ No newline at end of file From a588286e56a26941749e7505a16a79df5884faf0 Mon Sep 17 00:00:00 2001 From: AlitaBernachot Date: Thu, 7 Dec 2023 09:09:33 +0100 Subject: [PATCH 06/35] feat(code-sandbox): replace .ts by .js --- examples/_code-sandbox.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/examples/_code-sandbox.js b/examples/_code-sandbox.js index 2d4643a14..f9337d824 100644 --- a/examples/_code-sandbox.js +++ b/examples/_code-sandbox.js @@ -12,8 +12,7 @@ export async function initCodeSandbox(indexJsPath, ...filesPathes) { const txtData = await response.text(); let indexJsContent = txtData.split('//##REMOVE##')[0]; - indexJsContent = indexJsContent.replace('olcs/core.ts', 'olcs/core.js'); - indexJsContent = indexJsContent.replace('import OLCesium from \'olcs/OLCesium.ts\';', 'import OLCesium from \'olcs/OLCesium.js\';'); + indexJsContent = indexJsContent.replaceAll(/(olcs\/.*?).ts('?;?)/ig, '$1.js$2'); indexJsContent = indexJsContent.replace('import {OLCS_ION_TOKEN} from \'./_common.js\';', ''); indexJsContent = indexJsContent.replace('OLCS_ION_TOKEN', `'${OLCS_ION_TOKEN}'`); From 41ba736004c07d7192c4fa68fbba22e60387a08d Mon Sep 17 00:00:00 2001 From: AlitaBernachot Date: Thu, 7 Dec 2023 09:10:09 +0100 Subject: [PATCH 07/35] feat(code-sandbox): enable print example in cs --- examples/print.html | 44 +++++++++++++++++++++++++++----------------- examples/print.js | 10 ++++++++-- 2 files changed, 35 insertions(+), 19 deletions(-) diff --git a/examples/print.html b/examples/print.html index db1acf6a0..14ae27d02 100644 --- a/examples/print.html +++ b/examples/print.html @@ -1,29 +1,39 @@ - - + - olcesium print example + Ol-Cesium | Print example -
- +
+ +
+ +
+
+ +
+
+ + + + + +
+
- - - -
+ diff --git a/examples/print.js b/examples/print.js index 870fd0a27..cbb87321a 100644 --- a/examples/print.js +++ b/examples/print.js @@ -8,6 +8,7 @@ import olMap from 'ol/Map.js'; import {OLCS_ION_TOKEN} from './_common.js'; +const Cesium = window.Cesium; Cesium.Ion.defaultAccessToken = OLCS_ION_TOKEN; const ol2d = new olMap({ layers: [ @@ -20,7 +21,7 @@ const ol2d = new olMap({ collapsible: false } }), - target: 'map', + target: 'mapCesium', view: new olView({ center: transform([25, 20], 'EPSG:4326', 'EPSG:3857'), zoom: 3 @@ -63,5 +64,10 @@ window['takeScreenshot'] = async function() { img.src = value; img.width = r.width / (canvas.width / canvas.clientWidth); img.height = r.height / (canvas.height / canvas.clientHeight); - document.body.append(img); + document.querySelector("#screenshots").append(img); }; + +//##REMOVE## Keep this tag, split code here for code sandbox + +import {initCodeSandbox} from './_code-sandbox.js'; +initCodeSandbox('./print.js'); \ No newline at end of file From b1c564876df88ede24eb2008efb1b9784061eddd Mon Sep 17 00:00:00 2001 From: AlitaBernachot Date: Thu, 7 Dec 2023 13:56:49 +0100 Subject: [PATCH 08/35] feat(code-sandbox): enable buildings example in cs --- examples/_code-sandbox.js | 4 ++++ examples/buildings.html | 34 ++++++++++++++++++++++++---------- examples/buildings.js | 7 ++++++- 3 files changed, 34 insertions(+), 11 deletions(-) diff --git a/examples/_code-sandbox.js b/examples/_code-sandbox.js index f9337d824..d9bdd9e3a 100644 --- a/examples/_code-sandbox.js +++ b/examples/_code-sandbox.js @@ -83,6 +83,10 @@ function initCodeSandboxButton(options) { "isBinary": true, content: "https://openlayers.org/ol-cesium/examples/data/geojson/countries.geojson" }, + 'data/geojson/buildings.geojson': { + "isBinary": true, + content: "https://openlayers.org/ol-cesium/examples/data/geojson/buildings.geojson" + }, 'data/icon.png': { "isBinary": true, content: "https://openlayers.org/ol-cesium/examples/data/icon.png" diff --git a/examples/buildings.html b/examples/buildings.html index d53c44d77..4d376a675 100644 --- a/examples/buildings.html +++ b/examples/buildings.html @@ -1,18 +1,32 @@ - - + - olcesium buildings example + Ol-Cesium | Buildings example + -
-
-
A building may be highlighted by clicking it on the OpenLayers map. -
It gets automatically selected in Cesium. -
If you see flickering in Cesium, please check your graphic card drivers.
- - +
+ +
+ +
+
+ +
+
+
+
+ A building may be highlighted by clicking it on the OpenLayers map. +
It gets automatically selected in Cesium. +
If you see flickering in Cesium, please check your graphic card drivers. +
+
+ + + + + diff --git a/examples/buildings.js b/examples/buildings.js index e0d373eb9..0a2ffb1b1 100644 --- a/examples/buildings.js +++ b/examples/buildings.js @@ -47,7 +47,7 @@ const map = new olMap({ vector.set('olcs_shadows', true); -const ol3d = new OLCesium({map, target: 'map3d'}); +const ol3d = new OLCesium({map, target: 'mapCesium'}); ol3d.setEnabled(true); // Be aware that enabling the following properties can impact performance @@ -89,3 +89,8 @@ map.on('click', (e) => { selectedFeature.setStyle(selectionStyle); } }); + +//##REMOVE## Keep this tag, split code here for code sandbox + +import {initCodeSandbox} from './_code-sandbox.js'; +initCodeSandbox('./buildings.js'); \ No newline at end of file From 90a63ca7ad682f07834777247fd63c601e904c17 Mon Sep 17 00:00:00 2001 From: AlitaBernachot Date: Tue, 9 Jan 2024 16:32:29 +0100 Subject: [PATCH 09/35] fix: force dep version olcs and cesium for examples --- examples/_code-sandbox.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/_code-sandbox.js b/examples/_code-sandbox.js index d9bdd9e3a..58dd404e5 100644 --- a/examples/_code-sandbox.js +++ b/examples/_code-sandbox.js @@ -72,9 +72,9 @@ function initCodeSandboxButton(options) { "typescript": "latest" }, "dependencies": { - "olcs": "^2.15.2", + "olcs": "2.15.2", "proj4": "2.9.0", - "cesium": "1.110", + "cesium": "1.108", "ol": "8.1.0" } }, From 6594928f44f90604e0125376222e3bf3dbacffd6 Mon Sep 17 00:00:00 2001 From: AlitaBernachot Date: Tue, 9 Jan 2024 16:36:04 +0100 Subject: [PATCH 10/35] fix(code-sandbox): make mvt example work again --- examples/mvt.js | 13 ++----------- 1 file changed, 2 insertions(+), 11 deletions(-) diff --git a/examples/mvt.js b/examples/mvt.js index 237561025..9a84ba354 100644 --- a/examples/mvt.js +++ b/examples/mvt.js @@ -1,6 +1,5 @@ import OLCesium from 'olcs'; import olMap from 'ol/Map.js'; -import './_proj21781.js'; import TileLayer from 'ol/layer/Tile.js'; import {get as getProjection} from 'ol/proj.js'; import View from 'ol/View.js'; @@ -10,6 +9,7 @@ import VectorTileSource from 'ol/source/VectorTile.js'; import Stroke from 'ol/style/Stroke.js'; import Style from 'ol/style/Style.js'; import OSMSource from 'ol/source/OSM.js'; +import './_proj21781.js'; import {OLCS_ION_TOKEN} from './_common.js'; const Cesium = window.Cesium; @@ -43,14 +43,6 @@ function createMVTLayer(url, maxZoom) { format: new MVT(), }); const styles = allStyles[styleNumber]; - // const swissExtentDegrees = [5.2, 45.45, 11, 48]; - // source.set('olcs_provider', new MVTImageryProvider({ - // credit: new Cesium.Credit('Schweizmobil', false), - // urls: [url], - // styleFunction: () => styles, - // rectangle: new Cesium.Rectangle(...swissExtentDegrees.map(Cesium.Math.toRadians)), - // minimumLevel: 6, - // })); source.set('olcs_skip', false); source.set('olcs_minimumLevel', 6); return new VectorTileLayer({ @@ -67,7 +59,6 @@ export const mvtLayer = createMVTLayer( function createOSMLayer() { const source = new OSMSource(); - //source.set('olcs_provider', new Cesium.OpenStreetMapImageryProvider()); return new TileLayer({source}); } @@ -104,4 +95,4 @@ document.getElementById('toggle').addEventListener('click', () => { //##REMOVE## Keep this tag, split code here for code sandbox import {initCodeSandbox} from './_code-sandbox.js'; -initCodeSandbox('./mvt.js'); +initCodeSandbox('./mvt.js', './_proj21781.js'); From 21f1b7a3a19d7e86a116c315fcb56f36ba49592f Mon Sep 17 00:00:00 2001 From: AlitaBernachot Date: Tue, 9 Jan 2024 19:00:29 +0100 Subject: [PATCH 11/35] feat(code-sandbox): enable overlay example in cs --- examples/overlay.html | 61 +++++++++++++++++++++++++------------------ examples/overlay.js | 10 +++++-- 2 files changed, 43 insertions(+), 28 deletions(-) diff --git a/examples/overlay.html b/examples/overlay.html index 88d3d229b..59e734661 100644 --- a/examples/overlay.html +++ b/examples/overlay.html @@ -1,12 +1,12 @@ - - + - Overlay example + Ol-Cesium | Overlay example - + + - + diff --git a/examples/wmts.js b/examples/wmts.js index 1efe16d06..c54be37df 100644 --- a/examples/wmts.js +++ b/examples/wmts.js @@ -8,9 +8,7 @@ import {get as getProjection} from 'ol/proj.js'; import OSM from 'ol/source/OSM.js'; import WMTS from 'ol/source/WMTS.js'; import WMTSTileGrid from 'ol/tilegrid/WMTS.js'; -import {OLCS_ION_TOKEN} from './_common.js'; -Cesium.Ion.defaultAccessToken = OLCS_ION_TOKEN; const projection = getProjection('EPSG:3857'); const projectionExtent = projection.getExtent(); const size = getWidth(projectionExtent) / 256; @@ -68,4 +66,4 @@ document.getElementById('enable').addEventListener('click', () => ol3d.setEnable //##REMOVE## Keep this tag, split code here for code sandbox import {initCodeSandbox} from './_code-sandbox.js'; -initCodeSandbox('./wmts.js'); +initCodeSandbox('rawjs/wmts.js'); diff --git a/package.json b/package.json index b17a1cc2d..90a23308a 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,9 @@ "./ts/*": "./lib/olcs/*.ts", "./*": "./lib/olcs/*.js" }, + "parcelIgnore": [ + "dist/examples/rawjs/*" + ], "types": "lib/types/olcs.d.ts", "directories": { "doc": "apidoc/" From c9af8c5a7a0aac90045cb3f98060487da1b96bb9 Mon Sep 17 00:00:00 2001 From: AlitaBernachot Date: Thu, 4 Jul 2024 14:40:32 +0200 Subject: [PATCH 17/35] fix: add cmd for codesandbox in package.json --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 90a23308a..fb7d46a55 100644 --- a/package.json +++ b/package.json @@ -6,12 +6,13 @@ "test": "node --enable-source-maps --import @swc-node/register/esm-register --test src/olcs/*.test.ts", "build-examples": "rm -rf dist; parcel build --dist-dir dist/examples && npm run copy-static-dist", "build-examples-sandbox": "rm -rf dist; parcel build; mkdir -p dist/examples/node_modules/ol; mkdir -p dist/examples/node_modules/cesium/Build/; mkdir -p dist/examples/rawjs/; cp -r examples/* dist/examples/rawjs; cp examples/inject_ol_cesium.js dist/examples/; cp node_modules/ol/ol.css dist/examples/node_modules/ol/; cp -R node_modules/cesium/Build/CesiumUnminified node_modules/cesium/Build/Cesium dist/examples/node_modules/cesium/Build/; cp -R examples/data dist/examples/", - "prepare": "tsc --pretty; npm run doc", + "prepare": "tsc --pretty; npm run doc", "typecheck": "tsc --pretty --noEmit", "lint": "eslint src examples", "checks": "npm run lint && npm run typecheck", "doc": "typedoc --name ol-cesium --excludeExternals --out apidoc --entryPoints src/olcs.ts --tsconfig ./tsconfig.json", "copy-static-dist": "mkdir -p dist/examples/node_modules/ol; mkdir -p dist/examples/node_modules/cesium/Build/; cp examples/inject_ol_cesium.js dist/examples/; cp node_modules/ol/ol.css dist/examples/node_modules/ol/; cp -R node_modules/cesium/Build/CesiumUnminified node_modules/cesium/Build/Cesium dist/examples/node_modules/cesium/Build/; cp -R examples/data dist/examples/", + "copy-rawjs-sandbox": "mkdir -p dist/examples/rawjs/; cp -r examples/* dist/examples/rawjs; ", "prestart": "rm -rf dist; npm run copy-static-dist", "start": "parcel serve ./examples/index.html --dist-dir dist/examples --no-autoinstall & tsc --watch", "serve-built-examples": "python3 -m http.server --directory dist 12345" From 50f874f4b266ffc6e4d79814b09534f5ae3453e6 Mon Sep 17 00:00:00 2001 From: AlitaBernachot Date: Thu, 4 Jul 2024 16:49:12 +0200 Subject: [PATCH 18/35] fix: overlay example css --- examples/_code-sandbox.js | 67 ++++++++++++++++++++++++++++++++++++--- examples/overlay.html | 9 ++++++ 2 files changed, 71 insertions(+), 5 deletions(-) diff --git a/examples/_code-sandbox.js b/examples/_code-sandbox.js index 68843fd0c..01d54fc85 100644 --- a/examples/_code-sandbox.js +++ b/examples/_code-sandbox.js @@ -48,15 +48,72 @@ function initCodeSandboxButton(options) { - Ol-Cesium example in sandbox - - - + Ol-Cesium example in sandbox + + + + + ${indexHtmlContent} - + + + `; const parameters = { template: 'parcel', diff --git a/examples/overlay.html b/examples/overlay.html index 59e734661..ae27d6e6b 100644 --- a/examples/overlay.html +++ b/examples/overlay.html @@ -53,6 +53,15 @@ .popover-content { min-width: 180px; } + + /* for Codesandbox */ + code { + padding: 2px 4px; + font-size: 90%; + color: #c7254e; + background-color: #f9f2f4; + border-radius: 4px; + } From 0a9ab74cd8a2d16ef3705199f6716523c0ed39ab Mon Sep 17 00:00:00 2001 From: AlitaBernachot Date: Thu, 4 Jul 2024 18:00:39 +0200 Subject: [PATCH 19/35] fix: add cors anonymous for tracking --- examples/tracking.html | 2 +- examples/tracking.js | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/examples/tracking.html b/examples/tracking.html index 5259ca1b8..7e0299104 100644 --- a/examples/tracking.html +++ b/examples/tracking.html @@ -19,7 +19,7 @@
-
An OpenLayers point moves randomly. It is tracked in 3D. +
An OpenLayers point moves randomly. It is tracked in 3D.
diff --git a/examples/tracking.js b/examples/tracking.js index 313a2ed16..81e8dd9e1 100644 --- a/examples/tracking.js +++ b/examples/tracking.js @@ -12,6 +12,7 @@ import olGeomPoint from 'ol/geom/Point.js'; import olMap from 'ol/Map.js'; const Cesium = window.Cesium; +//##OLCS_ION_TOKEN## const point = new olGeomPoint([700000, 200000, 100000]); @@ -25,7 +26,8 @@ const iconStyle = new olStyleStyle({ anchorXUnits: 'fraction', anchorYUnits: 'pixels', opacity: 0.75, - src: 'data/icon.png' + src: 'data/icon.png', + crossOrigin: 'anonymous' })) }); From 74f8ee69b648d24231c1cdeeae8d838565dcac20 Mon Sep 17 00:00:00 2001 From: AlitaBernachot Date: Thu, 4 Jul 2024 18:01:03 +0200 Subject: [PATCH 20/35] fix: rastersync and sidebyside --- examples/rastersync.js | 2 +- examples/sidebyside.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/rastersync.js b/examples/rastersync.js index 70968b8bc..e8db01063 100644 --- a/examples/rastersync.js +++ b/examples/rastersync.js @@ -33,7 +33,7 @@ const ol2d = new olMap({ view, }); -const ol3d = new OLCesium({map: ol2d, target: 'map3d'}); +const ol3d = new OLCesium({map: ol2d, target: 'mapCesium'}); const scene = ol3d.getCesiumScene(); Cesium.createWorldTerrainAsync().then(tp => scene.terrainProvider = tp); diff --git a/examples/sidebyside.js b/examples/sidebyside.js index 10fcf6654..a314b8577 100644 --- a/examples/sidebyside.js +++ b/examples/sidebyside.js @@ -24,7 +24,7 @@ const ol2d = new olMap({ view }); -const ol3d = new OLCesium({map: ol2d, target: 'map3d'}); +const ol3d = new OLCesium({map: ol2d, target: 'mapCesium'}); const scene = ol3d.getCesiumScene(); Cesium.createWorldTerrainAsync().then(tp => scene.terrainProvider = tp); ol3d.setEnabled(true); From 2527f1d241b663f75af419f085bd1310246adac8 Mon Sep 17 00:00:00 2001 From: AlitaBernachot Date: Thu, 4 Jul 2024 18:13:42 +0200 Subject: [PATCH 21/35] fix: vectors --- examples/vectors.html | 1 - examples/vectors.js | 11 +++++++---- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/examples/vectors.html b/examples/vectors.html index dc6c929bf..3fea07b99 100644 --- a/examples/vectors.html +++ b/examples/vectors.html @@ -36,7 +36,6 @@
Vectors are synchronized from the OpenLayers map to the Cesium scene.
3D positioning and some styling is supported.
The render loop is automatically stopped when idle.
-
diff --git a/examples/vectors.js b/examples/vectors.js index 86ee19413..4fa7c2f27 100644 --- a/examples/vectors.js +++ b/examples/vectors.js @@ -55,7 +55,8 @@ const iconStyle = new olStyleStyle({ anchorXUnits: 'fraction', anchorYUnits: 'pixels', opacity: 0.75, - src: 'data/icon.png' + src: 'data/icon.png', + crossOrigin: 'anonymous' })), text: new olStyleText({ text: 'Some text', @@ -109,7 +110,8 @@ modelFeatures.forEach((feature) => { anchorXUnits: 'fraction', anchorYUnits: 'pixels', opacity: 0.75, - src: 'data/icon.png' + src: 'data/icon.png', + crossOrigin: 'anonymous' })) }); const olcsModelFunction = () => { @@ -228,7 +230,8 @@ const styleFunction = function(feature, resolution) { const vectorSource = new olSourceVector({ format: new olFormatGeoJSON(), - url: 'data/geojson/vector_data.geojson' + url: 'data/geojson/vector_data.geojson', + crossOrigin: 'anonymous' }); const theCircle = new olFeature(new olGeomCircle([5e6, 7e6, 5e5], 1e6)); @@ -329,7 +332,7 @@ dragAndDropInteraction.on('addfeatures', (event) => { const Cesium = window.Cesium; //##OLCS_ION_TOKEN## -const ol3d = new OLCesium({map, target: 'map3d'}); +const ol3d = new OLCesium({map, target: 'mapCesium'}); const scene = ol3d.getCesiumScene(); Cesium.createWorldTerrainAsync().then(tp => scene.terrainProvider = tp); ol3d.setEnabled(true); From 0c725689209b518bc7eb2449a4c24c48cfe278c3 Mon Sep 17 00:00:00 2001 From: AlitaBernachot Date: Sun, 8 Sep 2024 17:45:25 +0200 Subject: [PATCH 22/35] fix: remove ion token and fix some examples --- examples/_code-sandbox.js | 18 +++++++++++++----- examples/_common.js | 1 - examples/customProj.js | 3 +-- examples/exports.js | 3 +-- examples/fillstyle.js | 1 - examples/groundvectors.js | 1 - examples/icon-position.js | 1 - examples/image-static.js | 1 - examples/imageWMS.js | 1 - examples/kml.js | 1 - examples/main.js | 1 - examples/overlay.js | 1 - examples/print.html | 2 +- examples/print.js | 5 ----- examples/rastersync.js | 3 +-- examples/rotate.js | 6 ++---- examples/selection.js | 5 ++--- examples/sidebyside.js | 5 ++--- examples/synthvectors.js | 1 - examples/tracking.js | 4 +--- examples/vectors.js | 2 -- examples/wmts.js | 3 +-- 22 files changed, 25 insertions(+), 44 deletions(-) diff --git a/examples/_code-sandbox.js b/examples/_code-sandbox.js index 01d54fc85..6d46023f5 100644 --- a/examples/_code-sandbox.js +++ b/examples/_code-sandbox.js @@ -1,5 +1,3 @@ -import {OLCS_ION_TOKEN} from './_common.js'; - function compress(json) { return window.LZString.compressToBase64(JSON.stringify(json)) .replace(/\+/g, '-') @@ -13,8 +11,6 @@ export async function initCodeSandbox(indexJsPath, ...filesPathes) { let indexJsContent = txtData.split('//##REMOVE##')[0]; indexJsContent = indexJsContent.replaceAll(/(olcs\/.*?).ts('?;?)/ig, '$1.js$2'); - indexJsContent = indexJsContent.replace('import {OLCS_ION_TOKEN} from \'./_common.js\';', ''); - indexJsContent = indexJsContent.replace('//##OLCS_ION_TOKEN##', `Cesium.Ion.defaultAccessToken = '${OLCS_ION_TOKEN}'`); const additionalJsFiles = {}; @@ -23,6 +19,8 @@ export async function initCodeSandbox(indexJsPath, ...filesPathes) { const txtDataFile = await responseFile.text(); additionalJsFiles[filePath.replace('./', '').replace('rawjs', '')] = {content: txtDataFile}; + + console.log("additionalJsFiles", additionalJsFiles) } initCodeSandboxButton({indexJsContent, additionalJsFiles}); @@ -123,9 +121,11 @@ function initCodeSandboxButton(options) { 'source': 'index.html', 'main': 'index.html', 'scripts': { - "start": "vite", + "build": "vite build", + "start": "npm run build && serve dist", }, "devDependencies": { + "serve": "14.2.3", "vite": "^3.2.3", "@babel/core": "^7.24.4", "@babel/plugin-proposal-class-properties": "^7.18.6" @@ -149,10 +149,18 @@ function initCodeSandboxButton(options) { "isBinary": true, content: "https://openlayers.org/ol-cesium/examples/data/geojson/buildings.geojson" }, + 'data/geojson/vector_data.geojson': { + "isBinary": true, + content: "https://openlayers.org/ol-cesium/examples/data/geojson/vector_data.geojson" + }, 'data/icon.png': { "isBinary": true, content: "https://openlayers.org/ol-cesium/examples/data/icon.png" }, + 'data/Box.gltf': { + "isBinary": true, + content: "https://openlayers.org/ol-cesium/examples/data/Box.gltf" + }, 'index.js': { content: indexJsContent, }, diff --git a/examples/_common.js b/examples/_common.js index 0dd93dff2..e69de29bb 100644 --- a/examples/_common.js +++ b/examples/_common.js @@ -1 +0,0 @@ -export const OLCS_ION_TOKEN = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZWVhYmU0Mi1jNTZkLTQ3OGItYmUxYS00YTMyMDQyZTMwNDkiLCJpZCI6NjQ1LCJpYXQiOjE2MDYxMjE2OTF9.zQibbf5P0-moQ8KiV_K7KMtyLHbR-VlPghj8lyqWduU'; diff --git a/examples/customProj.js b/examples/customProj.js index a98b0db99..12bb44439 100644 --- a/examples/customProj.js +++ b/examples/customProj.js @@ -42,8 +42,7 @@ const ol3d = new OLCesium({ return Cesium.JulianDate.now(); } }); -const scene = ol3d.getCesiumScene(); -Cesium.createWorldTerrainAsync().then(tp => scene.terrainProvider = tp); +ol3d.getCesiumScene(); ol3d.setEnabled(true); document.getElementById('enable').addEventListener('click', () => ol3d.setEnabled(!ol3d.getEnabled())); diff --git a/examples/exports.js b/examples/exports.js index 6b5ad991d..2e8644ec2 100644 --- a/examples/exports.js +++ b/examples/exports.js @@ -21,8 +21,7 @@ const ol2d = new olMap({ }); const ol3d = new OLCesium({map: ol2d}); -const scene = ol3d.getCesiumScene(); -Cesium.createWorldTerrainAsync().then(tp => scene.terrainProvider = tp); +ol3d.getCesiumScene(); ol3d.setEnabled(true); const camera = ol3d.getCamera(); diff --git a/examples/fillstyle.js b/examples/fillstyle.js index b7cea8bba..d9d780b72 100644 --- a/examples/fillstyle.js +++ b/examples/fillstyle.js @@ -74,7 +74,6 @@ const map = new olMap({ const Cesium = window.Cesium; const ol3d = new OLCesium({map, target: 'mapCesium'}); const scene = ol3d.getCesiumScene(); -Cesium.createWorldTerrainAsync().then(tp => scene.terrainProvider = tp); ol3d.setEnabled(true); window['ol3d'] = ol3d; diff --git a/examples/groundvectors.js b/examples/groundvectors.js index cd943cf1e..6020e0538 100644 --- a/examples/groundvectors.js +++ b/examples/groundvectors.js @@ -134,7 +134,6 @@ const Cesium = window.Cesium; vectorLayer.set('altitudeMode', 'clampToGround'); const ol3d = new OLCesium({map, target: 'map3d'}); const scene = ol3d.getCesiumScene(); -Cesium.createWorldTerrainAsync().then(tp => scene.terrainProvider = tp); ol3d.setEnabled(true); window['toggleClampToGround'] = function() { diff --git a/examples/icon-position.js b/examples/icon-position.js index f85791004..d85a8e0ec 100644 --- a/examples/icon-position.js +++ b/examples/icon-position.js @@ -89,7 +89,6 @@ const map = new olMap({ const Cesium = window.Cesium; const ol3d = new OLCesium({map, target: 'mapCesium'}); const scene = ol3d.getCesiumScene(); -Cesium.createWorldTerrainAsync().then(tp => scene.terrainProvider = tp); ol3d.setEnabled(true); window['toggleClampToGround'] = function() { diff --git a/examples/image-static.js b/examples/image-static.js index 0cfab1134..2cd6de8e4 100644 --- a/examples/image-static.js +++ b/examples/image-static.js @@ -44,7 +44,6 @@ const ol3d = new OLCesium({ map: ol2d }); const scene = ol3d.getCesiumScene(); -Cesium.createWorldTerrainAsync().then(tp => scene.terrainProvider = tp); ol3d.setEnabled(true); diff --git a/examples/imageWMS.js b/examples/imageWMS.js index 2e240b42b..58ef4293a 100644 --- a/examples/imageWMS.js +++ b/examples/imageWMS.js @@ -43,7 +43,6 @@ const ol3d = new OLCesium({ } }); const scene = ol3d.getCesiumScene(); -Cesium.createWorldTerrainAsync().then(tp => scene.terrainProvider = tp); ol3d.setEnabled(true); document.getElementById('enable').addEventListener('click', () => ol3d.setEnabled(!ol3d.getEnabled())); diff --git a/examples/kml.js b/examples/kml.js index a1319a7f6..c6b64b0ea 100644 --- a/examples/kml.js +++ b/examples/kml.js @@ -27,7 +27,6 @@ const ol2d = new olMap({ const ol3d = new OLCesium({map: ol2d}); const scene = ol3d.getCesiumScene(); -Cesium.createWorldTerrainAsync().then(tp => scene.terrainProvider = tp); ol3d.getDataSources().add( Cesium.KmlDataSource.load( diff --git a/examples/main.js b/examples/main.js index cec767908..6e7dba661 100644 --- a/examples/main.js +++ b/examples/main.js @@ -39,7 +39,6 @@ const ol3d = new OLCesium({ } }); const scene = ol3d.getCesiumScene(); -Cesium.createWorldTerrainAsync().then(tp => scene.terrainProvider = tp); ol3d.setEnabled(true); diff --git a/examples/overlay.js b/examples/overlay.js index 30ca0ed2e..242c67bfa 100644 --- a/examples/overlay.js +++ b/examples/overlay.js @@ -32,7 +32,6 @@ const ol3d = new OLCesium({ target: 'mapCesium' }); const scene = ol3d.getCesiumScene(); -Cesium.createWorldTerrainAsync().then(tp => scene.terrainProvider = tp); class OverlayHandler { constructor(ol2d, ol3d, scene) { diff --git a/examples/print.html b/examples/print.html index 4b878885a..299a21ebe 100644 --- a/examples/print.html +++ b/examples/print.html @@ -18,7 +18,7 @@
- +