-<template>

-  <div id="map">

-    <l-map :zoom="15" :center="mapCenter">

-      <l-tile-layer :url="tileLayerUrl" :attribution="attribution"></l-tile-layer>

-    </l-map>

-  </div>

-</template>

-

-<script>

-import { LMap, LTileLayer } from 'vue3-leaflet';

-

-// 영천시 json - 기존

-// import am5geodata_yeongcheon from "./map";

-

-export default {

-  components: {

-    LMap,

-    LTileLayer,

-  },

-  data() {

-    return {

-      mapCenter: [ 35.87172388583504,  128.55915532852885], // Initial center coordinates

-      tileLayerUrl: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', // Tile layer URL

-      attribution: '© OpenStreetMap contributors', // Attribution text

-    };

-  },

-  }

-</script>

-

-<style>

-.layerlist_title{

-background: #42547f;

-color: #fff;

-padding: 10px;

-font-size: 14px;

-}

-#map{min-height: 866px !important;}

-</style>

-<template>

-  <div>

-    <div id="map" class="map"></div>

-  </div>

-</template>

-

-<script>

-export default {

-  

-  data() {

-    return {

-    }

-  },

-  mounted() {

-    window.kakao && window.kakao.maps

-      ? this.loadMap()

-      : this.addKakaoMapScript();

-      

-  },

-  methods: {

-    addKakaoMapScript() {

-      const script = document.createElement("script");

-      /* global kakao */

-      script.onload = () => kakao.maps.load(this.loadMap);

-      script.src =

-        "http://dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=d0f88d63bd41b545d08ea9984995f082";

-      document.head.appendChild(script);

-    },

-    loadMap() {

-      var mapContainer = document.getElementById("map"); //지도를 담을 영역의 DOM 레퍼런스

-      var map = {

-        //지도를 생성할 때 필요한 기본 옵션

-        center: new kakao.maps.LatLng(35.87172388583504, 128.55915532852885), //지도의 중심좌표.

-        level: 5, //지도의 레벨(확대, 축소 정도)

-      };

-

-      var map = new kakao.maps.Map(mapContainer, map); //지도 생성 및 객체 리턴

-      // 지도 확대 축소를 제어할 수 있는  줌 컨트롤을 생성합니다

-      var zoomControl = new kakao.maps.ZoomControl();

-      map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);

-   

-

-    },

-    zoomControl() {},

-    

-  },

-};

-</script>

-

-<style>

-.map {

-  width: 100%;

-  height: 866px;

-}

-</style>

-<template>

-  <div>

-    <div id="map" class="map"></div>

-  </div>

-</template>

-

-<script>

-export default {

-  

-  data() {

-    return {

-    }

-  },

-  mounted() {

-    window.kakao && window.kakao.maps

-      ? this.loadMap()

-      : this.addKakaoMapScript();

-      

-  },

-  methods: {

-    addKakaoMapScript() {

-      const script = document.createElement("script");

-      /* global kakao */

-      script.onload = () => kakao.maps.load(this.loadMap);

-      script.src =

-        "http://dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=d0f88d63bd41b545d08ea9984995f082";

-      document.head.appendChild(script);

-    },

-    loadMap() {

-      var mapContainer = document.getElementById("map"); //지도를 담을 영역의 DOM 레퍼런스

-      var map = {

-        //지도를 생성할 때 필요한 기본 옵션

-        center: new kakao.maps.LatLng(35.87172388583504, 128.55915532852885), //지도의 중심좌표.

-        level: 5, //지도의 레벨(확대, 축소 정도)

-      };

-

-      var map = new kakao.maps.Map(mapContainer, map); //지도 생성 및 객체 리턴

-      // 지도 확대 축소를 제어할 수 있는  줌 컨트롤을 생성합니다

-      var zoomControl = new kakao.maps.ZoomControl();

-      map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);

-   

-

-    },

-    zoomControl() {},

-    

-  },

-};

-</script>

-

-<style>

-.map {

-  width: 100%;

-  height: 797px;

-}

-</style>

-<template>

-  <div>

-    <div id="map" class="map"></div>

-  </div>

-</template>

