Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="http://openlayers.org/en/master/css/ol.css" type="text/css">
    <style type="text/css">
    body {
      width: 960px;
      height: 500px;
      position: relative;
    }
    #map {
      width: 100%;
      height: 100%;
    }
    </style>
    <title>Create mask on shift-drag</title>
  </head>
  <body>
    <div id="map" style="height: 400px;"></div>
    <form id="searchForm" action="#" class="form_data" onsubmit="return false;search();">
    <input type="hidden" name="pageIndex" value="1" />
    <input type="hidden" name="pageUnit" value="10" />
    <input type="hidden" name="apiKey" value="E4A59B05-0CF4-3654-BD0C-A169F70CCB34" />
    
    <div>
        <select name="category">
            <option value="poi">poi</option>
            <option value="Juso">address</option>
        </select>
        <input type="text" id="searchValue" name="q" value="판교로" style="width: 100px;" /> <a href="javascript:search();" >검색</a> 
        </div>
    </form>
    
    <script src="http://openlayers.org/en/master/build/ol.js" type="text/javascript"></script>
    <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
    <script type="text/javascript">
        /*
            범위 설정
        */
        var maxExtent = ol.proj.transformExtent([112.5, 29.53522956294847, 135, 45.089], 'EPSG:4326', 'EPSG:3857')
        var newProj = ol.proj.get('EPSG:3857');
        var newProjExtent = newProj.getExtent();
        
        /*
            초기 위치 줌 설정 tile 설정
            
            브이월드 지도
            source: new ol.source.XYZ({
                url: 'http://api.vworld.kr/req/wmts/1.0.0/E4A59B05-0CF4-3654-BD0C-A169F70CCB34/Base/{z}/{y}/{x}.png'
            })
            OSM 지도
            source: new ol.source.OSM()
        */
        var map = new ol.Map({
          target: 'map',
          layers: [
            new ol.layer.Tile({
              source: new ol.source.OSM()
            })
          ],
          view: new ol.View({
            center: ol.proj.transform([126.9380517322744,37.16792263658907], 'EPSG:4326', 'EPSG:900913'),
            zoom: 5,
            extent :maxExtent
          })
        });
        
        var features = new Array();
        
        var styleCache = new Array();
        
        var search = function(){
            $.ajax({
                type: "get",
                url: "http://map.vworld.kr/search.do",
                data : $('#searchForm').serialize(),
                dataType: 'jsonp',
                async: false,
                success: function(data) {
                    for(var o in data.LIST){ 
                        if(o==0){
                            move(data.LIST[o].xpos*1,data.LIST[o].ypos*1);
                        }
                        
                        features[o] = new ol.Feature({
                            geometry: new ol.geom.Point(ol.proj.transform([ data.LIST[o].xpos*1,data.LIST[o].ypos*1],'EPSG:4326', "EPSG:900913")),
                            name: data.LIST[o].juso,
                            population: 4000,
                            rainfall: 500
                        });
                    }
                    
                    var vectorSource = new ol.source.Vector({
                          features: features
                    });
                    
                    var clusterSource = new ol.source.Cluster({
                        distance: parseInt(10, 10),
                        source: vectorSource
                    });
                    
                    var clusters = new ol.layer.Vector({
                        source: clusterSource,
                        style: function(feature) {
                            var size = feature.get('features').length;
                            var style = styleCache[size];
                            if (!style) {
                                style = new ol.style.Style({
                                image: new ol.style.Circle({
                                    radius: 10,
                                    stroke: new ol.style.Stroke({
                                      color: '#fff'
                                    }),
                                    fill: new ol.style.Fill({
                                      color: '#3399CC'
                                    })
                                }),
                                text: new ol.style.Text({
                                  text: size.toString(),
                                  fill: new ol.style.Fill({
                                    color: '#fff'
                                  })
                                })
                              });
                              styleCache[size] = style;
                            }
                            return style;
                        }
                    });
                    
                    /*
                        기존검색결과를 제거하기 위해 키 값 생성
                    */
                    clusters.set("cluster","search_cluster")
                    
                    map.getLayers().forEach(function(layer){
                        if(layer.get("cluster")=="search_cluster"){
                            map.removeLayer(layer);
                        }
                    });
                    
                    map.addLayer(clusters);
                },
                error: function(xhr, stat, err) {}
            });
            
​
        }
        
        var move = function(x,y){//127.10153, 37.402566
            map.getView().setCenter(ol.proj.transform([ x, y ],'EPSG:4326', "EPSG:900913")); // 지도 이동
            map.getView().setZoom(12);
        }
    </script>
  </body>
</html>
 
#map {
  width: 100%;
  height: 500px;
}
 
var getTileUrl = function( x, y, z ) {
  // x, y는 tileCoord, z는 level 입니다.
  // 이 좌표를 조합하여 이미지 URL을 return해야 합니다.
  
  // 13레벨에서 타일 원점의 타일이미지
  // http://i0.maps.daum-img.net/map/image/G03/i/2015sheep/L13/0/0.png
  
  // dummy image
  return 'http://fakeimg.pl/256x256/efefef,128/';
};
​
var fakeTileset = new daum.maps.Tileset( 256, 256, getTileUrl );
​
daum.maps.Tileset.add( 'FAKE', fakeTileset );
​
var mapNode = document.getElementById( 'map' );
​
var map = new daum.maps.Map( mapNode, {
  // wcongnamul 좌표 기준, 타일 원점의 좌하단 좌표
  center: new daum.maps.Coords( -75000, -150000 ),
  level: 13
});
​
map.addOverlayMapTypeId( daum.maps.MapTypeId.FAKE );
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers