天地图经常遇到的问题:1、怎么初始化地图。2、地图添加覆盖物后怎么不能进行拖拽。3、怎么把单位为米的坐标转换为WGS84坐标。

1、怎么初始化地图

第一步:

//init.js
const TMapURL = 'http://api.tianditu.gov.cn/api?v=4.0&tk=你自己申请的秘钥'
export default {
  init: function () {
    // // 插入script脚本

    return new Promise((resolve, reject) => {
      // 如果已加载直接返回
      if (typeof window.T !== 'undefined') {
        console.log('地图脚本初始化成功...')
        resolve(window.T)
        return true
      }
      window.onload = function () {
        // 插入script脚本
        const scriptNode = document.createElement('script')
        scriptNode.setAttribute('type', 'text/javascript')
        scriptNode.setAttribute('src', TMapURL)
        document.body.appendChild(scriptNode)

        console.log('地图脚本初始化成功...')
        console.log(window.T)
        // eslint-disable-next-line
        resolve(window.T)
      }
    })
  }
}

第二步:在你需要使用天地图的地方引入

import TMap from './init'

第三步:使用,使用详细可以参考官网API 天地图API

  data () {
    return {
      T: '',
      map: '', // map对象
      zoom: 10, // 地图显示级别
      ctrl: '', // 地图类型控件
      marker: '', // 地图标注对象
      markerInfoWin: '', // 信息窗口对象
      // resultData:'', //该点附近信息返回
      datailedAddress: '', // 定位详细地址
      addressComponent: '', // 返回定位周边信息
      maxJ: 0,
      minJ: 0,
      maxW: 0,
      minW: 0,
      avgJ: 0,
      avgW: 0
    };
  },
  mounted () {
    this.getMapInit(null);
  },
    getMapInit (dkList) {
      // 获取地址信息
      let that = this;
      TMap.init()
        .then(T => {
          that.T = T;
          that.map = new T.Map(that.$refs.mapDiv, { projection: 'EPSG:4326' }); // 初始化地图
          that.map.centerAndZoom(new T.LngLat(116.40769, 39.89945), that.zoom);
          // 设置显示中心点和比例
          // 创建地图类型对象
          that.ctrl = new T.Control.MapType();
          // 添加地图类型控件到地图
          that.map.addControl(that.ctrl);
          that.map.disableInertia(); // 禁止鼠标地图惯性拖拽
          that.map.disableDoubleClickZoom(); // 禁止双击地图放大
          that.map.disableKeyboard(); // 禁止双击地图放大
          that.map.disableKeyboard(); // 禁止键盘操作地图
          that.getPosition(109.5996, 33.50475, false);
          that
            .$post(
              '发请求拿到数据进行处理的接口地址',
              { dk_id: dkList }
            )
            .then(res => {
              if (res.code != '0') {
                that.$message.error(res.msg); // 失败
                return;
              }

              if (res.tSsnydDkPlotsList.length == 0) {
                that.room = 4;
                that.getPosition(109.5996, 33.50475, false);
              } else {
                for (var a = 0; a < res.tSsnydDkPlotsList.length; a++) {
                  var tSsnydDkPlots = res.tSsnydDkPlotsList[a];

                  var pointsList = [];
                  // var points = [];
                  var flag = 0;
                  for (var i = 0; i < tSsnydDkPlots.length; i++) {
                    // ------------↓↓↓↓↓↓↓↓↓↓↓坐标偏移  by zjx  演示使用.可修改
                    // var x = tSsnydDkPlots[i].X;
                    var x = parseFloat(tSsnydDkPlots[i].X) - 5 + '';
                    // var y = tSsnydDkPlots[i].Y;
                    var y = parseFloat(tSsnydDkPlots[i].Y) + 115 + '';
                    // ------------↑↑↑↑↑↑↑↑↑↑↑坐标偏移  by zjx  演示使用.可修改
                    var dkqh = tSsnydDkPlots[i].DKQH;

                    var coord = that.convert84GaussToBL(x, y);

                    if (a == 0 && i == 0) {
                      this.maxJ = coord[0];
                      this.minJ = coord[0];
                      this.maxW = coord[1];
                      this.minW = coord[1];
                    }

                    if (dkqh == flag) {
                      pointsList[flag - 1].push(
                        new T.LngLat(coord[0], coord[1])
                      );
                    } else {
                      var points = [];
                      pointsList.push(points);
                      pointsList[flag].push(new T.LngLat(coord[0], coord[1]));
                      flag++;
                    }
                  }

                  that.marker = new T.Marker(pointsList[0][0]);
                  that.map.addOverLay(that.marker);
                  var polygon = new T.Polygon(pointsList, {
                    color: 'blue',
                    weight: 3,
                    opacity: 0.5,
                    fillColor: '#FFFFFF',
                    fillOpacity: 0.5
                  });
                  // 向地图上添加面
                  that.map.addOverLay(polygon);
                }
                var p = that.getCenter();
                var z = that.getZoom();
                that.map.centerAndZoom(new T.LngLat(that.avgJ, that.avgW), z); // 设置显示中心点和比例
              }
            });
        })
        .catch(error => {
          // 失败回调
          that.$message({
            center: true,
            message: error,
            type: 'error'
          });
        });
    },

 2、地图添加覆盖物后怎么不能进行拖拽

