README.md · OSCHINA-MIRROR/dujuann-mapbox-gl-grid-heatmap

OSCHINA-MIRROR/dujuann-mapbox-gl-grid-heatmap

В этом репозитории не указан файл с открытой лицензией (LICENSE). При использовании обратитесь к конкретному описанию проекта и его зависимостям в коде.

Клонировать/Скачать

README.md 20 КБ

## 1. Введение

map.on('load', () => {
            const container = document.createElement('div');
            map.getCanvasContainer().appendChild(container);
            renderer.domElement = container;
            renderer.setSize(map.getCanvasContainer().offsetWidth, map.getCanvasContainer().offsetHeight);

// Добавьте код для отрисовки сетчатой тепловой карты
            // ...

map.on('move', () => {
                // Обновите положение камеры и данные для отображения
                // ...
            });
        });
    </script>
</body>
</html>
```Замените `YOUR_MAPBOX_ACCESS_TOKEN`, `LONGITUDE`, `LATITUDE` и `data` на соответствующие значения. Также добавьте код для создания сетчатой тепловой карты и её отображения в threejs.

Обратите внимание, что для создания сетчатой тепловой карты вам потребуется обработать данные о нарушениях парковки и создать соответствующую сетку. Вы можете использовать различные методы для создания сетки, например, триангуляцию Делоне или другие алгоритмы для создания сетки.

Также вам потребуется обновлять положение камеры и данные для отображения при каждом изменении положения карты. Это можно сделать с помощью события `move` в mapboxgl.

Этот пример является базовым и может потребовать дополнительной настройки и доработки для достижения желаемого результата.

Знани адрес [https://zhuanlan.zhihu.com/p/235222599](https://zhuanlan.zhihu.com/p/235222599)На работе мне потребовалось реализовать анимацию на карте. Анимация была простой, но до этого я не считал её такой простой, требовалось иметь базовые знания webgl и three.js.## 2. Подготовка данных
Через пространственную интерполяцию, создание сетки, подсчет количества нарушений парковки в каждой ячейке сетки, преобразование сетки в матрицу точек, повторное обработку данных за восемь месяцев. Для тех, кто знаком с ArcMap или QGIS, этот процесс обработки данных должен быть знаком. Вопрос заключается в том, как сделать этот процесс сервисным. Или вы можете использовать некоторые методы обработки изображений для обработки этих данных. Здесь не будет рассматриваться процесс обработки данных. Будут перечислены результаты обработки данных.![](./imgs/1.png)

-9999 — это значение пропуска

```javascript
Долгота                 Широта               Количество нарушений парковки
120.633570199999994 31.4307066000000042 -9999
120.634570199999985 31.4307066000000042 1.2536
120.635570199999989 31.4307066000000042 2.3524
```

Для удобства последующего построения графиков, объедините данные за восемь месяцев в один файл, где каждая запись представляет собой ячейку сетки, состоящую из долготы, ширины и количества нарушений парковки за каждый из восьми месяцев.

![](./imgs/2.png)

```javascript
Долгота,Широта,Январь,Февраль,Март,Апрель,Май,Июнь,Июль,Август,
120.633570199999994,31.4307066000000042,0,0,0,0,0,0,0,0
120.634570199999985,31.4307066000000042,0,0,0,0,0,0,0,0
120.635570199999989,31.4307066000000042,0,0,0,0,0,0,0
```## 3. Построение сетки

Проверим еще раз нашу структуру данных. Всего 201 строка, 198 столбцов, общее количество точек — 39789. Каждая запись содержит следующую информацию.
```javascript
Долгота, Широта, Январь, Февраль, Март, Апрель, Май, Июнь, Июль, Август,
```

### 1. Преобразование координат

В `mapboxgl` рисуются проектированные координаты, мы читаем данные и преобразуем их в проектированные координаты. `threebox` — это плагин для `mapboxgl`, который помогает использовать `three.js` для создания расширений в `mapboxgl`.
```javascript
// tb — объект threebox, плагин, связывающий mapboxgl и three.js
// dataStr — строка данных, наши данные хранятся в текстовом формате в файле .txt
function dataFormat(tb, dataStr) {
        let points = [];
        dataStr.split('\n').map(function (s, i) {
            let splitArray = s.split(',');
            let ll = [parseFloat(splitArray[0]), parseFloat(splitArray[1])];
            let {x, y, z} = tb.projectToWorld(ll); // Преобразование из долготы и широты в проектированные координаты
            points.push([x, y].concat(splitArray.slice(2).map(i => Number(i))));
        });
        return points;
}
```

### 2. Получение сетки линий

Моя сетка упорядочена по столбцам, индексы узлов сетки увеличиваются по столбцам. В конечном итоге рисуются линии сетки, поэтому необходимо извлечь линии сетки. Если у нас есть кисть, которая может нарисовать квадрат 201x198 за один раз? Ответ — да, но это приведёт к повторению путей. Вы можете оптимизировать производительность, рисуя минимальное количество линий.Для упрощения, я буду рисовать 201 строку + 198 столбцов = 399 линий для создания сетки.
```javascript
function arrSplit(tb, datStr) {
    let resArr = dataFormat(tb, datStr);
    let rows = _.chunk(resArr, row);
    let columns = [];
    let tmpColumns = [];
    for (let i = 0; i < row; i++) {
        for (let j = 0; j < column; j++) {
            let item = resArr[row * j + i];
            tmpColumns.push(item);
        }
    }
    columns = _.chunk(tmpColumns, column);
    return [...rows, ...columns];
}
```
### 3. Рисование линий сетки
При рисовании линий, следует учитывать, что линии, которые мы рисуем, имеют специфические свойства: каждый узел имеет высоту и цвет. Если цвета узлов различаются, WebGL интерполирует цвета между узлами при растрировании. Эффект тепловой карты сетки достигается именно таким образом.
```javascript
function drawLine(row) {
    let vertices = [];
    let colors = [];
    let geometry = new THREE.Geometry();
    row.forEach((coordinate) => {
        let [x, y, z] = [coordinate[0], coordinate[1], coordinate[2]];
        vertices.push(new THREE.Vector3(x, y, z));
        colors.push(getColorByValue(z));
    });
    let material = new THREE.LineBasicMaterial({
        linewidth: 1,
        vertexColors: THREE.VertexColors,
        //blending: THREE.AdditiveBlending
    });
    geometry.vertices = vertices;
    geometry.colors = colors;
    let lineMesh = new THREE.Line(geometry, material);
    lineMesh.geometry.verticesNeedUpdate = true;
    lineMesh.geometry.colorsNeedUpdate = true;
    return lineMesh;
}
```
Цвета узлов и их высоты рассчитываются на основе интерполяции количества нарушений парковки на каждом узле сетки. Предварительно создаётся цветовая шкала, так как мне не нужно создавать объект THREE.Color для каждого цвета.Если вам кажется, что высота слишком велика, вы можете умножить её на коэффициент масштабирования по оси Z.
```javascript
let colors = [
    new THREE.Color(`rgb(113, 196, 54)`),
    new THREE.Color(`rgb(171, 190, 52)`),
    new THREE.Color(`rgb(201, 155, 52)`),
    new THREE.Color(`rgb(205, 122, 45)`),
    new THREE.Color(`rgb(214, 96, 53)`),
    new THREE.Color(`rgb(223, 70, 50)`),
];
```Цвет(`rgb(234, 57, 45)`),
      new THREE.Color(`rgb(234, 57, 45)`)
  ]
  функция getColorByValue(значение) {
      let tvalue = Number(значение);
      if (tvalue < 1) {
          return цвета[0];
      } else if (tvalue <= 5) {
          return цвета[1];
      } else if (tvalue < 15) {
          return цвета[2];
      } else if (tvalue < 30) {
          return цвета[3];
      } else if (tvalue < 50) {
          return цвета[4];
      } else if (tvalue < 80) {
          return цвета[5];
      } else {
          return цвета[6];
      }
  }
  ```
  ### 4. Результат отрисовки
  Результат такой, как ожидается. ![](. /imgs/3. png)## 4. Грид-анимация
