Web Components Esri Maps에서 이미지 표시
IgcArcGISOnlineMapImagery
는 Esri 회사에서 만든 무료 지리 이미지 매핑 서비스입니다. 40개 이상의 세계 지리 이미지 타일과 미국의 일부 주제별 타일을 제공합니다. 이 지리 이미지 서비스는 www.arcgisonline.com 웹사이트에서 직접 접속할 수 있습니다.
Web Components Displaying Imagery from Esri Maps Example
// NOTE this file contains multiple data sources:
// Data Source #1
/**
* Describes available links to imagery tile sources on public ArcGIS/Esri servers.
* You can find up-to-date list on https://services.arcgisonline.com/arcgis/rest/services
*/
export enum EsriStyle {
// note Esri maps show geographic tiles for the whole of world with shapes
WorldTopographicMap = "https://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer",
WorldStreetMap = "https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer",
WorldSatelliteMap = "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
WorldPhysicalMap = "https://services.arcgisonline.com/ArcGIS/rest/services/World_Physical_Map/MapServer",
WorldDeLormesMap = "https://services.arcgisonline.com/ArcGIS/rest/services/Specialty/DeLorme_World_Base_Map/MapServer",
WorldTerrainMap = "https://services.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer",
WorldNationalGeoMap = "https://services.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer",
WorldShadedReliefMap = "https://services.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer",
// not usable imagery tiles
// WorldHillShadeDarkMap = "https://services.arcgisonline.com/arcgis/rest/services/Elevation/World_Hillshade_Dark/MapServer",
// WorldHillShadeLightMap = "https://services.arcgisonline.com/arcgis/rest/services/Elevation/World_Hillshade/MapServer",
// WorldElevation3dTerrainMap = "https://services.arcgisonline.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer",
// WorldElevation3dTopographicMap = "https://services.arcgisonline.com/arcgis/rest/services/WorldElevation3D/TopoBathy3D/ImageServer",
// WorldOceansMap = "https://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer",
// note Esri overlays show geographic tiles for the whole of world without any shapes
WorldOceansBaseMap = "https://services.arcgisonline.com/arcgis/rest/services/Ocean/World_Ocean_Base/MapServer",
WorldOceansOverlay = "https://services.arcgisonline.com/arcgis/rest/services/Ocean/World_Ocean_Reference/MapServer",
WorldLightGrayMap = "https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer",
WorldLightGrayOverlay = "https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Reference/MapServer",
WorldDarkGrayMap = "https://services.arcgisonline.com/arcgis/rest/services/Canvas/World_Dark_Gray_Base/MapServer",
WorldDarkGrayOverlay = "https://services.arcgisonline.com/arcgis/rest/services/Canvas/World_Dark_Gray_Reference/MapServer",
WorldAdminOverlay = "https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Reference_Overlay/MapServer",
WorldTransportationOverlay = "https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer",
WorldBordersWithDarkLabelsOverlay = "https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer",
WorldBordersWithLightLabelsOverlay = "https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places_Alternate/MapServer",
// these Esri maps show only geographic tiles for the USA
// therefore the Map should be zoomed in to geographic bounds of USA when using them
UsaOwnerOccupiedHousing = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Owner_Occupied_Housing/MapServer",
UsaSoilSurvey = "https://services.arcgisonline.com/ArcGIS/rest/services/Specialty/Soil_Survey_Map/MapServer",
UsaPopulationOlderThanAge64 = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Percent_Over_64/MapServer",
UsaPopulationYoungerThan18 = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Percent_Under_18/MapServer",
UsaPopulationGrowth2015 = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Projected_Population_Change/MapServer",
UsaUnemploymentRate = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Unemployment_Rate/MapServer",
UsaSocialVulnerability = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Social_Vulnerability_Index/MapServer",
UsaRetailSpendingPotential = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Retail_Spending_Potential/MapServer",
UsaPopulationChange2010 = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Recent_Population_Change/MapServer",
UsaPopulationChange2000 = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_1990-2000_Population_Change/MapServer",
UsaPopulationDensity = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Population_Density/MapServer",
UsaPopulationByGender = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Population_by_Sex/MapServer",
UsaMedianHouseholdIncome = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Median_Household_Income/MapServer",
UsaMedianNetWorth = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Median_Net_Worth/MapServer",
UsaMedianHomeValue = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Median_Home_Value/MapServer",
UsaMedianAge = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Median_Age/MapServer",
UsaLaborForceParticipation = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Labor_Force_Participation_Rate/MapServer",
UsaAverageHouseholdSize = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Average_Household_Size/MapServer",
UsaDiversityIndex = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Diversity_Index/MapServer",
UsaRailNetwork = "https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Reference_Overlay/MapServer",
}
export class EsriUtility {
public static getUri(style: EsriStyle): string {
let isHttpSecured = window.location.toString().startsWith("https:");
// resolving Esri Server uri based on hosting website
let uri: string = style;
if (!isHttpSecured) {
uri = uri.replace("https:", "http:");
}
// console.log("uri " + uri);
return uri;
}
}
// Data Source #2
import { IgcGeographicMapComponent } from 'igniteui-webcomponents-maps';
export enum MapRegion {
Caribbean = "Caribbean",
UnitedStates = "United States",
UnitedKingdom = "United Kingdom",
European = "European",
SouthAfrica = "South Africa",
Poland = "Poland",
Australia = "Australia",
Japan = "Japan",
Uruguay = "Uruguay",
Egypt = "Egypt",
Hawaii = "Hawaii",
}
export class MapUtils {
public static navigateTo(geoMap: IgcGeographicMapComponent, name: MapRegion): void {
const geoRect = this.getRegions()[name];
// console.log("MapUtils " + name) ;
geoMap.zoomToGeographic(geoRect);
}
public static toPixel(num: number): string {
const s = Math.abs(num).toFixed(0);
return s + " px";
}
public static toLng(num: number): string {
num = this.clamp(num, -180, 180);
let s = Math.abs(num).toFixed(1);
if (num < 100) {
s = " " + s
}
if (num > 0) {
return s + "°E";
} else {
return s + "°W";
}
}
public static toLat(num: number): string {
num = this.clamp(num, -90, 90);
let s = Math.abs(num).toFixed(1);
if (num < 100) {
s = " " + s
}
if (num > 0) {
return s + "°N";
} else {
return s + "°S";
}
}
public static clamp(num: number, min: number, max: number): number {
return Math.max(min, Math.min(max, num));
}
public static pad(num: number, places?: number): string {
places = places || 20;
let s = num.toFixed(1).toString();
while (s.length < places) {s = " " + s};
return s;
}
public static getBingKey(): string {
return "Avlo7qsH1zZZI0XNpTwZ4XwvUJmCbd-mczMeUXVAW9kYYOKdmBIVRe8aoO02Xctq";
}
public static getRegions(): any {
// create regions only once
if (this.Regions === undefined) {
this.createRegions();
}
return this.Regions;
}
private static Regions: any;
private static addRegion(name: string, geoRect: any): void {
geoRect.name = name;
geoRect.longitude = geoRect.left + (geoRect.width / 2);
geoRect.latitude = geoRect.top + (geoRect.height / 2);
this.Regions[name] = geoRect;
}
private static createRegions(): void {
this.Regions = {};
this.addRegion(MapRegion.Australia, { left: 81.5, top: -52.0, width: 98.0, height: 56.0 });
this.addRegion(MapRegion.Caribbean, { left: -92.9, top: 5.4, width: 35.1, height: 25.8 });
this.addRegion(MapRegion.Egypt, { left: 19.3, top: 19.9, width: 19.3, height: 13.4 });
this.addRegion(MapRegion.European, { left: -36.0, top: 31.0, width: 98.0, height: 38.0 });
this.addRegion(MapRegion.Japan, { left: 122.7, top: 29.4, width: 27.5, height: 17.0 });
this.addRegion(MapRegion.Hawaii, { left: -161.2, top: 18.5, width: 6.6, height: 4.8 });
this.addRegion(MapRegion.Poland, { left: 13.0, top: 48.0, width: 11.0, height: 9.0 });
this.addRegion(MapRegion.SouthAfrica, { left: 9.0, top: -37.1, width: 26.0, height: 17.8 });
this.addRegion(MapRegion.UnitedStates, { left: -134.5, top: 16.0, width: 70.0, height: 37.0 });
this.addRegion(MapRegion.UnitedKingdom, { left: -15.0, top: 49.5, width: 22.5, height: 8.0 });
this.addRegion(MapRegion.Uruguay, { left: -62.1, top: -35.7, width: 10.6, height: 7.0 });
}
}
tsimport { MapUtils, MapRegion } from './MapUtils';
import { EsriStyle, EsriUtility } from './EsriUtility';
import { IgcGeographicMapModule } from 'igniteui-webcomponents-maps';
import { IgcGeographicMapComponent } from 'igniteui-webcomponents-maps';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcArcGISOnlineMapImagery } from 'igniteui-webcomponents-maps';
import { ModuleManager } from 'igniteui-webcomponents-core';
ModuleManager.register(
IgcDataChartInteractivityModule,
IgcGeographicMapModule
);
export class MapDisplayImageryEsriTiles {
private geoMap1: IgcGeographicMapComponent;
private geoMap2: IgcGeographicMapComponent;
private geoMap3: IgcGeographicMapComponent;
private geoMap4: IgcGeographicMapComponent;
constructor() {
this.geoMap1 = document.getElementById('map1') as IgcGeographicMapComponent;
this.geoMap2 = document.getElementById('map2') as IgcGeographicMapComponent;
this.geoMap3 = document.getElementById('map3') as IgcGeographicMapComponent;
// this.geoMap4 = document.getElementById('map4') as IgcGeographicMapComponent;
this.createMap1(this.geoMap1);
this.createMap2(this.geoMap2);
this.createMap3(this.geoMap3);
// this.createMap4(this.geoMap4);
}
createMap1(map: IgcGeographicMapComponent) {
map.zoomable = true;
const tileSource = new IgcArcGISOnlineMapImagery();
tileSource.mapServerUri = EsriUtility.getUri(EsriStyle.WorldStreetMap);
map.backgroundContent = tileSource;
MapUtils.navigateTo(map, MapRegion.Caribbean);
}
createMap2(map: IgcGeographicMapComponent) {
map.zoomable = true;
const tileSource = new IgcArcGISOnlineMapImagery();
tileSource.mapServerUri = EsriUtility.getUri(EsriStyle.WorldOceansBaseMap);
// or
// tileSource.mapServerUri = 'https://services.arcgisonline.com/arcgis/rest/services/Ocean/World_Ocean_Base/MapServer';
map.backgroundContent = tileSource;
MapUtils.navigateTo(map, MapRegion.Caribbean);
}
createMap3(map: IgcGeographicMapComponent) {
map.zoomable = true;
const tileSource = new IgcArcGISOnlineMapImagery();
tileSource.mapServerUri = EsriUtility.getUri(EsriStyle.WorldTopographicMap);
map.backgroundContent = tileSource;
MapUtils.navigateTo(map, MapRegion.Caribbean);
}
createMap4(map: IgcGeographicMapComponent) {
map.zoomable = true;
const tileSource = new IgcArcGISOnlineMapImagery();
tileSource.mapServerUri = EsriUtility.getUri(EsriStyle.WorldNationalGeoMap);
map.backgroundContent = tileSource;
MapUtils.navigateTo(map, MapRegion.Caribbean);
}
}
new MapDisplayImageryEsriTiles();
ts<!DOCTYPE html>
<html>
<head>
<title>MapDisplayImageryEsriTiles</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 horizontal" >
<igc-geographic-map id="map1" class="container" height="100%" width="100%"></igc-geographic-map>
<igc-geographic-map id="map2" class="container" height="100%" width="100%"></igc-geographic-map>
<igc-geographic-map id="map3" class="container" height="100%" width="100%"></igc-geographic-map>
<!--
<igc-geographic-map id="map4" class="container" height="100%" width="100%"></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
Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.
Code Snippet
다음 코드 조각은 using IgcArcGISOnlineMapImagery
클래스에서 Esri 이미지 서버의 Web Components 지리적 이미지 타일을 IgcGeographicMapComponent
표시하는 방법을 보여줍니다.
import { IgcGeographicMap } from 'igniteui-webcomponents-maps';
import { IgcArcGISOnlineMapImagery } from 'igniteui-webcomponents-maps';
// ...
const tileSource = new IgcArcGISOnlineMapImagery();
tileSource.mapServerUri = "https://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer";
const geoMap = document.getElementById("geoMap") as IgcGeographicMapComponent
geoMap.backgroundContent = tileSource;
ts
에스리 유틸리티
또는 Esri 이미지 서버에서 제공하는 모든 스타일을 정의하는 EsriUtility를 사용할 수 있습니다.
import { IgcGeographicMap } from 'igniteui-webcomponents-maps';
import { IgcArcGISOnlineMapImagery } from 'igniteui-webcomponents-maps';
import { EsriUtility, EsriStyle } from './EsriUtility';
// ...
const tileSource = new IgcArcGISOnlineMapImagery();
tileSource.mapServerUri = EsriUtility.getUri(EsriStyle.WorldOceansMap);
const geoMap = document.getElementById("geoMap") as IgcGeographicMapComponent
geoMap.backgroundContent = tileSource;
ts