Map 개발자의 길

javaScript lpad, rpad 구현

YD_Koo — Thu, 15 Sep 2022 17:19:35 +0900

기능 구현에 앞서서

MySql에서 사용되는 LPAD, RPAD가 생각보다 자주사용하다 보니 javascript에서 사용하고 싶었다.

1. javaScript lpad, rpad

- 좌우로 자리수만큼 입력값 채우기

- 본개발자 코드는 자리수가 명확할떄 사용하기 때문에 별도로 입렵값에대한 에러 처리를 하지 않습니다.

//mysql query rpad() lpad() 구현

// 왼쪽 채움
String.prototype.lpad = function(padLength, padString) {
    let arrTxt = this;
    while (arrTxt.length < padLength)
        arrTxt = padString + arrTxt;
    return arrTxt;
}

// 오른쪽 채움
String.prototype.rpad = function(padLength, padString) {
    let arrTxt = this;
    while (arrTxt.length < padLength)
        arrTxt += padString;
    return arrTxt;
}

2.결과

multiple popup in openlayers (다중팝업)

YD_Koo — Thu, 15 Sep 2022 12:29:21 +0900

기능 구현에 앞서서

OpenLayers의 Popup(tooltip)은 기본 예제 따라하면 단일 팝업으로만 작성 가능하다.

본 개발자의 클라이언트는 여러 정보를 한번에 보고싶어하심.... 하...제발......

1. OepnLayers Multiple Popup

단순하게 코드 구현

//맵 클릭 이벤트
map.on('singleclick', function(evt) {
    var coordinate = evt.coordinate;
    var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(coordinate, 'EPSG:3857', 'EPSG:4326'));
    
    // 툴팁 DIV 생성
    let element = document.createElement("div");
    element.classList.add('ol-popup');
    element.innerHTML = `<a id="popup-closer" class="ol-popup-closer"></a> <div><p>You clicked here:</p><code>${hdms}</code></div>`;
    element.style.display = 'block';

	// OverLay 생성
    let overlay = new ol.Overlay({
        element: element, // 생성한 DIV
        autoPan: true,
        className: "multiPopup",
        autoPanMargin: 100,
        autoPanAnimation: {
            duration: 400
        }
    });
	//오버레이의 위치 저장
    overlay.setPosition(coordinate);
    //지도에 추가
    map.addOverlay(overlay);

	// 해당 DIV 다켓방법
    let oElem = overlay.getElement();
    oElem.addEventListener('click', function(e) {
        var target = e.target;
        if (target.className == "ol-popup-closer") {
            //선택한 OverLayer 삭제
            map.removeOverlay(overlay);

        }
    });
});

2. 결과

Deckgl tooltip position fixed( 툴팁고정)

YD_Koo — Wed, 14 Sep 2022 12:27:39 +0900

기능 구현에 앞서서

- 본개발자는 DeckGl은 왜 !!!지원을 안해줄까??? 하는 의구심에 매우 피곤함.....

- 굳이 이걸 이렇게 개발 해야하나 싶음 ....

- 익숙 해진다 싶으면 왜 맨날 삽질일까 ㅜㅜ

1. Deckgl 툴팁 위치 고정

1.1 Deckgl에서 제공하는 이벤트를 최대한 사용해 보았다

...
import {WebMercatorViewport} from '@deck.gl/core';

let map = new Deck({
	...
    
    // 지도 위치 이동시 발생 이벤트
    onViewStateChange: e => {
    	/************************************************************
         *
         * 본개발자의 tooltip은 dataset에 위경도(LongLat)값 저장되어 있음
         * <div id="tooltip"  data-lon="127.0952452665531" data-lat="37.20030546967153" style="display: block">...</div>
         * 
         ************************************************************/
    	const el = document.getElementById('tooltip');
        
        // 핵심 이벤트 WebMercatorViewport
        let pro2Px = new WebMercatorViewport(e.viewState)
        // 투영된 좌표계의 위치를 px 값으로 반환
        .project([Number(el.dataset.lon) , Number(el.dataset.lat)]);
        
        
        el.style.left = pro2Px[0] + 'px';
        el.style.top = pro2Px[1]  + 'px';
    
    }
})

1.2. Picxel에 오차 범위가 좀 있는듯 하지만 일단 88.99%는 도달한듯 싶다...

2. 결과

- 코드 적용 전

- 코드 적용 후

코드 적용 후

