위대한 개발자
179
2019-01-09 16:09:36 작성 2019-01-24 16:27:53 수정됨
3
921

openlayers API




iconFeature.setStyle(
new ol.style.Style({
// 지도상에 찍히는 포인트 스타일 설정
image: new ol.style.Circle({
fill: new ol.style.Fill({ color: [255,190,10,0.7] }),
stroke: new ol.style.Stroke({ color: [120,120,120,1] }),
radius: 6
})
})
);
iconFeatures.push(iconFeature); // iconFeature 에 넣기. 조건문을 이용해 아이콘(포인트)를 다르게 찍어도 괜찮을듯.
}

vectorSource.addFeatures(iconFeatures); // vectorSource 에 features 를 넣기.

map.getView().fit(vectorLayer.getSource().getExtent(), map.getSize()); // 지도상 좌표들이 다 보이는 최소크기로 이동

return iconFeatures;
}


// 맵클릭시 팝업 이벤트
map.on('click', function (evt) {
var feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
return feature;
}
);
if (feature) {
alert("위치 : "+feature.get('nm'));
}
});
해당 마커를 클릭하면 팝업창에 '위치 : 떼부루 해수욕장' 말고, DB에 있는 데이터를 출력하고 싶은데, 어떻게 하면 되나요??ㅠㅠ
0
  • 답변 3

  • Keloper245
    1k
    2019-01-09 16:26:33

    1. 마커를 만들때 연결할 DB데이터의 Index값을 지니게 한다.

    2. 마커를 클릭하는 이벤트가 발생

    3. 클릭이벤트로 마커를 조회, 마커가 지닌 Index값으로 DB데이터를 조회한다.

    4. 해당 Index의 DB데이터를 출력한다.

  • Keloper245
    1k
    2019-01-09 16:26:42

    http://openlayersbook.github.io/

  • Joehispania
    273
    2019-01-09 16:48:42 작성 2019-01-09 16:49:25 수정됨

    이 소스는 어디에서 참고하신 건가요, 아니면 직접 작성하신건가요??

    이미 주석에 답을 적어놓으셨는데...=,.=;;;

     이 부분은 나중에 ajax 등을 통해서 좌표 값을 json object 형태로 가져와서 data 에 넣어주면 됨.


  • 로그인을 하시면 답변을 등록할 수 있습니다.