🙆🏻‍♀️ 객체 스타일 변경하기(feature style) 🙆🏻‍♀️

눈물의 서커스의 서막

진짜 API 문서 보면서 구글링 하면서 기능 구현하려니 눈물이 난다 눈물이 나😭
별 것 아닌 거 같은데 별 게 돼 버려서 오늘도 눈물의 서커스.
오전 업무 시간을 와장창 내버린 오늘의 주인공은 '객체 스타일 변경(feature style)' 이다.
객체 선택 뒤, 사용자가 정보를 입력하고 색을 선택한 후 수정 버튼을 누르면 변경이 되는 것을 구현하고자 했다.

우선 customStyle 함수를 만들었다.

CustomStyle(feature: Feature<any> | RenderFeature) {
  const name = feature.get("name");
  const color = feature.get("color");

  return new Style({
    fill: new Fill({
      color: "rgba(0, 0, 0, 0.2)",
    }),
    stroke: new Stroke({
      color: color ? color : "green",
      width: 2,
    }),
    image: new CircleStyle({
      radius: 7,
      fill: new Fill({
        color: color ? color : "green",
      }),
    }),
    text: new Text({
      font: "12px Calibri,sans-serif",
      fill: new Fill({ color: "#000" }),
      stroke: new Stroke({
        color: "#fff",
        width: 2,
      }),
      text: name,
    }),
  });
}

그다음 수정 함수에서는 feature의 속성과 스타일을 수정했다.

const onModifyHandler = () => {
  feature.setProperties({ name: name, color: color });
  feature.setStyle(CustomStyle(featureInfo.feature));
};

결과는? 수정 버튼을 클릭하면 변경이 됐는데! 포커스를 벗어나면 default style로 돌아왔다.
됐는데요. 안 됐습니다.

호외요 호외 해결했다는 호외요

영어 단어 단어 조합해서 구글링, API문서 검색의 시작...☆
layer 자체 스타일을 변경, changed(), refresh().. 실패했고욘...
(refesh 수정 화면에서 전체 삭제할 때 쓰면 좋을듯)
openlayers2, 3 글까지 읽었지만 원하는 게 나오지 않았다ㅠㅠ

결국 feature를 콘솔로 찍어서 하나 하나 살펴 보는데 style function 메서드를 발견 했다.
거기서 깨달음을 얻고 해결...!
객체를 그릴 때 부터 스타일에 feature을 담아 보내면 feature가 변경되는 것을 바로 알 수 있겠지...?

private layerInstance = new VectorLayer({
  source: this.sourceInstance,
  style: feature => FeatureStyle.CustomStyle(feature),
  zIndex: 9,
});

오전을 다 와장창 냈는데 코드 한 줄만 수정하면 된다는 것이 자괴감 들고 괴로워...🤦🏻‍♀️
하지만 뿌듯한 결과물은 놓칠 수 없지!

객체를 막 그렸을 때 모습!

원하는 이름을 입력하고 색을 선택하고 수정하면!

짜잔! 변경 됐습니다✨

이제 텍스트 크기도 동적으로 바꾸고 더 세세한 커스텀이 가능하게 만들어야지!