Анимация — это "интерполяция", которая заполняет промежуточные значения. Если количество нарушений парковки у одной точки сетки увеличивается с 1 до 10 за месяц, мы хотим, чтобы этот процесс занимал 2 секунды. Для этого нам нужно вставить промежуточные значения. Сколько их нужно? Если мы хотим достичь 55 кадров в секунду, то это зависит от браузера и мощности нашего оборудования. Чтобы сетка плавно увеличивалась от 1 до 10 за 2 секунды, нам нужно вставить около 110 промежуточных значений.

### 1. Интерполяция
tween.js — это отличная библиотека для интерполяционной анимации. Например, если endPointIndex увеличивается с 0 до 60 за 3 секунды, мы можем отслеживать промежуточные значения и выполнять функцию обратного вызова по завершении анимации.
```javascript
let aniindexArr = new Array(8).fill({
	endPointIndex: 0,
});
// endPointIndex увеличивается с 0 до 60 за 3 секунды
let tween1 = new TWEEN.Tween(aniindexArr)
	.to({ endPointIndex: 60 }, 3000) 
	.onUpdate(function (iii) {
         // промежуточное значение
	 console.log(iii.endPointIndex);
	})
	.onComplete(function () {
         // обратный вызов по завершении анимации
	aniindexArr[0].endPointIndex = 0;
	});
```
Каждой линии добавляем индекс, чтобы при проходе по всем линиям мы могли быстро найти соответствующие вершины.
```javascript
alllines.forEach((line, index) => {
	lineMesh = drawLine(line);
	lineMesh.userdata = { index: index }; 
	lineGroup.add(lineMesh);
});
```### 2. Вычисление промежуточных значений
Проходим по всем линиям и изменяем высоту и цвет вершин каждой линии. Высота вершин определяется количеством нарушений парковки, умноженным на коэффициент масштабирования `scale`. Промежуточные значения (высота):![](./imgs/4.png) - begain: начальное значение, в примере представляет собой количество нарушений парковки в январе для текущей сетки
 - end: конечное значение, в примере представляет собой количество нарушений парковки в феврале для текущей сетки
 - timeInCount: количество интерполяций/интерполяционных значений

