Career/Openlayers

[Openlayers] Openlayers code storage

AlexHouse 2023. 1. 26. 15:57
728x90

 

 

polygon, circle, dot ... and style

 

 

                const map = new ol.Map ({
                    target : 'o2map',
                    layers : [
                        new ol.layer.Tile({
                            source: new ol.source.OSM()
                        })
                    ],
                    view: new ol.View ({
                        zoom: 5,
                        projection : 'EPSG:4326',
                        center: [127, 35.22],
                    })
                })


                const featureSource = new ol.source.Vector ({
                })
                const featureLayer = new ol.layer.Vector ({
                    source: featureSource
                })




                const dotLayer = new ol.Feature ({
                   geometry : new ol.geom.Point([128,37]),
                })

                const circleFeature = new ol.Feature ({
                    geometry: new ol.geom.Circle([127, 38], 2),
                })

                const circleStyle = new ol.style.Style  ({
                    radius: 5,
                    fill: new ol.style.Fill ({
                        color: 'hotpink'
                    }),
                    stroke : new ol.style.Stroke({
                        color: 'purple',
                        width: 3
                    }),
                })

                const polygon = new ol.geom.Polygon([]);
                polygon.setCoordinates([[[128, 37], [130, 37], [130, 35], [128, 35]]])
                const polygonFeature = new ol.Feature(polygon)

                const polygonStyle = new ol.style.Style ({
                    fill:  new ol.style.Fill ({
                        color: 'blue'
                    }),
                    stroke : new ol.style.Stroke ({
                        color : '#ffffff',
                        width: 10
                    })
                })

                polygonFeature.setStyle(polygonStyle);

                const olGroup = new ol.layer.Group ({
                    id: 'groupfriend',
                    name: 'amigo',
                    layers : [
                        polygon, circleFeature, dotLayer
                    ]
                })


                /*const heatMap = new ol.layer.Vector ({
                    source: new ol.source.Vector({
                        features: [new ol.Feature(new ol.geom.Point([127, 37]))]
                    }),

                })*/

                circleFeature.setStyle(circleStyle);

/*                featureSource.addFeatures([dotLayer,polygonFeature, circleFeature]);*/
                featureSource.addFeature(olGroup);
                map.addLayer(featureLayer);

 

 


 

 

 

o2.common.Config.HOST.VALUES.PLATFORM_HOST = "/o2.platform";
/*
            o2.common.Config.VWORLD_API_KEY = "03E82D55-5090-38D4-B597-F6BC9C852011";
            o2.common.Config.HOST.VALUES.APP_CONTEXT_PATH = "/o2.platform";
            o2.common.Config.HOST.VALUES.APP_PROXY = "common/proxy.jsp";
            o2.common.Config.HOST.VALUES.USE_PROXY = true;
*/

const mapOpt = {
     target: 'o2map'
 }

const _map = new o2.map.O2Map(mapOpt);

/* ol.Map 은 간단히 지도를 띄워주는 역할 view는 굳이 적지 않아도 되긴한데 적는걸 권장 */




const scale = {
    id: 'scale',
    name: 'scale',
    prefix: 'DBMS:O2ASIS_PG',
    tableNm: 'CML_I050_AS',
    opacity: 0.5,
    minResolution: 1,
    MaxResolution: 2,
    preload: 1,
    zIndex: 2,
    minZoom: 1,
    maxZoom: 10,
    crsCode: 'EPSG:5181',
    UUID:1,
    type: String
}

/* 지도안에 map -> addLayer(레이어 지도를 씌움) -> 그지도는 ? 아까 담았던 featureLayer*/

const scaleData = {
    id: 'ssdd',
    name:'ssd',
    url: o2.common.Config.getHostWMS(),
    params: {
        LAYERS: scale.prefix + ":" + scale.tableNm
    }
}
/* 오픈스트리트맵 */
const openSt = new ol.layer.Tile({
    source: new ol.source.OSM(),
    visible: true,
    opacity: 1
})

scale.source = new ol.source.TileWMS(scaleData);
const layer = new o2.layer.O2Layer(scale);

_map.addO2Layer(layer, 'SVC');
_map.addO2Layer(openSt);

728x90