(docker) jupyterlab R kernel 추가하기

YD_Koo — Tue, 6 Sep 2022 14:10:42 +0900

이전글 : https://yd-dev.tistory.com/11

docker-jupyterhub(+ jupyterlab) 설치

설치 방법 전 JupyterHub 구성이유 - 본개발자는 여러 사용자가 사용할수 있는 JupyterLab 구성이 필요 해짐 - anaconda 사용하기 싫음 ( 본 개발자 존특) - docker 연습겸 1. 도커를 이용한 JupyterHub..

yd-dev.tistory.com

위의 환경에서 계속해서 진행

설치 방법 전 R kernel 구성이유

- 클라이언트가 해달란다..... 아주 하.......

1. jupyterLab을 이용한 R Kernel 추가하기

- R 설치 앞아서

# Docker container shell 접근
# docker exec -it  jhubcontainer /bin/bash

# 현재 등록된 Kernel 리스트 가져오기
# jupyter kernelspec list

현재 등록된 커널 정보

2. R 설치

# apt-get error 발생시 아래 update, upgrade 순서대로 진행
# apt-get update
# apt-get upgrade

apt-get install r-base

3. IRkernel 설치

# R 실행
R  
> install.packages("IRkernel") # 설치 시간 3~5분 소요
> IRkernel::installspec(name="r", displayname="R")
> q()   # R 종료 

# 해당 설치 완료 되면 디폴트 경로가 /root/.local/share/jupyter/kernels/r 이런식으로 되어있을꺼다

R kernel 위치 확인

4. R Kernel 내용 위치 복사

# 경로 생성 Jupyterhub 구성으로 작성시 usr 파일의 정보를 같이 쓰는거 같다. 
# 위 내용은 확인이 좀 필요하다...

mkdir /usr/local/share/jupyter/kernels/

cp -r /root/.local/share/jupyter/kernels/r /usr/local/share/jupyter/kernels/

# 기존 디폴트로 등록된 kernel 삭제
jupyter kernelspec uninstall r

# 삭제 이후
jupyter kernelspec list

# 경로가 변경되어 kernel이 추가되어있는것을 확인 할수 있다.
# 이부분은 본개발자도 이해를 못하는 부분 있습니다.

디폴트 정의된 커널 삭제

5. 결과

R 추가된 화면

[Docker] jupyterhub(+ jupyterlab) 설치

YD_Koo — Mon, 5 Sep 2022 18:20:45 +0900

설치 방법 전 JupyterHub 구성이유

- 본개발자는 여러 사용자가 사용할수 있는 JupyterLab 구성이 필요 해짐

- anaconda 사용하기 싫음 ( 본 개발자 존특)

- docker 연습겸

1. 도커를 이용한 JupyterHub 구성

# 1. docker container 등록방법
# docker 사용한 image : jupyterhub/jupyterhub 
# -p 포트번호 설정 
# bash docker shell 바로 접근 하기 위함 

docker run -it -p 8000:8000 --name jhubcontainer jupyterhub/jupyterhub bash
jupyterhub start

http://xxx.xxx.xxx.xxx:8000 접속

아래와 같은 페이지를 확인할 수 있다.

- admin 계정에한 정보 모르겠음.....

- 직접 사용자 추가

http://xxx.xxx.xxx.xxx:8000 접속화면

user 계정을 추가

# Docker container shell 접근
# docker exec -it  jhubcontainer /bin/bash

adduser yd

Enter new UNIX password:
Retype new UNIX password:
passwd: password updated successfully

Changing the user information for username
Enter the new value, or press ENTER for the default
    Full Name []:
    Room Number []:
    Work Phone []:
    Home Phone []:
    Other []:
Is the information correct? [Y/n]

로그인 이후 server Spawn failed 생성에 실패했다고 뭐라뭐라 한다.

로그인 후 페이지 생성에 Error 발생

페이지 로그 정보

Error Log

# apt-get 에러 발생시 아래 apt-get update및 upgrade  실행
# apt-get update
# apt-get upgrade

# 추가적으로 설치할 항목들이 있다.
apt-get install python3 python3-pip 
python3 -m pip install jupyterhub notebook jupyterlab


# 설치후 jupyterhub 재가동

Jupyterhub --> jupyterlab 생성 완료된 화면

2. 관리자 권한 추가

# Docker container shell 접근
# docker exec -it  jhubcontainer /bin/bash

