From 764cb58899b8ca0e9632a5e83c6950569442c41c Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Wed, 02 Nov 2022 14:28:12 +0800
Subject: [PATCH] 图片更改
---
src/components/mapOncePoint/chousePoint.vue | 207 +++++++++++++++++++++++++++++++++++++++------------
1 files changed, 158 insertions(+), 49 deletions(-)
diff --git a/src/components/mapOncePoint/chousePoint.vue b/src/components/mapOncePoint/chousePoint.vue
index 2609b43..1c39cef 100644
--- a/src/components/mapOncePoint/chousePoint.vue
+++ b/src/components/mapOncePoint/chousePoint.vue
@@ -1,59 +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]
- // ) {
- this.$emit("setData", this.chousePointData);
- // } else {
- // this.$message.error("未成功选择地点");
- // this.$emit("setData", ["", "", ""]);
- // }
- // }, 500);
- },
- deep: true,
+ components: {
+ mapOncePoint,
},
- },
- methods: {
- openMaps(data) {
- this.chousePointData = [data.jd, data.wd, data.name];
+ 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>
+ </script>
-<style lang="scss" scoped>
+ <style lang="scss" scoped>
.myInputMap {
- width: 100%;
- height: 500px;
+ width: 100%;
+ height: 500px;
}
</style>
--
Gitblit v1.9.3