openlayers Relation and Bug Resolving

changeuidata 에러

Relation

원래는 pvr relation 에 latlon 저장 안되어있어서 n^2으로 찾는다.. 흠 이건 에바

Map 객체는 키-값 쌍을 저장하며 각 쌍의 삽입 순서도 기억하는 콜렉션입니다. 아무 값(객체와 원시 값)이라도 키와 값으로 사용할 수 있습니다. Map 객체는 요소의 삽입 순서대로 원소를 순회합니다. 반복문은 각 순회에서 [key, value] 로 이루어진 배열을 반환합니다. 키 동일성은 sameValueZero 알고리즘에 기반합니다. NaN !== NaN이지만, 그럼에도 NaN은 NaN과 일치한다고 간주하며, 다른 모든 값은 === 연산자의 결과를 따릅니다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Map

cache 용 map을 하나 만들었

time complextity log n 이라서 결국 nlogn 걸리겠지만 제곱보단 낫고..

hashmap쓰면 n인데 기본 js datastructure 가 아니라서 넘김

어차피 콜렉션 할거라서 이정도면 충분히 빠른듯

이슈 1


ViewFlagRelation = (ViewFlagRelation) ? false : true

이놈이 case 바로 다음에 있어야하는데 중간에 있어서 2번생성되는 에러 등등 발생


case 50: /* 2 */
            ViewFlagRelation = (ViewFlagRelation) ? false : true

맨앞으로 옮겨줌

목표 1

그냥 만들기 에러 line string 등 어렵다


function makeOlRelation(){
  /**
    @summary - Toggle Relation Make function
  **/
  
  // Remove & Init
  removeOlRelation()
  let olRelationArray = []
  let feature, relation, start, end, startFunction

  for(relation of RelationArray){
    start = pvrCache.get(relation.PvrID)
    end = pvrCache.get(relation.RelationID)
    startP = ol.proj.fromLonLat(start)
    endP = ol.proj.fromLonLat(end)
    feature = new ol.Feature({ geometry: new ol.geom.LineString( [startP, endP]) })
    feature.setProperties({'start': start})
    feature.setProperties({'end': end})
    olRelationArray.push(feature)
  } console.log('Relation length is ', olRelationArray.length)

  // Feature Array -> Source -> Cluster -> Layer -> Add
  let source = new ol.source.Vector({ features: olRelationArray })
  relationLayer = new ol.layer.Vector({ source: source, style: relationStyle })
  osm.addLayer(relationLayer)
  console.log('osm', osm.getLayers())
}


function relationStyle(feature){
  /**
    @summary - Relation Style Function
  **/
  let style = styles.lineYellow
  start = new ol.geom.Point(ol.proj.fromLonLat(feature.get('start')))
  end = new ol.geom.Point(ol.proj.fromLonLat(feature.get('end')))
  return style
}


function removeOlRelation(){
  /**
    @summary - Toggle Relation Remove function
  **/
  if (relationLayer) osm.removeLayer(relationLayer)
  relationLayer = null
}

cluster , pvr 과 똑같이 구조를 3단계로 잡아두어서 잘 만들수 있었다

OpenLayers 3: simple LineString example

i'm new to OpenLayers and i am looking for some help drawing lines on a map, i've been trying various things from various different posts about drawing LineStrings but i can't get it to work! I just need to figure out how to draw a line between to coordinates.

https://stackoverflow.com/questions/30888181/openlayers-3-simple-linestring-example

이거는 참조

LineString Arrows

import 'ol/ol.css'; import Map from 'ol/Map'; import View from 'ol/View'; import Point from 'ol/geom/Point'; import Draw from 'ol/interaction/Draw'; import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer'; import {OSM, Vector as VectorSource} from 'ol/source'; import {Icon, Stroke, Style} from 'ol/style'; var raster = new TileLayer({ source: new OSM() }); var

https://openlayers.org/en/latest/examples/line-arrows.html?q=linestring

목표 2

zindex

Layer Z-Index

