Ignite UI for Angular 셰이프 파일의 지리 공간 데이터 및/또는 데이터 모델의 지리적 위치를 지리적 이미지 맵에 표시하도록 설계되었습니다. 지리적 시리즈의 ItemsSource 속성은 데이터 모델에 바인딩하는 목적으로 사용됩니다. 이 속성은 사용자 지정 개체 배열에 바인딩할 수 있습니다.
Angular 바인딩 지리적 데이터 모델 예제
EXAMPLE
DATA
MODULES
TS
HTML
SCSS
exportclassWorldUtility{
// calculate geo-paths between two locations using great circle formulapublicstatic calcPaths(origin: any, dest: any): any[] {
const interval = 200;
const paths: any[] = [[]];
let pathID = 0;
const 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 });
const bearing = this.calcBearing(current, dest);
current = this.calcDestination(current, bearing, interval);
// ensure geo-path wrap around the world through the new date-lineif (previous.lon > 150 && current.lon < -150) {
paths[pathID].push({ x: 180, y: current.lat });
paths.push([]);
pathID++;
current = { lon: -180, lat: current.lat };
} elseif (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 locationspublicstatic calcBearing(origin: any, dest: any): number {
origin = this.toRadianLocation(origin);
dest = this.toRadianLocation(dest);
const range = (dest.lon - origin.lon);
const y = Math.sin(range) * Math.cos(dest.lat);
const x = Math.cos(origin.lat) * Math.sin(dest.lat) -
Math.sin(origin.lat) * Math.cos(dest.lat) * Math.cos(range);
const angle = Math.atan2(y, x);
returnthis.toDegreesNormalized(angle);
}
// calculate destination for origin location and travel distancepublicstatic calcDestination(origin: any, bearing: number, distance: number): any {
const radius = 6371.0;
origin = this.toRadianLocation(origin);
bearing = this.toRadians(bearing);
distance = distance / radius; // angular distance in radianslet lat = Math.asin(Math.sin(origin.lat) * Math.cos(distance) +
Math.cos(origin.lat) * Math.sin(distance) * Math.cos(bearing));
const x = Math.sin(bearing) * Math.sin(distance) * Math.cos(origin.lat);
const 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, lat };
}
// calculate distance between two locationspublicstatic calcDistance(origin: any, dest: any): number {
origin = this.toRadianLocation(origin);
dest = this.toRadianLocation(dest);
const sinProd = Math.sin(origin.lat) * Math.sin(dest.lat);
const cosProd = Math.cos(origin.lat) * Math.cos(dest.lat);
const lonDelta = (dest.lon - origin.lon);
const angle = Math.acos(sinProd + cosProd * Math.cos(lonDelta));
const distance = angle * 6371.0;
return distance; // * 6371.0; // in km
}
publicstatic toRadianLocation(geoPoint: any): any {
const x = this.toRadians(geoPoint.lon);
const y = this.toRadians(geoPoint.lat);
return { lon: x, lat: y };
}
publicstatic toRadians(degrees: number): number {
return degrees * Math.PI / 180;
}
publicstatic toDegrees(radians: number): number {
return (radians * 180.0 / Math.PI);
}
publicstatic toDegreesNormalized(radians: number): number {
let degrees = this.toDegrees(radians);
degrees = (degrees + 360) % 360;
return degrees;
}
// converts latitude coordinate to a stringpublicstatic toStringLat(latitude: number): string {
const str = Math.abs(latitude).toFixed(1) + "°";
return latitude > 0 ? str + "N" : str + "S";
}
// converts longitude coordinate to a stringpublicstatic toStringLon(coordinate: number): string {
const val = Math.abs(coordinate);
const str = val < 100 ? val.toFixed(1) : val.toFixed(0);
return coordinate > 0 ? str + "°E" : str + "°W";
}
publicstatic toStringAbbr(value: number): string {
if (value > 1000000000000) {
return (value / 1000000000000).toFixed(1) + " T";
} elseif (value > 1000000000) {
return (value / 1000000000).toFixed(1) + " B";
} elseif (value > 1000000) {
return (value / 1000000).toFixed(1) + " M";
} elseif (value > 1000) {
return (value / 1000).toFixed(1) + " K";
}
return value.toFixed(0);
}
publicstatic getLongitude(location: any): number {
if (location.x) { return location.x; }
if (location.lon) { return location.lon; }
if (location.longitude) { return location.longitude; }
returnNumber.NaN;
}
publicstatic getLatitude(location: any): number {
if (location.y) { return location.y; }
if (location.lat) { return location.lat; }
if (location.latitude) { return location.latitude; }
returnNumber.NaN;
}
publicstatic 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);
}
}
const geoBounds = {
left: minLon,
top: minLat,
width: Math.abs(maxLon - minLon),
// tslint:disable-next-line: object-literal-sort-keysheight: Math.abs(maxLat - minLat)
};
return geoBounds;
}
}
ts