Geographic Shape Series의 Web Components Shape 스타일링

이 항목에서는 사용자 지정 스타일을 IgcGeographicShapeSeriesComponent Web Components IgcGeographicMapComponent에 적용하는 방법에 대해 설명합니다.

지리적 도형 계열의 Web Components 도형 스타일 지정 예제

EXAMPLE

MapShapeStyleUtility.ts

WorldUtils.ts

TS

HTML

CSS

/* tslint:disable:prefer-const */

import { Style } from 'igniteui-webcomponents-core';

export abstract class ShapeStyling {
  public defaultStroke = 'black';
  public defaultFill = 'gray';
  public defaultThickness = 0.5;
  public defaultOpacity = 1.0;
  public defaultStyle = new Style();

  constructor() {
    this.defaultStyle = new Style();
    this.defaultStyle.stroke = this.defaultStroke;
    this.defaultStyle.fill = this.defaultFill;
    this.defaultStyle.opacity = this.defaultOpacity;
    this.defaultStyle.strokeThickness = this.defaultThickness;
  }

  public abstract generate(record: any): Style;

  public getValue(itemMemberPath: string, item: any): any {
    let itemValue = null;

    if (item.fieldValues !== undefined) { // .hasOwnProperty("fieldValues")) {
      if (item.fieldsNames.indexOf(itemMemberPath) >= 0) {
        itemValue = item.fieldValues[itemMemberPath];
      } else {
        console.log('WARNING: ShapefileRecord does not have ' + itemMemberPath + ' in fieldValues property');
      }
    } else if (item.hasOwnProperty(itemMemberPath)) {
      itemValue = item[itemMemberPath];
    } else {
      console.log('WARNING: Shape data item does not have ' + itemMemberPath + ' property');
    }
    return itemValue;
  }
}

export class ShapeRandomStyling extends ShapeStyling {

  public shapeThickness = 0.5;
  public shapeOpacity = 1.0;
  public shapeStrokeColors = ['black'];
  public shapeFillColors   = ['red', 'orange', 'yellow'];

  public styleMappings = new Map<string, Style>();

  public generate(record: any): Style {
    const id = record.fieldValues.Name || this.getRandomValue(0, 1000);

    if (this.styleMappings.has(id)) {
      return this.styleMappings.get(id);
    } else {
      const randStroke = this.getRandomItem(this.shapeStrokeColors);
      const randFill = this.getRandomItem(this.shapeFillColors);
      const shapeStyle = new Style();
      shapeStyle.stroke = this.shapeStrokeColors[randStroke];
      shapeStyle.fill = this.shapeFillColors[randFill];
      shapeStyle.opacity = this.shapeOpacity;
      shapeStyle.strokeThickness = this.shapeThickness;
      this.styleMappings.set(id, shapeStyle);
      return shapeStyle;
    }
  }

  public getRandomValue(min: number, max: number): number {
      return Math.round(min + (Math.random() * (max - min)));
  }
  public getRandomItem(array: any[]): any {
    return this.getRandomValue(0, array.length - 1);
  }
}

export class ShapeScaleStyling extends ShapeStyling {

  public shapeThickness = 0.5;
  public shapeOpacity = 1.0;
  public shapeStrokeColors = ['black'];
  public shapeFillColors   = ['red', 'orange', 'yellow'];

  public itemMemberPath = '';
  public itemMinimumValue = 0;
  public itemMaximumValue = 1000;

  public isLogarithmic = true;

  public generate(record: any): Style {

    let itemValue = this.getValue(this.itemMemberPath, record);
    if (itemValue === null) {
      return this.defaultStyle;
    }

    let fillColor = this.defaultFill;
    let strokeColor = this.defaultStroke;
    let scaleValue = this.getScaledValue(itemValue);

    if (!Number.isNaN(scaleValue)) {
      let fillIndex = Math.round(scaleValue * (this.shapeFillColors.length - 1));
      let strokeIndex = Math.round(scaleValue * (this.shapeStrokeColors.length - 1));
      fillColor = this.shapeFillColors[fillIndex];
      strokeColor = this.shapeStrokeColors[strokeIndex];
    }

    const shapeStyle = new Style();
    shapeStyle.fill = fillColor;
    shapeStyle.stroke  = strokeColor;
    shapeStyle.strokeThickness = this.shapeThickness;
    shapeStyle.opacity = this.shapeOpacity;
    return shapeStyle;
  }