-

-<script>

-import axios from 'axios';

-import Map from "ol/Map";

-import View from "ol/View";

-import { fromLonLat } from 'ol/proj.js';

-import Point from 'ol/geom/Point';

-import Feature from 'ol/Feature';

-import TileLayer from "ol/layer/Tile";

-import Group from "ol/layer/Group";

-import { transform } from "ol/proj";

-import { XYZ, Vector as VectorSource } from "ol/source";

-import VectorSources from 'ol/source/Vector.js';

-import GeoJSON from 'ol/format/GeoJSON';

-import { Vector as VectorLayer } from "ol/layer";

-import { baseStyles } from './OpenLayersStyle.vue';

-import { Select } from 'ol/interaction';

-import { Icon, Style, Circle as CircleStyle, Fill, Stroke, Text } from 'ol/style.js';

-import { BASE_DIR } from '../../../Global'

-import proj4 from "proj4";

-import { register } from "ol/proj/proj4";

-import { Cluster } from 'ol/source';

-import { fromExtent } from 'ol/geom/Polygon';

-

-

-// V월드 메인키

-var API_KEY = "640F33E7-A813-3EF5-A503-7F2946B5A944";

-

-

-

-export default {

-  data() {

-    return {

-      // 맵 객첵 

-      map: Object,

-      // 레이어 리스트 

-      mapLayer: [],

-      // 오버레이 

-      mapOverLay: Object,

-      // 뷰객체 

-      mapView: Object,

-      hover: null,

-      baseSource: String,

-    };

-  },

-  components: {

-    Map: Map,

-  },

-  mounted() {

-    this.loadMap();

-

-  },

-  methods: {

-

-    setZoom(zoomIdx) {

-      this.map.getView().setZoom(zoomIdx);

-    },

-

-    loadMap() {

-      var vm = this;

-      this.baseSource = "EPSG:5181";

-

-      // 좌표계 추가

-      proj4.defs("EPSG:5181",

-        "+proj=tmerc +lat_0=38 +lon_0=127 +k=1 +x_0=200000 +y_0=500000 +ellps=GRS80 +units=m +no_defs"

-      );

-

-      proj4.defs("EPSG:5179",

-        "+proj=tmerc +lat_0=38 +lon_0=127.5 +k=0.9996 +x_0=1000000 +y_0=2000000 +ellps=GRS80 +units=m +no_defs"

-      );

-

-      proj4.defs("ESPG:4326",

-        "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs"

-      );

-

-      register(proj4);

-

-      // View 정보

-      this.mapView = new View({

-        projection: this.baseSource, ///EPSG:3857

-        center: transform([339979.82131209393, 265331.9344441357], "EPSG:5181", vm.baseSource), //126.9757184, 37.564388 

-        zoom: 14,

-        minZoom: 8,

-        maxZoom: 19

-      });

-      // 맵객체 생성 

-      this.map = new Map({

-        layers: [],

-        view: vm.mapView,

-        target: "map",

-      });

-      // 이벤트 초기화 

-      this.mouse_ev();

-    },

-

-    // 레이어 추가 함수 

-    addLayer: function (layer) {

-      this.map.addLayer(layer);

-    },

-

-    // 벡터 레이어 추가 URL

-    addVectorLayerByJson: function (geojson, layerName, geoType) {

-

-      var tempfeatures = new GeoJSON().readFeatures(geojson);

-

-      var layerSource = new VectorSource({});

-      if (geoType === vm.baseSource) {

-        layerSource = new VectorSource({

-          features: tempfeatures

-        });

-      } else {

-        tempfeatures.forEach(function (feature) {

-          // 좌표변환   

-          feature.getGeometry().transform(geoType, this.baseSource);

-          pointSource.addFeature(feature);

-        });

-      }

-

-      // 레리어 생성 

-      const vector = new VectorLayer({

-        properties: { name: layerName },

-        source: layerSource,

-        style: function (feature) {

-          return baseStyles[feature.getGeometry().getType()];

-        },

-      });

-      vector.setZIndex(10);

-      this.map.addLayer(vector);

-    },

-

-    // 벡터레이어 추가 JSON

-    addVectorLayerByUrl: function (sourceUrl, layerName, geoType, style, type, dong_cd, node_id) {

-      const vm = this;

-

-      axios({

-        url: sourceUrl,

-        method: 'post',

-        headers: {

-          'Content-Type': 'application/json; charset=UTF-8'

-        },

-        data: { "dong_cd": dong_cd, "node_id": node_id },

-      }).then(function (response) {

-        console.log("url : ", sourceUrl);

-

-        console.log("addVectorLayerByUrl response : ", response.data);

-

-        const tempfeatures = new GeoJSON().readFeatures(response.data);

-        console.log("tempfeatures response : ", tempfeatures);

-

-        // const areaSize=response.data.features.area;

-        let layerSource = new VectorSource({});

-        if (geoType === vm.baseSource) {

-          layerSource = new VectorSource({

-            features: tempfeatures

-          });

-        } else {

-          tempfeatures.forEach(function (feature) {

-            // 좌표변환   

-            feature.getGeometry().transform(geoType, vm.baseSource);

-            layerSource.addFeature(feature)

-          });

-        }

-        // 레이어 생성 

-        const vector = new VectorLayer({

-          properties: { name: layerName },

-          source: layerSource,

-          style: function (feature) {

-            // 라벨스타일 일때

-            if (type == 'label') {

-              if(feature.get('dong_nm')){

-                style.getText().setText(feature.get('dong_nm'))

-              }

-              else{

-                style.getText().setText(feature.get('node_name'))

-

-              }

-              style.getImage().setRadius(vm.map.getView().getZoom() + 12);

-              return style

-            } else if (type == 'MultiPolygon') {

-              return style

-            } else {

-              return baseStyles[feature.getGeometry().getType()];

-            }

-          },

-        });

-

-        vector.setZIndex(10);

-

-        //vector size 조절

-        const extent = vector.getSource().getExtent();

-        vm.map.getView().fit(extent,{

-          padding:[100,100,100,100],

-          duration:1000,

-        });

-        vm.map.addLayer(vector);

-

-      }).catch(function (error) {

-        console.log("error : ", error);

-      });

-    },

-

-    // 전체 삭제 함수

-    removeLayerAll: function () {

-      this.map

-        .getAllLayers()

-        .forEach((layer) => this.map.removeLayer(layer));

-    },

-

-    // 특정 레이어 삭제 

-    removeLayer: function (layerName) {

-      this.map

-        .getAllLayers()

-        .filter((layer) => layer.get("name").startsWith(layerName))

-        .forEach((layer) => this.map.removeLayer(layer));

-    },

-

-    // 클릭이벤트

-    mouse_ev: function (layerName) {

-      var vm = this;

-

-      if (this.map) {

-        this.map.on("pointerdrag", (evt) => {

-          // 화면이동 이벤트

-          console.log("pointerdrag");

-        });

-        this.map.on('moveend', function (e) {

-          var newZoom = vm.map.getView().getZoom();

-          console.log('zoom end, new zoom: ' + newZoom);

-          // vm.$parent.childMoveEnd(newZoom);

-        });

-

-        this.map.on("click", (evt) => {

-          const prop = [];

-          // 마우스 클릭 이벤트

-          console.log("click");

-          this.map.forEachFeatureAtPixel(

-            evt.pixel,

-            function (feature, layer) {

-              let values = feature;

-              values['layerName'] = layer.get('name');

-              prop.push(values);

-            }

-          );

-          //특정 layer 선택 틀릭 시, 

-          

-          vm.$parent.childClick(prop, evt.coordinate);

-        });

-

-        //pointerMove event

-        this.map.on("pointermove", (event) => {

-          var features = this.map.getFeaturesAtPixel(event.pixel);

-          if (features) {

-            // var properties = features[0].getProperties();

-            // console.log("pointerMove properties : ",properties.geometry.extent_[0])

-            // this.setCenterPosition(properties.geometry.extent_[1],properties.geometry.extent_[0],'EPSG:5181');

-          }

-        });

-      }

-    },

-

-    // 좌표 센터 이동

-    setCenterPosition: function (lat, lon, source) {

-

-      if (this.baseSource == source) {

-        this.map.getView().setCenter([lon, lat]);

-      } else {

-        this.map.getView().setCenter(transform([lon, lat], source, this.baseSource));

-      }

-    },

-

-    // 기본맵 세팅 

-    setBaseMap: function (map, dong_cd, node_id) {

-      const vm = this;

-

-      if (dong_cd != null) {

-        //dong_cd로 중간 위치 받아오기

-        axios({

-          url: '/dong/dongCenter.json',

-          method: 'post',

-          headers: {

-            'Content-Type': 'application/json; charset=UTF-8'

-          },

-          data: { "dong_cd": dong_cd, "node_id": node_id },

-        }).then(function (response) {

-          console.log("setBaseMap response", response.data)

-          vm.setCenterPosition(response.data.dong_lat, response.data.dong_lon, 'EPSG:5181');

-

-        }).catch(function (error) {

-          console.log("error : ", error);

-        });

-

-      }

-

-      this.map.getAllLayers()

-        .filter((layer) => layer.get("name").startsWith("base"))

-        .forEach((layer) => this.map.removeLayer(layer));

-

-      this.map.addLayer(map);

-    },

-    // 아이콘 생성 

-    createIcon: function (lat, lon, iconSrc, iconSclae, layername, source) {

-      var rome = new Feature({});

-

-      if (this.baseSource !== source) {

-        rome = new Feature({

-          geometry: new Point(transform([lon, lat], source, this.baseSource)),

-        });

-      } else {

-        rome = new Feature({

-          geometry: new Point([lon, lat]),

-        });

-      }

-

-      rome.setStyle(

-        new Style({

-          image: new Icon({

-            scale: iconSclae,

-            src: iconSrc,

-          }),

-        })

-      );

-

-      const vectorSources = new VectorSource({});

-      vectorSources.addFeature(rome);

-

-      // 레이어 생성 

-      const vector = new VectorLayer({

-        properties: { name: layername },

-        source: vectorSources

-      });

-

-      vector.setZIndex(99);

-      this.map.addLayer(vector);

-    },

-    // 클러스터링 기능 추가

-    addClusterLayer(sourceUrl, layerName, geoType, style, type, dong_cd) {

-      const vm = this;

-

-      axios({

-        url: sourceUrl,

-        method: 'post',

-        headers: {

-          'Content-Type': 'application/json; charset=UTF-8'

-        },

-        data: { "dong_cd": dong_cd },

-      }).then(function (response) {

-        console.log("addClusterLayer response : ", response)

-        const tempfeatures = new GeoJSON().readFeatures(response.data);

-        console.log("addClusterLayer tempfeatures : ", tempfeatures);

-        const count = 20000;

-

-        const features = new Array(count);

-        const e = 15000;

-        for (let i = 0; i < count; ++i) {

-          const coordinates = [2 * e * Math.random() + 320000, 2 * e * Math.random() + 260000];

-          features[i] = new Feature(new Point(coordinates));

-        }

-        features[0] = new Feature(new Point(transform([338492.222420045, 243951.915081981], "EPSG:5181", "EPSG:5181")));

-        const source = new VectorSource({

-          features: features,

-        });

-

-        const clusterSource = new Cluster({

-          distance: parseInt(25, 30),

-          minDistance: parseInt(10, 10),

-          source: source,

-        });

-

-        // let source = new VectorSource({});

-        // if (geoType === vm.baseSource) {

-        //   source = new VectorSource({

-        //     features: tempfeatures

-        //   });

-        // } else {

-        //   tempfeatures.forEach(function (feature) {

-        //     // 좌표변환   

-        //     feature.getGeometry().transform(geoType, vm.baseSource);

-        //     source.addFeature(feature)

-        //   });

-        // }

-        // 클러스터 레이어 생성

-        //const clusterSource = new Cluster({

-        // distance: 40,

-        // minDistance: 10,

-        // source: source,

-        // geometryFunction: function (feature) {

-        //   // Custom geometryFunction to handle different geometry types

-        //   const geometry = feature.getGeometry();

-        //   if (geometry.getType() === 'Polygon' || geometry.getType() === 'MultiPolygon') {

-        //     // For Polygon and MultiPolygon geometries, calculate the center point

-        //     const coordinates = geometry.getCoordinates();

-        //     const center = coordinates[0].reduce((acc, coordinate) => [acc[0] + coordinate[0], acc[1] + coordinate[1]], [0, 0]);

-        //     const numVertices = coordinates[0].length;

-        //     return new Point([center[0] / numVertices, center[1] / numVertices]);

-        //   } else {

-        //     // For other geometry types (e.g., Point, LineString), use the default geometryFunction

-        //     return feature.getGeometry();

-        //   }

-        // }

-        //});

-        const styleCache = {};

-

-        // 스타일 함수 설정

-        const clusterStyle = function (feature) {

-          const size = feature.get('features').length;

-          let style = styleCache[size];

-          if (!style) {

-            style = new Style({

-              image: new CircleStyle({

-                radius: 10,

-                stroke: new Stroke({

-                  color: '#fff',

-                }),

-                fill: new Fill({

-                  color: '#3399CC',

-                }),

-              }),

-              text: new Text({

-                text: size.toString(),

-                fill: new Fill({

-                  color: '#fff',

-                }),

-              }),

-            });

-            styleCache[size] = style;

-          }

-          return style;

-        };

-

-        const vector = new VectorLayer({

-          properties: { name: layerName },

-          source: clusterSource,

-          style: clusterStyle,

-        });

-

-        vector.setZIndex(10);

-        vm.map.addLayer(vector);

-      }).catch(function (error) {

-        console.log("error : ", error);

-      });

-    },

-  },

-};

