Daddy Makers

2020년 1월 27일 월요일

자바스크립트 기반 3차원 그래픽 three.js와 구글 맵 연동

이 글은 자바스크립트 기반 3차원 그래픽 three.js와 구글 맵 연동에 대한 방법을 간단히 다룬다.

레퍼런스

2020년 1월 26일 일요일

Daum map 기반 Vue 웹 서비스 개발 방법

이 글은 간단한 Daum map(현재 카카오맵) 기반 Vue 웹 서비스 개발 방법을 소개한다. 이 글은 다음 맵을 사용하기 위해 개발 키 값을 얻고, 간단한 Vue 기반 Daum map 서비스를 개발방법을 설명한다. 참고로, 이 예제는 미리 개발된 vue-daum-map과 demo예제를 사용한다.

Vue.js는 node.js를 사용하며, node.js는 서버 개발을 쉽게 지원하는 플랫폼이며, Vue.js 는 node.js 에서 실행될 수 있는 동적 웹 UI(user interface) App 개발을 지원하는 유명한 프레임웍이다.

이 글에서 node.js나 vue 내용은 자세히 설명하지 않는다. 관련 내용은 아래 링크를 참고한다.

Node.js 메뉴얼
Vue.js 메뉴얼

이 글의 예제를 따라한 결과는 다음과 같다.

실행 모습(스마트폰 화면)

환경 설정

Node.js와 Vue를 설치하고, Daum Map API key값을 카카오 개발자 사이트(developers.kakao.com)에서 획득한 한다. 키 값은 해당 사이트를 가입하고, 다음과 같이 앱을 추가하여 얻을 수 있다.

앱을 추가한 후, 다음과 같이 앱 키를 얻을 수 있다.

해당 키를 사용하는 웹사이트 주소를 다음과 같이 지정하면, 카카오 맵을 사용할 수 있다.

다음과 같이 Vue CLI를 설치한다.
npm install -g vue-cli

카카오 맵 객체 기반 지도 앱 개발
다음과 같이 패키지를 설치하고, 프로젝트를 생성해 보자. 향상된 인터페이스 적용을 위해 vuetify를 사용하고, daum map을 사용하기 위해 vue-daum-map을 설치하였다.
vue init webpack-simple mapdaum
cd mapdaum

npm i vue-daum-map

vue add vuetify
npm install vuetify-dialog

npm install

npm run dev

결과, 간단한 vue app이 서버로 실행될 것이다. 종료하고, vue 컴포넌트를 개발해 본다.

프로젝트 폴더내 main.js를 다음과 같이 코딩한다.

import Vue from 'vue'

import App from './App.vue'

import vuetify from './plugins/vuetify';

import VuetifyDialog from 'vuetify-dialog'

Vue.config.productionTip = false

Vue.use(VuetifyDialog, {

context: {

vuetify

}

})

new Vue({

vuetify,

render: h => h(App)

}).$mount('#app')

다음과 같이 App.vue를 코딩한다.

<v-app>

<v-content>

</v-content>

</v-app>

</template>

import HelloWorld from './components/HelloWorld';

