如何在 angular 中实现 jvectormap

Question

我正在处理 Angular 项目 (ng-version=4.4.6)。我需要一张可以在没有连接的情况下工作的地图。我想试试 jvectormap。 Angular.js 显示了我找到的文档和每个示例。由于我在 Angular 方面的经验不多，我不知道如何实现这个库并在我的项目中使用它。

有没有人在项目中使用过它并能告诉我方法？

谢谢

Answer 1

您应该包括 jQuery 和 jVectorMap 文件，就像 index.html

中官方文档中描述的那样

然后在您的组件中，您必须通过 @Component 装饰器来声明 jQuery。

declare var jQuery: any;

然后你可以在里面通过例子ngAfterViewInit()添加这段代码

ngAfterViewInit(){
  jQuery('#world-map').vectorMap();
}

在你的组件 html 文件中添加这个

<div id="world-map" style="width: 600px; height: 400px"></div>

在你的index.html

<link href="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/jquery-jvectormap.css"></link
<script src="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/jquery-jvectormap.min.js"></script>

问题是 angular 2 由于打字稿你可以很容易地使用 jQuery 或纯 JS

Answer 2

1)在您的 angular 项目中导入以下库

 "ika.jvectormap": "themicon/ika.jvectormap"

2) 将上面的内容放在 package.json 和运行 npm install 中。 3) 然后在 src 中创建一个文件 vendor.ts 并在其中粘贴以下语句：

import '../node_modules/ika.jvectormap/jquery-jvectormap-1.2.2.min.js';
import '../node_modules/ika.jvectormap/jquery-jvectormap-world-mill-en.js';
import '../node_modules/ika.jvectormap/jquery-jvectormap-us-mill-en.js';

4) 在 main.ts 文件中导入以下 vendor.ts 文件：

import './vendor.ts';

5) 在style.scss文件中导入样式文件：

@import '~ika.jvectormap/jquery-jvectormap-1.2.2.css';
@import './assets/styles/vector-map';

6) 在您的资产文件夹中创建自定义 ventor-map.scss 文件并粘贴以下内容：

  $vmap-label-bg: #313232;
  $vmap-zoom-ctrl-bg: #515253;

  body {

    .jvectormap-label {
     position: absolute;
     display: none;
     border: solid 1px $vmap-label-bg;
     border-radius: 2px;
     background: $vmap-label-bg;
     color: white;
     padding: 3px 6px;
     opacity: 0.9;
     z-index: 1100;
    }

 .jvectormap-zoomin, .jvectormap-zoomout {
     position: absolute;
     left: 10px;
     width: 22px;
     height: 22px;
     border-radius: 2px;
     background: $vmap-zoom-ctrl-bg;
     padding: 5px;
     color: white;
     cursor: pointer;
     line-height: 10px;
     text-align: center;
 }

 .jvectormap-zoomin {
     top: 10px;
 }

 .jvectormap-zoomout {
     top: 30px;
 }
}

7) 创建指令为 vector-map.ts 并在 app.module.ts

中声明

import { OnInit, Directive, Input, ElementRef, OnDestroy } from '@angular/core';
declare var $: any;
@Directive({
 selector: '[vectormap]'
})
export class VectormapDirective implements OnInit, OnDestroy {
@Input() mapHeight: number;
@Input() mapName: any;
@Input() mapOptions: any;
@Input() seriesData: any;
@Input() markersData: any;
$element: any;
constructor(public element: ElementRef) { }

ngOnInit() {

    this.$element = $(this.element.nativeElement);
    this.$element.css('height', this.mapHeight);

    if (!this.$element.length || !this.$element.vectorMap) {
        return;
    }

    this.$element.vectorMap({
        map: this.mapName,
        backgroundColor: this.mapOptions.bgColor,
        zoomMin: 1,
        zoomMax: 8,
        zoomOnScroll: false,
        regionStyle: {
            initial: {
                'fill': this.mapOptions.regionFill,
                'fill-opacity': 1,
                'stroke': 'none',
                'stroke-width': 1.5,
                'stroke-opacity': 1
            },
            hover: {
                'fill-opacity': 0.8
            },
            selected: {
                fill: 'blue'
            },
            selectedHover: {
            }
        },
        focusOn: { x: 0.4, y: 0.6, scale: this.mapOptions.scale },
        markerStyle: {
            initial: {
                fill: this.mapOptions.markerColor,
                stroke: this.mapOptions.markerColor
            }
        },
        onRegionLabelShow: (e, el, code) => {
            if (this.seriesData && this.seriesData[code]) {
                el.html(el.html() + ': ' + this.seriesData[code] + ' visitors');
            }
        },
        markers: this.markersData,
        series: {
            regions: [{
                values: this.seriesData,
                scale: this.mapOptions.scaleColors,
                normalizeFunction: 'polynomial'
            }]
        },
    });
}

ngOnDestroy() {
    this.$element.vectorMap('get', 'mapObject').remove();
}}

8) 在page/component你要使用的地图中放置以下内容：

In.html file:

 <div class="col-xs-12">
      <div vectormap [mapHeight]="700" 
      [mapName]="mapName" 
      [seriesData]="seriesData" 
      [markersData]="markersData" 
      [mapOptions]="mapOptions" ></div>

在 .ts 文件中：

  mapName: string;
  seriesData: any;
  markersData: any;
  mapOptions: any;
   defaultColors: any = {
   markerColor: '#23b7e5',      // the marker points
   bgColor: 'transparent',      // the background
   scaleColors: ['#878c9a'],    // the color of the region in the serie
   regionFill: '#bbbec6'       // the base region color
  };


 constructor() {
this.mapName = 'world_mill_en';

this.mapOptions = {
  markerColor: this.defaultColors.markerColor,
  bgColor: this.defaultColors.bgColor,
  scale: 1,
  scaleColors: this.defaultColors.scaleColors,
  regionFill: this.defaultColors.regionFill
};

this.seriesData = {
  'CA': 11100,   // Canada
  'DE': 2510,    // Germany
  'FR': 3710,    // France
  'AU': 5710,    // Australia
  'GB': 8310,    // Great Britain
  'RU': 9310,    // Russia
  'BR': 6610,    // Brazil
  'IN': 7810,    // India
  'CN': 4310,    // China
  'US': 839,     // USA
  'SA': 410      // Saudi Arabia
};

this.markersData = [
  { latLng: [41.90, 12.45], name: 'Vatican City' },
  { latLng: [43.73, 7.41], name: 'Monaco' },
  { latLng: [-0.52, 166.93], name: 'Nauru' },
  { latLng: [-8.51, 179.21], name: 'Tuvalu' },
  { latLng: [7.11, 171.06], name: 'Marshall Islands' },
  { latLng: [17.3, -62.73], name: 'Saint Kitts and Nevis' },
  { latLng: [3.2, 73.22], name: 'Maldives' },
  { latLng: [35.88, 14.5], name: 'Malta' },
  { latLng: [41.0, -71.06], name: 'New England' },
  { latLng: [12.05, -61.75], name: 'Grenada' },
  { latLng: [13.16, -59.55], name: 'Barbados' },
  { latLng: [17.11, -61.85], name: 'Antigua and Barbuda' },
  { latLng: [-4.61, 55.45], name: 'Seychelles' },
  { latLng: [7.35, 134.46], name: 'Palau' },
  { latLng: [42.5, 1.51], name: 'Andorra' }
  ];
  }

注意：您需要先在 angular.json 文件中导入 jquery 否则您将得到 jquery 错误

如何在 angular 中实现 jvectormap

How to implement jvectormap in angular

angular

jvectormap