78 lines
2.1 KiB
HTML
78 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
<title>Event</title>
|
|
<!-- API key를 포함하여 브이월드 API URL을 지정하여 호출끝 http -->
|
|
<script type="text/javascript" src="https://map.vworld.kr/js/vworldMapInit.js.do?version=2.0&apiKey=7E59C6EC-6BB0-3ED9-ACCC-4158869D7CFD"></script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<div id="vmap" style="width: 100%; Height: 600px; left: 0px; top: 0px"></div>
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
vw.ol3.CameraPosition.center = [14086424.137257246, 4301029.874526409];
|
|
vw.ol3.CameraPosition.zoom =9;
|
|
//지도의 초기 위치값을 설정
|
|
|
|
|
|
vw.ol3.MapOptions = {
|
|
|
|
basemapType: vw.ol3.BasemapType.GRAPHIC
|
|
, controlDensity: vw.ol3.DensityType.EMPTY
|
|
, interactionDensity: vw.ol3.DensityType.BASIC
|
|
, controlsAutoArrange: true
|
|
, homePosition: vw.ol3.CameraPosition
|
|
, initPosition: vw.ol3.CameraPosition
|
|
};
|
|
|
|
let vmap = new vw.ol3.Map("vmap", vw.ol3.MapOptions);
|
|
|
|
let coordinates = [ [ 14097479.31202193, 4269696.333845764 ],
|
|
[ 14097479.31202193, 4291146.428300351 ],
|
|
[ 14111358.784904309, 4291146.428300351 ],
|
|
[ 14111358.784904309, 4269696.333845764 ] ]; //좌표 설정
|
|
|
|
let polygon_feature = new ol.Feature({
|
|
geometry : new ol.geom.Polygon([ coordinates ])
|
|
,name : "사각형"
|
|
}); // polygon_feature 생성
|
|
|
|
let style = new ol.style.Style({
|
|
stroke : new ol.style.Stroke({
|
|
color : [ 0, 255, 0, .7 ],
|
|
width : 3
|
|
}),
|
|
fill : new ol.style.Fill({
|
|
color : [ 255, 0, 0, .4 ]
|
|
})
|
|
}); // 스타일 정의
|
|
|
|
polygon_feature.setStyle(style); // 정의한 스타일을 적용
|
|
|
|
let vector_layer = new ol.layer.Vector({
|
|
source : new ol.source.Vector({
|
|
features : [ polygon_feature ]
|
|
})
|
|
})
|
|
|
|
vmap.addMarker()
|
|
|
|
vmap.addLayer(vector_layer); // 폴리곤 객체 등록
|
|
|
|
vmap.on("click", function(evt) {
|
|
|
|
let coordinate = evt.coordinate //좌표 정보
|
|
let pixel = evt.pixel //선택한 픽셀 값
|
|
|
|
vmap.forEachFeatureAtPixel(pixel, function(feature, layer) {
|
|
let name = feature.get("name");
|
|
alert(name);
|
|
});
|
|
})
|
|
</script>
|
|
</body>
|
|
</html> |