Halaman utama Jelajahi Bantuan
Daftar Masuk
Hydrology
/
FlowActuarial
4
0
Fork 0
Berkas Masalah 0 Permintaan Tarik 0 Wiki
Jelajahi Sumber

feat: 使用天地图代替百度地图

hum 1 tahun lalu
induk
0909229861
melakukan
6476c6d238
4 mengubah file dengan 223 tambahan dan 225 penghapusan
Tampilan Split Tampilkan Statistik Diff
  1. 0 1
      ruoyi-ui/package.json
  2. 209 208
      ruoyi-ui/public/index.html
  3. 0 5
      ruoyi-ui/src/main.js
  4. 14 11
      ruoyi-ui/src/views/index.vue

+ 0 - 1
ruoyi-ui/package.json
Tampilan Berkas 

@@ -53,7 +53,6 @@
 
     "screenfull": "5.0.2",
 
     "sortablejs": "1.10.2",
 
     "vue": "2.6.12",
 
-    "vue-baidu-map": "^0.21.22",
 
     "vue-count-to": "1.0.13",
 
     "vue-cropper": "0.5.5",
 
     "vue-meta": "2.4.0",

+ 209 - 208
ruoyi-ui/public/index.html
Tampilan Berkas 

@@ -1,208 +1,209 @@
 
-<!DOCTYPE html>

-<html>

-  <head>

-    <meta charset="utf-8">

-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

-    <meta name="renderer" content="webkit">

-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">

-    <title><%= webpackConfig.name %></title>

-    <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->

-	  <style>

-    html,

-    body,

-    #app {

-      height: 100%;

-      margin: 0px;

-      padding: 0px;

-    }

-    .chromeframe {

-      margin: 0.2em 0;

-      background: #ccc;

-      color: #000;

-      padding: 0.2em 0;

-    }

-

-    #loader-wrapper {

-      position: fixed;

-      top: 0;

-      left: 0;

-      width: 100%;

-      height: 100%;

-      z-index: 999999;

-    }

-

-    #loader {

-      display: block;

-      position: relative;

-      left: 50%;

-      top: 50%;

-      width: 150px;

-      height: 150px;

-      margin: -75px 0 0 -75px;

-      border-radius: 50%;

-      border: 3px solid transparent;

-      border-top-color: #FFF;

-      -webkit-animation: spin 2s linear infinite;

-      -ms-animation: spin 2s linear infinite;

-      -moz-animation: spin 2s linear infinite;

-      -o-animation: spin 2s linear infinite;

-      animation: spin 2s linear infinite;

-      z-index: 1001;

-    }

-

-    #loader:before {

-      content: "";

-      position: absolute;

-      top: 5px;

-      left: 5px;

-      right: 5px;

-      bottom: 5px;

-      border-radius: 50%;

-      border: 3px solid transparent;

-      border-top-color: #FFF;

-      -webkit-animation: spin 3s linear infinite;

-      -moz-animation: spin 3s linear infinite;

-      -o-animation: spin 3s linear infinite;

-      -ms-animation: spin 3s linear infinite;

-      animation: spin 3s linear infinite;

-    }

-

-    #loader:after {

-      content: "";

-      position: absolute;

-      top: 15px;

-      left: 15px;

-      right: 15px;

-      bottom: 15px;

-      border-radius: 50%;

-      border: 3px solid transparent;

-      border-top-color: #FFF;

-      -moz-animation: spin 1.5s linear infinite;

-      -o-animation: spin 1.5s linear infinite;

-      -ms-animation: spin 1.5s linear infinite;

-      -webkit-animation: spin 1.5s linear infinite;

-      animation: spin 1.5s linear infinite;

-    }

-

-

-    @-webkit-keyframes spin {

-      0% {

-        -webkit-transform: rotate(0deg);

-        -ms-transform: rotate(0deg);

-        transform: rotate(0deg);

-      }

-      100% {

-        -webkit-transform: rotate(360deg);

-        -ms-transform: rotate(360deg);

-        transform: rotate(360deg);

-      }

-    }

-