  public getScaledValue(value: number): number {

      if (!Number.isFinite(value) || Number.isNaN(value)) { return Number.NaN; }

      let min = !Number.isFinite(this.itemMinimumValue) || Number.isNaN(this.itemMinimumValue) ? 0 : this.itemMinimumValue;
      let max = !Number.isFinite(this.itemMaximumValue) || Number.isNaN(this.itemMaximumValue) ? 1000 : this.itemMaximumValue;

      if (value < min || value > max) { return Number.NaN; }

      if (this.isLogarithmic) {
        return this.getLogarithmicValue(min, max, value);
      } else {
        return this.getLinearValue(min, max, value);
      }
  }

  public getLogarithmicValue(min: number, max: number, value: number) {
      if (!Number.isFinite(value)) { return Number.NaN; }

      let newMin = Math.log10(min);
      let newMax = Math.log10(max);
      let newVal = Math.log10(value);

      if (!Number.isFinite(newMin)) { newMin = 0.0; }
      if (!Number.isFinite(newMax)) { newMax = 1000; }

      if (newVal < 0) { newVal = 0.0; }

      return this.getLinearValue(newMin, newMax, newVal);
  }

  public getLinearValue(min: number, max: number, value: number) {

      if (!Number.isFinite(value)) { return Number.NaN; }

      // if the value is outside the range
      if (value < min || value > max) { return Number.NaN; }

      let scaledValue = (value - min) / (max - min);
      return scaledValue;
  }

}

export class ShapeRangeStyling extends ShapeStyling {

  public itemMemberPath = '';
  public ranges: ShapeRange[] = [];

  constructor() {
    super();
    this.ranges.push({ minimum: 0, maximum: 50, fill: 'yellow'} );
    this.ranges.push({ minimum: 0, maximum: 100, fill: 'red'} );
  }

  public generate(record: any): Style {
    let itemValue = this.getValue(this.itemMemberPath, record);
    if (itemValue === null) {
      return this.defaultStyle;
    }

    for (const range of this.ranges) {
      if (range.minimum <= itemValue && itemValue < range.maximum) {
        const shapeStyle = new Style();
        shapeStyle.opacity = range.opacity || this.defaultOpacity;
        shapeStyle.fill    = range.fill || this.defaultFill;
        shapeStyle.stroke  = range.stroke || this.defaultStroke;
        shapeStyle.strokeThickness = range.strokeThickness || this.defaultThickness;
        return shapeStyle;
      }
    }
    return this.defaultStyle;
  }
}

export class ShapeRange {

  public minimum: number;
  public maximum: number;

  public opacity?: number;
  public fill: string;
  public stroke?: string;
  public strokeThickness?: number;

}

export class ShapeComparisonStyling extends ShapeStyling {

  public itemMemberPath = '';
  public itemMappings: ShapeComparison[] = [];

  public generate(record: any): Style {

    let itemValue = this.getValue(this.itemMemberPath, record);
    if (itemValue === null || itemValue === "") {
      return this.defaultStyle;
    }

    for (const mapping of this.itemMappings) {
      if (mapping.itemValue === itemValue) {
        const shapeStyle = new Style();
        shapeStyle.opacity = mapping.opacity || this.defaultOpacity;
        shapeStyle.fill    = mapping.fill || this.defaultFill;
        shapeStyle.stroke  = mapping.stroke || this.defaultStroke;
        shapeStyle.strokeThickness = mapping.strokeThickness || this.defaultThickness;
        return shapeStyle;
      }
    }

    return this.defaultStyle;
  }
}

export class ShapeComparison {
  public itemValue: string;

  public opacity?: number;
  public fill: string;
  public stroke?: string;
  public strokeThickness?: number;
}
tsコピー

export class WorldUtils {

