Я работаю над проектом Angular (ng-версия = 4.4.6). Мне нужна карта, которая будет работать без подключения. Я хотел бы попробовать jvectormap. Документация и все примеры, которые я нашел, показаны для Angular.js. Поскольку я не очень экспериментировал с Angular, я понятия не имею, как реализовать эту библиотеку и использовать ее в своем проекте.
Кто-нибудь когда-нибудь использовал его в проекте и мог показать мне путь?
Спасибо
Вы должны включить файлы jQuery и jVectorMap, как описано в официальной документации внутри вашего index.html. Затем внутри вашего компонента вы должны объявить jQuery, выполнив это просто с помощью декоратора @Component.
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/[email protected]/jquery-jvectormap.css"></link
<script src="https://cdn.jsdelivr.net/npm/[email protected]/jquery-jvectormap.min.js"></script>
Дело в том, что с angular 2 из-за машинописного текста вы можете легко использовать jQuery или чистый JS.
1) Импортируйте следующую библиотеку в свой угловой проект
"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) Импортируйте следующий файл vendor.ts в файл main.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) Поместите следующее в следующее на странице/компоненте, который вы хотите использовать на карте:
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' }
];
}
Примечание. Сначала вам необходимо импортировать jquery в файл angular.json, иначе вы получите ошибку jquery.
