오픈레이어스 질문입니다..

Question

/** * make by HY.SO * 2019.10.31 * -WFS 변수- * vs1 - vectorsource 1 &#61; 인천 1호선 * vs2 - vectorsource 2 &#61; 인천 2호선 * WFSlayer1 - WFS 인천 1호선 * WFSlayer2 - WFS 인천 2호선 * * -WMS 변수- * imgsource1 - 인천1호선 역위치 * imgsource2 - 인천2호선 역위치 * imgsource3 - 인천1호선 노선도 * imgsource4 - 인천2호선 노선도 * WMSlayer1 - WMS 1호선 역위치 * WMSlayer2 - WMS 2호선 역위치 * WMSlayer3 - WMS 1호선 노선도 * WMSlayer4 - WMS 2호선 노선도 */ var bounds &#61; ol.proj.transformExtent([127,37.58, 126.5,37.4],'EPSG:4326','EPSG:3857'); var geojsonFormat &#61; new ol.format.GeoJSON(); window.loadFeatures &#61; function(response){ v1.addFeatures(geojsonFormat.readFeatures(response)); v2.addFeatures(geojsonFormat.readFeatures(response)); }; //wfs의 source 설정 var v1 &#61; new ol.source.Vector({ loader: function(extent, resolution, projection){ var url &#61; 'http://localhost:8080/geoserver/SubWayWS/ows?' &#43; 'service&#61;WFS&' &#43; 'version&#61;1.1.0&' &#43; 'request&#61;GetFeature&' &#43; 'typename&#61;SubWayWS:1line_coor&' &#43; 'outputFormat&#61;text/javascript&' &#43; 'format_options&#61;callback:loadFeatures&' &#43; 'srsname&#61;EPSG:3857&' &#43; 'bbox&#61;' &#43; extent.join(',') &#43; ',EPSG:3857' $.ajax({ url: url, dataType: 'jsonp', jsonp: false }); }, strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ({ maxZoom: 9 })) }); var v2 &#61; new ol.source.Vector({ loader: function(extent, resolution, projection){ var url &#61; 'http://localhost:8080/geoserver/SubWayWS/ows?' &#43; 'service&#61;WFS&' &#43; 'version&#61;1.1.0&' &#43; 'request&#61;GetFeature&' &#43; 'typename&#61;SubWayWS:2line_coor&' &#43; 'outputFormat&#61;text/javascript&' &#43; 'format_options&#61;callback:loadFeatures&' &#43; 'srsname&#61;EPSG:3857&' &#43; 'bbox&#61;' &#43; extent.join(',') &#43; ',EPSG:3857' $.ajax({ url: url, dataType: 'jsonp', jsonp: false }); }, strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ({ maxZoom: 19 })) }); var styles &#61; [ /* We are using two different styles for the polygons: * - The first style is for the polygons themselves. * - The second style is to draw the vertices of the polygons. * In a custom &#96;geometry&#96; function the vertices of a polygon are * returned as &#96;MultiPoint&#96; geometry, which will be used to render * the style. */ new ol.style.Style({ stroke: new ol.style.Stroke({ color: &#34;Yellow&#34;, width: 3 }), fill: new ol.style.Fill({ color: &#34;rgba(0, 0, 0, 0.1)&#34; }) }) ]; //wfs레이어 설정 인천 1호선 vector var WFSlayer1 &#61; new ol.layer.Vector({ source: v1, visible : true, style: styles }); //wfs레이어 설정 인천 2호선 vector var WFSlayer2 &#61; new ol.layer.Vector({ source: v2, visible : true, style: styles }); //wms의 source 설정 var imgsource1 &#61; new ol.source.ImageWMS({ ratio: 1, url: 'http://localhost:8080/geoserver/SubWayWS/wms', params: {'FORMAT': 'image/png',LAYERS: 'SubWayWS:1line_coor'} }); var imgsource2 &#61; new ol.source.ImageWMS({ ratio: 1, url: 'http://localhost:8080/geoserver/SubWayWS/wms', params: {'FORMAT': 'image/png',LAYERS: 'SubWayWS:2line_coor'} }); var imgsource3 &#61; new ol.source.ImageWMS({ ratio: 1, url: 'http://localhost:8080/geoserver/SubWayWS/wms', params: {'FORMAT': 'image/png',LAYERS: 'SubWayWS:1line_line'} }); var imgsource4 &#61; new ol.source.ImageWMS({ ratio: 1, url: 'http://localhost:8080/geoserver/SubWayWS/wms', params: {'FORMAT': 'image/png',LAYERS: 'SubWayWS:2line_line'} }); //wms레이어 설정 var WMSlayer1 &#61; new ol.layer.Image({ source: imgsource1, visible : true }); var WMSlayer2 &#61; new ol.layer.Image({ source: imgsource2, visible : true }); var WMSlayer3 &#61; new ol.layer.Image({ source: imgsource3, visible : true }); var WMSlayer4 &#61; new ol.layer.Image({ source: imgsource4, visible : true }); // 배경레이어 var background &#61; new ol.layer.Tile({ source: new ol.source.OSM() }); var map &#61; new ol.Map({ controls: ol.control.defaults({ attribution: false }), target: 'map', layers: [background, WFSlayer1, WFSlayer2, WMSlayer3, WMSlayer4, WMSlayer1,WMSlayer2] }); map.getView().fit(bounds, map.getSize()); // 선택 기능 map.on('singleclick', function(evt){ //console.log(selectTools); if(selectTools&#61;&#61;true){ displayFeatureInfo(evt.pixel); } }); var displayFeatureInfo &#61; function(pixel){ var feature &#61; map.forEachFeatureAtPixel(pixel, function(feature,layer){ // console.log('fEFAP 메서드 실행') return feature; }); console.log(feature); if(feature){ // console.log('객체선택'); FeatureInfoLoad(feature); }else{ // console.log('객체 미선택'); FeatureInfoWndClose(); } }; function selectline(selectname) { //노선도 선택적 view switch(selectname){ case&#34;Inc1line&#34;: // console.log(&#34;인천 1호선&#34;) console.log(WFSlayer1) map.removeLayer(WMSlayer2); map.removeLayer(WMSlayer4); WFSlayer2.setOpacity(1); WMSlayer2.visible&#61;false; WMSlayer4.visible&#61;false; if(WMSlayer3.visible&#61;&#61;false){ WMSlayer1.visible&#61;true; WMSlayer3.visible&#61;true; map.addLayer(WMSlayer3); map.addLayer(WMSlayer1); } break; case&#34;Inc2line&#34;: // console.log(&#34;인천 2호선&#34;) map.removeLayer(WMSlayer1); map.removeLayer(WMSlayer3); WMSlayer1.visible&#61;false; WMSlayer3.visible&#61;false; if(WMSlayer4.visible&#61;&#61;false){ WMSlayer2.visible&#61;true; WMSlayer4.visible&#61;true; map.addLayer(WMSlayer4); map.addLayer(WMSlayer2); } break; default: // console.log(&#34;전체 노선&#34;) if(WMSlayer4.visible&#61;&#61;false){ WMSlayer2.visible&#61;true; WMSlayer4.visible&#61;true; map.addLayer(WMSlayer4); map.addLayer(WMSlayer2); } if(WMSlayer3.visible&#61;&#61;false){ WMSlayer1.visible&#61;true; WMSlayer3.visible&#61;true; map.addLayer(WMSlayer3); map.addLayer(WMSlayer1); } break; } } var selectTools &#61; true; // 선택기능 활성화 true:메뉴 보기 가능 false:메뉴 보기 불가 function setSelectTools(on){ //선택기능 설정 함수 selectTools &#61; on; } function setGIDList(selectgid){ map.getLayers().item(2) var strCQL &#61; &#34;cam_id in(&#34;&#43;selectgid&#43;&#34;)&#34;; imagesourceWMS.updateParams({'CQL_FILTER': strCQL}); };안녕하세요 오픈레이어스를 공부하는 학생입니다. 위의 사진을 보시면 WFS(파란띠의 점)의 점의 style을 변경하고 싶어서 var styles &#61; [ /* We are using two different styles for the polygons: * - The first style is for the polygons themselves. * - The second style is to draw the vertices of the polygons. * In a custom &#96;geometry&#96; function the vertices of a polygon are * returned as &#96;MultiPoint&#96; geometry, which will be used to render * the style. */ new ol.style.Style({ stroke: new ol.style.Stroke({ color: &#34;Yellow&#34;, width: 3 }), fill: new ol.style.Fill({ color: &#34;rgba(0, 0, 0, 0.1)&#34; }) }) ]; var WFSlayer1 &#61; new ol.layer.Vector({ source: v1, visible : true, style: styles }); var v1 &#61; new ol.source.Vector({ loader: function(extent, resolution, projection){ var url &#61; 'http://localhost:8080/geoserver/SubWayWS/ows?' &#43; 'service&#61;WFS&' &#43; 'version&#61;1.1.0&' &#43; 'request&#61;GetFeature&' &#43; 'typename&#61;SubWayWS:1line_coor&' &#43; 'outputFormat&#61;text/javascript&' &#43; 'format_options&#61;callback:loadFeatures&' &#43; 'srsname&#61;EPSG:3857&' &#43; 'bbox&#61;' &#43; extent.join(',') &#43; ',EPSG:3857' $.ajax({ url: url, dataType: 'jsonp', jsonp: false }); }, strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ({ maxZoom: 9 })) });다음과 같이 코드를 작성하였습니다. 그러나 스타일이 변경이 이루어 지지 않는데 왜 그런지 알 수 있을 까요? 혹시 WFS의 저기 보이는 점을 보이지 않게 투명하게 하고 싶은데 방법을 알고 있으시다면 조언 부탁 드릴께요...

sonshinchul · Answer

전체 적인 코드를 다보진 않았는데 WFSlayer1 이쪽에다가 정의한 스타일을 적용하고 싶으신거 같은데 WFSlayer1.setStyle(style) 이런식으로 객체에 설정해줘야 합니다.

오픈레이어스 질문입니다..

1개의 답변

#openlayers 목록