79 lines
3.4 KiB
Markdown
79 lines
3.4 KiB
Markdown
# 🗺️ Как заменить карту мира на свою
|
||
|
||
## Вариант 1: Использовать свой файл изображения
|
||
|
||
1. Положите файл с картой мира в папку проекта (например, `world-map.jpg` или `world-map.png`)
|
||
|
||
2. Откройте файл `map.js` и найдите строку 26:
|
||
```javascript
|
||
this.mapImage.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Equirectangular_projection_SW.jpg/1280px-Equirectangular_projection_SW.jpg';
|
||
```
|
||
|
||
3. Замените на:
|
||
```javascript
|
||
this.mapImage.src = 'world-map.jpg'; // или ваше имя файла
|
||
```
|
||
|
||
## Вариант 2: Использовать другой URL
|
||
|
||
Вы можете использовать любое изображение карты из интернета.
|
||
|
||
Например:
|
||
```javascript
|
||
// Физическая карта
|
||
this.mapImage.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Equirectangular_projection_SW.jpg/1280px-Equirectangular_projection_SW.jpg';
|
||
|
||
// Политическая карта
|
||
this.mapImage.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/91/Mercator_projection_SW.jpg/1280px-Mercator_projection_SW.jpg';
|
||
|
||
// Карта без подписей
|
||
this.mapImage.src = 'https://eoimages.gsfc.nasa.gov/images/imagerecords/73000/73909/world.topo.bathy.200412.3x5400x2700.jpg';
|
||
```
|
||
|
||
## Рекомендации по карте
|
||
|
||
### Идеальный формат:
|
||
- **Разрешение:** 1280x640 или выше
|
||
- **Формат:** JPG или PNG
|
||
- **Проекция:** Равнопромежуточная (Equirectangular)
|
||
- **Без текста:** Лучше карта без подписей стран
|
||
|
||
### Где найти карты:
|
||
1. **Wikimedia Commons** - https://commons.wikimedia.org/wiki/Category:World_maps
|
||
2. **Natural Earth** - https://www.naturalearthdata.com/
|
||
3. **NASA Visible Earth** - https://visibleearth.nasa.gov/
|
||
|
||
## Настройка положения локаций
|
||
|
||
Если карта отличается от стандартной, возможно потребуется скорректировать координаты локаций в файле `data.js`.
|
||
|
||
Координаты задаются в пикселях:
|
||
```javascript
|
||
{ id: 'moscow', name: 'Москва', x: 640, y: 180, ... }
|
||
```
|
||
|
||
Где:
|
||
- `x` - положение по горизонтали (0 = левый край, 1100 = правый край)
|
||
- `y` - положение по вертикали (0 = верхний край, 600 = нижний край)
|
||
|
||
## Отключить затемнение
|
||
|
||
Если карта слишком светлая или темная, можно изменить затемнение в `map.js` (строка 91):
|
||
|
||
```javascript
|
||
// Убрать затемнение
|
||
// ctx.fillStyle = 'rgba(255, 255, 255, 0.1)';
|
||
// ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
|
||
|
||
// Или изменить прозрачность (0.1 = слабое, 0.5 = сильное)
|
||
ctx.fillStyle = 'rgba(255, 255, 255, 0.2)';
|
||
```
|
||
|
||
## Размер canvas
|
||
|
||
Размер карты автоматически подстраивается под размер окна, но координаты локаций рассчитаны на:
|
||
- Ширина: 1100px
|
||
- Высота: 600px
|
||
|
||
Если хотите изменить размер, измените координаты локаций пропорционально.
|
||
|