From 4dc89128da828b87cc737b9cbedb175f7e9097c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8F=B6=E5=BF=97=E8=B6=85?= <yezhichao@hwasmart.com>
Date: Fri, 8 Apr 2022 00:22:07 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E5=AE=9A=E4=BD=8D=E7=82=B9?=
 =?UTF-8?q?=E7=9A=84=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/util.js                  |  8 ++++++++
 src/components/LocatingPoint.vue |  6 +++++-
 src/components/LonlatForm.vue    | 32 +++++++++++++++++++++++++++-----
 src/components/LonlatTable.vue   |  2 +-
 src/components/Pin.vue           | 13 +++----------
 src/stores/position.js           | 24 ++++++++++++++++++++++++
 6 files changed, 68 insertions(+), 17 deletions(-)
 create mode 100644 src/api/util.js
 create mode 100644 src/stores/position.js

diff --git a/src/api/util.js b/src/api/util.js
new file mode 100644
index 0000000..97f178e
--- /dev/null
+++ b/src/api/util.js
@@ -0,0 +1,8 @@
+export const isLnglat = lnglat => {
+  const { lng, lat } = lnglat
+	
+  if (isNaN(lng) || lng > 180 || lng < -180) return false
+  if (isNaN(lat) || lat > 90  || lat < -90 ) return false
+
+  return true
+}
\ No newline at end of file
diff --git a/src/components/LocatingPoint.vue b/src/components/LocatingPoint.vue
index b798522..a12a89a 100644
--- a/src/components/LocatingPoint.vue
+++ b/src/components/LocatingPoint.vue
@@ -1,7 +1,11 @@
 <template>
-  <Pin :position="{ lng: 116.4, lat: 39.9 }" />
+  <Pin :position="position" />
 </template>
 
 <script setup>
 import Pin from '/@/components/Pin.vue'
+import { usePositionStore } from '/@/stores/position'
+
+
+const position = usePositionStore()
 </script>
\ No newline at end of file
diff --git a/src/components/LonlatForm.vue b/src/components/LonlatForm.vue
index 88ac9ed..23e5c9b 100644
--- a/src/components/LonlatForm.vue
+++ b/src/components/LonlatForm.vue
@@ -1,24 +1,34 @@
 <template>
-  <form>
+  <form @keyup.enter="onFlyBtnClick">
     <label>经度：</label>
-    <input type="text" id="lon-input" placeholder="请输入经度值">
+    <input type="number" v-model="lng"  placeholder="请输入经度值">
     <label>纬度：</label>
-    <input type="text" id="lat-input" placeholder="请输入纬度值">
+    <input type="number" v-model="lat" placeholder="请输入纬度值">
     <input type="button" id="fly-btn" @click="onFlyBtnClick" value="飞到这个点">
     <input type="button" id="clear-btn" @click="onClearBtnClick" value="清除坐标">
   </form>
 </template>
 
 <script setup>
-import { usePointStore } from '../stores/point'
+import { ref } from 'vue';
+import { usePointStore } from '/@/stores/point'
+import { usePositionStore } from '/@/stores/position'
 
+const lng           = ref(NaN)
+const lat           = ref(NaN)
+const position      = usePositionStore()
 const onFlyBtnClick = () => {
-
+  if ( !position.set({ lng: lng.value, lat: lat.value }) ) alert('请输入正确的经纬度信息')
 }
 
 
+
+
 const point = usePointStore()
 const onClearBtnClick = () => {
+  lng.value = NaN
+  lat.value = NaN
+  position.$reset()
   point.$reset()
 }
 
@@ -52,6 +62,18 @@ input:focus {
   outline: none;
 }
 
+/* Chrome, Safari, Edge, Opera */
+input[type=number]::-webkit-outer-spin-button,
+input[type=number]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type=number] {
+  -moz-appearance: textfield;
+}
+
 input#fly-btn, input#clear-btn {
   border-radius: 3px;
   background-color: #41ddee;
diff --git a/src/components/LonlatTable.vue b/src/components/LonlatTable.vue
index 49c64c9..b345afb 100644
--- a/src/components/LonlatTable.vue
+++ b/src/components/LonlatTable.vue
@@ -19,7 +19,7 @@
 
 <script setup>
 import { computed } from 'vue'
-import { usePointStore } from '../stores/point'
+import { usePointStore } from '/@/stores/point'
 
 const point = usePointStore()
 const show  = computed(() => point.index)
diff --git a/src/components/Pin.vue b/src/components/Pin.vue
index c5eaf2e..a03916d 100644
--- a/src/components/Pin.vue
+++ b/src/components/Pin.vue
@@ -5,9 +5,9 @@
 </template>
 
 <script setup>
-import { VcEntity, VcGraphicsBillboard } from 'vue-cesium'
-
 import { computed } from 'vue'
+import { VcEntity, VcGraphicsBillboard } from 'vue-cesium'
+import { isLnglat } from '/@/api/util'
 import pin from '/@/assets/pin.png'
 
 const props = defineProps({
@@ -21,12 +21,5 @@ const props = defineProps({
   }
 })
 
-const show = computed(() => {
-  const { lng, lat } = props.position
-	
-  if (isNaN(lng) || lng > 180 || lng < -180) return false
-  if (isNaN(lat) || lat > 90  || lat < -90 ) return false
-
-  return true
-})
+const show = computed(() => isLnglat(props.position))
 </script>
\ No newline at end of file
diff --git a/src/stores/position.js b/src/stores/position.js
new file mode 100644
index 0000000..434ab9d
--- /dev/null
+++ b/src/stores/position.js
@@ -0,0 +1,24 @@
+import { defineStore } from 'pinia'
+import { isLnglat } from '/@/api/util'
+
+
+export const usePositionStore = defineStore({
+  id: 'position',
+  state: () => ({
+    lng: NaN,
+    lat: NaN,
+  }),
+  getters: {
+    value: (state) => { state.lng, state.lat }
+  },
+  actions: {
+    set(position) {
+      if ( !isLnglat(position) ) return false
+
+      this.lng = position.lng
+      this.lat = position.lat
+
+      return true
+    },
+  },
+})