Task 定位

src/components/Map/MapGisTagDTGCopy.vue

@@ -3,6 +3,7 @@
     <div id="full-screen-acceptance" style="width: 100%;height:71vh;">
       <div :id=this.uuidMap style="width: 100%;height: 100%"></div>
       <div id='land-btn-wrap' v-show="showBtn">
+        <input :id="locationMap" type="button" class="ant-btn ant-btn-red" value="定位"/>&nbsp;&nbsp;
         <input :id="this.drawPolygonMap" class="ant-btn ant-btn-red" type="button" value="标记"/>&nbsp;&nbsp;
         <!--<input id="drawRemove" type="button" class="ant-btn ant-btn-red" value="取消"/>&nbsp;&nbsp;-->
         <input :id="this.drawResetMap" type="button" class="ant-btn ant-btn-red" value="重置标记"/>
@@ -27,6 +28,7 @@
         uuidMap: this.guidProduct(),
         drawPolygonMap: this.guidProduct(),
         drawResetMap: this.guidProduct(),
+        locationMap: this.guidProduct(),
         mapGeoServerUrl: "",            // geoserver地址
         villageBorderLayerName: "",     // 乡镇边界图层名称
       };
@@ -68,6 +70,56 @@
           return v.toString(16);
         });
       },
+      getCurrentLocation(callback) {
+        // 1. 首先尝试Android宿主端
+        if(window._Native_object) // Android层注入全局对象
+        {
+          console.log('使用Native获取定位');
+          let coord = window._Native_object.GetLocation(null);
+          console.log('Native坐标: ' + coord);
+          if(coord)
+          {
+            let arr = coord.split(',');
+            let res = {
+              code: 200,
+              data: {
+                lng: arr[0],
+                lat: arr[1],
+              },
+            };
+            callback(res);
+            return;
+          }
+        }
+
+        // 2. 再尝试浏览器
+        if (navigator.geolocation) {
+          console.log('使用浏览器获取定位');
+          navigator.geolocation.getCurrentPosition(
+            (position) => {
+              const { latitude, longitude } = position.coords;
+              let res = {
+                code: 200,
+                data: {
+                  lng: longitude,
+                  lat: latitude,
+                },
+              };
+              callback(res);
+            },
+            (error) => {
+              console.log('定位失败: ' + error.message);
+              getQueryLand().then(callback);
+            },
+            { enableHighAccuracy: true, timeout: 10000 }
+          );
+          return;
+        }
+
+        // 最后使用地区坐标
+        console.log('使用地区坐标定位');
+        getQueryLand().then(callback);
+      },
       //地图查看
       pointPaceCountryDarw() {
         //加载地图编辑
@@ -337,6 +389,26 @@
               that.formSubmit();
             }
           });
+          $("#" + this.locationMap).click(function () {
+            that.getCurrentLocation(res => {
+              if (res.code == 200) {
+                let lat = res.data.lat;
+                let lng = res.data.lng;
+                if(lat && lng){
+                  Zb = [lng,lat];
+                }else {
+                  Zb =[115.452752, 31.789033];
+                }
+                map.getView().animate({
+                  // 只设置需要的属性即可
+                  center: ol.proj.fromLonLat(Zb), // 中心点
+                  zoom: 15.9, // 缩放级别
+                  rotation: undefined, // 缩放完成view视图旋转弧度
+                  duration: 1000, // 缩放持续时间，默认不需要设置
+                });
+              }
+            });
+          });
         }
         else{
           this.closeMoule = null;
@@ -368,7 +440,7 @@
           //获取坐标是否存在
           var Zb;
           //开始定位当前位置
-          getQueryLand().then(res => {
+          this.getCurrentLocation(res => {
             if (res.code == 200) {
               let lat = res.data.lat;
               let lng = res.data.lng;
@@ -519,6 +591,26 @@
             that.closeMoule = null;
             that.formSubmit();
           });
+          $("#" + this.locationMap).click(function () {
+            that.getCurrentLocation(res => {
+              if (res.code == 200) {
+                let lat = res.data.lat;
+                let lng = res.data.lng;
+                if(lat && lng){
+                  Zb = [lng,lat];
+                }else {
+                  Zb =[115.452752, 31.789033];
+                }
+                map.getView().animate({
+                  // 只设置需要的属性即可
+                  center: ol.proj.fromLonLat(Zb), // 中心点
+                  zoom: 15.9, // 缩放级别
+                  rotation: undefined, // 缩放完成view视图旋转弧度
+                  duration: 1000, // 缩放持续时间，默认不需要设置
+                });
+              }
+            });
+          });
         }
       },
     },