Question

我遇到的问题是，在基于Angular 6编译应用程序之后，我出现了以下错误

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

在official documentation中，我应该实现Followign依赖关系以与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属性似乎是强制性的，而没有提供它显示以下错误：

无法读取null的属性“ 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);
  }
}

这里是 demo （示例摘自官方Leaflet geoTIFF demo）

注意：在提供的示例中，库是通过ES6引用的模块而不是全局脚本

编译Angular应用后，Leaflet-geotiff插件错误

1 个答案: