동적으로 생성하는 map 파일 중간 작업까지 완료.
This commit is contained in:
@@ -0,0 +1,98 @@
|
||||
function getCityPosition(){
|
||||
return {
|
||||
1: ["업", 345, 130],
|
||||
2: ["허창", 330, 215],
|
||||
3: ["낙양", 275, 180],
|
||||
4: ["장안", 145, 165],
|
||||
5: ["성도", 25, 290],
|
||||
6: ["양양", 255, 290],
|
||||
7: ["건업", 505, 305],
|
||||
8: ["북평", 465, 65],
|
||||
9: ["남피", 395, 95],
|
||||
10: ["완", 270, 235],
|
||||
11: ["수춘", 395, 270],
|
||||
12: ["서주", 440, 250],
|
||||
13: ["강릉", 245, 335],
|
||||
14: ["장사", 255, 375],
|
||||
15: ["시상", 360, 360],
|
||||
16: ["위례", 620, 145],
|
||||
17: ["계", 365, 35],
|
||||
18: ["복양", 410, 170],
|
||||
19: ["진류", 365, 185],
|
||||
20: ["여남", 330, 260],
|
||||
21: ["하비", 480, 235],
|
||||
22: ["서량", 25, 50],
|
||||
23: ["하내", 230, 150],
|
||||
24: ["한중", 135, 205],
|
||||
25: ["상용", 185, 225],
|
||||
26: ["덕양", 85, 275],
|
||||
27: ["강주", 70, 310],
|
||||
28: ["건녕", 80, 400],
|
||||
29: ["남해", 245, 480],
|
||||
30: ["계양", 230, 400],
|
||||
31: ["오", 510, 345],
|
||||
32: ["평양", 590, 100],
|
||||
33: ["사비", 605, 205],
|
||||
34: ["계림", 655, 200],
|
||||
35: ["진양", 295, 60],
|
||||
36: ["평원", 440, 115],
|
||||
37: ["북해", 470, 155],
|
||||
38: ["초", 365, 230],
|
||||
39: ["패", 430, 220],
|
||||
40: ["천수", 70, 105],
|
||||
41: ["안정", 95, 145],
|
||||
42: ["홍농", 210, 175],
|
||||
43: ["하변", 45, 190],
|
||||
44: ["자동", 75, 245],
|
||||
45: ["영안", 115, 295],
|
||||
46: ["귀양", 90, 360],
|
||||
47: ["주시", 30, 345],
|
||||
48: ["운남", 30, 415],
|
||||
49: ["남영", 135, 405],
|
||||
50: ["교지", 130, 480],
|
||||
51: ["신야", 250, 260],
|
||||
52: ["강하", 315, 295],
|
||||
53: ["무릉", 195, 355],
|
||||
54: ["영릉", 190, 395],
|
||||
55: ["상동", 210, 435],
|
||||
56: ["여강", 380, 315],
|
||||
57: ["회계", 480, 395],
|
||||
58: ["고창", 350, 405],
|
||||
59: ["대", 450, 480],
|
||||
60: ["안평", 530, 80],
|
||||
61: ["졸본", 570, 65],
|
||||
62: ["이도", 680, 260],
|
||||
63: ["강", 95, 35],
|
||||
64: ["저", 25, 120],
|
||||
65: ["흉노", 180, 95],
|
||||
66: ["남만", 80, 455],
|
||||
67: ["산월", 425, 430],
|
||||
68: ["오환", 610, 20],
|
||||
69: ["왜", 680, 320],
|
||||
70: ["호관", 285, 140],
|
||||
71: ["호로", 285, 205],
|
||||
72: ["사곡", 240, 175],
|
||||
73: ["함곡", 180, 175],
|
||||
74: ["사수", 310, 185],
|
||||
75: ["양평", 90, 220],
|
||||
76: ["가맹", 45, 225],
|
||||
77: ["역경", 410, 65],
|
||||
78: ["계교", 405, 135],
|
||||
79: ["동황", 515, 145],
|
||||
80: ["관도", 340, 165],
|
||||
81: ["정도", 400, 210],
|
||||
82: ["합비", 435, 285],
|
||||
83: ["광릉", 490, 275],
|
||||
84: ["적도", 130, 75],
|
||||
85: ["가정", 40, 160],
|
||||
86: ["기산", 110, 180],
|
||||
87: ["면죽", 35, 255],
|
||||
88: ["이릉", 215, 295],
|
||||
89: ["장판", 280, 315],
|
||||
90: ["백랑", 530, 30],
|
||||
91: ["적벽", 330, 325],
|
||||
92: ["파양", 430, 350],
|
||||
93: ["탐라", 605, 260],
|
||||
94: ["유구", 625, 435],
|
||||
};
|
||||
}
|
||||
+102
@@ -0,0 +1,102 @@
|
||||
.world_map{
|
||||
background:black;
|
||||
font-size:13px;
|
||||
color:white;
|
||||
}
|
||||
|
||||
.map_title{
|
||||
width:700px;
|
||||
height:20px;
|
||||
background:
|
||||
url('/images/ltitle.jpg') no-repeat left,
|
||||
url('/images/rtitle.jpg') no-repeat right;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.map_title_text{
|
||||
margin:auto;
|
||||
text-align:center;
|
||||
width:160px;
|
||||
display:block;
|
||||
line-height:20px;
|
||||
font-size:13px;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
.map_spring .map_title_text{
|
||||
background:
|
||||
url('/images/ad.gif') no-repeat left,
|
||||
url('/images/spring.gif') no-repeat right;
|
||||
}
|
||||
|
||||
.map_summer .map_title_text{
|
||||
background:
|
||||
url('/images/ad.gif') no-repeat left,
|
||||
url('/images/summer.gif') no-repeat right;
|
||||
}
|
||||
|
||||
.map_fall .map_title_text{
|
||||
background:
|
||||
url('/images/ad.gif') no-repeat left,
|
||||
url('/images/fall.gif') no-repeat right;
|
||||
}
|
||||
|
||||
.map_winter .map_title_text{
|
||||
background:
|
||||
url('/images/ad.gif') no-repeat left,
|
||||
url('/images/winter.gif') no-repeat right;
|
||||
}
|
||||
|
||||
.map_body{
|
||||
width:700px;
|
||||
height:500px;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.map_spring .map_body{
|
||||
background: url('/images/map1.jpg') no-repeat;
|
||||
}
|
||||
|
||||
.map_summer .map_body{
|
||||
background: url('/images/map2.jpg') no-repeat;
|
||||
}
|
||||
|
||||
.map_fall .map_body{
|
||||
background: url('/images/map3.jpg') no-repeat;
|
||||
}
|
||||
|
||||
.map_winter .map_body{
|
||||
background: url('/images/map4.jpg') no-repeat;
|
||||
}
|
||||
|
||||
.world_map .city_tooltip{
|
||||
position: absolute;
|
||||
display:none;
|
||||
width:120px;
|
||||
border: 0.02em gray solid;
|
||||
}
|
||||
.world_map .city_name{
|
||||
background-color: rgb(30, 164, 255);
|
||||
z-index: 6;
|
||||
line-height:15px;
|
||||
height:15px;
|
||||
|
||||
}
|
||||
.world_map .nation_name{
|
||||
background-color: rgb(30, 164, 255);
|
||||
z-index: 6;
|
||||
line-height:15px;
|
||||
height:15px;
|
||||
border-top: 0.02em gray solid;
|
||||
text-align:right;
|
||||
}
|
||||
|
||||
.world_map .map_flag{
|
||||
width:12px;
|
||||
height:12px;
|
||||
}
|
||||
|
||||
.world_map .my_city{
|
||||
border:solid 0.02em red;/* Always 1px :) */
|
||||
outline:dotted 3px red;
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>JSON 지도</title>
|
||||
<meta charset="UTF-8">
|
||||
<script src="../e_lib/jquery-3.2.1.min.js"></script>
|
||||
<script src="base_map.js"></script>
|
||||
<script src="map.js"></script>
|
||||
<link href="../twe/css/normalize.css" rel="stylesheet">
|
||||
<link href="../twe/css/common.css" rel="stylesheet">
|
||||
<link href="map.css" rel="stylesheet">
|
||||
</head>
|
||||
<body style="background-color:black;margin:50px;">
|
||||
<div class="world_map">
|
||||
<div class="map_title">
|
||||
<span class="map_title_text">
|
||||
217年 2月
|
||||
</span>
|
||||
</div>
|
||||
<div class="map_body">
|
||||
<div class="city_obj my_city" data-text="업" data-nation="우리나라" data-id="9" style="width:200px;height:200px;background:white;"></div>
|
||||
<div class="city_tooltip">
|
||||
<div class="city_name">
|
||||
|
||||
</div>
|
||||
<div class="nation_name">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
+261
@@ -0,0 +1,261 @@
|
||||
|
||||
String.prototype.format = function() {
|
||||
var args = arguments;
|
||||
return this.replace(/{(\d+)}/g, function(match, number) {
|
||||
return typeof args[number] != 'undefined'
|
||||
? args[number]
|
||||
: match
|
||||
;
|
||||
});
|
||||
};
|
||||
|
||||
jQuery(function($){
|
||||
var cityPosition = getCityPosition();
|
||||
|
||||
//OBJ : startYear, year, month, cityList, nationList, spyList, ourCityList, shownByGeneralList, myCity
|
||||
var $world_map = $('.world_map');
|
||||
|
||||
function clearWorldMap(obj){
|
||||
$world_map.find('.city_obj').detach();
|
||||
$world_map
|
||||
.removeClass('map_spring')
|
||||
.removeClass('map_summer')
|
||||
.removeClass('map_fall')
|
||||
.removeClass('map_winter');
|
||||
return obj;
|
||||
}
|
||||
|
||||
function setMapBackground(obj){
|
||||
var startYear = obj.startYear;
|
||||
var year = obj.year;
|
||||
var month = obj.month;
|
||||
|
||||
|
||||
var $map_title = $('.map_title_text');
|
||||
if(year < startYear + 1){
|
||||
$map_title.css('color', 'magenta');
|
||||
}
|
||||
else if(year < startYear + 2){
|
||||
$map_title.css('color', 'orange');
|
||||
}
|
||||
else if(year < startYear + 3){
|
||||
$map_title.css('color', 'yellow');
|
||||
}
|
||||
|
||||
|
||||
if(month <= 3){
|
||||
$world_map.addClass('map_spring');
|
||||
}
|
||||
else if(month <= 6){
|
||||
$world_map.addClass('map_summer');
|
||||
}
|
||||
else if(month <= 6){
|
||||
$world_map.addClass('map_fall');
|
||||
}
|
||||
else{
|
||||
$world_map.addClass('map_winter');
|
||||
}
|
||||
|
||||
$map_title.html('{0}年 {1}月'.format(year, month));
|
||||
|
||||
return obj;
|
||||
}
|
||||
|
||||
function convertCityObjs(obj){
|
||||
//원본 Obj는 굉장히 간소하게 온다, Object 형태로 변환해서 사용한다.
|
||||
|
||||
function toCityObj(arr){
|
||||
return {
|
||||
"id":arr[0],
|
||||
"name":arr[1],
|
||||
"level":arr[2],
|
||||
"state":arr[3],
|
||||
"nationId":arr[4],
|
||||
"region":arr[5],
|
||||
"supply":arr[6]
|
||||
};
|
||||
}
|
||||
|
||||
function toNationObj(arr){
|
||||
return {
|
||||
"id":arr[0],
|
||||
"name":arr[1],
|
||||
"color":arr[2],
|
||||
"capital":(arr[3]!=0)
|
||||
};
|
||||
}
|
||||
|
||||
function convertSpyList(arr){
|
||||
var result = [];
|
||||
arr.forEach(function(v){
|
||||
var cityId = (v / 10) | 0;
|
||||
var spy = v % 10;
|
||||
result[cityId] = spy;
|
||||
});
|
||||
return result;
|
||||
}
|
||||
|
||||
function convertDictById(arr){
|
||||
var result = [];
|
||||
arr.forEach(function(v, i){
|
||||
result[v.id] = v;
|
||||
});
|
||||
return result;
|
||||
}
|
||||
|
||||
var cityList = obj.cityList.map(toCityObj);
|
||||
var nationList = obj.nationList.map(toNationObj);
|
||||
nationList = convertDictById(nationList); //array of object -> dict
|
||||
|
||||
var spyList = convertSpyList(obj.spyList);//Array -> Dict
|
||||
var shownByGeneralList = new Set(obj.shownByGeneralList);//Array -> Set
|
||||
|
||||
var myCity = obj.myCity;
|
||||
var myNation = obj.myNation;
|
||||
|
||||
function formatCityInfo(city) {
|
||||
var region_str = '';
|
||||
var level_str = '';
|
||||
switch(city.region) {
|
||||
case 1: region_str = "【하북|"; break;
|
||||
case 2: region_str = "【중원|"; break;
|
||||
case 3: region_str = "【서북|"; break;
|
||||
case 4: region_str = "【서촉|"; break;
|
||||
case 5: region_str = "【남중|"; break;
|
||||
case 6: region_str = "【 초|"; break;
|
||||
case 7: region_str = "【오월|"; break;
|
||||
case 8: region_str = "【동이|"; break;
|
||||
}
|
||||
|
||||
switch(city.level) {
|
||||
case 1: level_str = "수】"; break;
|
||||
case 2: level_str = "진】"; break;
|
||||
case 3: level_str = "관】"; break;
|
||||
case 4: level_str = "이】"; break;
|
||||
case 5: level_str = "소】"; break;
|
||||
case 6: level_str = "중】"; break;
|
||||
case 7: level_str = "대】"; break;
|
||||
case 8: level_str = "특】"; break;
|
||||
}
|
||||
|
||||
city.text = region_str + city.name + level_str;
|
||||
city.region_str = region_str;
|
||||
city.level_str = level_str;
|
||||
|
||||
return city;
|
||||
}
|
||||
|
||||
function mergePositionInfo(city){
|
||||
var id = city.id;
|
||||
if(!(id in cityPosition)){
|
||||
return city;
|
||||
}
|
||||
var xy_val = cityPosition[id];
|
||||
city.x = xy_val[1];
|
||||
city.y = xy_val[2];
|
||||
return city;
|
||||
}
|
||||
|
||||
function mergeNationInfo(city){
|
||||
//nationId 값으로 isCapital, color, nation을 통합
|
||||
|
||||
var nationId = city.nationId;
|
||||
if(nationId == null || !(nationId in nationList)){
|
||||
city.nationId = null;
|
||||
city.nation = null;
|
||||
city.color = null;
|
||||
city.isCapital = false;
|
||||
return city;
|
||||
}
|
||||
|
||||
var nationObj = nationList[nationId];
|
||||
city.nation = nationObj.name;
|
||||
city.color = nationObj.color;
|
||||
city.isCapital = (nationObj.capital == city.id);
|
||||
|
||||
return city;
|
||||
}
|
||||
|
||||
function mergeClickable(city){
|
||||
//clickable = (remainSpy << 2) | (ourCity << 1) | shownByGeneral
|
||||
var id = city.id;
|
||||
var nationId = city.nationId;
|
||||
var clickable = 0;
|
||||
if(id in spyList){
|
||||
clickable |= spyList[id] << 2;
|
||||
}
|
||||
if(nationId == myNation){
|
||||
clickable |= 2;
|
||||
}
|
||||
if(id in shownByGeneralList){
|
||||
clickable |= 1;
|
||||
}
|
||||
|
||||
city.clickable = clickable;
|
||||
return city;
|
||||
}
|
||||
|
||||
cityList = cityList
|
||||
.map(formatCityInfo)
|
||||
.map(mergePositionInfo)
|
||||
.map(mergeNationInfo)
|
||||
.map(mergeClickable);
|
||||
|
||||
return {
|
||||
'cityList' : cityList,
|
||||
'myCity' : myCity
|
||||
}
|
||||
}
|
||||
|
||||
function drawWorldMap(obj){
|
||||
|
||||
var flagTemplate = '<div class="map_flag"></div>';
|
||||
var backgroundTemplate = '<div class="map_background"></div>';
|
||||
|
||||
var cityList = obj.cityList;
|
||||
var myCity = obj.myCity;
|
||||
|
||||
//TODO: 도시를 그린다.........
|
||||
//
|
||||
//도시 선택 크기는 동일하게 가고 도시 이미지는 div로 설정.
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
var setMouseWork = function(){
|
||||
var $tooltip = $('.world_map .city_tooltip');
|
||||
var $tooltip_city = $tooltip.find('.city_name');
|
||||
var $tooltip_nation = $tooltip.find('.nation_name');
|
||||
|
||||
var $objs = $('.world_map .city_obj');
|
||||
|
||||
var $map_body = $('.world_map .map_body');
|
||||
|
||||
|
||||
$map_body.mousemove(function(e){
|
||||
var parentOffset = $map_body.offset();
|
||||
var relX = e.pageX - parentOffset.left;
|
||||
var relY = e.pageY - parentOffset.top;
|
||||
|
||||
$tooltip.css({'top': relY + 10, 'left': relX + 10});
|
||||
});
|
||||
$objs.hover(function(event){
|
||||
var $city = $(this);
|
||||
|
||||
$tooltip_city.html($city.data('text'));
|
||||
$tooltip_nation.html($city.data('nation'));
|
||||
$tooltip.show();
|
||||
},function(event){
|
||||
$tooltip.hide();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
$.getJSON( 'result.json', {})
|
||||
.then(clearWorldMap)
|
||||
.then(setMapBackground)
|
||||
.then(convertCityObjs)
|
||||
.then(drawWorldMap)
|
||||
.then(setMouseWork);
|
||||
});
|
||||
@@ -0,0 +1,16 @@
|
||||
|
||||
{
|
||||
"staryYear":215,
|
||||
"year":217,
|
||||
"month":5,
|
||||
"cityList":[
|
||||
[1,"name","level","state","nationId","region","supply"]
|
||||
],
|
||||
"nationList":[
|
||||
["id","name","color","capital"]
|
||||
],
|
||||
"spyList":[13, 22],
|
||||
"shownByGeneralList":[65,33,73],
|
||||
"myCity":33,
|
||||
"myNation":1
|
||||
}
|
||||
Reference in New Issue
Block a user