Как интегрировать OpenLayers и jsts в приложение Angular? (с набором текста)

Я создал проект Angular 5, в котором я установил с помощью npm модуль openlayers и модуль jsts. Я сделал следующие шаги:

  1. ng новый testProject
  2. cd / testProject
  3. npm install - сохранить 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';

переменная определена правильно, но ввод не работает.

Как я могу импортировать и что набор текста работает?

Спасибо


person Martín C.    schedule 19.02.2018    source источник


Ответы (1)


Не используйте пакет npm openlayers. Для проектов ES6 есть пакет ol.

Процитирую себя, цитируя ol:

На странице NPM объясняется разница. Не начинайте проект с openlayers, он использует закрытие, чего вы, скорее всего, не станете. ol упакован как современные модули ES2015. Это позволяет вашему компилятору (например, webpack) упаковывать только те вещи, которые вы действительно используете.

Для использования с webpack, Rollup, Browserify или другими сборщиками модулей установите пакет ol:

npm install ol

Для использования с Closure Library (редко) установите пакет openlayers и прочтите руководство.

npm install openlayers

Для поддержки JSTS машинописного текста: Определения DefinitionsTyped являются неполными и, по-видимому, являются "браузерной версией". "структура модуля файла отличается от исходной структуры.

Если вы действительно хотите иметь типы, добавьте версию браузера в свой проект (например, добавив jsts в виде файла JS в свой index.html). Он определяет глобальную переменную jsts. Затем объявите jsts в своем коде, чтобы получить типы:

declare var jsts: jsts;
person dube    schedule 20.02.2018
comment
Спасибо, я понял закрытие. Однако, когда я добавляю jsts.js в index.html, я не могу определить declare var jsts: jsts;, он выдает ошибку компиляции, потому что компилятор не может найти имя jsts. Если я использую declare var jsts: any;, он работает, но я теряю типы. - person Martín C.; 21.02.2018
comment
Думаю, я ошибся здесь, определив его как глобальный, но для этого есть дополнительные шаги: stackoverflow.com/a/30227263/304179 - person dube; 21.02.2018