mkdir /etc/jupyterhub
cd /etc/jupyterhub/
jupyterhub --generate-config -f jupyterhub_config.py

# nano 미설치시
# apt-get install nano

nano jupyterhub_config.py


# 메모장(jupyterhub_config.py) 추가내용
c.Authenticator.admin_users = {'yd'}
c.PAMAuthenticator.admin_groups = {'masterG'}

jupyterhub_config.py 추가된 내용

admin 계정 추가 및 그룹 설정

# 수정한  jupyterhub_config.py 실행 
# jupyterhub 재실행 기존 돌고 있는거 있음 종료 바람

jupyterhub -f /etc/jupyterhub/jupyterhub_config.py

# http://xxx.xxx.xxx.xxx:8000/hub/admin#/   관리자페이지 접근 URL (관리자 로그인 후 )

관리자 화면

관리자 모드 화면

위 구성의 단점 ?

1. 관리자

- 관리자가 사용자를 추가를 해줘야한다.

- 귀찮다.

참고 페이지

https://hub.docker.com/r/jupyterhub/jupyterhub

geoFeatures의 bbox의 최적 Zoom 구하기

YD_Koo — Wed, 11 May 2022 16:24:16 +0900

1. LIneString, Polygon, Point의 웹상에서 최적으로 보일수 있는 Zoom 구하기

let width = 1920; //웹사이트 넓이 
let height = 1080; // 웹사이트 높이 
let BOUNDS = [[bbox[0],bbox[1]],[bbox[2],bbox[3]]]; 
//[[127.09875551,37.20934113],[127.10195002,37.21464863]]


const viewport = new WebMercatorViewport({
      width: width,
      height: height
});

const {longitude, latitude, zoom} = viewport.fitBounds(BOUNDS, {
  padding: 50 // 해당 Features의 BBOX 여백 생성 
});
//[127.11449868, 37.167457671163525, 15.68894428866944]; //[x,y,z]
//cetner 정보 및 Zoom 반환

참고 : https://deck.gl/docs/api-reference/core/web-mercator-viewport

참고 : https://math.gl/modules/web-mercator/docs/api-reference/web-mercator-viewport

DeckGL TextLayer 한글 깨짐/미표출

YD_Koo — Mon, 28 Mar 2022 17:47:32 +0900

1. DeckGL TextLayer 기능 개발

- Deckgl 한글 라벨 입력시 미표출 또는 한글깨짐

DeckGL 한글 입력 시 미표출

한글 인코딩 추가

2. 코드

Deckgl TextLayer 에서 추가 할 항목

2.1 characterSet

디폴트 범위가 ASCII characters 32-128 , // 한글을 지원하지 않는다...........

characterSet에 필요한 한글 코드를 직접 입력하는 방법 말고는 찾질 못했다 그래도 없는것보다는 급하면 사용가능 할꺼 같다.

import DeckGL from '@deck.gl/react';
import {TextLayer} from '@deck.gl/layers';

function App({data, viewState}) {  

  const layer = new TextLayer({
    id: 'text-layer',
    data,
    pickable: true,
    getPosition: d => d.coordinates,
    getText: d => d.name,
    getSize: 32,
    getAngle: 0,
    getTextAnchor: 'middle',
    getAlignmentBaseline: 'center',
    // characterSet Default: ASCII characters 32-128
    // 추가 이벤트
    characterSet : function(){
    	 const charSet = [];
            for (let i = 32; i < 128; i++) {
                charSet.push(String.fromCharCode(i));
            }
            charSet.push(String.fromCharCode(45824)); // 대
            charSet.push(String.fromCharCode(49884)); // 시
            charSet.push(String.fromCharCode(44036)); // 간
         return charSet;
    }
  });

  return <DeckGL viewState={viewState}
    layers={[layer]}
    getTooltip={({object}) => object && `${object.name}\n${object.address}`} />;
}

//출처 : https://deck.gl/docs/api-reference/layers/text-layer

DeckGL 거리측정 기능 개발

YD_Koo — Wed, 6 Oct 2021 17:23:09 +0900

1. DeckGl 거리측정 개발

- Deckgl Hover evt , Click evt 를 이용한 기능 구현

2. 코드

let preDisTanceLongLat = [];