    // calculate geo-paths between two locations using great circle formula
    public static calcPaths(origin: any, dest: any): any[] {
        let interval = 200;
        let paths: any[] = [[]];
        let pathID = 0;
        let distance = this.calcDistance(origin, dest);
        if (distance <= interval) {
            paths[pathID].push({ x: origin.lon, y: origin.lat });
            paths[pathID].push({ x: dest.lon, y: dest.lat });
        } else {
            let current = origin;
            let previous = origin;

            for (let dist = interval; dist <= distance; dist += interval)
            {
                previous = current
                paths[pathID].push({ x: current.lon, y: current.lat });

                let bearing = this.calcBearing(current, dest);
                current = this.calcDestination(current, bearing, interval);
                // ensure geo-path wrap around the world through the new date-line
                if (previous.lon > 150 && current.lon < -150) {
                    paths[pathID].push({ x: 180, y: current.lat });
                    paths.push([]);
                    pathID++
                    current = { lon: -180, lat: current.lat }
                } else if (previous.lon < -150 && current.lon > 150) {
                    paths[pathID].push({ x: -180, y: current.lat });
                    paths.push([]);
                    pathID++
                    current = { lon: 180, lat: current.lat }
                }
            }
            paths[pathID].push({ x: dest.lon, y: dest.lat });
        }
        return paths;
    }

    // calculate bearing angle between two locations
    public static calcBearing(origin: any, dest: any): number
    {
        origin = this.toRadianLocation(origin);
        dest = this.toRadianLocation(dest);
        let range = (dest.lon - origin.lon);
        let y = Math.sin(range) * Math.cos(dest.lat);
        let x = Math.cos(origin.lat) * Math.sin(dest.lat) -
                Math.sin(origin.lat) * Math.cos(dest.lat) * Math.cos(range);
        let angle = Math.atan2(y, x);
        return this.toDegreesNormalized(angle);
    }

    // calculate destination for origin location and travel distance
    public static calcDestination(origin: any, bearing: number, distance: number): any {
        let radius = 6371.0;
        origin = this.toRadianLocation(origin);
        bearing = this.toRadians(bearing);
        distance = distance / radius; // angular distance in radians

        let lat = Math.asin(Math.sin(origin.lat) * Math.cos(distance) +
                       Math.cos(origin.lat) * Math.sin(distance) * Math.cos(bearing));
        let x = Math.sin(bearing) * Math.sin(distance) * Math.cos(origin.lat);
        let y = Math.cos(distance) - Math.sin(origin.lat) * Math.sin(origin.lat);
        let lon = origin.lon + Math.atan2(x, y);
        // normalize lon to coordinate between -180º and +180º
        lon = (lon + 3 * Math.PI) % (2 * Math.PI) - Math.PI;

        lon = this.toDegrees(lon);
        lat = this.toDegrees(lat);

        return { lon: lon, lat: lat };
    }

    // calculate distance between two locations
    public static calcDistance(origin: any, dest: any): number {
        origin = this.toRadianLocation(origin);
        dest = this.toRadianLocation(dest);
        let sinProd = Math.sin(origin.lat) * Math.sin(dest.lat);
        let cosProd = Math.cos(origin.lat) * Math.cos(dest.lat);
        let lonDelta = (dest.lon - origin.lon);

        let angle = Math.acos(sinProd + cosProd * Math.cos(lonDelta));
        let distance = angle * 6371.0;
        return distance; // * 6371.0; // in km
    }

    public static toRadianLocation(geoPoint: any): any {
        let x = this.toRadians(geoPoint.lon);
        let y = this.toRadians(geoPoint.lat);
        return { lon: x, lat: y };
    }

    public static toRadians(degrees: number): number
    {
        return degrees * Math.PI / 180;
    }

    public static toDegrees(radians: number): number {
        return (radians * 180.0 / Math.PI);
    }

    public static toDegreesNormalized(radians: number): number
    {
        let degrees = this.toDegrees(radians);
        degrees = (degrees + 360) % 360;
        return degrees;
    }

    // converts latitude coordinate to a string
    public static toStringLat(latitude: number): string {
        let str = Math.abs(latitude).toFixed(1) + "°";
        return latitude > 0 ? str + "N" : str + "S";
    }

