1

shuishen

2022-09-08 08f2f7bd98da4106c687621f16f24edd344caf87

 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>