-

-</script>

-

-<style>

-.map {

-  width: 100%;

-  height: 861px;

-}

-</style>

-

-

-<script>

-

-

-</script>

-<script>

-import TileLayer from 'ol/layer/Tile';

-import { XYZ, Vector as VectorSource } from 'ol/source';

-

-// V월드 메인키

-var API_KEY = '640F33E7-A813-3EF5-A503-7F2946B5A944';

-// var API_KEY = 'd0f88d63bd41b545d08ea9984995f082';

-

-// http://dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=d0f88d63bd41b545d08ea9984995f082

-// 기본지도

-export const vworldBaseLayer = new TileLayer({

-  source: new XYZ({ url: 'https://api.vworld.kr/req/wmts/1.0.0/'+API_KEY+'/Base/{z}/{y}/{x}.png' }),

-  properties: { name: 'base-vworld-base' },

-  minZoom: 5,

-  maxZoom: 19,

-  zIndex: 2,

-  preload: Infinity

-});

-export const naverBaseLayer = new TileLayer({

-  source: new XYZ({ 

-    projection : 'EPSG:3857',

-    url: 'https://map.pstatic.net/nrb/styles/basic/d0f88d63bd41b545d08ea9984995f082/{z}/{x}/{y}@2x.png',

-    tilePixelRatio: 2,     

-    // crossOrigin: 'anonymous',

-  }),

-  id: 'naver_base',

-  visible: false,

-  // properties: { name: 'base-kakao-base' },

-  minZoom: 5,

-  maxZoom: 19,

-  zIndex: 2,

-  // preload: Infinity

-});