export default {

components: {

HelloWorld,

data: () => ({

}),

};

</script>

다음과 같이 HelloWorld.vue 를 코딩한다. 그 중에 input key value 부분에 키 값을 넣는다. mapTypeId는 Hybrid map 형식으로 설정하고, 맵 위에 이벤트 받을 @event 함수를 설정한다. 이 경우는 클릭 이벤트 메시지를 받아, 다이얼로그를 호출하는 함수를 설정하였다. vue-daum-map에 대한 상세한 옵션과 이벤트는 이 링크를 참고한다.

<v-container>

<vue-daum-map

:appKey="appKey"

:center.sync="center"

:level.sync="level"

:mapTypeId="mapTypeId"

:libraries="libraries"

@load="onLoad"

@center_changed="onMapEvent('center_changed', $event)"

@zoom_start="onMapEvent('zoom_start', $event)"

@zoom_changed="onMapEvent('zoom_changed', $event)"

@bounds_changed="onMapEvent('bounds_changed', $event)"

@click="onMapEvent('click', $event)"

@dblclick="onMapEvent('dblclick', $event)"

@rightclick="onMapEvent('rightclick', $event)"

@mousemove="onMapEvent('mousemove', $event)"

@dragstart="onMapEvent('dragstart', $event)"

@drag="onMapEvent('drag', $event)"

@dragend="onMapEvent('dragend', $event)"

@idle="onMapEvent('idle', $event)"

@tilesloaded="onMapEvent('tilesloaded', $event)"

@maptypeid_changed="onMapEvent('maptypeid_changed', $event)"

style="width:500px;height:400px;">

</vue-daum-map>

<h2>Options</h2>

<table>

<col />

</colgroup>

<tr>

<th>Level</th>

<td><input type="range" min="1" max="14" v-model.number="level"> {{level}}</td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</v-container>

</template>

import VueDaumMap from 'vue-daum-map';

export default {

components: {VueDaumMap},

data: () => ({

appKey: "input key value",

center: {lat:37.541, lng:126.986},

level: 3,

mapTypeId: VueDaumMap.MapTypeId.HYBRID,

libraries: [],

mapObject: null

}),

methods: {

onLoad (map) {

// var bounds = map.getBounds();

// var boundsStr = bounds.toString();

// alert(boundsStr);

this.mapObject = map;

onMapEvent (event, params) {

var msg = event + params;

if(event == 'click') {

this.$dialog.confirm({

text: "<center>Wild<br/><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Siberischer_tiger_de_edit02.jpg/800px-Siberischer_tiger_de_edit02.jpg' height=200/><input value='input'></input><br/></center>"+msg, title: 'Information'});

}

};

</script>

다음과 같이 실행하면 결과를 확인할 수 있다.

npm run dev

좀 더 상세한 내용은 다음 링크를 참고한다.

레퍼런스

Vue dam map

2020년 1월 25일 토요일

d3.js와 Google map 연동 방법

이 글은 d3.js와 Google map 연동 방법을 간단히 소개한다.

맵을 웹사이트에 표현하는 방법은 다양한다. Google Maps, Mapbox, Leaflet 등을 사용하면 클릭 몇번으로 공간정보 맵 기반 서비스를 쉽게 개발할 수 있다. 하지만, 디자인을 사용자화하고 싶거나, 특정 데이터셋을 원하는 데로 그래픽 표시하고 싶을 때는 쉽지 않다.

d3.js는 자바스크립트에서 다양한 차트, 테이블 등 자료 표시를 위한 그래픽을 동적으로 생성할 수 있다.

예제는 다음을 참고 한다.

Creating an interactive map with D3 and Vue

Vue.js 소개 및 참고자료

Vue는 node.js 기반으로 application server를 만들거나, user interface를 개발할 때 매우 우용한 도구이다. 이 글은 이에 대한 간략한 소개와 관련 참고 자료이다.

2020년 1월 24일 금요일

Vuetify 기반 Vuetify Dialog 사용하기

Vuetify 기반 Vuetify Dialog를 사용하는 방법을 간단히 다룬다.
Vuetify는 별다른 설정없이 개선된 User Interface를 사용할 수 있는 방법을 제공하는 패키지이다. 이를 이용한 Dialog 표시 방법을 보여준다.
참고로, 이 글에서 소개할 다이얼로그는 모달(modal)방식이다. Vuetify dialog는 다양한 스타일의 다이얼로그를 간단한 명령으로 생성할 수 있다.

개발 환경
다음과 같이 개발 환경을 설정한다.
npm install @vue/cli -g
vue --version

Vuetify는 3.0 버전 이상이어야 제대로 동작한다.

프로젝트 생성
다음과 같이 프로젝트를 생성한다.
vue create app
cd app
vue add vuetify
npm install vuetify-dialog

다이얼로그 사용
생성된 폴더 내 main.js 에 다음과 같이 코딩한다.
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
import VuetifyDialog from 'vuetify-dialog'

Vue.config.productionTip = false

Vue.use(VuetifyDialog, {
context: {
vuetify
}
})

new Vue({
vuetify,
render: h => h(App)
}).$mount('#app')

HelloWorld.vue 다음과 같이 button과 관련된 코딩을 추가한다.
<template>
...
<button v-on:click="greet">Greet</button>

...

</template>

export default {

methods: {

greet: function () {

this.$dialog.confirm({

text: "What's your name? <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Natgeologo.svg/1200px-Natgeologo.svg.png' height=100/><input value='input'></input>", title: 'Warning'});

}

...

</script>

이제 서버를 실행한다.
npm run serve

결과는 다음과 같다.

Greet 버튼을 클릭하면, 다음과 같이 모달 다이얼로그가 실행된다.

레퍼런스

2020년 1월 20일 월요일

Python 으로 라이노 Addin 개발

Python 으로 라이노 Addin 개발 방법을 간략히 설명한다.

레퍼런스

Rhino Python API reference
Run Rhino script command #1. #2
Creating Rhino Commands Using Python
Your first python script in grasshopper #1. #2
Rhino AP I #1, #2

참고 - 유사위상

길이 등 치수는 없는 상대적 방향성만 정의된 위상구조
T1 = {S*, L, R, L, R, L3, R3, L*, R*}

간단한 Web 기반 공간정보 서비스 개발을 위한 Google map과 Vue.js 연동 방법

이 글은 웹 기반 Google map과 Vue.js 연동 방법을 예제를 통해 간단히 구현해 본다.
참고로, Vue.js는 node.js를 사용하며, node.js는 서버 개발을 쉽게 지원하는 플랫폼이며, Vue.js 는 node.js 에서 실행될 수 있는 동적 웹 UI(user interface) App 개발을 지원하는 유명한 프레임웍이다.

이를 활용하면, 인터넷 접속되는 다양한 디바이스에서 동작 가능한 공간정보 기반 앱 서비스를 제공하는 서버를 간단히 개발할 수 있다. 예를 들어, 맵위에 마커를 생성하거나, 계산된 결과를 오버랩하여 표시할 수 있다. 마커 등은 이벤트를 받을 수 있으므로, 클릭 시 좀 더 상세한 정보나 뷰를 표시하도록 할 수 있다.

이 글에서 node.js나 vue 내용은 자세히 설명하지 않는다. 관련 내용은 아래 링크를 참고한다. 다음(카카오) 맵 연동 방법은 이 글을 참고한다.

Node.js 메뉴얼
Vue.js 메뉴얼

Google map을 사용하는 방법은 크게 두 가지가 있다. 하나는 직접 google map 객체를 사용하는 방법이고, 다른 하나는 npm 에서 설치가능한 google maps 패키지를 사용하는 방법이다. 이 글은 두 가지 방법 모두 소개한다.

이 글의 예제를 따라한 결과는 다음과 같다.

npm 에서 설치한 vue2-google-maps 패키지 이용 결과

스마트폰에서 실행된 구글맵 앱 서비스(iPhone 9. Chrome. Safari)

Google map 객체 직접 이용 결과

환경 설정
Node.js와 Vue를 설치하고, Google Map API key값을 console.cloud.google.com 에서 획득한 한다(API key값 생성 방법은 레퍼런스 참고).

Google Cloud Platform

Google Map API

다음과 같이 Vue CLI를 설치한다.
npm install -g vue-cli

구글맵 객체 기반 지도 앱 개발
다음과 같이 패키지를 설치하고, 프로젝트를 생성해 보자.
vue init webpack-simple mapapp
cd mapapp
npm install
npm run dev

결과, 간단한 vue app이 서버로 실행될 것이다. 종료하고, vue 컴포넌트를 개발해 본다.

프로젝트 폴더의 index.html 파일을 다음과 같이 코딩한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>communicating-between-vue-components</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div id="app"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=API key value"></script>

<script src="/dist/build.js"></script>
</body>
</html>

script에 생성된 google api key값을 설정한다.

main.js 를 코딩한다. 이 main.js는 GoogleMap, ListView, Sidebar 컴포넌트를 사용한다.
import Vue from 'vue'
import App from './App.vue'
import GoogleMap from './GoogleMap'
import ListView from './ListView'
import Sidebar from './Sidebar'

window.EventBus = new Vue({
data(){
return {
sanfrancisco: [37.78268, - 122.41136]
}
}
});

Vue.component('GoogleMap', GoogleMap);
Vue.component('ListView', ListView);
Vue.component('Sidebar', Sidebar);

new Vue({
el: '#app',
render: h => h(App)
});

App.vue 를 코딩한다. App은 각 컴포넌트가 속할 구역을 템플릿으로 정의한다.
<template>
<div id="app" class="container">
<div class="row">
<div class="col-4">
<sidebar></sidebar>
</div>
<div class="col-8">
<google-map></google-map>
</div>
</div>
<div class="row">
<list-view></list-view>
</div>
</div>
</template>

<script>
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>

GoogleMap.vue를 src 폴더에 다음과 같이 만든다. div의 map에 Google Map을 mount 하고, 맵 객체를 생성해 설정한다.
<template>
<div>
<h1>Map is here</h1>
<div id="map" class="h-250"></div>
</div>
</template>

<style scoped>
#map {
margin: 0 auto;
background: gray;
}
.h-250 {
height:250px;
}
</style>
<script>
import Vue from 'vue';
export default {
props: {
'latitude': {
type: Number,
default() {
return EventBus.sanfrancisco[0]
}
},
'longitude': {
type: Number,
default() {
return EventBus.sanfrancisco[1]
}
},
'zoom': {
type: Number,
default() {
return 14
}
},
},
mounted() {
this.$markers = [];
this.$map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(this.latitude, this.longitude),
zoom: this.zoom
});
Vue.nextTick().then(()=>{
this.clearMarkers();
});
},
created(){
EventBus.$on('clear-markers', ()=>{
this.clearMarkers();
this.$markers = [];
});
EventBus.$on('add-marker', (data)=>{
let marker = this.makeMarker(data.latitude, data.longitude);
this.$markers.push(marker);
});
},
data(){
return {};
},
methods: {
makeMarker(latitude, longitude) {
return new google.maps.Marker({
position: new google.maps.LatLng(latitude, longitude),
icon: null,
map: this.$map,
title: null,
});
},
clearMarkers(){
for( let i = 0; i < this.$markers.length; i++ ){
this.$markers[i].setMap(null);
}
}
}
}
</script>

ListView.vue를 src 폴더에 다음과 같이 만든다. 이 컴포넌트는 마커 리스트를 보여준다.

<div>

<h1>ListView</h1>

<p>Marker count: {{ markers.length }}</p>

<thead>

<tr>

<th>Index</th>

<th>Latitude</th>

<th>Longitude</th>

</tr>

</thead>

<tbody>

<td>{{ marker.index }}</td>

<td>{{ marker.latitude }}</td>

<td>{{ marker.longitude }}</td>

</tr>

</tbody>

</table>

</div>

</template>

export default {

created(){

EventBus.$on('add-marker', (marker)=>{

marker['index'] = this.index;

this.index++;

this.markers.push(marker);

});

EventBus.$on('clear-markers', ()=>{

this.markers = [];

this.index = 0;

});

data(){

return {

index: 0,

markers: []

};

}

</script>

Slidebar.vue를 src 폴더에 다음과 같이 만든다. 이 컴포넌트는 마커를 생성하거나 삭제하는 버튼을 생성하고, 클릭 시에 이벤트를 발생한다. 이벤트는 EventBus를 통해 해당 기능을 실행하는 함수를 호출하도록 되어 있다.

<template>
<div>
<h1>Sidebar</h1>
<input type="number" step="0.0001" class="form-control" v-model="latitude">
<input type="number" step="0.0001" class="form-control" v-model="longitude">
<button @click="addMarker" class="btn btn-danger">Add marker</button>
<button @click="clearMarkers" class="btn btn-default">Clear markers</button>
</div>
</template>
<script>
export default {
data(){
return {
latitude: EventBus.sanfrancisco[0],
longitude: EventBus.sanfrancisco[1]
};
},
methods: {
addMarker(){
EventBus.$emit('add-marker', {
latitude: this.latitude,
longitude: this.longitude
});
},
clearMarkers(){
EventBus.$emit('clear-markers');
}
}
}
</script>

이제 다음과 같이 실행해 보자.
npm run dev

그럼 다음과 같은 결과를 볼 수 있다. 개발용으로 Google map api 키값을 발급받은 것이라 development purposes only 문구가 맵위에 오버랩된다. 그래도, embedded된 구글맵을 테스트해보는 것에는 문제가 없다.

구글 맵에 marker를 add해 볼 수 있고, 그 리스트를 확인할 수 있다. 시간이 되면 marker에 event를 추가해 보자. 큰 문제 없이 동작하는 것을 확인할 수 있다.

vue2-google-maps 기반 지도 앱 개발

vue2-google-maps는 손쉽게 Vue기반 구글 맵을 사용할 수 있도록 만든 패키지이다. 이 예제에서는 vuetify란 패키지를 통해 좀 더 스타일 좋은 사용자 인터페이스 기능을 사용하겠다. 이를 사용하기 위해 다음과 같이 명령을 실행한다.

vue create map
cd map
vue add vuetify
npm install vuetify-dialog
npm i vue2-google-maps

main.js를 다음과 같이 코딩한다. vuetify와 dialog를 사용하기 위해 import를 하고, vue.use를 통해 VueGoogleMaps 사용을 설정한다. 그리고, 소스에서 key 값은 Google Map API키 값을 입력한다.
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
import VuetifyDialog from 'vuetify-dialog'
import * as VueGoogleMaps from 'vue2-google-maps'

Vue.use(VueGoogleMaps, {
load: {
key: 'Input Google Map API key value',
libraries: 'places', // This is required if you use the Autocomplete plugin
// OR: libraries: 'places,drawing'
// OR: libraries: 'places,drawing,visualization'
// (as you require)

//// If you want to set the version, you can do so:
// v: '3.26',
}
})

Vue.config.productionTip = false

Vue.use(VuetifyDialog, {
context: {
vuetify
}
})

new Vue({
vuetify,
render: h => h(App)

}).$mount('#app')

Vue를 다음과 같이 코딩한다. HelloWorld컴포넌트를 렌더링하기 위해 template에 이를 정의하고, script에서 HelloWorld 컴포넌트를 import한다.
<template>
<v-app>
<v-content>
<HelloWorld/>
</v-content>
</v-app>
</template>

<script>
import HelloWorld from './components/HelloWorld';

export default {
name: 'App',

components: {
HelloWorld,
},

data: () => ({
//
}),
};
</script>

HelloWorld.vue 컴포넌트를 다음과 같이 코딩한다. 앞서 GoogleMap를 vue에서 use하였으므로, GmapMap 컴포넌트를 사용할 수 있다. 옵션은 center위치, zoom 비율 등 다양한 값을 정의할 수 있다.
이 예제에서는 Marker를 2개 만들고, 마커를 클릭하였을 때 이벤트를 발생시켜, Vuetify 스타일 다이얼로그를 생성한다. 다이얼로그는 html로 기술하고, 이미지 사진을 추가하였다.
<template>
<v-container>
<GmapMap
:center="{lat:10, lng:10}"
:zoom="7"
map-type-id="terrain"
style="width: 500px; height: 300px"
>
<GmapMarker
:key="index"
v-for="(m, index) in markers"
:position="m.position"
:clickable="true"
:draggable="true"
@click="clickMarker"
/>
</GmapMap>
</v-container>
</template>

<script>
export default {
name: 'HelloWorld',

data() {
return {
markers: [{
position: {
lat: 10.0,
lng: 10.0
}
}, {
position: {
lat: 11.0,
lng: 11.0
}
}]
};
},
methods: {
clickMarker: function () {
this.$dialog.confirm({
text: "What's your name? <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Natgeologo.svg/1200px-Natgeologo.svg.png' height=100/><input value='input'></input>", title: 'Warning'});
}
}
};

</script>

실행 결과는 다음과 같다.
npm run serve