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);
'Career > Openlayers' 카테고리의 다른 글
[Openlayers] Openlayers Heatmap Usage (0) | 2023.02.01 |
---|---|
[Openlayers] Openlayer's sensitive properties (0) | 2023.01.25 |
[Openlayers] 오픈레이어스 Polygon 사용방법 (0) | 2023.01.19 |
[Openlayers] 오픈레이어스 ol.geom.style 사용방법 (0) | 2023.01.19 |
[Openlayers] 오픈레이어스 LineString 사용 방법 (0) | 2023.01.19 |