<!-- <script>
// for console debugging
if (window['console'] === undefined || console.log === undefined )
{ console = {log: function() {}, info: function() {}, warn: function () {}, error: function() {}};}
else if (!location.href.match( '192.168' ))
{ console.log = console.info = console.warn = console.error = function () {};}
</script> -->
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Safe Coast Big Board</title>
<script type="text/javascript" src="../js/OpenLayers/OpenLayers.js"></script>
<script src="http://maps.google.co.kr/maps/api/js?v=3.2&sensor=false"></script>
<script type="text/javascript" src="http://map.vworld.kr/js/apis.do?type=Base&apiKey=37632EA1-D829-3AA6-83A6-BA5879097F56&domain=http://112.171.36.179:10133"></script>
<script type="text/javascript">
var map, wms, vectors;
function mapInit() {
var lon = 65;
var lat = 15;
var zoom = 3;
var symbol = new Geometry('circle', 20, 1312978855);
OpenLayers.DOTS_PER_INCH = 72;
map = new OpenLayers.Map('map',{
displayProjection:new OpenLayers.Projection('EPSG:4326'),
projection:new OpenLayers.Projection('EPSG:900913')
/*minScale : 2350000,
maxScale : 625,*/
/* numZoomLevels: 20,
maxResolution: 156543.0339,
tileOrigin : new OpenLayers.LonLat(-20037508.34, -20037508.34),
maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),
restrictedExtent : new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),
tileSize : new OpenLayers.Size(256,256),
controls: [] */
});
//======================================
//1. 배경지도 추가하기
/* vBase = new vworld.Layers.Base('배경지도');
if (vBase != null){vBase.id="vBase"; map.addLayer(vBase); vBase.setVisibility(false); }
//2. 영상지도 추가하기
vSAT = new vworld.Layers.Satellite('영상지도');
if (vSAT != null) {vSAT.id="vSAT"; map.addLayer(vSAT); vBase.setVisibility(false); } */
//4. 구글지도 추가하기
ghyb = new OpenLayers.Layer.Google(
"Google Hybrid",
{type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20}
);
ghyb.id="ghyb"; map.addLayer(ghyb);
map.setBaseLayer(ghyb);
//===========================================
//map.setCenter(new OpenLayers.LonLat(14243425.793355, 4342305.8698004), 8);
var context = {
getSize: function(feature) {
return 20 + Math.round(symbol.getSize(feature.attributes["population"]) * Math.pow(2,map.getZoom()-1));
},
getChartURL: function(feature) {
var values = feature.attributes["pop_0_14"] + ',' + feature.attributes["pop_15_59"] + ',' + feature.attributes["pop_60_above"];
var size = 20 + Math.round(symbol.getSize(feature.attributes["population"]) * Math.pow(2,map.getZoom()-1));
var charturl = 'http://chart.apis.google.com/chart?cht=p3&chd=t:' + values + '&chs=' + size + 'x' + size + '&chf=bg,s,ffffff00';
return charturl;
}
};
//cht 차트타입, chs=size, chf=백그라운드, chd= 밸류 ,chl = label
var template = {
fillOpacity: 1.0,
externalGraphic: "http://chart.apis.google.com/chart?cht=p3&chd=t:15,30,15,70,50,100&chs=200x100&chf=bg,s,ffffff00",
graphicWidth: 80,
graphicHeight: 50,
strokeWidth: 0
};
var style = new OpenLayers.Style(template, {context: context});
var styleMap = new OpenLayers.StyleMap({'default': style, 'select': {fillOpacity: 0.7}});
vectors = new OpenLayers.Layer.GML( "Internet Users", "../jsp/population_2005_chart.json",
{ format: OpenLayers.Format.GeoJSON,
styleMap: styleMap,
isBaseLayer: false,
projection: new OpenLayers.Projection("EPSG:4326")} );
map.addLayers([vectors]);
map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
map.addControl(new OpenLayers.Control.LayerSwitcher());
var options = {
hover: true,
onSelect: serialize
};
var select = new OpenLayers.Control.SelectFeature(vectors, options);
map.addControl(select);
select.activate();
}
function serialize() {
var Msg = "<strong>" + vectors.selectedFeatures[0].attributes["name"] + "</strong><br/>";
Msg += "Population: " + vectors.selectedFeatures[0].attributes["population"] + "<br/>";
Msg += "0-14 years: " + vectors.selectedFeatures[0].attributes["pop_0_14"] + "%<br/>";
Msg += "15-59 years: " + vectors.selectedFeatures[0].attributes["pop_15_59"] + "%<br/>";
Msg += "60 and over: " + vectors.selectedFeatures[0].attributes["pop_60_above"] + "%<br/>";
document.getElementById("info").innerHTML = Msg;
}
function Geometry(symbol, maxSize, maxValue){
this.symbol = symbol;
this.maxSize = maxSize;
this.maxValue = maxValue;
this.getSize = function(value){
switch(this.symbol) {
case 'circle': // Returns radius of the circle
case 'square': // Returns length of a side
return Math.sqrt(value/this.maxValue)*this.maxSize;
case 'bar': // Returns height of the bar
return (value/this.maxValue)*this.maxSize;
case 'sphere': // Returns radius of the sphere
case 'cube': // Returns length of a side
return Math.pow(value/this.maxValue, 1/3)*this.maxSize;
}
}
}
</script>
</head>
<body onload="mapInit();">
<div id="info"></div>
<div id="map"></div>
</body>
'develop > web GIS' 카테고리의 다른 글
| POST GIS VIEW (0) | 2015.03.10 |
|---|---|
| dojo를 이용한 vworld map 띄우기 (0) | 2015.02.05 |
| EPSG:4326 to EPSG:900913 transform (0) | 2014.11.19 |
| OpenLayers addfeatures(json) 에서 json형식 java에서 만들기 (0) | 2014.11.17 |
| 레이어 클릭시 이벤트 발생 (0) | 2014.11.16 |