    // converts longitude coordinate to a string
    public static toStringLon(coordinate: number): string {
        let val = Math.abs(coordinate);
        let str = val < 100 ? val.toFixed(1) : val.toFixed(0);
        return coordinate > 0 ? str + "°E" : str + "°W";
    }

    public static toStringAbbr(value: number): string {
        if (value > 1000000000000) {
            return (value / 1000000000000).toFixed(1) + " T"
        } else if (value > 1000000000) {
            return (value / 1000000000).toFixed(1) + " B"
        } else if (value > 1000000) {
            return (value / 1000000).toFixed(1) + " M"
        } else if (value > 1000) {
            return (value / 1000).toFixed(1) + " K"
        }
        return value.toFixed(0);
    }

    public static getLongitude(location: any): number {
        if (location.x) return location.x;
        if (location.lon) return location.lon;
        if (location.longitude) return location.longitude;
        return Number.NaN;
    }

    public static getLatitude(location: any): number {
        if (location.y) return location.y;
        if (location.lat) return location.lat;
        if (location.latitude) return location.latitude;
        return Number.NaN;
    }

    public static getBounds(locations: any[]): any {
        let minLat = 90;
        let maxLat = -90;
        let minLon = 180;
        let maxLon = -180;

        for (const location of locations) {
            const crrLon = this.getLongitude(location);
            if (!Number.isNaN(crrLon)) {
                minLon = Math.min(minLon, crrLon);
                maxLon = Math.max(maxLon, crrLon);
            }

            const crrLat = this.getLatitude(location);
            if (!Number.isNaN(crrLat)) {
                minLat = Math.min(minLat, crrLat);
                maxLat = Math.max(maxLat, crrLat);
            }

            // if (location.x) {
            //     minLon = Math.min(minLon, location.x);
            //     maxLon = Math.max(maxLon, location.x);
            // } else if (location.lon) {
            //     minLon = Math.min(minLon, location.lon);
            //     maxLon = Math.max(maxLon, location.lon);
            // } else if (location.longitude) {
            //     minLon = Math.min(minLon, location.longitude);
            //     maxLon = Math.max(maxLon, location.longitude);
            // }
            // if (location.y) {
            //     minLat = Math.min(minLat, location.y);
            //     maxLat = Math.max(maxLat, location.y);
            // } else if (location.lat) {
            //     minLat = Math.min(minLat, location.lat);
            //     maxLat = Math.max(maxLat, location.lat);
            // } else if (location.latitude) {
            //     minLat = Math.min(minLat, location.latitude);
            //     maxLat = Math.max(maxLat, location.latitude);
            // }
        }

        const geoBounds = {
            left: minLon,
            top: minLat,
            width: Math.abs(maxLon - minLon),
            height: Math.abs(maxLat - minLat)
        };
        return geoBounds;
    }

    public static getNightShapes(): any[] {
        let nightShape = [];

        let line: any[] = [];

        for (let lon = -180; lon <= 180; lon += 1) {

            // let line: any[] = [{x: lon, y: -90}, {x: lon, y: 90}];
            let x = lon;
            let y = 75 * Math.cos(lon * Math.PI / 180);
            line.push({x: x, y: y});
        }
        // line.push({x: 180, y: 90});
        // line.push({x: -180, y: 90});
        // line.push({x: -180, y: -90});

        let coordinateLine = {points: [line]};

        nightShape.push(coordinateLine);

        return nightShape;
    }

}
tsコピー

import { WorldUtils } from './WorldUtils';
import { ShapeStyling } from './MapShapeStyleUtility';
import { ShapeScaleStyling } from './MapShapeStyleUtility';
import { ShapeRangeStyling } from './MapShapeStyleUtility';
import { ShapeRandomStyling } from './MapShapeStyleUtility';
import { ShapeComparisonStyling } from './MapShapeStyleUtility';
import { html } from 'lit-html';
import { IgcGeographicMapModule } from 'igniteui-webcomponents-maps';
import { IgcGeographicMapComponent } from 'igniteui-webcomponents-maps';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcGeographicShapeSeriesComponent } from 'igniteui-webcomponents-maps';
import { IgcShapeDataSource } from 'igniteui-webcomponents-core';
import { IgcShapefileRecord } from 'igniteui-webcomponents-core';
import { IgcStyleShapeEventArgs } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';
ModuleManager.register(
    IgcDataChartInteractivityModule,
    IgcGeographicMapModule
);