-    @keyframes spin {

-      0% {

-        -webkit-transform: rotate(0deg);

-        -ms-transform: rotate(0deg);

-        transform: rotate(0deg);

-      }

-      100% {

-        -webkit-transform: rotate(360deg);

-        -ms-transform: rotate(360deg);

-        transform: rotate(360deg);

-      }

-    }

-

-

-    #loader-wrapper .loader-section {

-      position: fixed;

-      top: 0;

-      width: 51%;

-      height: 100%;

-      background: #7171C6;

-      z-index: 1000;

-      -webkit-transform: translateX(0);

-      -ms-transform: translateX(0);

-      transform: translateX(0);

-    }

-

-    #loader-wrapper .loader-section.section-left {

-      left: 0;

-    }

-

-    #loader-wrapper .loader-section.section-right {

-      right: 0;

-    }

-

-

-    .loaded #loader-wrapper .loader-section.section-left {

-      -webkit-transform: translateX(-100%);

-      -ms-transform: translateX(-100%);

-      transform: translateX(-100%);

-      -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);

-      transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);

-    }

-

-    .loaded #loader-wrapper .loader-section.section-right {

-      -webkit-transform: translateX(100%);

-      -ms-transform: translateX(100%);

-      transform: translateX(100%);

-      -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);

-      transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);

-    }

-

-    .loaded #loader {

-      opacity: 0;

-      -webkit-transition: all 0.3s ease-out;

-      transition: all 0.3s ease-out;

-    }

-

-    .loaded #loader-wrapper {

-      visibility: hidden;

-      -webkit-transform: translateY(-100%);

-      -ms-transform: translateY(-100%);

-      transform: translateY(-100%);

-      -webkit-transition: all 0.3s 1s ease-out;

-      transition: all 0.3s 1s ease-out;

-    }

-

-    .no-js #loader-wrapper {

-      display: none;

-    }

-

-    .no-js h1 {

-      color: #222222;

-    }

-

-    #loader-wrapper .load_title {

-      font-family: 'Open Sans';

-      color: #FFF;

-      font-size: 19px;

-      width: 100%;

-      text-align: center;

-      z-index: 9999999999999;

-      position: absolute;

-      top: 60%;

-      opacity: 1;

-      line-height: 30px;

-    }

-

-    #loader-wrapper .load_title span {

-      font-weight: normal;

-      font-style: italic;

-      font-size: 13px;

-      color: #FFF;

-      opacity: 0.5;

-    }

-  </style>

-  </head>

-  <body>

-    <div id="app">

-	    <div id="loader-wrapper">

-		    <div id="loader"></div>

-		    <div class="loader-section section-left"></div>

-		    <div class="loader-section section-right"></div>

-		    <div class="load_title">正在加载系统资源，请耐心等待</div>

-        </div>

-	</div>

-  </body>

-</html>

+<!DOCTYPE html>
 
+<html>
 
+  <head>
 
+    <meta charset="utf-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
+    <meta name="renderer" content="webkit">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 
+    <title><%= webpackConfig.name %></title>
 
+    <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
 
+    <script src="//api.tianditu.gov.cn/api?v=4.0&tk=285b7e874906f2b527b0ed779c029555" type="text/javascript"></script>
 
+	  <style>
 
+    html,
 
+    body,
 
+    #app {
 
+      height: 100%;
 
+      margin: 0px;
 
+      padding: 0px;
 
+    }
 
+    .chromeframe {
 
+      margin: 0.2em 0;
 
+      background: #ccc;
 
+      color: #000;
 
+      padding: 0.2em 0;
 
+    }
 
+
 
+    #loader-wrapper {
 
+      position: fixed;
 
+      top: 0;
 
+      left: 0;
 
+      width: 100%;
 
+      height: 100%;
 
+      z-index: 999999;
 
+    }
 
+
 
+    #loader {
 
+      display: block;
 
+      position: relative;
 
+      left: 50%;
 
+      top: 50%;
 
+      width: 150px;
 
+      height: 150px;
 
+      margin: -75px 0 0 -75px;
 
+      border-radius: 50%;
 
+      border: 3px solid transparent;
 
+      border-top-color: #FFF;
 