new Deck({
    id: 'map'
    canvas: 'map'
    layers: [baseMap] // 배경지도
    onHover: function(e) {
        const distancePointlayer = new ScatterplotLayer({
            id: 'distancePath-movePoint',
            data: [e.coordinate],
            opacity: 0.8,
            stroked: true,
            filled: true,
            txGrupKey: 'distance',
            radiusScale: 2,
            getPosition: d => {
                return d;
            },
            getRadius: 2,
            getFillColor: d => [255, 255, 255, 0],
            getLineColor: d => [255, 255, 255]
        });

        if (preDisTanceLongLat.length > 0) {
            var oData = [{
                prelonglat: preDisTanceLongLat[tpreDisTanceLongLat.length - 1],
                nextLonLat: e.coordinate
            }];
            const distanceLinelayer = new PathLayer({
                id: 'distanceLinelayer_dash',
                data: oData,
                getWidth: 2,
                pickable: false,
                widthScale: 3,
                widthMinPixels: 2,
                widthMaxPixels: 2,
                getPath: d => {
                    return d.geom.geometry.coordinates
                },
                getColor: d => [255, 172, 0],
                getDashArray: [3, 2],
                dashJustified: false,
                extensions: [new PathStyleExtension({
                    dash: true
                })],
            });
        }
    },
    onClick: function(e, mouseInfo) {
        let longlat = e.coordinate //현재 마우스 위치 
        preDisTanceLongLat.push(longlat);
    }
})

DeckGL Map 기울기(pitch) 적용시 깨짐 현상

YD_Koo — Wed, 9 Jun 2021 11:12:32 +0900

1. DeckGL Polygon, Line, Marker 등 기울기(pitch) 적용 깨짐 형상

- DekcGL 각 레이어의 기본 디폴트 높이 값을 가지고 있는 부분에서 생기는 오류 이다.

- 해당 에러 화면

DeckGL 기울기에 따른 레이어 깨짐 현상

2. 코드

new GeoJsonLayer({
    data,
    getLineColor: oDeSetting.styleLine.color,
    getLineWidth: oDeSetting.styleLine.width,
    getFillColor: oDeSetting.stylePolygon.color,

    // 레이어 높이값 적용 해제 하는 코드 
    // 아래 부분에 해당 코드 추가 
    parameters: {
        depthTest: false
    }
});

DeckGL Layer On/Off

YD_Koo — Mon, 16 Nov 2020 19:25:21 +0900

1. 결과 화면

DeckGL을 이용한 레이어 On/OFF

2. DeckGL Clone 이벤트 이용 하기

- 레이어.clone(obejct)

var arrLayers = deck.props.layers // 화면의 표출된 모든 레이어

let setVisibleLayer = function(targetID , bVisible){
	var cloneLayers = [];
	for (var i = 0; i < arrLayers.length; i++) {
		if(arrLayers[i].id == targetID ){ // arrLayers.id 레이어 만들때 정의했던 ID
			cloneLayers.push(arrLayers[i].clone({visible : bVisible}));
		}
		else {
			console.error('해당 ID와 매칭되는 정보가 없습니다.')
		}	
	}
	deck.setProps({layers: cloneLayers});
}
setVisibleLayer('speedLayer' , false); // or setVisibleLayer('speedLayer' , true);

deckgl.clone 사용시 new 레이어 없이 선언 되어 있던 레이어를 복제하여 재사용 가능?? 하다.

Map 개발자의 길

javaScript lpad, rpad 구현

1. javaScript lpad, rpad

2.결과

multiple popup in openlayers (다중팝업)

1. OepnLayers Multiple Popup

2. 결과

Deckgl tooltip position fixed( 툴팁고정)

1. Deckgl 툴팁 위치 고정

2. 결과

(docker) jupyterlab R kernel 추가하기

1. jupyterLab을 이용한 R Kernel 추가하기

2. R 설치

3. IRkernel 설치

4. R Kernel 내용 위치 복사

5. 결과

[Docker] jupyterhub(+ jupyterlab) 설치

1. 도커를 이용한 JupyterHub 구성

2. 관리자 권한 추가

관리자 화면

위 구성의 단점 ?

geoFeatures의 bbox의 최적 Zoom 구하기

DeckGL TextLayer 한글 깨짐/미표출

DeckGL 거리측정 기능 개발

DeckGL Map 기울기(pitch) 적용시 깨짐 현상

DeckGL Layer On/Off

1. 결과 화면

2. DeckGL Clone 이벤트 이용 하기

- 레이어.clone(obejct)

구축 기반 Spring, javascript ,DeckGL