<template>
|
<div>
|
<avue-input-map :params="params" placeholder="请选择地点" v-model="chousePointData"></avue-input-map>
|
</div>
|
</template>
|
|
<script>
|
import mapOncePoint from "./mapOncePoint.vue"
|
export default {
|
components: {
|
mapOncePoint,
|
},
|
data () {
|
return {
|
params: {
|
zoom: 10,
|
// zoomEnable: false,
|
// dragEnable: false,
|
},
|
chousePointData: [115.87179386, 28.74509276, ""],
|
}
|
},
|
watch: {
|
chousePointData: {
|
handler (oldData, newData) {
|
// setTimeout(() => {
|
// if (
|
// this.chousePointData[0] &&
|
// this.chousePointData[1] &&
|
// this.chousePointData[2]
|
// ) {
|
let outInt = this.gcj02towgs84(
|
this.chousePointData[0],
|
this.chousePointData[1]
|
)
|
let outdata = [...outInt, this.chousePointData[2]]
|
console.log(this.chousePointData, "gcj02")
|
console.log(outdata, " wgs84")
|
this.$emit("setData", outdata)
|
// } else {
|
// this.$message.error("未成功选择地点");
|
// this.$emit("setData", ["", "", ""]);
|
// }
|
// }, 500);
|
},
|
deep: true,
|
},
|
},
|
methods: {
|
openMaps (data) {
|
//转wgs84
|
let ints = this.wgs84togcj02(data.jd, data.wd)
|
this.chousePointData = [...ints, data.name]
|
},
|
wgs84togcj02 (lng, lat) {
|
var lat = +lat
|
var lng = +lng
|
var PI = 3.1415926535897932384626
|
var ee = 0.00669342162296594323
|
var a = 6378245.0
|
if (this.out_of_china(lng, lat)) {
|
return [lng, lat]
|
} else {
|
var dlat = this.transformlat(lng - 105.0, lat - 35.0)
|
var dlng = this.transformlng(lng - 105.0, lat - 35.0)
|
var radlat = (lat / 180.0) * PI
|
var magic = Math.sin(radlat)
|
magic = 1 - ee * magic * magic
|
var sqrtmagic = Math.sqrt(magic)
|
dlat = (dlat * 180.0) / (((a * (1 - ee)) / (magic * sqrtmagic)) * PI)
|
dlng = (dlng * 180.0) / ((a / sqrtmagic) * Math.cos(radlat) * PI)
|
var mglat = lat + dlat
|
var mglng = lng + dlng
|
return [mglng, mglat]
|
}
|
},
|
// GCJ02 转换为 WGS84
|
gcj02towgs84 (lng, lat) {
|
var lat = +lat
|
var lng = +lng
|
var PI = 3.1415926535897932384626
|
var ee = 0.00669342162296594323
|
var a = 6378245.0
|
// 判断是否在国内，不在国内则不做偏移
|
if (this.out_of_china(lng, lat)) {
|
return [lng, lat]
|
} else {
|
var dlat = this.transformlat(lng - 105.0, lat - 35.0)
|
var dlng = this.transformlng(lng - 105.0, lat - 35.0)
|
var radlat = (lat / 180.0) * PI
|
var magic = Math.sin(radlat)
|
magic = 1 - ee * magic * magic
|
var sqrtmagic = Math.sqrt(magic)
|
dlat = (dlat * 180.0) / (((a * (1 - ee)) / (magic * sqrtmagic)) * PI)
|
dlng = (dlng * 180.0) / ((a / sqrtmagic) * Math.cos(radlat) * PI)
|
var mglat = lat + dlat
|
var mglng = lng + dlng
|
return [lng * 2 - mglng, lat * 2 - mglat]
|
}
|
},
|
out_of_china (lng, lat) {
|
var lat = +lat
|
var lng = +lng
|
// 纬度3.86~53.55,经度73.66~135.05
|
return !(lng > 73.66 && lng < 135.05 && lat > 3.86 && lat < 53.55)
|
},
|
transformlng (lng, lat) {
|
var lat = +lat
|
var lng = +lng
|
var PI = 3.1415926535897932384626
|
var ret =
|
300.0 +
|
lng +
|
2.0 * lat +
|
0.1 * lng * lng +
|
0.1 * lng * lat +
|
0.1 * Math.sqrt(Math.abs(lng))
|
ret +=
|
((20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) *
|
2.0) /
|
3.0
|
ret +=
|
((20.0 * Math.sin(lng * PI) + 40.0 * Math.sin((lng / 3.0) * PI)) *
|
2.0) /
|
3.0
|
ret +=
|
((150.0 * Math.sin((lng / 12.0) * PI) +
|
300.0 * Math.sin((lng / 30.0) * PI)) *
|
2.0) /
|
3.0
|
return ret
|
},
|
transformlat (lng, lat) {
|
var lat = +lat
|
var lng = +lng
|
var PI = 3.1415926535897932384626
|
var ret =
|
-100.0 +
|
2.0 * lng +
|
3.0 * lat +
|
0.2 * lat * lat +
|
0.1 * lng * lat +
|
0.2 * Math.sqrt(Math.abs(lng))
|
ret +=
|
((20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) *
|
2.0) /
|
3.0
|
ret +=
|
((20.0 * Math.sin(lat * PI) + 40.0 * Math.sin((lat / 3.0) * PI)) *
|
2.0) /
|
3.0
|
ret +=
|
((160.0 * Math.sin((lat / 12.0) * PI) +
|
320 * Math.sin((lat * PI) / 30.0)) *
|
2.0) /
|
3.0
|
return ret
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.myInputMap {
|
width: 100%;
|
height: 500px;
|
}
|
</style>
|
