File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<button @click="toggleSlide" class="toggle">{{ slideText }}</button>
<div class="grid2_8">
<div :class="['slide-content left', { active: showSlide }]">
<div class="wrap flex-between">
<div class="search">
<h2>횡단보도 등록</h2>
<div class="box">
<div class="flex-between m-b" id="siDoHiddenCk">
<label for="">시/도</label>
<select name="siDoSelectList" id="siDoSelectList" v-model="address['siDo_dong_cd']"
@change="siDoGunGuSelectF($event)">
<option :value=null disabled> 대구광역시</option>
<option v-for="(item, key) in siDoList" :key="key" :value="item['dong_cd']">
{{ item['dong_nm'] }}
</option>
</select>
</div>
<div class="flex-between m-b" id="gunGuHiddenCk">
<label for="">시/군/구</label>
<select name="gunGuSelectList" id="gunGuSelectList" v-model="address['guGun_dong_cd']"
@change="siDoGunGuSelectF($event)">
<option :value=null disabled> 서구 </option>
<option v-for="(item, key) in gunGuList" :key="key" :value="item['dong_cd']">
{{ item['dong_nm'] }}
</option>
</select>
</div>
<div class="flex-between m-b" id="dongHiddenCk">
<label for="">행정동</label>
<select name="dongSelectList" id="dongSelectList" v-model="address['dong_dong_cd']"
@change="dongSelectF($event)">
<option :value=null disabled> 행정동 </option>
<option v-for="(item, key) in dongList" :key="key" :value="item['dong_cd']">
{{ item['dong_nm'] }}
</option>
</select>
</div>
<div class="flex-between m-b" id="nodeHiddenCk">
<label for="">교차로</label>
<select name="nodeSelectList" id="nodeSelectList" v-model="address['node_id']"
@change="nodeSelectF($event)">
<option :value=null disabled> 교차로 </option>
<option v-for="(item, key) in nodeList" :key="key" :value="item['node_id']">
{{ item['node_name'] }}
</option>
</select>
</div>
<div class="flex-between m-b" id="azimuthHiddenCk">
<label for="">방위각</label>
<select name="azimutSelectList" id="azimutSelectList" v-model="address['crslk_az']">
<option :value="0" disabled> 방위각 </option>
<option :value="10">북</option>
<option :value="50">북동</option>
<option :value="20">동</option>
<option :value="60">남동</option>
<option :value="30">남</option>
<option :value="70">남서</option>
<option :value="40">서</option>
<option :value="80">북서</option>
</select>
</div>
<div >
<div class="flex-between gap m-b " style="margin-top: 2rem;">
<label for="" class="m-r">횡단보도 좌표</label><button class="s-btn" @click="clickStateChange()">좌표선택</button>
</div>
<div class="br-ver m-b" style="margin-bottom:1.5rem;"></div>
<div class="flex-between gap">
<div class="flex m-b gap">
<label class="m-r">위도</label>
<input class="text-input" style="width: 9rem" type="text" name="" id="" placeholder="00.0000"
v-model="address.coordinate[1]" />
</div>
<div class="flex m-b gap">
<label class="m-r">경도</label>
<input class="text-input" style="width: 9rem" type="text" name="" id="" placeholder="00.0000"
v-model="address.coordinate[0]" />
</div>
</div>
</div>
<div class="">
<div class="flex-between gap m-b " style="margin-top: 1.5rem;">
<label for="" class="m-r">지원서비스 선택</label>
</div>
<div class="br-ver m-b"></div>
<div class="flex-between m-b" style="margin-bottom:1.5rem;">
<input class="m-r" type="checkbox" v-model="condition.wtrms_crosng_eqpmn_instl_yn" /><label for="">무단횡단 검지</label>
<input class="m-r" type="checkbox" v-model="condition.signl_extn_eqpmn_instl_yn" /><label for="">신호연장 알림</label>
</div>
<div class="flex-between m-b" style="margin-bottom:1.5rem;">
<input class="m-r" type="checkbox" v-model="condition.rittrn_vhcle_eqpmn_instl_yn" /><label for="">우회전 차량 안전 메세지 전송</label>
</div>
<div class="bottom">
<!--<div class="flex-between m-b gap">
<label class="gap">무단횡단 검지 범위 : </label>
<select name="wtrms_crosng_detct_rate" id="wtrms_crosng_detct_rate"
v-model="condition.wtrms_crosng_detct_rate">
<option :value="100"> 100% </option>
<option :value="90">90%</option>
<option :value="80">80%</option>
<option :value="70">70%</option>
<option :value="60">60%</option>
<option :value="50">50%</option>
<option :value="40">40%</option>
<option :value="30">30%</option>
<option :value="20">20%</option>
<option :value="10">10%</option>
</select>
</div>-->
<div class="flex-between m-b gap">
<label class="gap">왕복차선 정보 : </label>
<select name="" id="" v-model="condition.rndtp_tfclne_info">
<option :value="99" disabled> 왕복 차선 정보 </option>
<option :value="2">왕복 2차선</option>
<option :value="3">왕복 3차선</option>
<option :value="4">왕복 4차선</option>
<option :value="5">왕복 5차선</option>
<option :value="6">왕복 6차선</option>
<option :value="7">왕복 7차선</option>
<option :value="8">왕복 8차선</option>
<option :value="9">왕복 9차선</option>
<option :value="10">왕복 10차선</option>
</select>
</div>
<div class="flex-between m-b gap">
<label class="gap">우회전 차선 유무 : </label>
<select style="" name="" id="" v-model="condition.rittrn_tfclne_yn">
<option :value="null" disabled>우회전 차선 유무</option>
<option :value=true>있음</option>
<option :value=false>없음</option>
</select>
</div>
<div class="flex-between m-b gap">
<label class="gap">우회전 차선 유형 : </label>
<select style="" name="" id="" v-model="condition.rittrn_tfclne_ty">
<option :value="null" disabled>우회전 차선 유형</option>
<option :value='직각'>직각</option>
<option :value='곡선'>곡선</option>
</select>
</div>
<div class="flex-between gap m-b " style="margin-top: 2rem;">
<label for="" class="m-r">횡단보도 관리자</label>
</div>
<div class="br-ver m-b"></div>
<div class="flex-between m-b gap">
<div class="flex gap">
<input class="text-input" type="text" name="" id="" placeholder="" v-model="managerInfo.mngr_nm" style="width:100% !important">
<button @click="modal_managerSearch = true" class="s-btn gr-btn" style="width: 20rem;">검색</button>
<div class="modal-wrap" v-if="modal_managerSearch == true">
<div class="modal-bg"></div>
<div class="modal">
<h2 class="flex-between">
횡단보도 유지보수 담당자 검색
<button type="button" class="gray-btn" @click="modal_managerSearch = false">
<img src="../../../resources/images/close.png" alt="" />
</button>
</h2>
<div class="modal_base_body">
<div class="de_Search" >
<table class="troubleTable">
<tbody>
<tr>
<th>검색</th>
<td colspan="7" >
<select name="" id="" v-model="managerListSearch.searchType">
<option value="null">검색조건</option>
<option value="mngr_nm">이름</option>
<option value="mngr_ogdp_info">소속정보</option>
</select>
<input type="text" placeholder="검색어를 입력 해주세요." v-model="managerListSearch.searchText" @keyup.enter="managerSelectList" style="width: 76%;" />
<button type="button" class="green-btn" style="margin-left: 5px;padding: 5px;width: 10rem; float: right;" @click="managerSelectList">검색</button>
</td>
</tr>
</tbody>
</table>
</div>
<table>
<thead>
<tr>
<td>No</td>
<td>이름</td>
<td>전화번호</td>
<td>소속정보</td>
</tr>
</thead>
<tbody>
<tr v-for="(item, idx) in managerList" :key="idx" @click="managerSelect(item)">
<td data-title="No">{{ managerIdx - idx }}</td>
<td data-title="이름">{{ item['mngr_nm'] }}</td>
<td data-title="전화번호">{{ HyphenMinus(item['mngr_telno']) }}</td>
<td data-title="소속정보">{{ item['mngr_ogdp_info'] }}</td>
</tr>
<tr v-show="managerList.length == 0">
<td class="exception" colspan="9">조회된 데이터가 없습니다</td>
</tr>
</tbody>
</table>
<div class="bottom-wrap">
<div class="pg-wrap">
<PaginationButton
v-model:currentPage="managerListSearch.currentPage"
:per-page="managerListSearch.perPage"
:total-count="managerListCount"
:max-range="5"
:click="managerSelectList"
/>
<!-- <a href="#" class="pg-item prev">◀</a>
<a href="#" class="pg-item active">1</a>
<a href="#" class="pg-item next">▶</a> -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex-center gap" style="margin-top: 3rem">
<button class="gr-btn" @click="modal_insert = true">등록</button>
<div class="modal-wrap" v-if="modal_insert == true">
<div class="modal-bg"></div>
<div class="modal2">
<div class="modalmain2">
<h4 class="flex-between">
횡단보도를 <em style="color: blue">등록</em> 하시겠습니까?
</h4>
<div class="flex-center gap" style="margin-top: 3rem;">
<button @click="crslkInsert">확인</button>
<button @click="modal_insert = false">취소</button>
</div>
</div>
</div>
</div>
<button class="gr-btn">취소</button>
</div>
</div>
</div>
</div>
</div>
<div class="right">
<!-- <img class="icon crosswalk" src="../../../resources/images/crosswalk.png" alt="">
<img class="icon warning" src="../../../resources/images/warning.png" alt=""> -->
<OpenLayers ref="open_layers" />
</div>
</div>
</template>
<script>
import axios from 'axios';
import MapPage from "../../component/MapPage.vue";
import OpenLayers from "../../component/OpenLayers.vue";
import {
naverBaseLayer,
vworldBaseLayer,
vworldGrayLayer,
vworldMidnightLayer,
vworldHybridLayer,
vworldSatelliteLayer,
} from "../../component/OpenLayersMap.vue";
import { baseStyles } from '../../component/OpenLayersStyle.vue';
import DongSelectList from '../../component/dongSelectList.vue';
import COMMON_UTIL from "../../../resources/js/commonUtil.ts";
import PaginationButton from "../../component/pagination/PaginationButton.vue";
import { transform } from "ol/proj";
var freeBus = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"popupContent": "18th & California Light Rail Stop",
"data": 123
},
"geometry": {
"type": "Point",
"coordinates": [126.9757184, 37.564388]
}
}, {
"type": "Feature",
"properties": {
"popupContent": "20th & Welton Light Rail Stop",
"data": 456
},
"geometry": {
"type": "Point",
"coordinates": [124.9748523, 37.5796212]
}
}
]
};
export default {
data() {
return {
showSlide: false,
slideText: '횡단보도 등록',
address: {
//지역 설정
dong_cd: "22030",
siDo_dong_cd: "22",
guGun_dong_cd: "22030",
dong_dong_cd: null,
node_id: null,
node_name: null,
zoomLevel: null,
crslk_az: "0",
coordinate: [],
lat: null,
lon: null,
baseSource: "EPSG:5181",
},
//조건설정
condition: {
//체크박스(장비 설치 유무)
signl_extn_eqpmn_instl_yn: false,
wtrms_crosng_eqpmn_instl_yn: false,
rittrn_vhcle_eqpmn_instl_yn: false,
//무단횐단 검지 범위
wtrms_crosng_detct_rate: '100',
//왕복차선 정보
rndtp_tfclne_info: '99',
//우회전 차선 유무
rittrn_tfclne_yn: null,
//우회전 차선 유형
rittrn_tfclne_ty: null,
},
managerListSearch: {
currentPage: 1,
perPage: 10,
searchType: null,
searchText: null,
startDate: null,
endDate: null,
},
managerInfo: {
mngr_eml: null,
mngr_nm: null,
mngr_ogdp_info: null,
mngr_telno: null,
mntnce_mngr_id: null,
reg_dt: null,
rgtr_id: null,
},
managerList: [],
managerListCount: 0,
managerIdx: 0,
siDoList: [],
gunGuList: [],
dongList: [],
nodeList: [],
crslkList: [],
//현재 zoom
now_zoom: null,
//휠할때 마우스 위치를 포함하는 dong data
wheelEventSiDo: null,
wheelEventSiGunGu: null,
wheelEventDong: null,
wheelEventNode: null,
clickState: false,
modal_managerSearch: false,
modal_insert: false,
tabs: [
{
id: 1,
title: "상황발생현황",
content1: "This is the content for Tab 1",
},
{
id: 2,
title: "장애발생현황",
content2: "This is the content for Tab 2",
},
],
activeTab: 1,
items: [
{ id: 1, name: "무단횡단", isActive: false },
{ id: 2, name: "신호연장", isActive: false },
{ id: 3, name: "우회전 차량", isActive: false },
{ id: 4, name: "장애발생", isActive: false },
],
};
},
components: {
PaginationButton:PaginationButton,
OpenLayers: OpenLayers,
DongSelectList: DongSelectList,
},
methods: {
toggleSlide() {
if (this.showSlide) {
this.slideText = "횡단보도 등록";
} else {
this.slideText = "창닫기";
}
this.showSlide = !this.showSlide;
},
changeTab(tabId) {
point_lat
this.activeTab = tabId;
},
toggleActive(item) {
item.isActive = !item.isActive;
},
//시/도 받아오기
siDoSelectList: function () {
const vm = this;
axios({
url: '/dong/siDoSelectList.json',
method: 'post',
headers: {
'Content-Type': "application/json; charset=UTF-8",
},
data: {}
}).then(function (response) {
// console.log("siDoSelectList - response : ", response.data);
vm.siDoList = response.data;
}).catch(function (error) {
console.log("siDoSelectList - error : ", error);
});
},
//군/구 받아오기
gunGuSelect: function (dong_cd) {
const vm = this;
axios({
url: '/dong/gunGuSelectList.json',
method: 'post',
headers: {
'Content-Type': "application/json; charset=UTF-8",
},
data: { 'dong_cd': dong_cd }
}).then(function (response) {
// console.log("gunGuSelect - response : ", response.data);
vm.gunGuList = response.data;
}).catch(function (error) {
console.log("gunGuSelect - error : ", error);
});
},
//행정동 받아오기
dongSelectList: function (dong_cd) {
const vm = this;
axios({
url: '/dong/dongSelectList.json',
method: 'post',
headers: {
'Content-Type': "application/json; charset=UTF-8",
},
data: { 'dong_cd': dong_cd }
}).then(function (response) {
// console.log("dongSelectList - response : ", response.data);
vm.dongList = response.data;
}).catch(function (error) {
console.log("dongSelectList - error : ", error);
});
},
//노드(교차로) 받아오기
findNodeUsingDongSelectList: function (dong_cd) {
const vm = this;
axios({
url: '/node/findNodeUsingDongSelectList.json',
method: 'post',
headers: {
'Content-Type': "application/json; charset=UTF-8",
},
data: { 'dong_cd': dong_cd }
}).then(function (response) {
// console.log("findNodeUsingDongSelectList - response : ", response.data);
vm.nodeList = response.data;
}).catch(function (error) {
console.log("findNodeUsingDongSelectList - error : ", error);
});
},
//횡단보도 등록
crslkInsert: function () {
const vm = this;
axios({
url: "/management/crslkInsert.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: { "address": vm.address, "condition": vm.condition, "managerInfo": vm.managerInfo },
})
.then(function (response) {
// console.log("crslkInsert - response : ", response.data);
vm.modal_insert = false;
})
.catch(function (error) {
console.log("crslkInsert - error : ", error);
alert(
"횡단보도 등록 오류, 관리자에게 문의해주세요."
);
});
},
//횡단보도 유지보수 관리자 목록 조회
managerSelectList: function () {
const vm = this;
axios({
url: "/managerSelectList.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: vm.managerListSearch,
})
.then(function (response) {
// console.log("managerSelectList - response : ", response.data);
vm.managerListCount = response.data.managerListCount;
vm.managerList = response.data.managerList;
vm.managerIdx = vm.managerListCount - (vm.managerListSearch.currentPage - 1) * vm.managerList.length;
})
.catch(function (error) {
console.log("managerSelectList - error : ", error);
alert(
"횡단보도 유지보수 관리자 목록 조회 오류, 관리자에게 문의해주세요."
);
});
},
managerSelect: function (managerInfo) {
this.managerInfo = managerInfo;
},
// 전화번호 '-' 추가 후 출력
HyphenMinus: function (telno) {
return COMMON_UTIL.HyphenMinus(telno);
},
//날짜 시,분,초 자르기
yyyymmdd: function (date) {
return COMMON_UTIL.yyyymmdd(date);
},
//DongSelectList에서 dong_cd 받아오기
setDongCd(value) {
// console.log("value : ", value);
this.address = value;
},
//시/도/군/구 Select 선택시 바로 위치 이동
siDoGunGuSelectF: function (event) {
//기존 layer 지우기
this.$refs.open_layers.removeLayerAll();
//기본 지도 layer 그리기 + 해당 위치로 이동
this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
// this.$refs.open_layers.setZoom(this.address.zoomLevel);
// 지역 중앙에 노드 + 이름 넣기
this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl('/common/getDongsCenterJson.json', 'nodeLayer', 'EPSG:5181', baseStyles['labelStyle'], 'label', this.address.dong_cd);
//polygon 그리기
this.$refs.open_layers.addVectorLayerByUrl('/common/getDongsGeoJson.json', 'multPolygonLayer', 'EPSG:5181', baseStyles['MultiPolygon'], 'MultiPolygon', this.address.dong_cd);
},
//행정동 Select 선택시 바로 위치 이동
dongSelectF: function (event) {
//기존 layer 지우기
this.$refs.open_layers.removeLayerAll();
//기본 지도 layer 그리기 + 해당 위치로 이동
this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
// this.$refs.open_layers.setZoom(this.address.zoomLevel);
// 행정동에 포함된 노드 넣기
this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl('/common/getNodesGeoJson.json', 'nodeLayer', 'EPSG:4326', baseStyles['labelStyle'], 'label', this.address.dong_cd);
//polygon 그리기
this.$refs.open_layers.addVectorLayerByUrl('/common/getDongGeoJson.json', 'multPolygonLayer', 'EPSG:5181', baseStyles['MultiPolygon'], 'MultiPolygon', this.address.dong_cd);
},
//노드 Select 선택시 바로 위치 이동 횡단보도 노드
nodeSelectF: function (event) {
//기존 layer 지우기
this.$refs.open_layers.removeLayerAll();
//기본 지도 layer 그리기 + 해당 위치로 이동
this.$refs.open_layers.setBaseMap(vworldBaseLayer, this.address.dong_cd, event.target.value);
// this.$refs.open_layers.setZoom(this.address.zoomLevel);
//polygon 그리기
this.$refs.open_layers.addVectorLayerByUrl('/common/getNodeGeoJson.json', 'nodeLayer', 'EPSG:4326', baseStyles['labelStyle2'], 'labelStyle2', this.address.dong_cd, this.address.node_id);
// 노드 중앙에 노드 그리기
this.$refs.open_layers.addVectorLayerByUrl('/common/getCrslksGeoJson.json', 'crslkLayer', 'EPSG:5181', baseStyles['labelStyle'], 'label', this.address.dong_cd, this.address.node_id);
},
childClick: function (prop, coordinate, layerCk) {
// console.log("childClick coordinate : ", coordinate);
// console.log("childClick prop : ", prop[0]);
if (prop[0] != null && prop[0].values_ != null && prop[0].values_.dong_cd != null) {
this.address.dong_cd = prop[0].values_.dong_cd;
}
if (prop[0] != null && prop[0].values_ != null && prop[0].values_.node_id != null) {
this.address.node_id = prop[0].values_.node_id;
this.address.node_name = prop[0].values_.node_name;
}
if (layerCk) {
// console.log("childClick prop.layerName : ", prop[0].layerName);
if (prop[0].layerName == "nodeLayer") {
this.$refs.open_layers.removeLayer('multPolygonLayer');
this.$refs.open_layers.removeLayer('nodeLayer');
this.$refs.open_layers.setBaseMap(vworldBaseLayer, prop[0].id_);
// this.$refs.open_layers.setZoom(17);
// dong인지 node인지 확인 필요
if (!prop[0].values_.node_id) {
this.$refs.open_layers.addVectorLayerByUrl('/common/getDongGeoJson.json', 'multPolygonLayer', 'EPSG:5181', baseStyles['MultiPolygon'], 'MultiPolygon', prop[0].id_, prop[0].id_);
this.$refs.open_layers.addVectorLayerByUrl('/common/getNodesGeoJson.json', 'nodeLayer', 'EPSG:4326', baseStyles['labelStyle'], 'label', prop[0].id_, prop[0].id_);
}
else {
this.$refs.open_layers.addVectorLayerByUrl('/common/getNodeGeoJson.json', 'nodeLayer', 'EPSG:4326', baseStyles['labelStyle2'], 'labelStyle2', prop[0].id_, prop[0].id_);
this.$refs.open_layers.addVectorLayerRemoveAutoSizAddChildNodeCnteByUrl( "/common/getCrslksGeoJson.json", "crslkLayer", "EPSG:5181", baseStyles["labelStyle"], "label", this.address.dong_cd,prop[0].id_);
}
// this.$refs.open_layers.setZoom(18);
}
}
if (this.clickState) {
this.address.coordinate = transform(coordinate,"EPSG:5181","EPSG:4326");
// console.log("prop : ", prop);
// console.log("coordinate : ", coordinate);
// 레이어 삭제
this.$refs.open_layers.removeLayer('point1');
// Icon 그리기
this.$refs.open_layers.createIcon(coordinate[1], coordinate[0], '/client/resources/images/icon/fin2.png', 0.3, 'point1', 'EPSG:5181');
this.clickState = false;
}
// else {
// this.$refs.open_layers.removeLayer('point1');
// this.address.coordinate[0] = null;
// this.address.coordinate[1] = null;
// }
},
//좌표로 dong_cd찾기
childWheel(coordinate) {
// console.log("childWheel check : ", coordinate);
const vm = this;
if (this.now_zoom <= 18) {
axios({
url: "/dong/getDongCdUsingCoordinates.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: { "lat": coordinate[0], "lon": coordinate[1] },
})
.then(function (response) {
// console.log("getDongCdUsingCoordinates - response : ", response.data);
for (var i = 0; i < response.data.length; i++) {
if (response.data[i].layer == 'sido') {
vm.wheelEventSiDo = response.data[i].dong_cd;
} else if (response.data[i].layer == 'sigungu') {
vm.wheelEventSiGunGu = response.data[i].dong_cd;
} else {
vm.wheelEventDong = response.data[i].dong_cd;
vm.address.dong_cd = response.data[i].dong_cd;
vm.findNodeUsingDongSelectList(vm.wheelEventDong);
}
}
})
.catch(function (error) {
console.log("getDongCdUsingCoordinates - error : ", error);
alert(
"좌표로 dong_cd 조회 오류, 관리자에게 문의해주세요."
);
});
}
else {
var min = 9999999999;
var minIndex = null;
coordinate = transform([coordinate[0], coordinate[1]], "EPSG:5181", "EPSG:4326");
// console.log("transform coordinate : ", coordinate);
// console.log("this.nodeList : ", this.nodeList);
for (var i = 0; i < this.nodeList.length; i++) {
// console.log("this.nodeList[i].geom : ", JSON.parse(this.nodeList[i].geometry).coordinates);
// console.log("this.nodeList[i].node_id : ", this.nodeList[i].node_id);
var lat = JSON.parse(this.nodeList[i].geometry).coordinates[0];
var lon = JSON.parse(this.nodeList[i].geometry).coordinates[1];
var dLat = this.toRadians(coordinate[0] - lat);
var dLon = this.toRadians(coordinate[1] - lon);
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2)
+ Math.cos(this.toRadians(lat)) * Math.cos(this.toRadians(coordinate[0]))
* Math.sin(dLon / 2) * Math.sin(dLon / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var dis = 6371 * c;
if (min > dis) {
min = dis;
minIndex = i;
}
}
if (this.nodeList.length != 0 && this.nodeList[minIndex].node_id != null) {
this.wheelEventNode = this.nodeList[minIndex].node_id;
// console.log(" this.wheelEventNode : ", this.wheelEventNode);
this.address.node_id = this.nodeList[minIndex].node_id;
this.address.node_name = this.nodeList[minIndex].node_name;
}
}
// console.log(" wheel address : ", this.address);
},
toRadians(degrees) {
return (degrees * Math.PI) / 180;
},
childMoveEnd(zoom) {
// console.log("zoom : ", zoom);
this.now_zoom = zoom;
//시/도 레이어로 수정
if (this.wheelEventSiDo == null) return;
if (zoom <= 13) {
this.$refs.open_layers.removeLayer('crslkLayer');
this.$refs.open_layers.removeLayer('multPolygonLayer');
this.$refs.open_layers.removeLayer('nodeLayer');
this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl('/common/getDongsPolygonGeoJson.json', 'multPolygonLayer', 'EPSG:5181', baseStyles['MultiPolygon'], 'MultiPolygon', this.wheelEventSiDo);
this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl('/common/getDongsCenterJson.json', 'nodeLayer', 'EPSG:5181', baseStyles['labelStyle'], 'label', this.wheelEventSiDo);
}
//시/군/구 레이어로 수정
else if (zoom <= 14.5) {
this.$refs.open_layers.removeLayer('crslkLayer');
this.$refs.open_layers.removeLayer('multPolygonLayer');
this.$refs.open_layers.removeLayer('nodeLayer');
this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl('/common/getDongsPolygonGeoJson.json', 'multPolygonLayer', 'EPSG:5181', baseStyles['MultiPolygon'], 'MultiPolygon', this.wheelEventSiGunGu);
this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl('/common/getDongsCenterJson.json', 'nodeLayer', 'EPSG:5181', baseStyles['labelStyle'], 'label', this.wheelEventSiGunGu);
}
//행정동
else if (zoom <= 17.5) {
this.$refs.open_layers.removeLayer('crslkLayer');
this.$refs.open_layers.removeLayer('multPolygonLayer');
this.$refs.open_layers.removeLayer('nodeLayer');
this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl('/common/getDongsPolygonGeoJson.json', 'multPolygonLayer', 'EPSG:5181', baseStyles['MultiPolygon'], 'MultiPolygon', this.wheelEventDong);
this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl('/common/getNodesGeoJson.json', 'nodeLayer', 'EPSG:4326', baseStyles['labelStyle'], 'label', this.wheelEventDong);
}
//노드
else if (zoom <= 18) {
this.$refs.open_layers.removeLayer('crslkLayer');
this.$refs.open_layers.removeLayer('multPolygonLayer');
this.$refs.open_layers.removeLayer('nodeLayer');
this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl('/common/getNodeGeoJson.json', 'nodeLayer', 'EPSG:4326', baseStyles['labelStyle2'], 'labelStyle2',this.wheelEventDong, this.wheelEventNode);
this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl('/common/getCrslksGeoJson.json', 'nodeLayer', 'EPSG:5181', baseStyles['labelStyle'], 'label', this.wheelEventDong, this.wheelEventNode);
}
//횡단보도
else {
//가장 가까운 노드로 판단
this.$refs.open_layers.removeLayer('crslkLayer');
this.$refs.open_layers.removeLayer('multPolygonLayer');
this.$refs.open_layers.removeLayer('nodeLayer');
this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl('/common/getNodeGeoJson.json', 'nodeLayer', 'EPSG:4326', baseStyles['labelStyle2'], 'labelStyle2', this.wheelEventDong, this.wheelEventNode);
this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl('/common/getCrslksGeoJson.json', 'crslkLayer', 'EPSG:5181', baseStyles['labelStyle'], 'label', this.wheelEventDong, this.wheelEventNode);
}
},
clickStateChange() {
this.clickState = true;
}
},
watch: {
'address.dong_cd': function (newValue, oldValue) {
// console.log("dong_cd newValue : ", newValue);
// console.log("dong_cd oldValue : ", oldValue);
// this.address.dong_cd = newValue;
},
'address.siDo_dong_cd': function (newValue, oldValue) {
// console.log("siDo_dong_cd newValue : ", newValue);
// console.log("siDo_dong_cd oldValue : ", oldValue);
this.address.dong_cd = newValue;
//아래에 있는 값은 초기화
this.address.guGun_dong_cd = null;
this.address.dong_dong_cd = null;
this.address.node_id = null;
this.gunGuList = null;
this.dongList = null;
//zoom 재설정
this.address.zoomLevel = 11.5;
this.gunGuSelect(newValue);
},
'address.guGun_dong_cd': function (newValue, oldValue) {
// console.log("guGun_dong_cd newValue : ", newValue);
// console.log("guGun_dong_cd oldValue : ", oldValue);
this.address.dong_cd = newValue;
//아래에 있는 값은 초기화
this.address.dong_dong_cd = null;
this.address.node_id = null;
this.dongList = null;
//zoom 재설정
this.address.zoomLevel = 14;
// 왜넣었는지 까먹...
if (newValue != null) {
this.dongSelectList(newValue);
}
},
'address.dong_dong_cd': function (newValue, oldValue) {
// console.log("dong_dong_cd newValue : ", newValue);
// console.log("dong_dong_cd oldValue : ", oldValue);
this.address.dong_cd = newValue;
//아래에 있는 값은 초기화
this.address.node_id = null;
this.address.zoomLevel = 15;
this.findNodeUsingDongSelectList(newValue);
},
'address.node_id': function (newValue, oldValue) {
// console.log("node_id newValue : ", newValue);
// console.log("node_id oldValue : ", oldValue);
this.address.node_id = newValue;
this.nodeList.forEach((node) => {
if (node.node_id == newValue) {
this.address.node_name = node.node_name;
}
})
this.address.zoomLevel = 19;
},
'address.coordinate': function (newValue, oldValue) {
// console.log("coordinate newValue : ", newValue);
// console.log("coordinate oldValue : ", oldValue);
this.address.lat = newValue[0];
this.address.lon = newValue[1];
},
'managerInfo': function (newValue, oldValue) {
// console.log("managerInfo newValue : ", newValue);
// console.log("managerInfo oldValue : ", oldValue);
},
"now_zoom": function (newValue, oldValue) {
// console.log("now_zoom newValue : ", newValue);
// console.log("now_zoom oldValue : ", oldValue);
},
"nodeList": function (newValue, oldValue) {
// console.log("nodeList newValue : ", newValue);
// console.log("nodeList oldValue : ", oldValue);
},
"condition.rndtp_tfclne_info": function (newValue, oldValue) {
// console.log("rndtp_tfclne_info newValue : ", newValue);
// console.log("rndtp_tfclne_info oldValue : ", oldValue);
},
},
computed: {},
mounted() {
console.log("Main2 mounted");
this.siDoSelectList();
this.gunGuSelect(this.address.siDo_dong_cd);
this.dongSelectList(this.address.guGun_dong_cd);
this.managerSelectList();
// 지도 초기화
this.$refs.open_layers.setBaseMap(vworldBaseLayer);
// 지도 폴리곤 넣기
this.$refs.open_layers.addVectorLayerByUrl('/common/getDongsGeoJson.json', 'multPolygonLayer', 'EPSG:5181', baseStyles['MultiPolygon'], 'MultiPolygon', this.address.dong_cd);
// 지역 중앙에 노드 + 이름 넣기
this.$refs.open_layers.addVectorLayerByUrl('/common/getDongsCenterJson.json', 'nodeLayer', 'EPSG:5181', baseStyles['labelStyle'], 'label', this.address.dong_cd);
},
};
</script>
<style scoped>
@media all and (max-width: 479px) {
.top {
overflow: scroll;
}
.top ul {
width: 137rem;
overflow: hidden;
justify-content: space-between !important;
padding: 2rem 1rem !important;
}
.top li {
display: flex;
}
.search {
width: inherit;
}
.toggle {
color: #fff;
font-weight: bold;
background: #13833b;
display: block !important;
position: absolute;
z-index: 150;
top: 1.3rem;
right: 1rem;
}
.wrap {
height: auto !important;
width: inherit;
margin: 0 !important;
}
.slide-content {
position: absolute;
z-index: 97;
left: 0;
width: -webkit-fill-available;
height: 100vh;
background-color: #f0f0f0;
transition: transform 0.3s ease;
transform: translateX(100%);
}
.slide-content.active {
transform: translateX(0);
}
}
.toggle {
display: none;
}
label {
text-align: left;
}
.search .box {
padding: 1rem 2rem;
background-color: #eaebec;
}
.search input[type="text"] {
}
.btn_set {
position: relative;
border-bottom: 1px solid #e5e3e3;
padding: 0 0 1rem 0;
}
.btn_set div {
position: absolute;
top: 40px;
width: 313px;
height: 380px;
background: #fff;
padding: 1rem;
}
.bg-white {
min-height: 46.6rem;
max-height: 46.6rem;
overflow: scroll;
overflow-x: hidden;
}
.bg-white::-webkit-scrollbar-thumb {
background-color: #fff;
}
h2 {
background: #50ba8a;
text-align: center;
color: #fff;
padding: 1.6rem 0;
}
.top p {
font-size: 15px;
}
.top ul {
padding: 1rem 0;
}
.top li {
width: calc(100% / 6);
text-align: center;
}
.top h3 {
font-size: 20px;
}
.wrap {
z-index: 100;
top: 0;
height: 865px;
}
.left {
background: #fff;
}
.right {
width: -webkit-fill-available;
}
.map {
width: 100%;
height: calc(100% - 0px);
}
.pg-item {
display: inline-block;
padding: 10px;
color: #949292;
}
table {
width: 100%;
text-align: center;
border-collapse: collapse;
}
th,
td {
border-left: none;
border-right: none;
}
table th {
padding: 15px 0;
color: #fff;
background-color: #13833b;
}
table td {
padding: 10px 0;
border-bottom: 1px solid #e5e5dd;
}
table thead tr {
background-color: #f7f6f6;
}
.modal2 {
padding: 3rem;
}
.modal2 h4 {
font-size: 2rem;
}
.modal {
width: 100rem;
}
.modalmain {
padding: 1rem;
max-height: 70rem;
overflow: scroll;
overflow-x: hidden;
}
.modalmain select {
width: max-content;
}
.modalmain input[type="text"] {
width: inherit;
}
.modalmain table thead {
background: #f7f6f6;
}
.modalmain table td {
border: 1px solid #eee;
}
.modal h2 {
background: #e5e5dd;
font-size: 2rem;
padding: 1rem;
color: #333;
}
.modal-bg h2 {
background: #e5e5dd;
font-size: 2rem;
padding: 1rem;
}
.modal h3 {
font-size: 1.8rem;
border-bottom: 1px solid #eee;
padding: 1rem 0 0.2rem 0;
}
.modal h4 {
font-size: 1.6rem;
font-weight: 100;
padding: 0.2rem 0 1rem 0;
}
.modal h2 button {
border: 0;
background: none;
height: 30px;
cursor: pointer;
}
.modal-bg button {
border: 0;
background: none;
height: 30px;
cursor: pointer;
}
.modal button img {
width: 25px;
}
select {
padding: 0.5rem;
/* border-radius: 5px; */
width: 90%;
height: 3rem;
border: 1px solid #c3bfbf;
font-size: 1.2rem;
color: #474747;
text-align: center;
}
</style>