@mint-ui/map
Version:
- React map library - Control various map with one interface - Google, Naver, Kakao map supported now - Typescript supported - Canvas marker supported
391 lines (350 loc) • 9.72 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var tslib = require('tslib');
var uuid = require('uuid');
var MapTypes = require('../types/MapTypes.js');
require('./util/animation.js');
require('./util/geo.js');
require('./util/polygon.js');
var status = require('./util/status.js');
var map = require('./util/map.js');
var MintMapController =
/** @class */
function () {
//constructor
function MintMapController(props) {
this.mapApiLoaded = false;
this.mapInitialized = false;
this.processedTime = 0; //props
this.mapProps = props;
} //기본 기능
MintMapController.prototype.getMap = function () {
return this.map;
};
MintMapController.prototype.getMapType = function () {
return this.type;
}; //기본 기능 - 좌표 변환
MintMapController.prototype.positionToOffset = function (position) {
var div = this.mapDivElement;
var w = div === null || div === void 0 ? void 0 : div.offsetWidth;
var h = div === null || div === void 0 ? void 0 : div.offsetHeight;
var bounds = this.getCurrBounds();
var maxLng = bounds.ne.lng;
var minLng = bounds.sw.lng;
var lng = Math.abs(maxLng - minLng);
var x = w * (position.lng - minLng) / lng;
var maxLat = bounds.ne.lat;
var minLat = bounds.sw.lat;
var lat = Math.abs(maxLat - minLat);
var y = h * (maxLat - position.lat) / lat;
return new MapTypes.Offset(x, y);
};
MintMapController.prototype.offsetToPosition = function (offset) {
var div = this.mapDivElement;
var w = div === null || div === void 0 ? void 0 : div.offsetWidth;
var h = div === null || div === void 0 ? void 0 : div.offsetHeight;
var bounds = this.getCurrBounds();
var maxLng = bounds.ne.lng;
var minLng = bounds.sw.lng;
var lng = Math.abs(maxLng - minLng); //const x = w * (position.lng - minLng) / lng
var lngVal = offset.x * lng / w + minLng;
var maxLat = bounds.ne.lat;
var minLat = bounds.sw.lat;
var lat = Math.abs(maxLat - minLat); //const y = h * (maxLat - position.lat) / lat
var latVal = (offset.y * lat / h - maxLat) * -1;
return new MapTypes.Position(latVal, lngVal);
}; //스크립트 로드
MintMapController.prototype.loadScript = function (url, id, checkLoaded) {
return tslib.__awaiter(this, void 0, void 0, function () {
return tslib.__generator(this, function (_a) {
//boolean -> script 로드 후 callback 실행 여부
//** callback 실행이 여기서 안된 경우는 바깥에서 해줘야한다.
return [2
/*return*/
, new Promise(function (resolve) {
//이미 로드되어 있으면 종료
if (checkLoaded()) {
resolve(false);
return;
}
var prevElement = id ? document.getElementById(id) : undefined; //기존 스크립트 로드 정보가 있으면
if (prevElement) {
// console.log(`already loaded script => ${id}`)
//로드 되어 있지 않으면 스크립트 load 이벤트 끼워넣기
prevElement.addEventListener('load', function () {
// console.log('script loaded!!!')
resolve(false);
});
return;
} //스크립트 로드 처리
var script = document.createElement('script');
script.src = url;
script.async = true;
script.defer = true;
id && (script.id = id);
script.addEventListener('load', function () {
resolve(true);
});
document.body.appendChild(script);
})];
});
});
};
MintMapController.prototype.getRandomFunctionName = function (prefix) {
return "".concat(prefix, "_").concat(uuid.v4().replace(/-/g, '_'));
};
/**
* URL 빌더 메서드
*
* @param {string} baseUrl: 기본 URL
* @param {{ [ key: string ]: string | string[] }} param: 파라미터 JSON
* @returns {string} URL
*/
MintMapController.prototype.buildUrl = function (baseUrl, param) {
var params = Object.entries(param).map(function (_a) {
var key = _a[0],
value = _a[1];
var temp = Array.isArray(value) ? value.join(',') : value;
return "".concat(key, "=").concat(temp);
}).join('&');
return "".concat(baseUrl, "?").concat(params);
};
/**
* 쓰로틀링 처리
* @returns
*/
MintMapController.prototype.checkBoundsChangeThrottleTime = function () {
if (!this.mapProps.boundsChangeThrottlingTime) return true; //boundsChangeThrottlingTime 이내의 연속 요청은 제외시킴
var time = new Date().getTime();
if (this.processedTime > 0 && time - this.processedTime < this.mapProps.boundsChangeThrottlingTime) {
return false;
} else {
this.processedTime = time;
return true;
}
};
MintMapController.prototype.getBaseToMapZoom = function (zoomBase) {
var baseMap = MapZoomInfo.BASE_TO_MAP.get(zoomBase);
if (baseMap) {
var mapZoomInfo = baseMap.get(this.getMapType());
if (mapZoomInfo) {
return mapZoomInfo.level;
}
}
throw new Error("[getBaseToMapZoom][".concat(zoomBase, "] is not valid zoom level"));
};
MintMapController.prototype.getMapToBaseZoom = function (mapZoom) {
var baseZoom = MapZoomInfo.MAP_TO_BASE.get(this.getMapType() + mapZoom);
if (baseZoom) {
return baseZoom;
}
throw new Error("[getMapToBaseZoom][".concat(mapZoom, "] is not valid zoom level"));
};
MintMapController.prototype.morph = function (position, zoom, option) {
var naverMap = map.getMapOfType('naver', this.map);
if (naverMap) {
naverMap.morph(position, zoom, tslib.__assign({}, option));
} else {
// 센터로 이동
this.setCenter(position); // 줌 이동
this.setZoomLevel(zoom);
}
};
MintMapController.prototype.printStatus = function () {
status.Status.print();
};
return MintMapController;
}();
var MapZoomInfo =
/** @class */
function () {
function MapZoomInfo() {}
MapZoomInfo.BASE_TO_MAP = new Map([[1, new Map([['google', {
level: 1
}], ['naver', {
level: 6
}], ['kakao', {
level: 14
}]])], [2, new Map([['google', {
level: 2,
distance: 2000,
unit: 'km'
}], ['naver', {
level: 6
}], ['kakao', {
level: 14
}]])], [3, new Map([['google', {
level: 3,
distance: 1000,
unit: 'km'
}], ['naver', {
level: 6
}], ['kakao', {
level: 14
}]])], [4, new Map([['google', {
level: 4,
distance: 500,
unit: 'km'
}], ['naver', {
level: 6
}], ['kakao', {
level: 14
}]])], [5, new Map([['google', {
level: 5,
distance: 200,
unit: 'km'
}], ['naver', {
level: 6
}], ['kakao', {
level: 14
}]])], [6, new Map([['google', {
level: 6,
distance: 100,
unit: 'km'
}], ['naver', {
level: 6
}], ['kakao', {
level: 14
}]])], [7, new Map([['google', {
level: 7,
distance: 50,
unit: 'km'
}], ['naver', {
level: 7
}], ['kakao', {
level: 13
}]])], [8, new Map([['google', {
level: 8,
distance: 20,
unit: 'km'
}], ['naver', {
level: 8
}], ['kakao', {
level: 12
}]])], [9, new Map([['google', {
level: 9,
distance: 10,
unit: 'km'
}], ['naver', {
level: 9
}], ['kakao', {
level: 11
}]])], [10, new Map([['google', {
level: 10,
distance: 5,
unit: 'km'
}], ['naver', {
level: 10
}], ['kakao', {
level: 10
}]])], [11, new Map([['google', {
level: 11,
distance: 2,
unit: 'km'
}], ['naver', {
level: 11
}], ['kakao', {
level: 9
}]])], [12, new Map([['google', {
level: 12,
distance: 1,
unit: 'km'
}], ['naver', {
level: 12
}], ['kakao', {
level: 8
}]])], [13, new Map([['google', {
level: 13,
distance: 500,
unit: 'm'
}], ['naver', {
level: 13
}], ['kakao', {
level: 7
}]])], [14, new Map([['google', {
level: 14,
distance: 500,
unit: 'm'
}], ['naver', {
level: 14
}], ['kakao', {
level: 6
}]])], [15, new Map([['google', {
level: 15,
distance: 500,
unit: 'm'
}], ['naver', {
level: 15
}], ['kakao', {
level: 5
}]])], [16, new Map([['google', {
level: 16,
distance: 500,
unit: 'm'
}], ['naver', {
level: 16
}], ['kakao', {
level: 4
}]])], [17, new Map([['google', {
level: 17,
distance: 500,
unit: 'm'
}], ['naver', {
level: 17
}], ['kakao', {
level: 3
}]])], [18, new Map([['google', {
level: 18,
distance: 500,
unit: 'm'
}], ['naver', {
level: 18
}], ['kakao', {
level: 2
}]])], [19, new Map([['google', {
level: 19,
distance: 500,
unit: 'm'
}], ['naver', {
level: 19
}], ['kakao', {
level: 1
}]])], [20, new Map([['google', {
level: 20,
distance: 500,
unit: 'm'
}], ['naver', {
level: 20
}], ['kakao', {
level: 1
}]])], [21, new Map([['google', {
level: 21,
distance: 500,
unit: 'm'
}], ['naver', {
level: 21
}], ['kakao', {
level: 1
}]])], [22, new Map([['google', {
level: 22,
distance: 500,
unit: 'm'
}], ['naver', {
level: 21
}], ['kakao', {
level: 1
}]])]]);
MapZoomInfo.MAP_TO_BASE = new Map(Array.from(MapZoomInfo.BASE_TO_MAP.entries()).map(function (item) {
var base = item[0];
var mapZoom = item[1];
var result = [];
mapZoom.forEach(function (value, key) {
result.push([key + value.level, base]);
});
return result;
}).flatMap(function (a) {
return a;
}));
return MapZoomInfo;
}();
exports.MintMapController = MintMapController;