Add multiple map options to choose from

have-been-to/README.md

@@ -0,0 +1,6 @@
+https://eoimages.gsfc.nasa.gov/images/imagerecords/144000/144898/BlackMarble_2016_01deg.jpg
+
+https://eoimages.gsfc.nasa.gov/images/imagerecords/147000/147190/eo_base_2020_clean_3600x1800.png
+
+
+https://visibleearth.nasa.gov/collection/1484/blue-marble

have-been-to/app.py

@@ -1,6 +1,6 @@
 from flask import Flask, render_template, request, jsonify
 from flask_cors import CORS
-from database import init_db, add_country, remove_country, get_all_countries, save_highlight_color, get_highlight_color
+from database import init_db, add_country, remove_country, get_all_countries, save_highlight_color, get_highlight_color, save_map_type, get_map_type
 import requests
 
 app = Flask(__name__)
@@ -56,5 +56,16 @@ def get_highlight_color_route():
     color = get_highlight_color()
     return jsonify({"color": color})
 
+@app.route('/save_map_type', methods=['POST'])
+def save_map_type_route():
+    map_type = request.json['mapType']
+    save_map_type(map_type)
+    return jsonify({"success": True})
+
+@app.route('/get_map_type', methods=['GET'])
+def get_map_type_route():
+    map_type = get_map_type()
+    return jsonify({"mapType": map_type})
+
 if __name__ == '__main__':
     app.run(debug=True, port=5001)

have-been-to/database.py

@@ -46,3 +46,18 @@ def get_highlight_color():
     result = c.fetchone()
     conn.close()
     return result[0] if result else None
+
+def save_map_type(map_type):
+    conn = sqlite3.connect('countries.db')
+    c = conn.cursor()
+    c.execute("INSERT OR REPLACE INTO settings (key, value) VALUES (?, ?)", ('map_type', map_type))
+    conn.commit()
+    conn.close()
+
+def get_map_type():
+    conn = sqlite3.connect('countries.db')
+    c = conn.cursor()
+    c.execute("SELECT value FROM settings WHERE key = 'map_type'")
+    result = c.fetchone()
+    conn.close()
+    return result[0] if result else 'standard'

have-been-to/static/js/globe.js

@@ -8,6 +8,13 @@ let allCountries = []; // 存储所有国家名称
 let worldData; // 存储世界地理数据
 let worldDataLoaded = false; // 标记世界数据是否已加载
 let highlightColor = 0xFFFF00; // 默认高亮颜色
+let currentMapType = 'standard';
+const mapTextures = {
+    standard: '/static/images/eo_base_2020_clean_3600x1800.png',
+    night: '/static/images/BlackMarble_2016_01deg.jpg',
+    gray: '/static/images/world.oceanmask.5400x2700.png',
+    satellite: '/static/images/world.topo.bathy.200412.3x5400x2700.jpg'
+};
 
 export { init, addCountry, removeCountry, exportMap };
 
