openlayers集成

package.json

@@ -11,6 +11,7 @@
     "ant-design-vue": "^1.7.0",
     "axios": "^0.21.0",
     "core-js": "^3.6.5",
+    "ol": "^6.4.3",
     "vue": "^2.6.11",
     "vue-router": "^3.4.8",
     "vuex": "^3.5.1"

src/components/Main.vue

@@ -12,7 +12,7 @@
               ><icon-font type="wt-iconsearch" />数据查询</span
             >
             <a-menu-item-group title="Item 1">
-              <a-menu-item key="setting:1"> Option 1 </a-menu-item>
+              <a-menu-item key="search"> 详细信息 </a-menu-item>
               <a-menu-item key="setting:2"> Option 2 </a-menu-item>
             </a-menu-item-group>
             <a-menu-item-group title="Item 2">
@@ -31,7 +31,7 @@
       </a-row>
     </a-layout-header>
     <a-layout-content>
-      
+      <component :is="currentComp"/>
     </a-layout-content>
   </a-layout>
 </template>
@@ -47,14 +47,15 @@ import Admin from '@/components/admin/Index'
 export default {
   components: {
     'icon-font':IconFont,
-    // 'map':MapLayout,
-    // 'search':Search,
+    'map-layout':MapLayout,
+    'search':Search,
     // 'logs':Logs,
     // 'admin':Admin
   },
   data() {
     return {
-      current:['map']
+      current:['map'],
+      currentComp: 'map-layout'
     };
   },
   computed: {
@@ -64,7 +65,7 @@ export default {
   },
   methods: {
     handleMenuClick({item, key, keyPath}) {
-
+      this.currentComp = key
     }
   }
 };

src/components/map/Index.vue

@@ -1,13 +1,43 @@
 <template>
-  <div></div>
+  <div>
+    <div id="map" ref="map" style="height:calc(100vh - 110px);"></div>
+  </div>
 </template>
 
 <script>
-export default {
+import { Map, Tile, View } from "ol";
+import OSM from "ol/source/OSM";
+import { fromLonLat, toLonLat } from "ol/proj.js";
+import TileLayer from "ol/layer/Tile";
+import "ol/ol.css";
 
+export default {
+  data() {
+    return {};
+  },
+  methods: {
+    mapinit() {
+      var map = this.$refs.map;
+
+      var layer = new TileLayer({
+        source: new OSM(),
+        wrapX: false,
+      });
+      new Map({
+        target: "map",
+        layers: [layer],
+        view: new View({
+          center: fromLonLat([114.3, 30.6]),
+          zoom: 10,
+        }),
+      });
+    },
+  },
+  mounted() {
+    this.mapinit()
   }
+};
 </script>
 
 <style>
-
 </style>

src/components/search/Index.vue

@@ -1,5 +1,10 @@
 <template>
-  <div></div>
+  <div>
+    <a-layout>
+        <a-layout-sider>Sider</a-layout-sider>
+        <a-layout-content>Content</a-layout-content>
+    </a-layout>
+  </div>
 </template>
 
 <script>

src/utils/http.js

@@ -7,6 +7,16 @@ export const instance = axios.create({
     baseURL: backendUrl
 })
 
+export const URL_MAP = {
+    DEVICE_LIST: 'device/',
+    DEVICE_DETAIL: 'device/detail/',
+    PROJECT_LIST: 'project/',
+    PROJECT_DETAIL: 'project/detail/',
+    SENSOR_LIST: 'sensor/',
+    SENSOR_DETAIL: 'sensor/detail/',
+
+}
+
 export async function login(username, passwd, uuid, capthe)
 {
     let response = await instance.post('auth', {
@@ -32,3 +42,9 @@ export async function logout()
 {
     instance.defaults.headers['Authorization'] = ''
 }
+
+export async function getData(url, json) {
+    let response = await instance.get(url, json)
+    let data = await response.data
+    return data
+}