```javascript
let tween1 = new TWEEN.Tween(aniindexArr[0])
	.to({ endPointIndex: timeInCount }, timeInterv)
	.onUpdate(function (iii) {
		let vertices = [];
		let colors = [];
		for (let i = 0; i < alllines[lineIndex].length; i++) {
			let item = alllines[lineIndex][i];
			let begain = item[2] * scale;
			let end = item[3] * scale;
			let h = begain + ((end - begain) / timeInCount) * iii.endPointIndex;
			vertices.push(new THREE.Vector3(item[0], item[1], h));
			colors.push(getColorByValue(h));
		}
		child.geometry.vertices = vertices;
		child.geometry.colors = colors;
		child.geometry.verticesNeedUpdate = true;
		child.geometry.colorsNeedUpdate = true;
	})
	.onComplete(function () {
		aniindexArr[0].endPointIndex = 0;
	});
```

### 3. Континуированный двухмесячный анимационный цикл
tween.js поддерживает связывание анимаций, что позволяет связывать несколько анимаций. Используя `tween1.chain(tween2);`, мы связываем анимации за январь и февраль, создавая цикл 1->2->1. Результат выглядит следующим образом:
![](./imgs/5.gif)

```javascript
lineGroup.traverse(function (child) {
	let userdata = child.userdata;
	if (userdata) {
		let lineIndex = userdata.index;
		let tween1 = new TWEEN.Tween(aniindexArr[0])
			.to({ endPointIndex: timeInCount }, timeInterv)
			.onUpdate(function (iii) {
				let vertices = [];
				let colors = [];
				for (let i = 0; i < alllines[lineIndex].length; i++) {
					let item = alllines[lineIndex][i];
					let begain = item[2] * scale;
					let end = item[3] * scale;
					let h = begain + ((end - begain) / timeInCount) * iii.endPointIndex;
					vertices.push(new THREE.Vector3(item[0], item[1], h));
					colors.push(getColorByValue(h));
				}
				child.geometry.vertices = vertices;
				child.geometry.colors = colors;
				child.geometry.verticesNeedUpdate = true;
				child.geometry.colorsNeedUpdate = true;
			})
			.onComplete(function () {
				aniindexArr[0].endPointIndex = 0;
			});
	}
});
``````javascript
push(getColorByValue(h));
 				}
 				child.geometry.vertices = vertices;
 				child.geometry.colors = colors;
 				child.geometry.verticesNeedUpdate = true;
 				child.geometry.colorsNeedUpdate = true;
 			})
 			.onComplete(function () {
 				aniindexArr[0].endPointIndex = 0;
 			});
 		let tween2 = new TWEEN.Tween(aniindexArr[1])
 			.to({ endPointIndex: timeInCount }, timeInterv)
 			.onUpdate(function (iii) {
 				let vertices = [];
 				let colors = [];
 				for (let i = 0; i < alllines[lineIndex].length; i++) {
 					let item = alllines[lineIndex][i];
 					let begin = item[3] * scale;
 					let end = item[2] * scale;
 					let h = begin + ((end - begin) / timeInCount) * iii.endPointIndex;
 					vertices.push(new THREE.Vector3(item[0], item[1], h));
 					colors.push(getColorByValue(h));
 				}
 				child.geometry.vertices = vertices;
 				child.geometry.colors = colors;
 				child.geometry.verticesNeedUpdate = true;
 				child.geometry.colorsNeedUpdate = true;
 			})
 			.onComplete(function () {
 				aniindexArr[1].endPointIndex = 0;
 			});
 		tween1.chain(tween2);
 		tween2.chain(tween1);
 		tween1.start();
 	}
 });
 ```
