본문 바로가기
IT 개발/OpenLayers

OpenLayers (하나의 마커 띄우기)

by Love of fate 2019. 9. 1.
728x90
반응형

* 하나의 마커 띄우기 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
//상세페이지 지도 띄우기
function map(data){
    
    $("#article_map").html("");
    
    var iconFeature = new ol.Feature({
        geometry : new ol.geom.Point([data.wgs84_lon, data.wgs84_lat]),
        name : data.spot_nm + " 관측소",
        population : 4000,
        rainfall : 500
    });
 
    var vectorSource = new ol.source.Vector({
        features : [ iconFeature ]
    });
 
    var vectorLayer = new ol.layer.Vector({
        source : vectorSource,
        style: new ol.style.Style({
            image: new ol.style.Icon({
                anchor: [0.50.96],
                scale : 0.02,
                src: '/resources/image/marker-1140068_1920.png'
            })
        })
    });
 
    var map = new ol.Map({
        layers : [ new ol.layer.Tile({source : new ol.source.OSM()}), vectorLayer],
        target : document.getElementById('article_map'),
        view : new ol.View({
            projection: 'EPSG:4326',
            center : [data.wgs84_lon, data.wgs84_lat],
            zoom : 17
        })
    });
}
 

728x90
반응형

'IT 개발 > OpenLayers' 카테고리의 다른 글

OpenLayers (Mask Layer)  (0) 2020.01.17
OpenLayers 기본  (0) 2020.01.16
OpenLayers (다중 마커 띄우기)  (0) 2020.01.13
openLayers Vworld / EPSG : 3857 관련  (0) 2019.12.23
OpenLayers (지도 띄우기)  (0) 2019.08.14