import 'ol/ol.css'; import Feature from 'ol/Feature'; import Map from 'ol/Map'; import View from 'ol/View'; import Point from 'ol/geom/Point'; import VectorLayer from 'ol/layer/Vector'; import VectorSource from 'ol/source/Vector'; import {Fill, RegularShape, Stroke, Style} from 'ol/style'; var stroke = new Stroke({color: 'black', width: 1}); var styles = { 'square': new Style({ image: new

https://openlayers.org/en/latest/examples/layer-z-index.html


vectorLayer.setZIndex(ZINDEX_PVR)

목표 3

pvr 이동시 자동 relation 반영


let coor = e.target.lastFeature_.values_.geometry.flatCoordinates
      let lnglat = ol.proj.transform(coor, 'EPSG:3857', 'EPSG:4326')
      PvrArray[index].Lng = lnglat[0]
      PvrArray[index].Lat = lnglat[1]
      PvrArray[index].Edited = 1
      RelationUpdate(pvrid)
      makeOlRelation()
      EditedSet(1)
      MarkerMouseUpEvent(pvrid)
      break

RelationUpdate(pvrid)

에서 바로 반영될텐데 안된 이유는... cache 때문!!


function RelationUpdate(PvrID) {
    /* PvrID가 시작인 Relation 수정 */
    for (let index in RelationArray)
        if (RelationArray[index].PvrID === PvrID) {
            let PvrID1 = RelationArray[index].PvrID
            let PvrID2 = RelationArray[index].RelationID
            let PvrID1Lat, PvrID1Lng, PvrID2Lat, PvrID2Lng
            for (let i in PvrArray)
                if (PvrID1 === PvrArray[i].PvrID) {
                    PvrID1Lat = PvrArray[i].Lat
                    PvrID1Lng = PvrArray[i].Lng
                    break
                }
            for (let i in PvrArray)
                if (PvrID2 ===PvrArray[i].PvrID) {
                    PvrID2Lat = PvrArray[i].Lat
                    PvrID2Lng = PvrArray[i].Lng
                    break
                }
            RelationArray[index].RelationPan = AnglePoint(PvrID1Lng, PvrID1Lat, PvrID2Lng, PvrID2Lat)
        }
        else if (RelationArray[index].RelationID === PvrID) {
            let PvrID1 = RelationArray[index].PvrID
            let PvrID2 = RelationArray[index].RelationID
            let PvrID1Lat, PvrID1Lng, PvrID2Lat, PvrID2Lng = 0.0
            for (let i in PvrArray)
                if (PvrID1 == PvrArray[i].PvrID) {
                    PvrID1Lat = PvrArray[i].Lat
                    PvrID1Lng = PvrArray[i].Lng
                    break
                }
                for (let i in PvrArray)
                if (PvrID2 == PvrArray[i].PvrID) {
                    PvrID2Lat = PvrArray[i].Lat
                    PvrID2Lng = PvrArray[i].Lng
                    break
                }
            RelationArray[index].RelationPan = AnglePoint(PvrID1Lng, PvrID1Lat, PvrID2Lng, PvrID2Lat)
        }
}

요거를


function RelationUpdate(PvrID) {
    /* PvrID가 시작인 Relation 수정 */
    for (let index in RelationArray)
        if (RelationArray[index].PvrID === PvrID) {
            let PvrID1 = RelationArray[index].PvrID
            let PvrID2 = RelationArray[index].RelationID
            let PvrID1Lat, PvrID1Lng, PvrID2Lat, PvrID2Lng
            for (let i in PvrArray)
                if (PvrID1 === PvrArray[i].PvrID) {
                    PvrID1Lat = PvrArray[i].Lat
                    PvrID1Lng = PvrArray[i].Lng
                    pvrCache.set(PvrID1, [PvrArray[i].Lng, PvrArray[i].Lat])
                    break
                }
            for (let i in PvrArray)
                if (PvrID2 ===PvrArray[i].PvrID) {
                    PvrID2Lat = PvrArray[i].Lat
                    PvrID2Lng = PvrArray[i].Lng
                    pvrCache.set(PvrID2, [PvrArray[i].Lng, PvrArray[i].Lat])
                    break
                }
            RelationArray[index].RelationPan = AnglePoint(PvrID1Lng, PvrID1Lat, PvrID2Lng, PvrID2Lat)
        }
        else if (RelationArray[index].RelationID === PvrID) {
            let PvrID1 = RelationArray[index].PvrID
            let PvrID2 = RelationArray[index].RelationID
            let PvrID1Lat, PvrID1Lng, PvrID2Lat, PvrID2Lng = 0.0
            for (let i in PvrArray)
                if (PvrID1 == PvrArray[i].PvrID) {
                    PvrID1Lat = PvrArray[i].Lat
                    PvrID1Lng = PvrArray[i].Lng
                    pvrCache.set(PvrID1, [PvrArray[i].Lng, PvrArray[i].Lat])
                    break
                }
                for (let i in PvrArray)
                if (PvrID2 == PvrArray[i].PvrID) {
                    PvrID2Lat = PvrArray[i].Lat
                    PvrID2Lng = PvrArray[i].Lng
                    pvrCache.set(PvrID2, [PvrArray[i].Lng, PvrArray[i].Lat])
                    break
                }
            RelationArray[index].RelationPan = AnglePoint(PvrID1Lng, PvrID1Lat, PvrID2Lng, PvrID2Lat)
        }
    makeOlRelation()
}

요렇게 수정하면

잘나옴 ㅎ

목표 4

Openlayers 3: Select a feature programmatically

I am trying to upgrade my system from Openlayers 2 to Openlayers 3 and I have having one particular issue that I cannot seem to figure out. My application has a grid and a map and when a user clic...

https://stackoverflow.com/questions/26422598/openlayers-3-select-a-feature-programmatically


osm.select.getFeatures().clear()
osm.select.getFeatures().push(feature)

목표 5

arrow 추가

LineString Arrows

https://openlayers.org/en/latest/examples/line-arrows.html?q=linestring


function relationStyle(feature){
  /**
    @summary - Relation Style Function
**/
  let styleArray = [styles.lineYellow]
  let end = feature.get('end')
  let start = feature.get('start')
  let dx = end[0] - start[0]
  let dy = end[1] - start[1]
  var rotation = Math.atan2(dy, dx)
  let arrow = new ol.style.Style({
    geometry: new ol.geom.Point(end),
    image: new ol.style.Icon({
      color: RED,
      src: '/Image/arrow.png',
      anchor: [0.75, 0.5],
      rotation: -rotation,
      radius: 2
    })
  })
  // todo - style cache relation
  styleArray.push(arrow)
  return styleArray
}

목표 6

cache

안하는게 맞아서 Deprecate

목표 7

heading


function pvrStyle(feature){
  /**
    @summary - Relation Style Function
  **/
  let pvr = feature.get('pvr')
  let heading = (pvr.Course) * (Math.PI / 180)
  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) styleArray.push(styles.circleBlue)
    else return
  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
}

똑같은 방식으로 영감 받아서 작성


 let heading = (pvr.Course) * (Math.PI / 180)

degree to radian

JavaScript Math: Convert degrees to radians - w3resource

JavaScript exercises, practice and solution: Write a JavaScript function to convert degrees to radians.

https://www.w3resource.com/javascript-exercises/javascript-math-exercise-33.php

JavaScript Math: Convert degrees to radians - w3resource

이슈 2

카카오맵 ChangeMapRatio 이 제대로 안된다


if (kakaoMap.getBounds !== undefined){
    let kakaoStartX = kakaoMap.getBounds().getSouthWest().getLng()
    let kakaoEndX = kakaoMap.getBounds().getNorthEast().getLng()
    let kakaoStartY = kakaoMap.getBounds().getSouthWest().getLat()
    let kakaoEndY = kakaoMap.getBounds().getNorthEast().getLat()
    let kakaoSideX = kakaoEndX - kakaoStartX
    let kakaoSideY = kakaoEndY - kakaoStartY
    let kakaoRatioX = kakaoSideX / osmSideX
    let kakaoRatioY = kakaoSideY / osmSideY
    for (child of kakaoMap.mapEl.children)
      child.style.transform = `scale(${kakaoRatioX, kakaoRatioY})`
  }

_variable 들 함부러 쓰면 안될듯.. 날아가네 후

Kakao 지도 API

Kakao 지도 API를 이용해보세요. 다양한 샘플과 상세한 매뉴얼로 개발자분들의 시간을 아껴드리겠습니다!

http://apis.map.kakao.com/web/sample/mapInfo/