From 4e9d1ebff21891c51d00acb88fb5bf4303536ee5 Mon Sep 17 00:00:00 2001 From: troyhy Date: Sun, 8 Jun 2025 12:23:24 +0300 Subject: [PATCH 1/2] Add support for MapTiler key configuration Integrated MapTiler API key into the application, replacing the hardcoded key with a dynamic environment variable. Updated relevant code, documentation, and configuration files to support this change, ensuring flexibility for different environments. --- README.md | 4 +++- config/dev.env.js | 3 ++- config/prod.env.js | 3 ++- src/components/CesiumViewer.vue | 7 ++++++- 4 files changed, 13 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 5b3f8ee98..792d1262f 100644 --- a/README.md +++ b/README.md @@ -44,7 +44,9 @@ or build the docker file locally: docker build -t /uavlogviewer . # Run Docker Image -docker run -e VUE_APP_CESIUM_TOKEN= -it -p 8080:8080 -v ${PWD}:/usr/src/app /uavlogviewer +docker run -e VUE_APP_CESIUM_TOKEN= \ + -e VUE_APP_MAPTILER_KEY= \ + -it -p 8080:8080 -v ${PWD}:/usr/src/app /uavlogviewer # Navigate to localhost:8080 in your web browser diff --git a/config/dev.env.js b/config/dev.env.js index 332814a81..1fce45832 100644 --- a/config/dev.env.js +++ b/config/dev.env.js @@ -4,5 +4,6 @@ const prodEnv = require('./prod.env') module.exports = merge(prodEnv, { NODE_ENV: '"development"', - VUE_APP_CESIUM_TOKEN: JSON.stringify(process.env.VUE_APP_CESIUM_TOKEN || '') + VUE_APP_CESIUM_TOKEN: JSON.stringify(process.env.VUE_APP_CESIUM_TOKEN || ''), + VUE_APP_MAPTILER_KEY: JSON.stringify(process.env.VUE_APP_MAPTILER_KEY || '') }) diff --git a/config/prod.env.js b/config/prod.env.js index cf6d3ab32..bd98fc0c4 100644 --- a/config/prod.env.js +++ b/config/prod.env.js @@ -1,5 +1,6 @@ 'use strict' module.exports = { NODE_ENV: '"production"', - VUE_APP_CESIUM_TOKEN: JSON.stringify(process.env.VUE_APP_CESIUM_TOKEN || '') + VUE_APP_CESIUM_TOKEN: JSON.stringify(process.env.VUE_APP_CESIUM_TOKEN || ''), + VUE_APP_MAPTILER_KEY: JSON.stringify(process.env.VUE_APP_MAPTILER_KEY || 'o3JREHNnXex8WSPPm2BU') } diff --git a/src/components/CesiumViewer.vue b/src/components/CesiumViewer.vue index 55c5caa12..74ef77bc0 100644 --- a/src/components/CesiumViewer.vue +++ b/src/components/CesiumViewer.vue @@ -87,6 +87,9 @@ import { // Set Cesium token from environment variable Ion.defaultAccessToken = process.env.VUE_APP_CESIUM_TOKEN || '' +const mapTilerKey = process.env.VUE_APP_MAPTILER_KEY || '' + +console.log('mapTilerKey: ' + mapTilerKey) const colorCoderMode = new ColorCoderMode(store) const colorCoderRange = new ColorCoderRange(store) @@ -110,6 +113,7 @@ export default { lastEmitted: 0, colorCoder: null, selectedColorCoder: 'Mode' + } }, components: { @@ -315,7 +319,8 @@ export default { tooltip: 'Maptiler satellite imagery http://maptiler.com/', creationFunction: function () { return new UrlTemplateImageryProvider({ - url: 'https://api.maptiler.com/tiles/satellite-v2/{z}/{x}/{y}.jpg?key=o3JREHNnXex8WSPPm2BU', + // eslint-disable-next-line quotes + url: `https://api.maptiler.com/tiles/satellite-v2/{z}/{x}/{y}.jpg?key=${mapTilerKey}`, minimumLevel: 0, maximumLevel: 20, credit: 'https://www.maptiler.com/copyright' From 4e7883a88594eed0f2b7ea35597ba136fdff37cc Mon Sep 17 00:00:00 2001 From: troyhy Date: Mon, 9 Jun 2025 14:46:50 +0300 Subject: [PATCH 2/2] Add support for dynamic Cesium resource ID configuration Replaced hardcoded Cesium asset ID with a dynamic value sourced from an environment variable. Updated relevant code and configuration files to enhance flexibility across environments. --- config/dev.env.js | 1 + config/prod.env.js | 1 + src/components/CesiumViewer.vue | 4 ++-- 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/config/dev.env.js b/config/dev.env.js index 1fce45832..475b1e843 100644 --- a/config/dev.env.js +++ b/config/dev.env.js @@ -5,5 +5,6 @@ const prodEnv = require('./prod.env') module.exports = merge(prodEnv, { NODE_ENV: '"development"', VUE_APP_CESIUM_TOKEN: JSON.stringify(process.env.VUE_APP_CESIUM_TOKEN || ''), + VUE_APP_CESIUM_RESOURCE_ID: JSON.stringify(process.env.VUE_APP_CESIUM_RESOUR_ID || 3), VUE_APP_MAPTILER_KEY: JSON.stringify(process.env.VUE_APP_MAPTILER_KEY || '') }) diff --git a/config/prod.env.js b/config/prod.env.js index bd98fc0c4..b301a7d82 100644 --- a/config/prod.env.js +++ b/config/prod.env.js @@ -2,5 +2,6 @@ module.exports = { NODE_ENV: '"production"', VUE_APP_CESIUM_TOKEN: JSON.stringify(process.env.VUE_APP_CESIUM_TOKEN || ''), + VUE_APP_CESIUM_RESOURCE_ID: JSON.stringify(process.env.VUE_APP_CESIUM_RESOUR_ID || 3), VUE_APP_MAPTILER_KEY: JSON.stringify(process.env.VUE_APP_MAPTILER_KEY || 'o3JREHNnXex8WSPPm2BU') } diff --git a/src/components/CesiumViewer.vue b/src/components/CesiumViewer.vue index 74ef77bc0..e073c2342 100644 --- a/src/components/CesiumViewer.vue +++ b/src/components/CesiumViewer.vue @@ -86,7 +86,7 @@ import { // Set Cesium token from environment variable Ion.defaultAccessToken = process.env.VUE_APP_CESIUM_TOKEN || '' - +const cesiumResurceId = process.env.VUE_APP_CESIUM_RESOURCE_ID || 3 const mapTilerKey = process.env.VUE_APP_MAPTILER_KEY || '' console.log('mapTilerKey: ' + mapTilerKey) @@ -267,7 +267,7 @@ export default { shadows: true, // eslint-disable-next-line baseLayer: new ImageryLayer.fromProviderAsync( - IonImageryProvider.fromAssetId(3954) + IonImageryProvider.fromAssetId(cesiumResurceId) ), imageryProviderViewModels: imageryProviders, orderIndependentTranslucency: false,