export class MapShapeStyling {

    public geoMap: IgcGeographicMapComponent;
    public geoSeries: IgcGeographicShapeSeriesComponent;
    public shapeRecords: any[] = [];

    public currentShapeStyling: ShapeStyling;
    public shapeRandomStyling: ShapeRandomStyling;
    public shapeComparisonStyling: ShapeComparisonStyling;
    public shapeScaleStyling: ShapeScaleStyling;
    public shapeRangeStyling: ShapeRangeStyling;

    constructor() {

        this.onDataLoaded = this.onDataLoaded.bind(this);
        this.onOptionsSelected = this.onOptionsSelected.bind(this);
        this.onStylingShape = this.onStylingShape.bind(this);

        // setting up ShapeRandomStyling:
        this.shapeRandomStyling = new ShapeRandomStyling();
        this.shapeRandomStyling.shapeStrokeColors = ['Black'];
        this.shapeRandomStyling.shapeFillColors = ['#8C23D1', '#0E9759', '#B4D336', '#F2A464', '#D74545', 'DodgerBlue'];

        // setting up ShapeScaleStyling:
        this.shapeScaleStyling = new ShapeScaleStyling();
        this.shapeScaleStyling.defaultFill = 'Gray';
        this.shapeScaleStyling.shapeStrokeColors = ['Black'];
        this.shapeScaleStyling.shapeFillColors = ['DodgerBlue', 'yellow', '#c2f542', '#e8c902', '#e8b602', '#e87902', 'brown'];
        this.shapeScaleStyling.itemMinimumValue = 5000;
        this.shapeScaleStyling.itemMaximumValue = 2000000000; // 2 Billions
        this.shapeScaleStyling.itemMemberPath = 'Population';
        this.shapeScaleStyling.isLogarithmic = true;

        // setting up ShapeComparisonStyling:
        this.shapeRangeStyling = new ShapeRangeStyling();
        this.shapeRangeStyling.defaultFill = 'Gray';
        this.shapeRangeStyling.itemMemberPath = 'Population';
        this.shapeRangeStyling.ranges = [
            { fill: 'yellow', minimum: 5000, maximum: 10000000, },        // 5 K - 10 M
            { fill: 'orange', minimum: 10000000, maximum: 100000000, },   // 10 M - 100 M
            { fill: 'red',    minimum: 100000000, maximum: 500000000, },  // 100 M - 500 M
            { fill: 'brown',  minimum: 500000000, maximum: 2000000000, }, // 500 M - 2 B
        ];

        // setting up ShapeComparisonStyling:
        this.shapeComparisonStyling = new ShapeComparisonStyling();
        this.shapeComparisonStyling.defaultFill = 'Gray';
        this.shapeComparisonStyling.itemMemberPath = 'Region';
        this.shapeComparisonStyling.itemMappings = [
            { fill: 'Red', itemValue: 'Central Asia' },
            { fill: 'Red', itemValue: 'Eastern Asia' },
            { fill: 'Orange', itemValue: 'Southern Asia' },
            { fill: 'Orange', itemValue: 'Middle East' },
            { fill: 'Orange', itemValue: 'Northern Africa' },
            { fill: 'Yellow', itemValue: 'Eastern Africa' },
            { fill: 'Yellow', itemValue: 'Western Africa' },
            { fill: 'Yellow', itemValue: 'Middle Africa' },
            { fill: 'Yellow', itemValue: 'Southern Africa' },
            { fill: 'DodgerBlue', itemValue: 'Central America' },
            { fill: 'DodgerBlue', itemValue: 'Northern America' },
            { fill: 'DodgerBlue', itemValue: 'Western Europe' },
            { fill: 'DodgerBlue', itemValue: 'Southern Europe' },
            { fill: 'DodgerBlue', itemValue: 'Northern Europe' },
            { fill: 'DodgerBlue', itemValue: 'Eastern Europe' },
            { fill: '#22c928', itemValue: 'South America' },
            { fill: '#b64fff', itemValue: 'Melanesia' },
            { fill: '#b64fff', itemValue: 'Micronesia' },
            { fill: '#b64fff', itemValue: 'Polynesia' },
            { fill: '#b64fff', itemValue: 'Australia' },
            // { fill: 'Gray', itemValue: 'Antarctica' },
        ];

        // setting default value for current shape styling
        this.currentShapeStyling = this.shapeComparisonStyling;

        this.geoMap = document.getElementById('geoMap') as IgcGeographicMapComponent;
        this.geoMap.backgroundContent = undefined;
        // this.geoMap.windowRect = { left: 0.2, top: 0.1, width: 0.6, height: 0.6 };

        // loading a shapefile with geographic polygons
        const sds = new IgcShapeDataSource();
        sds.importCompleted = this.onDataLoaded;
        sds.shapefileSource = 'https://static.infragistics.com/xplatform/shapes/world_countries_all.shp';
        sds.databaseSource  = 'https://static.infragistics.com/xplatform/shapes/world_countries_all.dbf';
        sds.dataBind();

        let optionsSelected = document.getElementById('OptionsSelect');
        optionsSelected!.addEventListener('change', this.onOptionsSelected);
    }

