swkim / crosswalk_back star
Forked from ysseo / crosswalk
youngsuk 2023-06-12
230612 서영석 openLayer 기본 지도 추가
@0c4d0994f974bfc4b83698e9fafce0b731ab4583
 
0c4d099
client/views/component/map/map.vue (added)
+++ client/views/component/map/map.vue
@@ -0,0 +1,50 @@
+<template>
+    <div ref="map" class="map"></div>
+  </template>
+  
+  <script>
+  import 'ol/ol.css';
+  import { Map, View } from 'ol';
+  import { fromLonLat } from 'ol/proj';
+  import OSM from 'ol/source/OSM';
+  import TileLayer from 'ol/layer/Tile';
+
+  export default {
+    data :() =>{
+        return {
+            name: 'Map',
+            map: null,
+        }
+    },
+  components: {},
+  methods: {},
+  watch: {},
+  computed: {},
+  mounted() {
+    console.log("started map!!")
+      this.map = new Map({
+        target: this.$refs.map,
+        view: new View({
+            center: fromLonLat([126.9784, 37.5665]), // Centered around Seoul, Korea
+          zoom: 8,
+        }),
+        layers: [ new TileLayer({
+      source: new OSM(),
+    }),],
+      });
+    },
+    beforeUnmount() {
+      this.map.setTarget(null);
+    },
+  };
+    
+    
+    
+  </script>
+  
+  <style>
+  .map {
+    width: 100%;
+    height: 861px;
+  }
+  </style>(파일 끝에 줄바꿈 문자 없음)
9cbcdfa
0c4d099
client/views/index.ts
--- client/views/index.ts
+++ client/views/index.ts
@@ -10,10 +10,16 @@
 
 import AppFilters from './pages/AppFilters';
 
 import App from './pages/App.vue';
 
 
+import OpenLayersMap from "vue3-openlayers";
 
+import "vue3-openlayers/dist/vue3-openlayers.css";
 
+
 
 // const vue = createApp(App).use(AppRouter).mount('#root');
 
 const vue = createApp(App)
 
 vue.use(AppStore);
 
 vue.use(AppRouter);
 
 vue.config.globalProperties.$filters = AppFilters
 
+
 
+vue.use(OpenLayersMap);
 
+
 
 vue.mount('#root');
9cbcdfa
0c4d099
package-lock.json
--- package-lock.json
+++ package-lock.json
@@ -17,6 +17,7 @@
 
         "fs": "0.0.1-security",
 
         "leaflet": "^1.9.4",
 
         "new-line": "^1.1.1",
 
+        "ol": "^7.4.0",
 
         "pg": "8.8.0",
 
         "url-loader": "4.1.1",
 
         "vue": "3.2.40",
9cbcdfa
0c4d099
package.json
--- package.json
+++ package.json
@@ -12,6 +12,7 @@
 
     "fs": "0.0.1-security",
 
     "leaflet": "^1.9.4",
 
     "new-line": "^1.1.1",
 
+    "ol": "^7.4.0",
 
     "pg": "8.8.0",
 
     "url-loader": "4.1.1",
 
     "vue": "3.2.40",
9cbcdfa
0c4d099
webpack.config.js
--- webpack.config.js
+++ webpack.config.js
@@ -18,6 +18,9 @@
 
     }, {
 
       test: /\.(js|jsx)?$/,
 
       loader: 'babel-loader',
 
+      options: {
 
+        compact: true,
 
+      },
 
     }, {
 
       test: /\.css$/,
 
       use: ['vue-style-loader', 'css-loader']
Add a comment
List