坐标匹配

src/api/gis/coordinate-conversion.js

@@ -133,14 +133,14 @@ export default {
      * @returns {{}}
      * @private
      */
-  LngLatToMercator(poi) {
+  LngLatToMercator (lng, lat) {
     const mercator = {}
     const earthRad = 6378137.0
-    mercator.x = poi.lng * Math.PI / 180 * earthRad
+    mercator.x = lng * Math.PI / 180 * earthRad
-    const a = poi.lat * Math.PI / 180
+    const a = lat * Math.PI / 180
     mercator.y = earthRad / 2 * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a)))
 
-    return mercator
+    return [mercator.x, mercator.y]
   },
 
   /**
@@ -149,12 +149,13 @@ export default {
      * @returns {{}}
      * @private
      */
-  MercatorToLngLat(poi) {
+  MercatorToLngLat (x, y) {
     const lnglat = {}
-    lnglat.lng = poi.x / 20037508.34 * 180
+    lnglat.lng = x / 20037508.34 * 180
-    const mmy = poi.y / 20037508.34 * 180
+    const mmy = y / 20037508.34 * 180
     lnglat.lat = 180 / Math.PI * (2 * Math.atan(Math.exp(mmy * Math.PI / 180)) - Math.PI / 2)
-    return lnglat
+    // console.log(lnglat, '经纬度')
+    return [lnglat.lng, lnglat.lat]
   }
 
 }

src/components/PositionMatching/index.vue

@@ -1,30 +1,115 @@
 <template>
+  <div class="searchOption">
+    <div>
+      <input id="keyword"
+             v-model="searchStyle"
+             type="radio"
+             value="keyword">
+      <label for="keyword">按关键字搜索</label>
+    </div>
+    <div>
+      <input id="lnglat"
+             v-model="searchStyle"
+             type="radio"
+             value="lnglat">
+      <label for="lnglat">按经纬度搜索</label>
+    </div>
+
+  </div>
+
   <div class="content">
     <img src="@/assets/img/location.png">
-    <input type="text"
+    <input v-model="searchContent"
-           placeholder="请输入搜索位置/坐标">
+           type="text"
+           placeholder="请输入搜索位置/坐标"
+           @input="searchPlace()">
     <img src="@/assets/img/search.png"
          @click="showList()">
   </div>
   <div ref="locationList"
-       class="locationList" />
+       class="my-click-transition">
+    <li v-for="(item,index) in localList"
+        :key="index"
+        class="itemLocation"
+        @click="flyTo(item.geometry,item.id)"><img src="@/assets/img/location.png">
+      <span class="locationName">{{ item.name }}</span>
+      <span class="locationAddress">{{ item.address }}</span>
+    </li>
+  </div>
 </template>
 
 <script>