+      -webkit-animation: spin 2s linear infinite;
 
+      -ms-animation: spin 2s linear infinite;
 
+      -moz-animation: spin 2s linear infinite;
 
+      -o-animation: spin 2s linear infinite;
 
+      animation: spin 2s linear infinite;
 
+      z-index: 1001;
 
+    }
 
+
 
+    #loader:before {
 
+      content: "";
 
+      position: absolute;
 
+      top: 5px;
 
+      left: 5px;
 
+      right: 5px;
 
+      bottom: 5px;
 
+      border-radius: 50%;
 
+      border: 3px solid transparent;
 
+      border-top-color: #FFF;
 
+      -webkit-animation: spin 3s linear infinite;
 
+      -moz-animation: spin 3s linear infinite;
 
+      -o-animation: spin 3s linear infinite;
 
+      -ms-animation: spin 3s linear infinite;
 
+      animation: spin 3s linear infinite;
 
+    }
 
+
 
+    #loader:after {
 
+      content: "";
 
+      position: absolute;
 
+      top: 15px;
 
+      left: 15px;
 
+      right: 15px;
 
+      bottom: 15px;
 
+      border-radius: 50%;
 
+      border: 3px solid transparent;
 
+      border-top-color: #FFF;
 
+      -moz-animation: spin 1.5s linear infinite;
 
+      -o-animation: spin 1.5s linear infinite;
 
+      -ms-animation: spin 1.5s linear infinite;
 
+      -webkit-animation: spin 1.5s linear infinite;
 
+      animation: spin 1.5s linear infinite;
 
+    }
 
+
 
+
 
+    @-webkit-keyframes spin {
 
+      0% {
 
+        -webkit-transform: rotate(0deg);
 
+        -ms-transform: rotate(0deg);
 
+        transform: rotate(0deg);
 
+      }
 
+      100% {
 
+        -webkit-transform: rotate(360deg);
 
+        -ms-transform: rotate(360deg);
 
+        transform: rotate(360deg);
 
+      }
 
+    }
 
+
 
+    @keyframes spin {
 
+      0% {
 
+        -webkit-transform: rotate(0deg);
 
+        -ms-transform: rotate(0deg);
 
+        transform: rotate(0deg);
 
+      }
 
+      100% {
 
+        -webkit-transform: rotate(360deg);
 
+        -ms-transform: rotate(360deg);
 
+        transform: rotate(360deg);
 
+      }
 
+    }
 
+
 
+
 
+    #loader-wrapper .loader-section {
 
+      position: fixed;
 
+      top: 0;
 
+      width: 51%;
 
+      height: 100%;
 
+      background: #7171C6;
 
+      z-index: 1000;
 
+      -webkit-transform: translateX(0);
 
+      -ms-transform: translateX(0);
 
+      transform: translateX(0);
 
+    }
 
+
 
+    #loader-wrapper .loader-section.section-left {
 
+      left: 0;
 
+    }
 
+
 
+    #loader-wrapper .loader-section.section-right {
 
+      right: 0;
 
+    }
 
+
 
+
 
+    .loaded #loader-wrapper .loader-section.section-left {
 
+      -webkit-transform: translateX(-100%);
 
+      -ms-transform: translateX(-100%);
 
+      transform: translateX(-100%);
 
+      -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
 
+      transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
 
+    }
 
+
 
+    .loaded #loader-wrapper .loader-section.section-right {
 
+      -webkit-transform: translateX(100%);
 
+      -ms-transform: translateX(100%);
 
+      transform: translateX(100%);
 
+      -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
 
+      transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
 
+    }
 
+
 
+    .loaded #loader {
 
+      opacity: 0;
 
+      -webkit-transition: all 0.3s ease-out;
 
+      transition: all 0.3s ease-out;
 
+    }
 
+
 
+    .loaded #loader-wrapper {
 
+      visibility: hidden;
 
+      -webkit-transform: translateY(-100%);
 
+      -ms-transform: translateY(-100%);
 
+      transform: translateY(-100%);
 
+      -webkit-transition: all 0.3s 1s ease-out;
 
