From 08f2f7bd98da4106c687621f16f24edd344caf87 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Thu, 08 Sep 2022 17:33:33 +0800
Subject: [PATCH] 1
---
src/components/mapOncePoint/chousePoint.vue | 316 ++++++++++++++++++++++++++--------------------------
1 files changed, 156 insertions(+), 160 deletions(-)
diff --git a/src/components/mapOncePoint/chousePoint.vue b/src/components/mapOncePoint/chousePoint.vue
index 5688f3f..1c39cef 100644
--- a/src/components/mapOncePoint/chousePoint.vue
+++ b/src/components/mapOncePoint/chousePoint.vue
@@ -1,172 +1,168 @@
-<template>
- <div>
- <avue-input-map
- :params="params"
- placeholder="请选择地点"
- v-model="chousePointData"
- ></avue-input-map>
- </div>
+ <template>
+ <div>
+ <avue-input-map :params="params" placeholder="请选择地点" v-model="chousePointData"></avue-input-map>
+ </div>
</template>
-<script>
-import mapOncePoint from "./mapOncePoint.vue";
+ <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,
+ components: {
+ mapOncePoint,
},
- },
- methods: {
- openMaps(data) {
- //转wgs84
- let ints = this.wgs84togcj02(data.jd, data.wd);
- this.chousePointData = [...ints, data.name];
+ data () {
+ return {
+ params: {
+ zoom: 10,
+ // zoomEnable: false,
+ // dragEnable: false,
+ },
+ chousePointData: [115.87179386, 28.74509276, ""],
+ }
},
- 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];
- }
+ 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,
+ },
},
- // 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];
- }
+ 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
+ },
},
- 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>
+ </script>
-<style lang="scss" scoped>
+ <style lang="scss" scoped>
.myInputMap {
- width: 100%;
- height: 500px;
+ width: 100%;
+ height: 500px;
}
</style>
--
Gitblit v1.9.3