内容隐藏

在本教程中，我们将看到如何在不使用任何库的情况下创建Angular 6 Custom USA Map。也将介绍一些使其可重用的功能，如下所述：

话题

生成角度应用
创建共享地图模块
使用共享地图模块
设置选定状态

生成角度应用

使用命令行，我们将使用您的适当名称生成新的angular应用程序。

重击


ng new custom-map-module

注意：
我们将使用平面结构模块：链接

创建共享地图模块

让我们创建一个名为的新目录 共享 您可以在其中添加共享模块，即地图模块。

重击


mkdir  共享 
cd  共享 
ng g m usmap

➮创建组件

将通过创建名为的单独文件夹来分离组件 组件 然后我们创建一个us-map组件文件夹，其中所有 HTML，CSS，TS 文件将可用。

重击


mkdri 组件
cd 组件

现在将使用角度CLI生成地图组件（命令）

重击


ng g c us-map

➮设置SVG地图

现在我们将在我们的SVG结构中实现 us-map.component.html file. Each SVG path will contain events mouseenter, mouseleave, and attribute id

推荐链接： //simplemaps.com/resources/svg-us

us-map.component.html

➮ Declare `@Input()` Params

让我们创建所需的输入参数以与父组件进行通信

us-map.component.ts


  import { Component, OnInit, SimpleChanges, OnChanges, Input } from '@angular/core';
  import { MapStates } from './map.service'; // //stackblitz.com/edit/usmap?embed=1&file=src/app/sl-map/components/us-map/map.service.ts&view=editor
  @Component({
    selector: 'app-us-map',
    templateUrl: './us-map.component.html',
    styleUrls: ['./us-map.component.css']
  })
  export class UsMapComponent implements OnChanges, OnInit {
    @Input()
    ids: any;
    @Input()
    enableTooltip: boolean;
    @Input()
    toolTipObject: any;
    @Input()
    colors:any = {
      unfill: '#b6b6b6',  // use the IE supported color code i.e HEX, REGB etc
      fill: '#518a38'     // use the IE supported color code i.e HEX, REGB etc
    }
    showToolTip: boolean;
    change: any;
    constructor(public mapStates: MapStates){}
    ngOnInit(){
    }
    ...
  }

➮突出显示所选状态

现在，在更改时，我们会将选中的状态设置为突出显示，因此无论何时更改数据模型，选中的状态也都应反映（即更改）。

us-map.component.ts


  ...
  export class UsMapComponent implements OnChanges, OnInit {
    ...
    ngOnChanges(changes: SimpleChanges){
     this.setUnfillColor();
     this.change = JSON.parse(JSON.stringify(changes.ids))
     this.change.currentValue.forEach(data => {
       document.getElementById(data.code).style.fill = this.colors.fill;
     });
    }
    // gets the colors from @input param and set all the bg color to given color
    setUnfillColor(){
      Object.keys(this.mapStates.statelist).forEach(id => {
        document.getElementById(id).style.fill = this.colors.unfill;
      });
    }
    ...
  }

➮选定的状态悬停功能

现在，将通过检查输入法中的条件来设置工具提示数据，并将表格式的对象数据设置为键和值。也将设置工具提示的位置。
对于所有此系统，我们将使用HTML中的两个事件，即：


  (mouseenter)="mouseEnter( id, $event,  countryCode)"
  (mouseleave)="mouseLeave( id, $event,  countryCode)"

并且还将仅显示所选状态的工具提示。


...
mouseEnter(ttid, e, id){
     document.getElementById(id).style['stroke-width']= "1.999999";
     if(this.enableTooltip){
       this.toolTipObject = this.createToolTipData(event, id);
       this.positionToolTip(e, ttid);
     }
 }
 mouseLeave(ttid, e, id){
     document.getElementById(id).style['stroke-width']= "0.970631";
     if(this.enableTooltip){
       this.showToolTip = false;
       this.toolTipObject = {};
     }
 }
 createToolTipData(event,id){
     let selectedstate  = JSON.parse(JSON.stringify(this.change.currentValue));
     selectedstate = selectedstate.filter(data => {
             return data.code === id
           })[0];
     if(selectedstate && selectedstate.code === id){
       this.showToolTip = true;
       selectedstate['state'] = this.mapStates.statelist[id];
       delete selectedstate.code;
       return Object.keys(selectedstate).map((key, value) => {
         return [key, selectedstate[key]];
       });
     }
 }
 positionToolTip(e, ttid){
   document.getElementById(ttid).style.left = `${e.clientX+2}px`;
   document.getElementById(ttid).style.top = `${e.clientY+2}px`;
 }
 ...

tip工具提示定制设计

让我们创建工具提示设计，因为它的HTML已经在 us-map.component.ts

us-map.component.html


...

<div id="SLTP" data-id="SLTP"  data-name="SLTP" style="top:0px;left:0px;position:fixed">
    <div *ngIf='showToolTip && enableTooltip' style="background:#1f1e1de6;padding:4px;border-radius:4px;width:100%">
    <table>
      <tr *ngFor="let item of toolTipObject">
        <td *ngFor="let pair of item">{{ pair }}</td>
      </tr>
    </table>
  </div>
</div>

让我们放一些CSS使其更具可读性

us-map.component.scss


  .map-tooltip-table{
    background: #33312e;
    padding: 4px;
    border-radius: 4px;
    width: 15%;
  }
  table {
    border-collapse: collapse;
    width: 100%
  }
  table tr td{
    border: 1px solid #fff;
    padding: 3px 5px 3px 5px;
    text-transform: capitalize;
    color: #fff
  }

使用共享地图模块

现在，将共享地图模块导入另一个将要使用的模块中

app.module.ts


  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import {SlMapModule } from './sl-map/sl-map.module'
  import { AppComponent } from './app.component';

  @NgModule({
    imports:      [ BrowserModule, SlMapModule],
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ]
  })
  export class AppModule { }

设置选定状态

现在将使用地图模块并设置所选状态，从中将其传递给地图模块。

app.component.ts


import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  selectedState: any = [
    {'code': 'ND', 'users': 324, 'org type' :'Service Provider'},
    {'code': 'WA', 'users': 454, 'org type' :'Manufacturer'},
    {'code':'AZ', 'users': 234, 'org type' :'Service Provider'},
    {'code' : 'AK', 'users': 544, 'org type' :'Manufacturer'},
    {'code' : 'CT', 'users': 544, 'org type' :'Manufacturer'},
    {'code' : 'DC', 'users': 544, 'org type' :'Manufacturer'},
  ];
}

app.component.html


<div style="max-width: 80%; text-align:center">
  <app-us-map [ids]='selectedState' [enableTooltip]='true' [colors]="{fill:'#518a38', unfill: '#30973e21'}"></app-us-map>
</div>

注意： 对于所有浏览器兼容性使用，IE支持的十六进制颜色代码不会破坏所有浏览器的功能

查找有关的更多文章角2+.

Angular 6 Custom USA Map模块– No Library

话题