zjyzt_gis_master_web_ui/src/components/Utilities/CoordinateConversionTool.vue

<template>
  <el-container>
    <div class="beforeTransformOption">
      <el-row class="first_level_title"> 坐标转换 </el-row>
      <el-row>
        <el-col class="second_level_title_1" :span="8">
          转换前坐标系统：
          <el-select
            v-model="beforeTransformOption"
            @change="changeAfterTransformOptions"
            placeholder="请选择"
          >
            <el-option
              v-for="item in beforeTransformOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col class="second_level_title_1" :span="8">
          转换后坐标系统：
          <el-select v-model="afterTransformOption" placeholder="请选择">
            <el-option
              v-for="item in afterTransformOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row>
        <el-col class="second_level_title_1" :span="8">
          转换前经度（或x）：
          <el-input v-model="beforeX" type="number"></el-input>
        </el-col>
        <el-col class="second_level_title_1" :span="8">
          转换前纬度（或y）：
          <el-input v-model="beforeY" type="number"></el-input>
        </el-col>
        <el-col :span="8">
          <el-button class="change_address" type="primary" @click="transform">
            转换
          </el-button>
          <el-button
            class="change_address"
            type="primary"
            @click="clearResult"
            v-if="isTransform"
          >
            结果清空
          </el-button>
        </el-col>
      </el-row>
      <el-row class="tips">
        <el-col> 注：转换前的经纬度（或x y）的值应为数字 </el-col>
      </el-row>
    </div>
    <div class="afterTransformOption">
      <el-row class="first_level_title"> 转换结果 </el-row>
      <el-row>
        <el-col class="second_level_title_2" :span="8">
          转换后经度（或x）：{{ afterX }}
        </el-col>
        <el-col class="second_level_title_2" :span="8">
          转换后纬度（或y）：{{ afterY }}
        </el-col>
        <el-col :span="8" style="min-heigth: 1px"></el-col>
      </el-row>
      <div id="transform_map"></div>
      <el-row class="third_level_title">
        注：当转换后的坐标系为 WGS84 或 Web Mercator 时，结果将在地图上展示
      </el-row>
    </div>
  </el-container>
</template>

<script>
import Map from "ol/Map";
import View from "ol/View";
import Tile from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";

import Feature from "ol/Feature";
import Point from "ol/geom/Point";

import VectorSource from "ol/source/Vector";
import VectorLayer from "ol/layer/Vector";

import { defaults } from "ol/control";
import { transform } from "ol/proj";

import { Style, Circle, Fill, Stroke, Text } from "ol/style";

