自制GIS坐标转换工具-CSDN博客

本文链接：https://blog.csdn.net/crazycat2046/article/details/121157626

最近在做与 GIS 相关的内容，需要频繁的拾取坐标和转换坐标。遂写了坐标拾取和坐标转换的小工具。

小工具有纯网页版和 VUE 版。

一、使用介绍

1、选择原始坐标的坐标类型。

目前只添加了 WGS84、GCJ02 和百度坐标。如果有需要，可根据实行情况自行添加。

2、输入原始坐标数据

这里的数据格式为 [[经度, 纬度]]。如果你的格式不一样，就自行修改源码。

3、清空、粘贴、转换

见名知义。

4、目标坐标系标题

点击目标坐标系标题就可以复制它的内容。

二、说明

1、由于该工具仅供自己使用，所以功能并没有做的很复杂，满足需求即可。不喜勿喷。

2、网页版使用了如下在线 CDN JS 库：VUE、Bootstrap4、gcoord、vue-clipboard2。

3、下载链接：GIS_WGS84_GCJ02_BD09_坐标转换.html-Javascript文档类资源-CSDN下载

三、代码

<body>
  <!-- vue -->
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
  <!-- jquery -->
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"></script>
  <!-- bootstrap4 -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF"
    crossorigin="anonymous"></script>
  <!-- gcoord -->
  <script src="https://unpkg.com/gcoord/dist/gcoord.js"></script>
  <!-- clipboard -->
  <script src="https://cdn.bootcdn.net/ajax/libs/vue-clipboard2/0.3.1/vue-clipboard.min.js"></script>
  <!-- element-ui -->
  <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.3/index.min.js"></script>
  <script>
    let vm = new Vue({
      el: "#app",
      data: {
        // 原始坐标系（默认是GCJ02）
        radio: 'GCJ02',
        input: '',
        item: null,

        resultWGS84Arr: null,
        resultGCJ02Arr: null,
        resultBD09Arr: null
      },

      methods: {

        doClear() {
          console.log("clear");
          this.input = '';
          this.resultWGS84Arr = '';
          this.resultGCJ02Arr = '';
          this.resultBD09Arr = '';
        },

        async doPaste() {
          console.log("doPaste");
          const text = await navigator.clipboard.readText();
          // console.log(text);
          this.input = text
        },

        // 复制成功
        onCopySuccess(e) {
          this.$message({
            message: '复制成功！',
            type: 'success'
          })
        },

        // 复制失败
        onCopyError(e) {
          this.$message({
            message: '复制失败！',
            type: 'error'
          })
        },

        doTransform() {
          console.log("transform");

          if (!this.input) {
            return;
          }

          console.log("transform");

          let resultWGS84Arr = [];
          let resultGCJ02Arr = [];
          let resultBD09Arr = [];

          let resultWGS = null;
          let resultGCJ = null;
          let resultBD = null;

          // console.log(this.radio);
          let category = null;
          switch (this.radio) {
            case "WGS84":
              category = gcoord.WGS84;
              break;
            case "GCJ02":
              category = gcoord.GCJ02;
              break;
            case "BD09":
              category = gcoord.BD09;
              break;
          }

          // console.log(category);

          this.item = JSON.parse(this.input);
          // console.log(this.item);
          this.item.forEach(element => {
            // console.log(element);
            resultWGS = gcoord.transform(element, category, gcoord.WGS84);
            resultGCJ = gcoord.transform(element, category, gcoord.GCJ02);
            resultBD = gcoord.transform(element, category, gcoord.BD09);
            // console.log("resultWGS = ", "[" + resultWGS + "]");
            resultWGS = "[" + resultWGS + "]";
            resultGCJ = "[" + resultGCJ + "]";
            resultBD = "[" + resultBD + "]";
            resultWGS84Arr.push(resultWGS);
            resultGCJ02Arr.push(resultGCJ);
            resultBD09Arr.push(resultBD);
          });

          // console.log(resultWGS84Arr);
          this.resultWGS84Arr = "[" + resultWGS84Arr + "]"
          this.resultGCJ02Arr = "[" + resultGCJ02Arr + "]"
          this.resultBD09Arr = "[" + resultBD09Arr + "]"
        }
      }
    });
  </script>
</body>