    public onDataLoaded(sds: IgcShapeDataSource, e: any) {
        this.shapeRecords = sds.getPointData();
        console.log('loaded WorldCountries.shp ' +  this.shapeRecords.length);

        this.geoSeries = new IgcGeographicShapeSeriesComponent();
        this.geoSeries.name = 'series';
        this.geoSeries.dataSource = this.shapeRecords;
        this.geoSeries.shapeMemberPath = 'points';
        this.geoSeries.brush = 'rgba(146, 146, 146, 0.6)';
        this.geoSeries.outline = 'Black';
        this.geoSeries.tooltipTemplate = this.createTooltip;
        this.geoSeries.thickness = 1;
        // adding event handler for styleShape
        this.geoSeries.styleShape = this.onStylingShape;

        this.geoMap.series.add(this.geoSeries);
    }

    public onStylingShape(s: IgcGeographicShapeSeriesComponent, args: IgcStyleShapeEventArgs) {

        const itemRecord = args.item as IgcShapefileRecord;

        const shapeStyle = this.currentShapeStyling.generate(itemRecord);
        args.shapeOpacity = shapeStyle.opacity;
        args.shapeFill = shapeStyle.fill;
        args.shapeStroke = shapeStyle.stroke;
        args.shapeStrokeThickness = shapeStyle.strokeThickness;

        // console.log(ShapeStyling.fill + ' ' + itemRecord.fieldValues.Name + ' ' + itemRecord.fieldValues.Population.toFixed(0));
    }

    public onOptionsSelected = (e: any) => {
        const stylingType = e.target.value;

        if (stylingType === 'ShapeComparisonStyling') {
            this.currentShapeStyling = this.shapeComparisonStyling;
        } else if (stylingType === 'ShapeScaleStyling') {
            this.currentShapeStyling = this.shapeScaleStyling;
        } else if (stylingType === 'ShapeRangeStyling') {
            this.currentShapeStyling = this.shapeRangeStyling;
        } else {
            this.currentShapeStyling = this.shapeRandomStyling;
        }

        this.geoSeries.dataSource = this.shapeRecords;
    }

    public createTooltip(context: any): any {
        if (!context) return null;

        const dataItem = context.item as any;
        if (!dataItem) return null;

        if (!dataItem.fieldValues) return null;

        const reg = dataItem.fieldValues.Region;
        const name = dataItem.fieldValues.Name;
        const pop = WorldUtils.toStringAbbr(dataItem.fieldValues.Population);

        return html`<div>
            <div class='tooltipTitle'>${name}</div>
            <div class='tooltipTable'>
                <div class='tooltipRow'>
                    <div class='tooltipLbl'>Region</div>
                    <div class='tooltipVal'>${reg}</div>
                </div>
                <div class='tooltipRow'>
                    <div class='tooltipLbl'>Population</div>
                    <div class='tooltipVal'>${pop}</div>
                </div>
            </div>`;
    }
}

new MapShapeStyling();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>MapShapeStyling</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample">