### 4. Плавная анимация на 8 месяцев
Аналогично: мы соединяем данные за 8 месяцев, чтобы получить такой эффект.
![](./imgs/6.gif)
## 5. Смешивание цветов
Как удалить точки с нулевым значением, если рассматривать этот вопрос с точки зрения данных, это может быть сложновато. Но мы можем просто пропускать точки с нулевым значением при построении линий. В этом случае мы используем метод смешивания цветов для удаления точек с нулевым значением.
Если вы изучали WebGL, то вы должны знать функцию `gl.blendFunc()`. В Three.js свойство `blending` материала `Material` используется для управления способом наложения текстур. В Three.js есть несколько методов смешивания цветов:
- `THREE.NormalBlending`: значение по умолчанию для свойства `blending`
- `THREE.AdditiveBlending`: режим добавления
- `THREE.SubtractiveBlending`: режим вычитания
- `THREE.MultiplyBlending`: режим умножения
- `THREE.CustomBlending`: пользовательский режим наложения
Не очень хорошо знаком с моделями и алгоритмами смешивания цветов. Почему при аддитивном смешивании цвета становятся светлее? Нужно будет изучить эту тему. Я установил цвет нулевых точек сетки как (0, 0, 0) — чёрный. Используя аддитивное смешивание, можно удалить нулевые точки. Однако, изначально заданные цветовые пояса становятся светлее, поэтому нам нужно перенастроить цветовые пояса, чтобы сделать анимацию более приятной для глаз, хотя конечные настройки цвета всё ещё не идеальны.
```javascript
let colors = [
	new THREE.Color(`rgb(0, 0, 0)`),
	new THREE.Color(`rgb(20, 130, 89)`),
	new THREE.Color(`rgb(31, 196, 54)`),
	new THREE.Color(`rgb(171, 190, 52)`),
	new THREE.Color(`rgb(201, 155, 52)`),
	new THREE.Color(`rgb(205, 122, 45)`),
	new THREE.Color(`rgb(230, 87, 30)`),
];
```Color(`rgb(160, 0, 0)`),
 	new THREE.Color(`rgb(180, 0, 0)`),
 ];
 let material = new THREE.LineBasicMaterial({
     opacity: 0.5,
     linewidth: 1,
     vertexColors: THREE.VertexColors,
     blending: THREE.AdditiveBlending
 });
 ```
 Итоговый результат выглядит так.
 ![](./imgs/7.gif)## Шестая часть. Заключение
Поделюсь примером работы, который я создал. Если вам нужно реализовать подобный эффект, надеюсь, что этот пример окажется полезным. В первую очередь, данные должны быть организованы в регулярную сетку. Вы можете использовать программное обеспечение, подобное ArcMap или QGIS, для обработки данных, или же создать собственные инструменты для обработки данных. Карта создана с использованием Mapbox. Анимация реализована с помощью three.js и tween.js. Для реализации подобной анимации вам потребуется знание webgl и three.js.

Копировать Редактировать Web IDE Исходные данные Просмотреть построчно История

Отправлено 09.06.2025 12:26 0e3d748

1. Введение

    map.on('load', () => {
        const container = document.createElement('div');
        map.getCanvasContainer().appendChild(container);
        renderer.domElement = container;
        renderer.setSize(map.getCanvasContainer().offsetWidth, map.getCanvasContainer().offsetHeight);

        // Добавьте код для отрисовки сетчатой тепловой карты
        // ...

        map.on('move', () => {
            // Обновите положение камеры и данные для отображения
            // ...
        });
    });
</script>

Опубликовать ( 0 )

Вы можете оставить комментарий после Вход в систему

Пример использования данных о нарушениях парковки в течение восьми месяцев для создания гладкого трехмерного сетчатого теплового картограммы с использованием threejs в mapboxgl: Для реализации этой задачи вам потребуется интегрировать threejs с mapboxgl. Пример кода может выглядеть следующим образом: ```html <!DOCTYPE html> <html> <head> <... Развернуть

Отмена

Пока нет обновлений

JavaScript 96.2% HTML 2.0% CSS 1.8%

https://api.gitlife.ru/oschina-mirror/dujuann-mapbox-gl-grid-heatmap.git

git@api.gitlife.ru:oschina-mirror/dujuann-mapbox-gl-grid-heatmap.git

oschina-mirror

dujuann-mapbox-gl-grid-heatmap

master

OSCHINA-MIRROR/dujuann-mapbox-gl-grid-heatmap

1. Введение

Опубликовать ( 0 )

Введение

Обновления

Участники

Язык

Недавние действия

OSCHINA-MIRROR/dujuann-mapbox-gl-grid-heatmap .gitee-modal { min-width: 500px !important; } .gitee-modal .close { right: 0.6rem !important; }

1. Введение

Опубликовать ( 0 )

Введение

Обновления

Участники

Язык

Недавние действия

OSCHINA-MIRROR/dujuann-mapbox-gl-grid-heatmap