编译Angular应用程序后出现Leaflet-geotiff插件错误

Question

我面临的问题是，基于Angular 6编译我的应用程序后，我有以下错误

未捕获的ReferenceError：require未在main.js：3中定义，它链接到var GeoTIFF = require（“./ geotiff.js”）;

在official documentation说我应该实现followign依赖项来使用leaflet-geotiff插件：

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://unpkg.com/[email protected]/dist/main.js"></script>
<script src="https://unpkg.com/[email protected]/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>

所以我在我的qazxsw poi中添加了以下内容：

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"但它没有帮助。

Answer 1

在提供的示例中，看起来一切都很好，引用@types/node插件库及其依赖项除了行：leaflet-geotiff。对于Angular应用程序，需要导入"node_modules/geotiff/dist/geotiff.js"。

关于node_modules/geotiff/dist/geotiff.browserify.js文档还有一点，就geoTIFF层的哪些参数是强制性的而言似乎并不十分准确，例如leaflet-geotiff属性似乎是强制性的，没有提供它会显示以下错误：

无法读取null的属性'render'

以下是有关显示geoTIFF栅格数据的组件如何显示的示例：

renderer

这是一个

@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);
  }
}

（该示例改编自官方demo）

注意：在提供的示例中，库是通过Leaflet geoTIFF demo Modules而不是Global脚本引用的