<div class="options horizontal">
    <span class="options-label">Shape Styling: </span>
    <select value="ShapeComparisonStyling" id="OptionsSelect">
        <option>ShapeComparisonStyling</option>
        <option>ShapeScaleStyling</option>
        <option>ShapeRangeStyling</option>
        <option>ShapeRandomStyling</option>
    </select>
</div>

    <igc-geographic-map id="geoMap" width="100%" height="100%">
        <Igc-geographic-shape-series id="shapeSeries">
        </Igc-geographic-shape-series>
    </igc-geographic-map>

</div>

    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

이 샘플이 마음에 드시나요? 당사의 완전한 Ignite UI for Web Components 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

필수 수입품

모양 스타일을 지정하려면 다음 클래스를 가져와야 합니다.

import { IgcGeographicShapeSeriesComponent } from 'igniteui-webcomponents-maps';
import { IgcStyleShapeEventArgs } from 'igniteui-webcomponents-charts';
import { IgcShapeDataSource } from 'igniteui-webcomponents-core';
import { IgcShapefileRecord } from 'igniteui-webcomponents-core';
ts

다음 코드 예제에서는 모양 스타일을 지정하는 네 가지 방법을 제공하는 모양 스타일링 유틸리티 파일을 사용하고 있습니다.

• Shape Comparison Styling
• Shape Random Styling
• Shape Range Styling
• 모양 스케일 스타일링

모양 무작위 스타일링

이 코드 조각은 세계 국가에 채우기 색상을 무작위로 할당하는 ShapeRandomStyling 인스턴스를 생성합니다.

import { ShapeRandomStyling } from './ShapeStylingUtility';
// ...
this.shapeRandomStyling = new ShapeRandomStyling();
this.shapeRandomStyling.shapeStrokeColors = ['Black'];
this.shapeRandomStyling.shapeFillColors = ['#8C23D1', '#0E9759', '#B4D336', '#F2A464', '#D74545', 'DodgerBlue'];

this.geoSeries = new IgcGeographicShapeSeriesComponent();
this.geoSeries.styleShape = this.onStylingShape;
// ...
public onStylingShape(s: IgcGeographicShapeSeriesComponent, args: IgcStyleShapeEventArgs) {
    const itemRecord = args.item as IgcShapefileRecord;
    const shapeStyle = this.ShapeRandomStyling.getStyle(itemRecord);
    args.shapeOpacity = shapeStyle.opacity;
    args.shapeFill = shapeStyle.fill;
    args.shapeStroke = shapeStyle.stroke;
    args.shapeStrokeThickness = shapeStyle.strokeThickness;
}
ts

모양 스케일 스타일링

이 코드 조각은 로그 척도로 조정된 인구를 기준으로 국가 모양에 채우기 색상을 할당하는 ShapeScaleStyling 인스턴스를 생성합니다.

import { ShapeScaleStyling } from './ShapeStylingUtility';
// ...
this.shapeScaleStyling = new ShapeScaleStyling();
this.shapeScaleStyling.itemMinimumValue = 5000;
this.shapeScaleStyling.itemMaximumValue = 2000000000; // 2 Billions
this.shapeScaleStyling.itemMemberPath = 'Population';
this.shapeScaleStyling.isLogarithmic = true;
this.shapeScaleStyling.defaultFill = 'Gray';
this.shapeScaleStyling.shapeStrokeColors = ['Black'];
this.shapeScaleStyling.shapeFillColors = ['DodgerBlue', 'yellow', '#c2f542', '#e8c902', '#e8b602', '#e87902', 'brown'];

this.geoSeries = new IgcGeographicShapeSeriesComponent();
this.geoSeries.styleShape = this.onStylingShape;
// ...
public onStylingShape(s: IgcGeographicShapeSeriesComponent, args: IgcStyleShapeEventArgs) {
    const itemRecord = args.item as IgcShapefileRecord;
    const shapeStyle = this.shapeScaleStyling.getStyle(itemRecord);
    args.shapeOpacity = shapeStyle.opacity;
    args.shapeFill = shapeStyle.fill;
    args.shapeStroke = shapeStyle.stroke;
    args.shapeStrokeThickness = shapeStyle.strokeThickness;
}
ts

모양 범위 스타일링