export default {
  data() {
    return {
      defaultOptions: [],
      beforeTransformOption: 0,
      beforeTransformOptions: [],
      afterTransformOption: 1,
      afterTransformOptions: [],

      isTransform: false,

      beforeX: "",
      beforeY: "",
      afterX: "",
      afterY: "",
    };
  },
  created() {
    this.defaultOptions = systemConfig.coordinateSystem.map(function (
      item,
      index
    ) {
      item.value = index;
      return item;
    });

    this.beforeTransformOptions = Object.assign({}, this.defaultOptions);
    this.changeAfterTransformOptions(this.beforeTransformOption);
  },
  mounted() {
    let center = transform(
      [systemConfig.mapDefault.center.lng, systemConfig.mapDefault.center.lat],
      "EPSG:4326",
      "EPSG:3857"
    );

    let view = new View({
      center: center,
      zoom: systemConfig.mapDefault.zoom,
      constrainResolution: true, // 以整数级别缩放地图
    });
    this.map = new Map({
      target: "transform_map", //地图标签id
      logo: false,
      controls: defaults({
        attribution: false,
        zoom: false,
        rotate: false,
      }),
      view: view,
    });

    let urlvec =
      systemConfig.tdt_url +
      "/vec_w/wmts?tk=" +
      systemConfig.tdt_tk +
      "&LAYER=vec&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles";
    let urlcva =
      systemConfig.tdt_url +
      "/cva_w/wmts?tk=" +
      systemConfig.tdt_tk +
      "&LAYER=cva&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles";

    let layer_vec = new Tile({
      source: new XYZ({ url: urlvec }),
      zIndex: 0,
    });
    let layer_cva = new Tile({
      source: new XYZ({ url: urlcva }),
      zIndex: 0,
    });
    this.map.addLayer(layer_vec);
    this.map.addLayer(layer_cva);
    var markerStyle = new Style({
      image: new Circle({
        radius: 7,
        fill: new Fill({
          color: "#ff0000",
        }),
        stroke: new Stroke({
          color: "0000",
          width: 2,
        }),
      }),
    });
    this.markerSource = new VectorSource();
    var markerLayer = new VectorLayer({
      source: this.markerSource,
      style: markerStyle,
      zIndex: 1,
    });
    this.map.addLayer(markerLayer);
  },
  methods: {
    changeAfterTransformOptions(value) {
      this.afterTransformOptions = this.defaultOptions.filter(function (item) {
        return item.value != value;
      });
      this.afterTransformOption = this.afterTransformOptions[0].value;
      this.clearResult();
    },
    transform() {
      let that = this;
      let beforeTransformItem = this.defaultOptions.filter(function (item) {
        return item.value == that.beforeTransformOption;
      })[0];

      let afterTransformItem = this.defaultOptions.filter(function (item) {
        return item.value == that.afterTransformOption;
      })[0];
      proj4.defs(beforeTransformItem.uuid, beforeTransformItem.proj4);
      proj4.defs(afterTransformItem.uuid, afterTransformItem.proj4);
      let after = proj4(beforeTransformItem.uuid, afterTransformItem.uuid, [
        Number(this.beforeX),
        Number(this.beforeY),
      ]);
      this.afterX = after[0];
      this.afterY = after[1];

      this.isTransform = true;
      if (afterTransformItem.uuid.indexOf("4326") > -1) {
        let t = proj4("EPSG:4326", "EPSG:3857", after);
        this.addPoint(t[0], t[1]);
      }
      if (afterTransformItem.uuid.indexOf("3857") > -1) {
        this.addPoint(after[0], after[1]);
      }
    },
    clearResult() {
      this.afterX = "";
      this.afterY = "";
      this.isTransform = false;
      this.clearPoint();
    },
    addPoint(x, y) {
      var feature = new Feature({
        geometry: new Point([x, y]),
      });
      this.markerSource.addFeatures([feature]);
      this.map.getView().animate({
        center: [x, y], //动画结尾的视图中心
        zoom: 15,
        duration: 2000, //动画的持续时间
      });

      // this.map.getView().setZoom(15);
    },
    clearPoint() {
      if (this.markerSource) this.markerSource.clear();
    },
  },
};
</script>

<style lang="less" scoped>
.el-container {
  display: block;
  width: 100%;
  padding: 10px 20px;
  box-sizing: border-box;
  background: #ffffff;
  .beforeTransformOption {
    overflow: hidden;
    .el-row {
      margin-bottom: 20px;
      line-height: 40px;
      &:last-child {
        margin-bottom: 10px;
      }
    }
    .el-input {
      width: fit-content;
    }
    .tips {
      margin-bottom: 0px !important;
      line-height: 30px;
      font-size: 14px;
      text-indent: 42px;
      color: #c3c3c3;
      overflow: hidden;
      text-align: left;
    }
  }
  .afterTransformOption {
    height: calc(100% - 172px);
    position: relative;
    .el-row {
      margin-bottom: 10px;
      line-height: 40px;
    }
    // .el-main {
    //   height: calc(100% - 50px);
    //   padding-top: 2px;
    //   padding-bottom: 10px;
    //   overflow: hidden;
    //   overflow-y: auto;
    // }

    #transform_map {
      height: calc(100% - 150px);
    }
  }
  .first_level_title {
    font-size: 18px;
    font-weight: bold;
  }
  .second_level_title_1 {
    font-size: 16px;
    font-weight: bold;
    text-align: right;
  }
  .second_level_title_2 {
    font-size: 16px;
    font-weight: bold;
  }
  .third_level_title {
    font-size: 14px;
    font-weight: bold;
    color: #cbcbcb;
  }
  .must_tips {
    color: #ff0000;
  }
  .change_address {
    margin-left: 20px;
  }
  ::v-deep input::-webkit-outer-spin-button,
  ::v-deep input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
  }
  ::v-deep input[type="number"] {
    -moz-appearance: textfield !important;
  }
}
</style>