-

-// 백지도

-export const vworldGrayLayer = new TileLayer({

-  source: new XYZ({ url: 'https://api.vworld.kr/req/wmts/1.0.0/'+API_KEY+'/gray/{z}/{y}/{x}.png' }),

-  properties: { name: 'base-vworld-gray' },

-  minZoom: 5,

-  maxZoom: 18,

-  zIndex: 2,

-  preload: Infinity

-});

-

-// 야간지도

-export const vworldMidnightLayer = new TileLayer({

-  source: new XYZ({ url: 'https://api.vworld.kr/req/wmts/1.0.0/'+API_KEY+'/midnight/{z}/{y}/{x}.png' }),

-  properties: { name: 'base-vworld-midnight' },

-  minZoom: 5,

-  maxZoom: 18,

-  zIndex: 2,

-  preload: Infinity

-});

-

-// 하이브리드 지도

-export const vworldHybridLayer = new TileLayer({

-  source: new XYZ({ url: 'https://api.vworld.kr/req/wmts/1.0.0/'+API_KEY+'/Hybrid/{z}/{y}/{x}.png' }),

-  properties: { name: 'base-vworld-hybrid' },

-  minZoom: 5,

-  maxZoom: 19,

-  zIndex: 3,

-  preload: Infinity

-});