@@ -29,13 +36,34 @@ function init() {
     renderer.setSize(window.innerWidth, window.innerHeight);
     document.getElementById('map').appendChild(renderer.domElement);
 
-    const mapTexture = new THREE.TextureLoader().load('/static/images/world.topo.bathy.200412.3x5400x2700.jpg');
+    const mapTexture = new THREE.TextureLoader().load(mapTextures[currentMapType]);
     const material = new THREE.MeshBasicMaterial({ map: mapTexture });
     map = new THREE.Mesh(new THREE.PlaneGeometry(360, 180), material);
     scene.add(map);
 
     camera.position.z = 100;
 
+    setupControls();
+    setupColorPicker();
+    loadHighlightColor();
+    loadSavedMapType();
+
+    loadWorldData();
+    animate();
+    loadCountries();
+    loadAllCountries();
+    setupAutocomplete();
+
+    window.addEventListener('resize', onWindowResize, false);
+
+    // Move the event listeners setup to a separate function
+    setupEventListeners();
+
+    // Update renderer size
+    updateRendererSize();
+}
+
+function setupControls() {
     controls = new OrbitControls(camera, renderer.domElement);
     controls.enableRotate = false;
     controls.enablePan = true;
@@ -53,34 +81,30 @@ function init() {
     controls.minZoom = 1;
     controls.maxZoom = 5;
     controls.update();
+}
 
-    setupColorPicker();
-    loadHighlightColor();
+function setupEventListeners() {
+    const zoomInButton = document.getElementById('zoom-in');
+    const zoomOutButton = document.getElementById('zoom-out');
+    const sidebarToggle = document.querySelector('button[x-on\\:click]');
 
-    loadWorldData();
-    animate();
-    loadCountries();
-    loadAllCountries();
-    setupAutocomplete();
+    if (zoomInButton) {
+        zoomInButton.addEventListener('click', () => {
+            controls.zoomIn();
+        });
+    }
 
-    window.addEventListener('resize', onWindowResize, false);
+    if (zoomOutButton) {
+        zoomOutButton.addEventListener('click', () => {
+            controls.zoomOut();
+        });
+    }
 
-    // Add event listeners for zoom buttons
-    document.getElementById('zoom-in').addEventListener('click', () => {
-        controls.zoomIn();
-    });
-    document.getElementById('zoom-out').addEventListener('click', () => {
-        controls.zoomOut();
-    });
+    if (sidebarToggle) {
+        sidebarToggle.addEventListener('click', updateRendererSize);
+    }
 
-    // Update renderer size
-    updateRendererSize();
-
-    // Add event listener for sidebar toggle
-    document.querySelector('button[x-on\\:click]').addEventListener('click', updateRendererSize);
-
-    // Add event listener for window resize
-    window.addEventListener('resize', updateRendererSize);
+    setupMapSelection();
 }
 
 function onWindowResize() {
@@ -380,7 +404,11 @@ function exportMap() {
     exportCamera.position.z = 100;
 
     // Add the map and highlighted countries to the export scene
-    exportScene.add(map.clone());
+    const exportMap = new THREE.Mesh(
+        new THREE.PlaneGeometry(360, 180),
+        new THREE.MeshBasicMaterial({ map: map.material.map })
+    );
+    exportScene.add(exportMap);
     highlightedCountries.forEach(country => {
         exportScene.add(country.clone());
     });
@@ -416,3 +444,50 @@ function updateRendererSize() {
 
     renderer.setSize(width, height);
 }
+
+function setupMapSelection() {
+    const mapSelect = document.getElementById('map-select');
+    if (mapSelect) {
+        mapSelect.addEventListener('change', (event) => {
+            changeMapType(event.target.value);
+        });
+    } else {
+        console.error('Map select element not found');
+    }
+}
+
+function changeMapType(mapType) {
+    if (mapType !== currentMapType) {
+        currentMapType = mapType;
+        const newTexture = new THREE.TextureLoader().load(mapTextures[mapType]);
+        map.material.map = newTexture;
+        map.material.needsUpdate = true;
+        saveMapType(mapType);
+    }
+}
+
+function loadSavedMapType() {
+    fetch('/get_map_type')
+        .then(response => response.json())
+        .then(data => {
+            if (data.mapType) {
+                changeMapType(data.mapType);
+                document.getElementById('map-select').value = data.mapType;
+            }
+        });
+}
+
+function saveMapType(mapType) {
+    fetch('/save_map_type', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ mapType: mapType }),
+    });
+}
+
+// Move this to the end of the file
+document.addEventListener('DOMContentLoaded', () => {
+    init();
+});

have-been-to/templates/index.html

@@ -39,6 +39,15 @@
                     <h3 class="text-lg font-semibold mb-2 text-gray-300">高亮颜色</h3>
                     <div id="color-picker" class="flex justify-around"></div>
                 </div>
+                <div class="mb-4">
+                    <h3 class="text-lg font-semibold mb-2 text-gray-300">地图背景</h3>
+                    <select id="map-select" class="w-full px-3 py-2 bg-gray-800 text-gray-200 border border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                        <option value="standard">标准地图</option>
+                        <option value="night">夜间地图</option>
+                        <option value="gray">灰度地图</option>
+                        <option value="satellite">卫星地图</option>
+                    </select>
+                </div>
                 <button id="export-btn" class="w-full bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 transition duration-200">导出地图</button>
             </div>
         </div>