|
|
|
@@ -1,7 +1,7 @@ |
|
|
|
<template> |
|
|
|
<div> |
|
|
|
<!-- <p class="fuTitle">地块位置绘制</p>--> |
|
|
|
<div id="full-screen-acceptance" style="width: 100%;height:71vh;"> |
|
|
|
<div id="full-screen-acceptance" style="width: 100%;height:71vh; position: relative;"> |
|
|
|
<div :id=this.uuidMap style="width: 100%;height: 100%"></div> |
|
|
|
<div id='land-btn-wrap'> |
|
|
|
<!--<el-button :id=this.drawingPolygonMap style="background-color:#D0EEFF;color:#1E88C7" @click="" type="primary">画图</el-button>--> |
|
|
|
@@ -11,6 +11,8 @@ |
|
|
|
<input :id="this.drawingPolygonMap" class="ant-btn ant-btn-red" type="button" value="画图"/> |
|
|
|
<input :id="this.drawingResetMap" type="button" class="ant-btn ant-btn-red" value="重置图层"/> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div v-if="hasSelectLocationMode" class="location-mode-chooser-btn"><input type="button" class="ant-btn ant-btn-red" value="选择定位方式" @click="selectLocationMode"/></div> |
|
|
|
</div> |
|
|
|
<div style="font-size: 13px; padding-top: 5px;">备注:绿色地块表示该地块,蓝色表示本账套已标记的其他地块</div> |
|
|
|
<div id="info" style="display: none"></div> |
|
|
|
@@ -21,6 +23,7 @@ |
|
|
|
import {getQueryLand} from "@/api/homesteadSurvey/zjdzd"; |
|
|
|
import $ from "jquery"; |
|
|
|
import { getConfigKey } from "@/api/system/config"; |
|
|
|
import {Toast} from "vant"; |
|
|
|
|
|
|
|
export default { |
|
|
|
components: { |
|
|
|
@@ -44,6 +47,20 @@ export default { |
|
|
|
// 获取村边界的图层名称 |
|
|
|
this.getVillageBorderLayerName(); |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
isAndroid() { |
|
|
|
return !!window._Native_object; |
|
|
|
}, |
|
|
|
hasSelectLocationMode() { |
|
|
|
return this.isAndroid && typeof(window._Native_object.SelectLocationMode) === 'function'; |
|
|
|
}, |
|
|
|
hasGetLocationTimeout() { |
|
|
|
return this.isAndroid && typeof(window._Native_object.GetLocationTimeout) === 'function'; |
|
|
|
}, |
|
|
|
hasGetLocationMode() { |
|
|
|
return this.isAndroid && typeof(window._Native_object.GetLocationMode) === 'function'; |
|
|
|
}, |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// 获取geoserver的地址 |
|
|
|
getGeoServerUrl() { |
|
|
|
@@ -74,34 +91,72 @@ export default { |
|
|
|
return v.toString(16); |
|
|
|
}); |
|
|
|
}, |
|
|
|
selectLocationMode() { |
|
|
|
if(this.hasSelectLocationMode) |
|
|
|
{ |
|
|
|
let res = window._Native_object.SelectLocationMode(); |
|
|
|
console.log('当前选择定位模式: ' + res); |
|
|
|
} |
|
|
|
}, |
|
|
|
getLocationMode() { |
|
|
|
let mode = ''; |
|
|
|
if(this.hasGetLocationMode) |
|
|
|
{ |
|
|
|
mode = window._Native_object.GetLocationMode(); |
|
|
|
} |
|
|
|
console.log('当前选择定位模式: ' + mode); |
|
|
|
return mode; |
|
|
|
}, |
|
|
|
getLocationTimeout() { |
|
|
|
let timeout = 30000; |
|
|
|
if(this.isAndroid) |
|
|
|
{ |
|
|
|
let to = window._Native_object.GetLocationTimeout(); |
|
|
|
if(to <= 0) |
|
|
|
to = 30000; |
|
|
|
timeout = to; |
|
|
|
} |
|
|
|
console.log('当前选择定位超时: ' + timeout); |
|
|
|
return timeout; |
|
|
|
}, |
|
|
|
getCurrentLocation(callback) { |
|
|
|
// 1. 首先尝试Android宿主端 |
|
|
|
if(window._Native_object) // Android层注入全局对象 |
|
|
|
if(this.isAndroid) // Android层注入全局对象 |
|
|
|
{ |
|
|
|
console.log('使用Native获取定位'); |
|
|
|
let coord = window._Native_object.GetLocation(null); |
|
|
|
console.log('Native坐标: ' + coord); |
|
|
|
if(coord) |
|
|
|
let mode = this.getLocationMode(); |
|
|
|
if(mode !== 'h5') |
|
|
|
{ |
|
|
|
let arr = coord.split(','); |
|
|
|
let res = { |
|
|
|
code: 200, |
|
|
|
data: { |
|
|
|
lng: arr[0], |
|
|
|
lat: arr[1], |
|
|
|
}, |
|
|
|
}; |
|
|
|
callback(res); |
|
|
|
return; |
|
|
|
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('使用浏览器获取定位'); |
|
|
|
const loading = Toast.loading({ |
|
|
|
message: '定位中...', |
|
|
|
duration: 0, |
|
|
|
}); |
|
|
|
let timeout = this.getLocationTimeout(); |
|
|
|
navigator.geolocation.getCurrentPosition( |
|
|
|
(position) => { |
|
|
|
const { latitude, longitude } = position.coords; |
|
|
|
console.log('浏览器定位结果: 经纬度=' + longitude + ', ' + latitude); |
|
|
|
let res = { |
|
|
|
code: 200, |
|
|
|
data: { |
|
|
|
@@ -109,13 +164,15 @@ export default { |
|
|
|
lat: latitude, |
|
|
|
}, |
|
|
|
}; |
|
|
|
loading.clear(); |
|
|
|
callback(res); |
|
|
|
}, |
|
|
|
(error) => { |
|
|
|
loading.clear(); |
|
|
|
console.log('定位失败: ' + error.message); |
|
|
|
getQueryLand().then(callback); |
|
|
|
}, |
|
|
|
{ enableHighAccuracy: true, timeout: 5000 } |
|
|
|
{ enableHighAccuracy: true, timeout: timeout } |
|
|
|
); |
|
|
|
return; |
|
|
|
} |
|
|
|
@@ -633,4 +690,10 @@ export default { |
|
|
|
z-index: 2000; |
|
|
|
padding-top: 5%; |
|
|
|
} |
|
|
|
.location-mode-chooser-btn { |
|
|
|
position: absolute; |
|
|
|
right: 0; |
|
|
|
bottom: 0; |
|
|
|
z-index: 2000; |
|
|
|
} |
|
|
|
</style> |