-

-// 위성지도

-export const vworldSatelliteLayer = new TileLayer({

-  source: new XYZ({ url: 'https://api.vworld.kr/req/wmts/1.0.0/'+API_KEY+'/Satellite/{z}/{y}/{x}.jpeg' }),

-  properties: { name: 'base-vworld-satellite' },

-  minZoom: 5,

-  maxZoom: 19,

-  zIndex: 2,

-  preload: Infinity

-});      

- 

- 

-/* 

-  const geojsonObject = {

-  'type': 'FeatureCollection',

-  'crs': {

-    'type': 'name',

-    'properties': {

-      'name': 'EPSG:3857',

-    },

-  },

-  'features': [

-    {

-      'type': 'Feature',

-      'geometry': {

-        'type': 'Point',

-        'coordinates': [ 14135490.777017945, 4518386.883679577 ],

-      },

-    }

-  ]

-  };

-  */

- 

-</script>

-<script>

-import { Circle as CircleStyle, Style, Stroke, Fill, Text } from "ol/style"; //데이터를 그릴 스타일들

-

-// V월드 메인키

-var API_KEY = '640F33E7-A813-3EF5-A503-7F2946B5A944';

-

- export const baseStyles = {

-  'Point': new Style({

-    image: new CircleStyle({

-      radius: 10,

-      fill: new Fill({

-      color: 'rgba(255,0,0,0.2)',

-    }),

-      stroke: new Stroke({color: 'red', width: 2}),

-    }),

-  }),

-   'MultiPolygon': new Style({

-    stroke: new Stroke({

-      color: 'yellow',

-      width: 1,

-    }),

-    fill: new Fill({

-      color: 'rgba(255, 255, 0, 0.1)',

-    }),

-  }),

-  'Polygon': new Style({

-    stroke: new Stroke({

-      color: 'blue',

-      lineDash: [4],

-      width: 3,

-    }),

-    fill: new Fill({

-      color: 'rgba(0, 0, 255, 0.1)',

-    }),

-  }),

-  'labelStyle': new Style({

-    image: new CircleStyle({

-      radius: 0,

-      fill: new Fill({

-      color: 'rgba(0,255,0,0.5)',

-      }),

-        stroke: new Stroke({

-        color: 'rgba(255,0,0,1)',

-        width: 1

-      }),  

-    }),

-    text: new Text({

-      font: '12px Calibri,sans-serif',

-      overflow: false,

-      fill: new Fill({

-          color: 'rgba(255,0,0,1)'

-      }),

-    }),

-    

-  }),  

-};

-

-</script>

-<template>

-    <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="crslk_azHiddenCk">

-        <label for="">방위각</label>

-        <select name="crslk_azSelectList" id="crslk_azSelectList" 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>

-</template>

-  

-<script>

-import axios from 'axios';

-

-export default {

-    props:{

-        siDoHiddenCk:Boolean,

-        gunGuHiddenCk:Boolean,

-        dongHiddenCk:Boolean,

-        nodeHiddenCk:Boolean,

-        crslk_azHiddenCk:Boolean,

-    },

-    data() {

-        return {

-            address: {

-                //지역 설정

-                dong_cd : "22030",

-                siDo_dong_cd : "22",

-                guGun_dong_cd : "22030",

-                dong_dong_cd : null,

-                node_id : null,

-                zoomLevel : null,

-                crslk_az : null,

-            },

-            siDoList: [],

-            gunGuList: [],

-            dongList: [],

-            nodeList:[],

-        };

-    },

-    

-    components: {

-    },

-    watch: {

-        'address.siDo_dong_cd': function (newValue, oldValue) {

-            console.log("newValue : ", newValue);