解决:天地图显示不全,只显示一部分或者一半_草样的年华的博客-CSDN博客

 3、怎么把单位为米的坐标转换为WGS84坐标

 我下面这些坐标的单位是米,怎么把这些米为到位的坐标转换为WGS84坐标呢?他们之间的换算关系是多少呢?可以下载js库proj.js,专门做坐标转换

直接上代码:

    convert84GaussToBL (x, y) {
      // 带宽
      var ZONE_WITH = 3;
      // 带号
      // 三度带计算公式 带号 = 横坐标前两位
      // 注意 3度带和6度带的 带号和中央经线的计算方式不同
      var PROJ_NO = Math.floor(y / 1000000);
      // 中央经线(弧度制)
      // 三度带计算公式: 中央经线(弧度制) = 带号 * 带宽 * (π/180)
      const longitude0 = PROJ_NO * ZONE_WITH * (Math.PI / 180);
      // 长半径(84)
      var a = 6378137;
      // 偏率(84)
      var f = 1 / 298.2572236;

      let longitude, latitude, X0, Y0, xval, yval;
      let e1, e2, ee, NN, T, C, M, D, R, u, fai;

      X0 = 0;
      Y0 = PROJ_NO * 1000000 + 500000;
      xval = x - X0;
      yval = y - Y0;
      e2 = 2 * f - f * f;
      e1 = (1.0 - Math.sqrt(1 - e2)) / (1.0 + Math.sqrt(1 - e2));
      ee = e2 / (1 - e2);
      M = xval;
      u =
        M / (a * (1 - e2 / 4 - (3 * e2 * e2) / 64 - (5 * e2 * e2 * e2) / 256));
      fai =
        u +
        ((3 * e1) / 2 - (27 * e1 * e1 * e1) / 32) * Math.sin(2 * u) +
        ((21 * e1 * e1) / 16 - (55 * e1 * e1 * e1 * e1) / 32) *
          Math.sin(4 * u) +
        ((151 * e1 * e1 * e1) / 96) * Math.sin(6 * u) +
        ((1097 * e1 * e1 * e1 * e1) / 512) * Math.sin(8 * u);
      C = ee * Math.cos(fai) * Math.cos(fai);
      T = Math.tan(fai) * Math.tan(fai);
      NN = a / Math.sqrt(1.0 - e2 * Math.sin(fai) * Math.sin(fai));
      R =
        (a * (1 - e2)) /
        Math.sqrt(
          (1 - e2 * Math.sin(fai) * Math.sin(fai)) *
            (1 - e2 * Math.sin(fai) * Math.sin(fai)) *
            (1 - e2 * Math.sin(fai) * Math.sin(fai))
        );
      D = yval / NN;
      // 计算经度(Longitude) 纬度(Latitude)
      longitude =
        longitude0 +
        (D -
          ((1 + 2 * T + C) * D * D * D) / 6 +
          ((5 - 2 * C + 28 * T - 3 * C * C + 8 * ee + 24 * T * T) *
            D *
            D *
            D *
            D *
            D) /
            120) /
          Math.cos(fai);
      latitude =
        fai -
        ((NN * Math.tan(fai)) / R) *
          ((D * D) / 2 -
            ((5 + 3 * T + 10 * C - 4 * C * C - 9 * ee) * D * D * D * D) / 24 +
            ((61 + 90 * T + 298 * C + 45 * T * T - 256 * ee - 3 * C * C) *
              D *
              D *
              D *
              D *
              D *
              D) /
              720);
      // 转换为度
      let coord = [0.0, 0.0];
      coord[0] = (longitude * 180) / Math.PI;
      coord[1] = (latitude * 180) / Math.PI;
      // alert('转换前:' + x + ',' + y + '\br转换后:' + "经度"+coord[0]+"纬度"+coord[1])
      return coord;
    },

 

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

草样的年华

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值