如何在Angular应用程序中集成OpenLayers和jsts？ （打字）

Question

我创建了一个Angular 5项目，其中我通过npm安装了openlayers模块和jsts模块。我做了以下步骤：

1. ng new testProject
2. cd / testProject
3. npm install --save openlayers
4. npm install --save jsts
5. npm install --save _at_types / openlayers
6. npm install --save _at_types / jsts

这是我的app.component：

import { Component, OnInit } from '@angular/core';
import * as ol from 'openlayers';
import * as jsts from 'jsts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  ngOnInit() {
    console.log('OPENLAYERS: ', ol);
    console.log('JSTS: ', jsts);
  }
}

这导致未定义的jsts变量。

如果我单独导入类，例如：

import Coordinate from 'jsts/org/locationtech/jts/geom/Coordinate';

变量已正确定义，但输入无效。

如何导入和输入有效？

由于

Answer 1

请勿使用npm包openlayers。对于ES6项目，有一个包ol。

To quote myself quoting ol：

  

NPM page解释了差异。不要用它开始一个项目   openlayers，它使用闭包，你很可能不会。 ol是   打包为'艺术状态'ES2015模块。它使您的编译器（例如   webpack）只包装你实际使用的东西。

     

    

要与webpack，Rollup，Browserify或其他模块捆绑包一起使用，请安装ol包：

         

npm install ol

         

要与Closure Library（罕见）一起使用，请安装openlayers包并阅读教程。

         

npm install openlayers

  

对于JSTS的打字稿支持：The DefinitelyTyped definitions are incomplete，显然“浏览器版本”文件的模块结构与源结构不同。

如果你真的想拥有类型，请将浏览器版本添加到项目中（例如，将jsts作为JS文件添加到index.html）。它定义了全局jsts变量。然后在代码中声明jsts以获取类型：

declare var jsts: jsts;