获取 Kendo UI、DataViz 地图和 Angular 2 协同工作

Question

我在一个项目中使用 Kendo UI & Angular 2，但我似乎无法让地图小部件与 [= 中的 shapefile 一起使用51=] 2.

看来我必须与 jQuery 集成，因为地图组件尚未列为 Angular 2 组件。因此，我已按照概述的说明进行操作 here。但是，它似乎仍然不起作用。这是我目前拥有的：

exampe.module.ts

...
import "@progress/kendo-ui";
...

示例-map.html

<div #kendoMap style="height: 1000px;">
</div>

示例-map.component.ts:

import { AfterViewInit, Component, ElementRef, OnDestroy, ViewChild } from '@angular/core';

declare var kendo: any;

@Component({
  selector: 'example-map',
  templateUrl: './example-map.html'
})
export class ExampleComponent implements AfterViewInit, OnDestroy {
  @ViewChild('kendoMap')
  kendoMap: ElementRef;

  constructor () { }

  ngAfterViewInit() {
    const element = kendo.jQuery(this.kendoMap.nativeElement);
    // This line throws an error
    element.kendoMap({
        controls: {
            attribution: false,
            navigator: false,
            zoom: false
        },
        zoom: 7,
        center: [32.7767, 96.7970],
        layers: [
            {
                type: 'tile',
                zIndex: -1,
                urlTemplate: "https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png"
            },
            {
                type: 'shape',
                style: { fill: { opacity: 0.7 } }
                // shapefile layer data will be added here later by ajax
            }
        ],
        markers: []
    });
  }

  ngOnDestroy() { kendo.destroy(this.kendoMap.nativeElement); }
}

这是一个错误：

TypeError: Function has non-object prototype 'undefined' in instanceof check。

为了解决这个问题，我在我的 index.html 文件中包含了他们使用的 jQuery 版本：

<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"
          integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>

但现在它拒绝访问 'width' 未定义的内容。

ExampleComponent.html ERROR TypeError: Cannot read property 'width' of undefined
    at init.translate (http://localhost:3000/vendor.bundle.js:89908:98)
    at init.translate (http://localhost:3000/vendor.bundle.js:262525:25)
    at init._translateSurface (http://localhost:3000/vendor.bundle.js:224872:31)
    at init._reset (http://localhost:3000/vendor.bundle.js:224758:19)
    at init.proxy (http://localhost:3000/vendor.bundle.js:52589:13)
    at init.trigger (http://localhost:3000/vendor.bundle.js:4780:34)
    at init.window.kendo.window.kendo.devtools.kendo.ui.Widget.trigger (eval at _translateSurface (http://localhost:3000/vendor.bundle.js:224869:27), <anonymous>:587:33)
    at init._reset (http://localhost:3000/vendor.bundle.js:337450:19)

有没有人以前玩过这个或者知道使用 Kendo 地图和 Angular 2+ 的好教程？

Answer 1

问题在于组件呈现的顺序与 DOM 中的顺序。将初始化移动到 jQuery 块中解决了问题，如下所示：

ngAfterViewInit() {
    kendo.jQuery(() => {
      const element = kendo.jQuery(this.kendoMap.nativeElement);
      ...
    });
}

获取 Kendo UI、DataViz 地图和 Angular 2 协同工作

Getting Kendo UI, DataViz Map, & Angular 2 To Work Together

kendo-dataviz

kendo-ui-angular2