+import axios from 'axios'
 export default {
+  data () {
+    return {
+      searchType: '',
+      searchStyle: 'keyword',
+      searchContent: '',
+      localList: []
+    }
+  },
   methods: {
     showList () {
-      if (this.$refs.locationList.className == 'locationList  my-click-transition') {
+      // if (this.$refs.locationList.className == 'my-click-transition') {
-        this.$refs.locationList.className = 'locationList'
+      //   this.$refs.locationList.className = 'locationList'
+      // } else {
+      //   this.$refs.locationList.className = 'my-click-transition'
+      // }
+    },
+    // 实时查询
+    searchPlace () {
+      let url
+      if (this.searchStyle == 'keyword') {
+        console.log('111')
+        url = 'http://192.168.11.35:8500/thmap/poi/searchFeat/keywords?keywords=' + this.searchContent
       } else {
-        this.$refs.locationList.className = 'locationList  my-click-transition'
+        console.log('222')
+        const arr = this.searchContent.split(',')
+        url = 'http://192.168.11.35:8500/thmap/poi/searchFeat/keywords?lat=' + arr[0] + '&lng=' + arr[1] + '&distance=' + 50
       }
+
+      axios.get(url).then((res) => {
+        // console.log(res.data.data.datas, '数据集')
+        if (res.data.data.datas) {
+          // console.log('有数据了')
+          this.$refs.locationList.className = 'locationList'
+          this.localList = res.data.data.datas
+        } else {
+          this.$refs.locationList.className = 'my-click-transition'
+        }
+      }).catch((err) => {
+        console.log(err)
+      })
+    },
+    flyTo (lonLatInfo, id) {
+      const Arr = lonLatInfo.split(' ')
+
+      // const Num1 = parseFloat(Arr[1])
+      const Num1 = Number(Arr[1].match(/\d+(\.\d+)?/g)[0])
+      const Num2 = Number(Arr[2].match(/\d+(\.\d+)?/g)[0])
+      const Arr1 = [Num1, Num2]
+      // console.log(this.$parent, '父组件')
+      this.$parent.flyTo(Arr1, id)
+      // // console.log(Arr1, '点位信息')
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+.searchOption {
+  width: 300px;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 15px;
+  line-height: 50px;
+  input {
+    margin-right: 5px;
+  }
+}
 .content {
   width: 300px;
   height: 45px;
@@ -42,14 +127,42 @@ export default {
 .locationList {
   margin-top: 5px;
   width: 300px;
-  height: 100px;
+  // height: 100px;
-  background-color: pink;
+  background-color: rgba(245, 245, 245, 0.8);
-  transform: scale(0.5, 0.5);
+  transition: height 0.5s ease-in;
-  opacity: 0;
+  -webkit-transform: height 0.5s ease-in;
-  transition: transform 0.5s linear, opacity 0.5s linear;
 }
 .my-click-transition {
-  opacity: 1;
+  overflow: hidden;
-  transform: scale(1, 1);
+  margin-top: 5px;
+  transition: height 0.5s ease-out;
+  -webkit-transform: height 0.5s ease-out;
+  height: 0;
+  width: 300px;
+  background-color: rgba(245, 245, 245, 0.8);
+}
+.itemLocation {
+  width: 300px;
+  height: 32px;
+  position: relative;
+  padding-left: 32px;
+  font-size: 13px;
+  overflow: hidden;
+  line-height: 32px;
+  list-style: none;
+  cursor: pointer;
+  img {
+    width: 26px;
+    height: 26px;
+    position: absolute;
+    top: 3px;
+    left: 0px;
+  }
+  .locationName {
+    color: #0082e5;
+  }
+  .locationAddress {
+    color: #565656;
+  }
 }
 </style>

src/views/dashboard/index.vue

@@ -94,7 +94,7 @@ export default {
   },
   methods: {
     initMap () {
-      mapboxgl.accessToken = 'pk.eyJ1IjoibHh0aWFudGlhbiIsImEiOiJjaXd2ZjlkYnQwMTZvMnRtYWZnM2lpbHFvIn0.ef3rFZTr9psmLWahrqap2A'
+      // mapboxgl.accessToken = 'pk.eyJ1IjoibHh0aWFudGlhbiIsImEiOiJjaXd2ZjlkYnQwMTZvMnRtYWZnM2lpbHFvIn0.ef3rFZTr9psmLWahrqap2A'
 
       this.map = new mapboxgl.Map({
         container: 'map',
@@ -151,30 +151,35 @@ export default {
       }
     },
     changeCoordinate (transformStyle) {
+      const arr = this.coordinateBefore.split(',')
+
       switch (transformStyle) {
         case 'bd09togcj02':
-          this.coordinateAfter = Transform.bd09togcj02(this.coordinateBefore)
+
+          this.coordinateAfter = Transform.bd09togcj02(arr[0], arr[1])
           break
         case 'gcj02tobd09':
-          this.coordinateAfter = Transform.gcj02tobd09(this.coordinateBefore)
+          this.coordinateAfter = Transform.gcj02tobd09(arr[0], arr[1])
           break
         case 'wgs84togcj02':
-          this.coordinateAfter = Transform.wgs84togcj02(this.coordinateBefore)
+          this.coordinateAfter = Transform.wgs84togcj02(arr[0], arr[1])
           break
         case 'gcj02towgs84':
-          this.coordinateAfter = Transform.gcj02towgs84(this.coordinateBefore)
+          this.coordinateAfter = Transform.gcj02towgs84(arr[0], arr[1])
           break
         case 'bd09towgs84':
-          this.coordinateAfter = Transform.bd09towgs84(this.coordinateBefore)
+          this.coordinateAfter = Transform.bd09towgs84(arr[0], arr[1])
           break
         case 'wgs84tobd09':
-          this.coordinateAfter = Transform.wgs84tobd09(this.coordinateBefore)
+          this.coordinateAfter = Transform.wgs84tobd09(arr[0], arr[1])
           break
         case 'LngLatToMercator':
-          this.coordinateAfter = Transform.LngLatToMercator(this.coordinateBefore)
+          this.coordinateAfter = Transform.LngLatToMercator(arr[0], arr[1])
           break
         case 'MercatorToLngLat':
-          this.coordinateAfter = Transform.MercatorToLngLat(this.coordinateBefore)
+
+          this.coordinateAfter = Transform.MercatorToLngLat(arr[0], arr[1])
+
           break
       }
     },
@@ -339,6 +344,43 @@ export default {
         22.49156056685961
       )
       console.log(lng_lat_2, 'gc坐标')
+    },
+    flyTo (point, id) {
+      console.log(point, '传过来的点!')
+      this.map.flyTo({
+        center: point,
+        zoom: 10
+      })
+      if (this.map.getLayer(id)) {
+
+      } else {
+        this.map.loadImage(new URL('../../assets/img/located.png', import.meta.url).href, (error, image) => {
+          if (error) throw error
+          this.map.addImage(id + 'image', image)
+          this.map.addLayer({
+            id: id,
+            type: 'symbol',
+            source: {
+              type: 'geojson',
+              data: {
+                type: 'FeatureCollection',
+                features: [{
+                  type: 'Feature',
+                  geometry: {
+                    type: 'Point',
+                    coordinates: point
+                  }
+                }]
+
+              }
+            },
+            layout: {
+              'icon-image': id + 'image',
+              'icon-size': 0.3
+            }
+          })
+        })
+      }
     }
 
   }