통계 데이터에 근거하여 지도상에서 자치체에 대해 색채를 구분하다
6290 단어 mapGoogleChartsAPIydnjp
또한 둘 다 정적 지도 이미지를 생성하여 굴러가는 이동이나 초점화 등 동적 지도를 제공하지 않는다.이런 동적 서비스에 Google Maps API 또는 Yahoo!JavaScript 지도 API를 제공한다.
Google Charts API Geochart
Google Charts API의 Geochart에서는 다음과 같이 도도부현별로 색상을 구분합니다.<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["geochart"]});
google.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Region', 'Data'],
['北海道', 5],
['青森', 12],
['岩手', 15],
['宮城', 8],
['秋田', 3],
['山形', 18],
['福島', 22],
['茨城', 67],
['栃木', 32],
['群馬', 17],
['埼玉', 67],
['千葉', 56],
['東京', 50],
['神奈川', 49],
['新潟', 89],
['富山', 92],
['石川', 93],
['福井', 90],
['山梨', 95],
['長野', 70],
['岐阜', 73],
['静岡', 75],
['愛知', 78],
['三重', 74],
['滋賀', 76],
['京都', 59],
['大阪', 60],
['兵庫', 49],
['奈良', 99],
['和歌山', 90],
['鳥取', 63],
['島根', 62],
['岡山', 61],
['広島', 79],
['山口', 60],
['徳島', 64],
['香川', 64],
['愛媛', 64],
['高知', 62],
['福岡', 71],
['佐賀', 63],
['長崎', 63],
['熊本', 53],
['大分', 53],
['宮崎', 53],
['鹿児島', 54],
['沖縄', 53]
]);
var options = {
region: 'JP',
resolution: 'provinces',
legend: 'none'
};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="regions_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
이상의 지정을 통해 아래 지도를 제작할 수 있습니다.
도도부현 명칭 부분도 JP-01 형태로 지정할 수 있다.'JP-'이후 추가도도부현 코드를 통해 도도부현을 지정할 수 있다.
또한 색상 구분 외에 태그를 추가할 수 있습니다.
https://developers.google.com/chart/interactive/docs/gallery/geochart#marker-geocharts
Yahoo!정적 매핑 API
Google Charts API Geochart에서는 도도부현 단위로만 구분할 수 있지만 사용Yahoo!정적 매핑 API을 통해 시정촌 단위로 간단하게 구분할 수 있다.
예를 들어 다음 코드(실제 1행)를 실행하면 지정된 가나가와(神奈川)현의 일부 시마치(市町) 마을을 색깔로 구분할 수 있다.http://map.olp.yahooapis.jp/OpenLocalPlatform/V1/static?
width=600&height=600&lat=35.4&lon=139.4&z=11&appid=アプリID
&mode=blankmap
&style=bm.p.14401:B0C4DE|
bm.p.14212:DCDCDC|
bm.p.14205:ADD8E6|
bm.p.14207:DCDCDC|
bm.p.14213:B0C4DE|
bm.p.14211:DCDCDC|
bm.p.14301:DCDCDC|
bm.p.14203:B0C4DE|
bm.p.14214:DCDCDC|
bm.p.14116:B0C4DE|
bm.p.14204:ADD8E6|
bm.p.14130:B0C4DE|
bm.p.14113:DCDCDC|
bm.p.14210:DCDCDC|
bm.p.14342:DCDCDC|
bm.p.14103:DCDCDC|
bm.p.14206:ADD8E6|
bm.p.14115:DCDCDC|
bm.p.14321:7FFFD4|
bm.p.14118:DCDCDC|
bm.p.14105:DCDCDC|
bm.p.14104:87CEFA|
bm.p.14101:DCDCDC|
bm.p.14117:DCDCDC|
bm.p.14102:B0C4DE|
bm.p.14108:ADD8E6|
bm.p.14100:DCDCDC|
bm.p.14110:DCDCDC|
bm.p.14201:B0C4DE
이상의 지정을 통해 아래 지도를 제작할 수 있습니다.
지정할 수 있는 매개변수에 대해서는 Yahoo!정적 매핑 API에 대한 요청 매개변수 목록를 참조하십시오.mode=blankmap에서 흰 지도가 되어 예와 같은 색깔 구분을 할 수 있다.style=에서 다각형, 경계선, 배경, 주석의 색상을 지정할 수 있습니다.다각형의 색을 bm.p.{code} 형식으로 지정하지만 code에서 행정 코드 사용하면 자치체를 지정할 수 있다.
그리고 Yahoo !정적 그림 API를 사용하려면 응용 프로그램 ID를 등록해야 합니다.여기.부터 등록합니다.
Reference
이 문제에 관하여(통계 데이터에 근거하여 지도상에서 자치체에 대해 색채를 구분하다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/takoratta/items/473d6b8616e1b9230546
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["geochart"]});
google.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Region', 'Data'],
['北海道', 5],
['青森', 12],
['岩手', 15],
['宮城', 8],
['秋田', 3],
['山形', 18],
['福島', 22],
['茨城', 67],
['栃木', 32],
['群馬', 17],
['埼玉', 67],
['千葉', 56],
['東京', 50],
['神奈川', 49],
['新潟', 89],
['富山', 92],
['石川', 93],
['福井', 90],
['山梨', 95],
['長野', 70],
['岐阜', 73],
['静岡', 75],
['愛知', 78],
['三重', 74],
['滋賀', 76],
['京都', 59],
['大阪', 60],
['兵庫', 49],
['奈良', 99],
['和歌山', 90],
['鳥取', 63],
['島根', 62],
['岡山', 61],
['広島', 79],
['山口', 60],
['徳島', 64],
['香川', 64],
['愛媛', 64],
['高知', 62],
['福岡', 71],
['佐賀', 63],
['長崎', 63],
['熊本', 53],
['大分', 53],
['宮崎', 53],
['鹿児島', 54],
['沖縄', 53]
]);
var options = {
region: 'JP',
resolution: 'provinces',
legend: 'none'
};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="regions_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Google Charts API Geochart에서는 도도부현 단위로만 구분할 수 있지만 사용Yahoo!정적 매핑 API을 통해 시정촌 단위로 간단하게 구분할 수 있다.
예를 들어 다음 코드(실제 1행)를 실행하면 지정된 가나가와(神奈川)현의 일부 시마치(市町) 마을을 색깔로 구분할 수 있다.
http://map.olp.yahooapis.jp/OpenLocalPlatform/V1/static?
width=600&height=600&lat=35.4&lon=139.4&z=11&appid=アプリID
&mode=blankmap
&style=bm.p.14401:B0C4DE|
bm.p.14212:DCDCDC|
bm.p.14205:ADD8E6|
bm.p.14207:DCDCDC|
bm.p.14213:B0C4DE|
bm.p.14211:DCDCDC|
bm.p.14301:DCDCDC|
bm.p.14203:B0C4DE|
bm.p.14214:DCDCDC|
bm.p.14116:B0C4DE|
bm.p.14204:ADD8E6|
bm.p.14130:B0C4DE|
bm.p.14113:DCDCDC|
bm.p.14210:DCDCDC|
bm.p.14342:DCDCDC|
bm.p.14103:DCDCDC|
bm.p.14206:ADD8E6|
bm.p.14115:DCDCDC|
bm.p.14321:7FFFD4|
bm.p.14118:DCDCDC|
bm.p.14105:DCDCDC|
bm.p.14104:87CEFA|
bm.p.14101:DCDCDC|
bm.p.14117:DCDCDC|
bm.p.14102:B0C4DE|
bm.p.14108:ADD8E6|
bm.p.14100:DCDCDC|
bm.p.14110:DCDCDC|
bm.p.14201:B0C4DE
지정할 수 있는 매개변수에 대해서는 Yahoo!정적 매핑 API에 대한 요청 매개변수 목록를 참조하십시오.
mode=blankmap에서 흰 지도가 되어 예와 같은 색깔 구분을 할 수 있다.style=에서 다각형, 경계선, 배경, 주석의 색상을 지정할 수 있습니다.다각형의 색을 bm.p.{code} 형식으로 지정하지만 code에서 행정 코드 사용하면 자치체를 지정할 수 있다.그리고 Yahoo !정적 그림 API를 사용하려면 응용 프로그램 ID를 등록해야 합니다.여기.부터 등록합니다.
Reference
이 문제에 관하여(통계 데이터에 근거하여 지도상에서 자치체에 대해 색채를 구분하다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/takoratta/items/473d6b8616e1b9230546텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
