Ошибка плагина Leaflet-geotiff после компиляции приложения Angular

Question

Я столкнулся с проблемой, что после компиляции моего приложения на основе Angular 6 у меня появляется следующая ошибка

Uncaught ReferenceError: require не определен в main.js: 3 и он ссылается на var GeoTIFF =require ("./ geotiff.js");

В официальной документации сказано, что я должен реализовать подчиненные зависимости для работы с плагином leaflet-geotiff:

<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
<script src="https://unpkg.com/geotiff@0.4.1/dist/main.js"></script>
<script src="https://unpkg.com/plotty@0.2.0/src/plotty.js"></script>
<script src="leaflet-geotiff.js"></script>
<!-- Load any renderer you need -->
<script src="leaflet-geotiff-plotty.js"></script>
<script src="leaflet-geotiff-vector.js"></script>

Итак, я добавил следующие слова в мою angular.json:

"scripts": [
    "node_modules/leaflet/dist/leaflet.js",
    "node_modules/geotiff/dist/main.js",
    "node_modules/plotty/src/plotty.js",
    "node_modules/leaflet-geotiff/leaflet-geotiff.js",
    "node_modules/leaflet-geotiff/leaflet-geotiff-plotty.js"
]

Если я удалю "node_modules/geotiff/dist/main.js", ошибка исчезнет.Может быть, я неправильно внедряю?Как решить эту проблему?

Обновление Я также добавил @types/node, но это не помогло.

Answer 1

В приведенном примере, похоже, все в порядке со ссылкой на библиотеку плагинов leaflet-geotiff и ее зависимости, кроме строки: "node_modules/geotiff/dist/geotiff.js".Для приложения Angular * вместо этого необходимо импортировать node_modules/geotiff/dist/geotiff.browserify.js.

Есть еще один момент, касающийся документации leaflet-geotiff, который, кажется, не очень точный с точки зрения того, какие параметры являются обязательными для слоя geoTIFF, напримерrenderer свойство представляется обязательным, без предоставления ему отображается следующая ошибка:

Невозможно прочитать свойство 'render' с нулевым значением

Вот примеркак может выглядеть компонент для отображения растровых данных GeoTIFF:

@Component({
  selector: "app-map",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  ngOnInit() {
    const map = L.map("map").setView([-33, 147], 6);
    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
      maxZoom: 8,
      attribution:
        '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(map);

    const windSpeed = LeafletGeotiff.leafletGeotiff(
      "https://stuartmatthews.github.io/leaflet-geotiff/tif/wind_speed.tif",
      {
        band: 0,
        name: "Wind speed",
        renderer2: new LeafletGeotiff.LeafletGeotiff.Plotty({
          displayMin: 0,
          displayMax: 30,
          arrowSize: 20,
          clampLow: false,
          clampHigh: true,
          colorScale: "rainbow"
        })
      }
    ).addTo(map);

    const windDirection = LeafletGeotiff.leafletGeotiff(
      "https://stuartmatthews.github.io/leaflet-geotiff/tif/wind_direction.tif",
      {
        band: 0,
        name: "Wind direction",
        renderer: new LeafletGeotiff.LeafletGeotiff.VectorArrows({
          arrowSize: 20,
          displayMin: 0,
          displayMax: 6,
        })
      }
    ).addTo(map);
  }
}

Вот демо (пример адаптирован из официальной Leaflet geoTIFF demo )

Примечание: в предоставленном примере библиотеки ссылаются через ES6 Модули вместо глобальных сценариев