+      transition: all 0.3s 1s ease-out;
 
+    }
 
+
 
+    .no-js #loader-wrapper {
 
+      display: none;
 
+    }
 
+
 
+    .no-js h1 {
 
+      color: #222222;
 
+    }
 
+
 
+    #loader-wrapper .load_title {
 
+      font-family: 'Open Sans';
 
+      color: #FFF;
 
+      font-size: 19px;
 
+      width: 100%;
 
+      text-align: center;
 
+      z-index: 9999999999999;
 
+      position: absolute;
 
+      top: 60%;
 
+      opacity: 1;
 
+      line-height: 30px;
 
+    }
 
+
 
+    #loader-wrapper .load_title span {
 
+      font-weight: normal;
 
+      font-style: italic;
 
+      font-size: 13px;
 
+      color: #FFF;
 
+      opacity: 0.5;
 
+    }
 
+  </style>
 
+  </head>
 
+  <body>
 
+    <div id="app">
 
+	    <div id="loader-wrapper">
 
+		    <div id="loader"></div>
 
+		    <div class="loader-section section-left"></div>
 
+		    <div class="loader-section section-right"></div>
 
+		    <div class="load_title">正在加载系统资源，请耐心等待</div>
 
+        </div>
 
+	</div>
 
+  </body>
 
+</html>

+ 0 - 5
ruoyi-ui/src/main.js
Tampilan Berkas 

@@ -69,11 +69,6 @@ Vue.use(plugins)
 
 Vue.use(VueMeta)
 
 DictData.install()
 
 
-import BaiduMap from 'vue-baidu-map'
 
-Vue.use(BaiduMap, {
 
-  ak: 'CjG8uI3nK0iHicz1nTQkhG1ndfiFB836'
 
-})
 
-
 
 /**
 
  * If you don't want to use mock-server
 
  * you want to use MockJs for mock api

+ 14 - 11
ruoyi-ui/src/views/index.vue
Tampilan Berkas 

@@ -1,10 +1,5 @@
 
 <template>
 
-  <baidu-map :zoom="8" :center="center" scroll-wheel-zoom class="map">
 
-    <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
 
-    <bm-marker v-for="item in list" :position="{lng: +item.lon, lat: +item.lat}" :title="item.siteName" @click="handleSiteClick(item)">
 
-      <bm-label :content="item.siteName" :labelStyle="{color: '#1D2738', fontSize : '12px', borderColor: '#1D2738'}" :offset="{height: 30}"/>
 
-    </bm-marker>
 
-  </baidu-map>
 
+  <div class="map" ref="map"></div>
 
 </template>
 
 
 <script>
 
@@ -13,10 +8,6 @@ import { listSite } from "@/api/site/site";
 
 export default {
 
   data() {
 
     return {
 
-      center: {
 
-        lng: 104.066541,
 
-        lat: 30.572269
 
-      },
 
       queryParams: {
 
         page: 1,
 
         size: 10000,
 
@@ -28,6 +19,10 @@ export default {
 
   created() {
 
     this.getList();
 
   },
 
+  mounted() {
 
+    this.map = new T.Map(this.$refs.map);
 
+    this.map.centerAndZoom(new T.LngLat(104.066541, 30.572269), 8);
 
+  },
 
   methods: {
 
     handleQuery() {
 
       this.getList();
 
@@ -37,8 +32,16 @@ export default {
 
       listSite({page: 1, size: 10000,}).then(response => {
 
           this.list = response.data.records || [];
 
           if (this.list.length > 0) {
 
-            this.center = { lng: +this.list[0].lon, lat: +this.list[0].lat }
 
+            this.map.centerAndZoom(new T.LngLat(+this.list[0].lon, +this.list[0].lat), 8);
 
           }
 
+          this.list.forEach((item) => {
 
+            const point = new T.LngLat(+item.lon, +item.lat);
 
+            const marker = new T.Marker(point);
 
+            marker.addEventListener('click', () => {
 
+              this.handleSiteClick(item);
 
+            })
 
+            this.map.addOverLay(marker);
 
+          })
 
           this.loading = false;
 
         }
 
       );