Свойство Draw не существует для типа typeof Control.

Я пытаюсь реализовать компонент карты с листовкой и другими плагинами для листовок. Проблема в том, что другие плагины по какой-то причине не работают с TypeScript.

Например, я не могу скомпилировать код с помощью плагина для рисования листовок и получаю сообщение об ошибке:

Свойство Draw не существует для типа typeof Control.

mapbox.component.ts

import { DataService } from "../data-service.service";
import { Component, OnInit } from '@angular/core';


import * as $ from 'jquery';
/// <reference types="leaflet" />
/// <reference types="leaflet-draw" />

declare var require: any


@Component({
    selector: 'app-mapbox',
    templateUrl: './mapbox.component.html',
    styleUrls: ['./mapbox.component.css']
})

export class MapboxComponent implements OnInit {

    constructor(private dataService: DataService) { }
    // helper flags
    map: L.Map = null;
    aggreagte: boolean = false;

    ngOnInit() {
        // Prepare map
        this.map = L.map('resultmap').setView([51.505, -0.09], 1);
        //
        L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
            attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
            maxZoom: 18,
            id: 'mapbox.streets',
            accessToken: '...'
        }).addTo(this.map);

        var drawnItems = L.featureGroup();
        this.map.addLayer(drawnItems);
        var control = new L.Control.Draw();
        ...

угловой-cli.json

"apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "styles": [
        "styles.css",
        "../node_modules/leaflet/dist/leaflet.css",
        "../node_modules/leaflet-markercluster/MarkerCluster.css",
        "../node_modules/leaflet-draw/dist/leaflet.draw.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/leaflet/dist/leaflet.js",
        "../node_modules/leaflet-markercluster/leaflet.markercluster.js",
        "../node_modules/leaflet-draw/dist/leaflet.draw.js",
        "../node_modules/chart.js/dist/Chart.bundle.min.js"
      ],
      "environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ]
...

tsconfig.json

"compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "outDir": "../dist/out-tsc-e2e",
    "sourceMap": true,
    "target": "es5",
    "files":[
      "../node_modules/@types/leaflet-draw/index.d.ts"
    ],
    "typeRoots": [
      "../node_modules/@types"
    ],
    "types":[
      "jquery",
      "leaflet",
      "leaflet-draw",
      "leaflet-markercluster"
    ]
  }

typescript angular angular-cli leaflet leaflet.draw
person aclowkay    schedule 06.03.2017    source источник

Ответы (2)


arrow_upward
8
arrow_downward

Я решил проблему, импортировав leaflet-draw

import 'leaflet-draw';

Не уверен, почему это не было импортировано tsconfig, но да, это работает!

person aclowkay    schedule 06.03.2017
comment
Это потому, что вы импортируете файл определения типа. Это не компилируется в настоящий JS, а является всего лишь инструментом, позволяющим безопасно писать код. - person Poul Kruijt; 06.03.2017
comment
@PierreDuc О. Любые ссылки для дальнейшего чтения? Я хочу лучше понять, как это работает. Я попробовал тот же трюк для leaflet-markercluster - не повезло. - person aclowkay; 06.03.2017
comment
@aclokay Связь Google с Angular и TypeScript. Материала должно быть достаточно, чтобы вы поняли проблему, с которой столкнулись. Для начала: github.com/angular/angular-cli/wiki /stories-сторонняя-библиотека - person Yuri; 06.03.2017
comment
Куда вы положили импорт «листовку-розыгрыш»; в app.module.ts или в компоненте, в котором вы создаете карту? - person ackuser; 15.03.2017
comment
@ackuser компонент - person aclowkay; 15.03.2017
comment
У меня есть точно такой же пример, но он все еще не работает. Я получаю, что L.Control.Draw не является конструктором, поэтому он не получает определение машинописного текста, и я понятия не имею, почему. tsc -v Версия 2.2.1 ng -v @angular/cli: 1.0.0-rc.0 node: 6.2.0 os: linux x64 Я понятия не имею, почему, ни с leaflet-markercluster. Не могли бы вы поделиться своим кодом или привести полный пример? - person ackuser; 15.03.2017
comment
@ackuser Пример завершен с точки зрения вещей, связанных с машинописным текстом и угловыми вещами. Я бы предложил открыть новую тему и выложить конфигурацию вашего проекта. Проблема может быть по разным причинам - person aclowkay; 15.03.2017

arrow_upward
5
arrow_downward

Спасибо @aclokay за понимание. Я бы завершил этот ответ, добавив, что вы также не должны забывать изменить стандартный импорт листовок. Например :

// import * as L from 'leaflet';  
// --> Doesn't work : Property 'Draw' does not exist on type 'typeof Control'.
declare const L: any; // --> Works
import 'leaflet-draw';

export function drawPlugin(map: any) {
  const drawnItems = L.featureGroup().addTo(map);

  const drawControl = new L.Control.Draw({
    edit: {
      featureGroup: drawnItems,
    },
    draw: {
      polygon: false,
      polyline: false,
      marker: false,
      circlemarker: false
    }
  });
  map.addControl(drawControl);

  map.on(L.Draw.Event.CREATED, function (event) {
    const layer = event.layer;

    drawnItems.addLayer(layer);
  });
}
person Alex Beugnet    schedule 04.09.2017
comment
Для лучшего понимания полный пример использования Angular-CLI, библиотеки листовок и ее плагинов доступен здесь: github.com/consbio/Leaflet.ZoomBox/issues/15 - person Alex Beugnet; 05.09.2017