Openlayers left todo, today todo

원/연두 : 연결선이 2개 미만으로 끝단 (주의 : 연결 작업 대상일 확률이 높음)

원/핑크 : 연결선이 2개 초과로 교차지점 (주의 : 교차로에는 존재해야 함)

반시계방향 : 마우스스크롤내리기 5도, [<] 10도, [n,N] 1도

시계방향 : 마우스스크롤올리기 5도, [>] 10도, [m,M] 1도

[space] : 화면 갱신, PvrID1 과 PvrID2 입력 삭제

select 표시 빨강

mia hidden errro

shift 를 end로 하고 pano 안보여주기

pvr 클릭하면 pvrid 보기

scroll map 밖에서만

pvr, sequence 검색이동

[h,H] : PvrID1~PvrID2 까지 숨김(hide), PvrID2 가 없는 경우 하나

[x, X]: mia

[s,S] : PvrID1~PvrID2 까지 표출(show), PvrID2 가 없는 경우 하나

[l,L] : PvrID1 와 PvrID2 를 연결(link)

[c,C] : PvrID1 와 PvrID2 를 단절(cut)

mainPvr ajax 변화

course 변화


function courseChange(ChangeValue) {
    let selectedArray = osm.select.getFeatures().getArray()
    console.log('', selectedArray)
    if (selectedArray.length === 0) return
    let feature, pvr
    for (feature of selectedArray){
        pvr = feature.get('pvr')
        pvr.Course += ChangeValue
        pvr.Edited = 1
        ReloadPvrViewer(pvr.Course)
    }
    EditedSet(1)
    GetPvrRelationLocal()
}

NaverCourseChange to couseChange

복잡도 향상


function pvrStyle(feature){
  /**
    @summary - Relation Style Function
  **/
  let selected
  let selectedArray = osm.select.getFeatures().getArray()
  for (let select of selectedArray)
    if (feature.get('pvr').PvrID === select.get('pvr').PvrID)
      selected = true

이것도 issue 0 인데 couse 바꾸면 rerender 된단 말이다 근데 그때는 새 feature라서 array 에 없는데 pvr id 만 비교해서 원래 그놈인지를 본다

issue1 selected style

OpenLayers 5: change the color of the highlighted feature

I've made a little script to highlight a feature on hover the mouse My inspiration comes from here. Now I would like to change the color of the highlighted feature. I can do this using style function with a vector layer but if I use ol.style.Style nothing change but the highlight run fine.

https://gis.stackexchange.com/questions/329372/openlayers-5-change-the-color-of-the-highlighted-feature


let select = new ol.interaction.Select({
    filter: e => { return highZoom() && e.values_.pvr },
    style: pvrStyle
  })


function pvrStyle(feature){
  /**
    @summary - Relation Style Function
  **/
  let selected = osm.select.getFeatures().getArray().includes(feature)
  let pvr = feature.get('pvr')
  let heading = (pvr.Course) * (Math.PI / PARRELEL)
  let styleArray = []
  let arrow = new ol.style.Style({
    geometry: pvr.loc,
    image: new ol.style.Icon({
      color: RED, src: HEADING, rotation: heading,
      scale: ARROW_SCALE, anchor: HEAD_ANCHOR
    })
  })
  styleArray.push(arrow)

  if (pvr.Hidden === SHOWN && ViewFlagPvr)
    if (ViewFlagPvr)
      if (selected) styleArray.push(styles.circleRed)
      else if (pvr.RelationCount < 2) styleArray.push(styles.circleGreen)
      else if (pvr.RelationCount > 2) styleArray.push(styles.circlePink)
      else styleArray.push(styles.circleBlue)
    else return
  else if (selected) styleArray.push(styles.crossRed)
  else if (pvr.Hidden === HIDDEN)
    if (ViewFlagHidden) styleArray.push(styles.crossPurple)
    else return
  else if (pvr.Hidden === MIA)
    if (ViewFlagMIA) styleArray.push(styles.crossPink)
    else return
  return styleArray
}

selected 변수로 분기 지리게 구현

issue2

저장하지 않은 정보에서 바로 relation 은 안돌아옴

문제가 pvr 옮길때 make relation 을 한다

edit relation 에서 추가할때


 makeOlRelation()

이거를 요리 바꿈


if(ViewFlagRelation) makeOlRelation()

issue3

mia hidden 갑자기 토글 이상함..

오타문제

text


circleRedS: new ol.style.Style({ image: ciRedI,
      text: new ol.style.Text({ text: 'S', fill: styles.prop.sWhite })
    }),
    circleRedE: new ol.style.Style({ image: ciRedI,
      text: new ol.style.Text({ text: 'E', fill: styles.prop.sWhite })
    }),


crossRedS: new ol.style.Style({ image: crRedI,
      text: new ol.style.Text({ text: 'S', fill: styles.prop.sWhite })
    }),
    crossRedE: new ol.style.Style({ image: crRedI,
      text: new ol.style.Text({ text: 'E', fill: styles.prop.sWhite })
    }),

click ui text 수정


function changeMapMarker(){
  /**
   * @summary - Heavy Function Should not be called frequently
   * @since - Only Called by Map MoveEnd
   * @see - Delay Call of GetPvr because  of RenderTime
   */
  if (NaverMap.getBounds !== undefined){
    window.setTimeout(() => {
      GetPvrRelation()
      clearSelected()
      changeUIData()
      ChangeMapRatio()
    }, WAIT_TIME)
  }
}

여러가지 함수 구조 수정


function clearSelected(){
  /**
   * @summary - Clear Selected Cache and Real
   * @since called by changeMapMarker() only
   */
  clearMainSelected()
  clearSubSelected()
}

복잡다 복잡혀


function changeUIData(){
  /**
   * @summary - Change Showing Map Data
   */
  $("#DivZoom").html(zoomNow)
  if (zoomNow < WARN_ZOOM) $("#DivZoom").css("color", "red")
  else $("#DivZoom").css("color", "black")
  $("#SelectPvrID1").val("")
  $("#SelectPvrID2").val("")
}

맵 밖에서만 스크롤


function GlobalMouseWheel(e, Delta) {
  if (osm && e.target.parentElement.parentElement !== osm.mapEl)
    switch (Delta) {
      case 1: courseChange(-MIDDLE); break /* Down, Left */
      case -1: courseChange(MIDDLE); break /* Up, Right */
    }
}

openlayers control disable

OpenLayers v6.1.1 API - Class: Rotate

https://openlayers.org/en/latest/apidoc/module-ol_control_Rotate-Rotate.html


let map = {
    interactions: ol.interaction.defaults().extend([mainSelect, subSelect, translate]),
    target: mapEl.id, layers: layers, view: new ol.View(view),
    controls: ol.control.defaults({
      attribution: false,
      zoom: false,
      rotate: false
    })
  }

지리는 다중선택


if (pvrid === osm.startPvr) start = true
if (pvrid === osm.endPvr) end = true
if ((pvrid - osm.startPvr) * (pvrid - osm.endPvr) < 0) subject = true

무쳤다 무쳤어...