Использование исходных текстов Openlayers GeoTIFF в приложении django
У меня есть приложение django со страницей, которая отображает OSM через Openlayers, я динамически добавляю к нему некоторые маркеры, и теперь я также хочу отображать растровые наложения из файлов .tif.
Я изо всех сил пытаюсь реализовать Openlayers GeoTIFF. Это мой текущий тестовый шаблон, в котором я просто пытаюсь отобразить любой tif-файл. Я использую локальную копию кода openlayers здесь:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<link rel="stylesheet" href="{% static '/css/ol.css' %}">
<script src="{% static '/js/ol.js' %}"></script>
<script type="module" src="{% static '/ol/source/GeoTIFF.js' %}"></script>
<script src="{% static '/js/proj4.js' %}"></script>
</head>
<body id="body">
<div id="map" style="width: 1000px; height: 500px;"></div>
</body>
<script type="module">
const source = new GeoTIFF({
sources: [
{
url: 'https://sentinel-cogs.s3.us-west-2.amazonaws.com/sentinel-s2-l2a-cogs/36/Q/WD/2020/7/S2A_36QWD_20200701_0_L2A/TCI.tif',
},
],
});
const layer = new TileLayer({ source });
const map = new Map({
target: 'map',
layers: [layer],
view: new View({
center: [0, 0],
zoom: 12,
}),
});
</script>
</html>Это не работает, потому что GeoTIFF.js пытается выполнить импорт из 'geotiff', который он не может найти. Я знаю, что мне, вероятно, придется пройти установку npm и каким-то образом связать зависимости, чтобы использовать GeoTIFF в таком шаблоне, как этот, но я новичок и, похоже, не могу осознать это. Я попытался создать пакет с помощью vite, но не смог заставить его работать.
Это мой исходный файл geotiff-entry.js:
import GeoTIFF from 'ol/source/GeoTIFF.js';
export default GeoTIFF;
А это vite.config.js
import { defineConfig } from 'vite';
import { resolve } from 'path';
export default defineConfig({
build: {
lib: {
entry: resolve(__dirname, 'src/geotiff-entry.js'),
name: 'GeoTIFF',
fileName: () => 'geotiff-bundle.js', // 👈 Force .js output
formats: ['es'],
},
rollupOptions: {
output: {
inlineDynamicImports: true,
},
},
},
});
Используя сгенерированный geotiff-bundle.js и импортируя в шаблон следующим образом:
import Map from 'https://cdn.jsdelivr.net/npm/ol@v10.6.0/Map.js';
import View from 'https://cdn.jsdelivr.net/npm/ol@v10.6.0/View.js';
import TileLayer from 'https://cdn.jsdelivr.net/npm/ol@v10.6.0/layer/WebGLTile.js';
import GeoTIFF from '{% static "js/geotiff-bundle.js" %}';
приводит к ошибке спецификатора в BaseVector.js при попытке 'импортировать RBush из 'rbush". Я не могу продвинуться дальше этого
Итак, если у кого-нибудь есть какие-либо советы о том, как реализовать GeoTIFF с помощью приложения django, это действительно помогло бы мне.