이 코드 조각은 인구 범위에 따라 국가 모양에 색상을 할당하는 ShapeRangeStyling 인스턴스를 생성합니다.

import { ShapeRangeStyling } from './ShapeStylingUtility';
// ...
this.shapeRangeStyling = new ShapeRangeStyling();
this.shapeRangeStyling.defaultFill = 'Gray';
this.shapeRangeStyling.itemMemberPath = 'Population';
this.shapeRangeStyling.ranges = [
    { fill: 'yellow', minimum: 5000, maximum: 10000000, },        // 5 K - 10 M
    { fill: 'orange', minimum: 10000000, maximum: 100000000, },   // 10 M - 100 M
    { fill: 'red',    minimum: 100000000, maximum: 500000000, },  // 100 M - 500 M
    { fill: 'brown',  minimum: 500000000, maximum: 2000000000, }, // 500 M - 2 B
];

this.geoSeries = new IgcGeographicShapeSeriesComponent();
this.geoSeries.styleShape = this.onStylingShape;
// ...
public onStylingShape(s: IgcGeographicShapeSeriesComponent, args: IgcStyleShapeEventArgs) {
    const itemRecord = args.item as IgcShapefileRecord;
    const shapeStyle = this.shapeRangeStyling.getStyle(itemRecord);
    args.shapeOpacity = shapeStyle.opacity;
    args.shapeFill = shapeStyle.fill;
    args.shapeStroke = shapeStyle.stroke;
    args.shapeStrokeThickness = shapeStyle.strokeThickness;
}
ts

모양 비교 스타일링

이 코드 조각은 세계의 지역 이름을 기반으로 국가에 색상을 할당하는 ShapeComparisonStyling 인스턴스를 생성합니다.

import { ShapeComparisonStyling } from './ShapeStylingUtility';
this.shapeComparisonStyling = new ShapeComparisonStyling();
this.shapeComparisonStyling.defaultFill = 'Gray';
this.shapeComparisonStyling.itemMemberPath = 'Region';
this.shapeComparisonStyling.itemMappings = [
    { fill: 'Red', itemValue: 'Eastern Europe' },
    { fill: 'Red', itemValue: 'Central Asia' },
    { fill: 'Red', itemValue: 'Eastern Asia' },
    { fill: 'Orange', itemValue: 'Southern Asia' },
    { fill: 'Orange', itemValue: 'Middle East' },
    { fill: 'Orange', itemValue: 'Northern Africa' },
    { fill: 'Yellow', itemValue: 'Eastern Africa' },
    { fill: 'Yellow', itemValue: 'Western Africa' },
    { fill: 'Yellow', itemValue: 'Middle Africa' },
    { fill: 'Yellow', itemValue: 'Southern Africa' },
    { fill: 'DodgerBlue', itemValue: 'Central America' },
    { fill: 'DodgerBlue', itemValue: 'Northern America' },
    { fill: 'DodgerBlue', itemValue: 'Western Europe' },
    { fill: 'DodgerBlue', itemValue: 'Southern Europe' },
    { fill: 'DodgerBlue', itemValue: 'Northern Europe' },
    { fill: '#22c928', itemValue: 'South America' },
    { fill: '#b64fff', itemValue: 'Melanesia' },
    { fill: '#b64fff', itemValue: 'Micronesia' },
    { fill: '#b64fff', itemValue: 'Polynesia' },
    { fill: '#b64fff', itemValue: 'Australia' },
];

this.geoSeries = new IgcGeographicShapeSeriesComponent();
this.geoSeries.styleShape = this.onStylingShape;
// ...
public onStylingShape(s: IgcGeographicShapeSeriesComponent, args: IgcStyleShapeEventArgs) {
    const itemRecord = args.item as IgcShapefileRecord;
    const shapeStyle = this.shapeComparisonStyling.getStyle(itemRecord);
    args.shapeOpacity = shapeStyle.opacity;
    args.shapeFill = shapeStyle.fill;
    args.shapeStroke = shapeStyle.stroke;
    args.shapeStrokeThickness = shapeStyle.strokeThickness;
}
ts

API 참조

• IgcGeographicShapeSeriesComponent
• IgcGeographicMapComponent