• map -- js 百度、高德、谷歌、火星、wgs84(2000)地图坐标相互转换的JS实现


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>coordTransform</title>
    </head>
    <body>
    <h1>请按F12打开控制台查看结果</h1>
    <script src="coordtransform.js"></script>
    <script>
      //国测局坐标(火星坐标,比如高德地图在用),百度坐标,wgs84坐标(谷歌国外以及绝大部分国外在线地图使用的坐标)
      //百度经纬度坐标转国测局坐标
      var bd09togcj02 = coordtransform.bd09togcj02(116.404, 39.915);
      //国测局坐标转百度经纬度坐标
      var gcj02tobd09 = coordtransform.gcj02tobd09(116.404, 39.915);
      //wgs84转国测局坐标
      var wgs84togcj02 = coordtransform.wgs84togcj02(116.404, 39.915);
      //国测局坐标转wgs84坐标
      var gcj02towgs84 = coordtransform.gcj02towgs84(116.404, 39.915);
      console.log(bd09togcj02);
      console.log(gcj02tobd09);
      console.log(wgs84togcj02);
      console.log(gcj02towgs84);
      //result
      //bd09togcj02:   [ 116.39762729119315, 39.90865673957631 ]
      //gcj02tobd09:   [ 116.41036949371029, 39.92133699351021 ]
      //wgs84togcj02:  [ 116.41024449916938, 39.91640428150164 ]
      //gcj02towgs84:  [ 116.39775550083061, 39.91359571849836 ]
    </script>
    </body>
    </html>
    

    实际只有中国需要转换,国外不需要,coordtransformjs应用不需要单独判断的,输入国外直接输出了

    coordtransform.js

    /**
     * Created by Wandergis on 2015/7/8.
     * 提供了百度坐标(BD-09)、国测局坐标(火星坐标,GCJ-02)、和 WGS-84 坐标系之间的转换
     */
    // UMD 魔法代码
    // if the module has no dependencies, the above pattern can be simplified to
    (function (root, factory) {
        if (typeof define === 'function' && define.amd) {
          // AMD. Register as an anonymous module.
          define([], factory);
        } else if (typeof module === 'object' && module.exports) {
          // Node. Does not work with strict CommonJS, but
          // only CommonJS-like environments that support module.exports,
          // like Node.
          module.exports = factory();
        } else {
          // Browser globals (root is window)
          root.coordtransform = factory();
        }
      }(this, function () {
        // 定义一些常量
        var x_PI = 3.14159265358979324 * 3000.0 / 180.0;
        var PI = 3.1415926535897932384626;
        var a = 6378245.0;
        var ee = 0.00669342162296594323;
        /**
         * 百度坐标系 (BD-09) 与 火星坐标系 (GCJ-02) 的转换
         * 即 百度 转 谷歌、高德
         * @param bd_lng
         * @param bd_lat
         * @returns {*[]}
         */
        var bd09togcj02 = function bd09togcj02(bd_lng, bd_lat) {
          var bd_lng = +bd_lng;
          var bd_lat = +bd_lat;
          var x = bd_lng - 0.0065;
          var y = bd_lat - 0.006;
          var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_PI);
          var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_PI);
          var gg_lng = z * Math.cos(theta);
          var gg_lat = z * Math.sin(theta);
          return [gg_lng, gg_lat]
        };
      
        /**
         * 火星坐标系 (GCJ-02) 与百度坐标系 (BD-09) 的转换
         * 即 谷歌、高德 转 百度
         * @param lng
         * @param lat
         * @returns {*[]}
         */
        var gcj02tobd09 = function gcj02tobd09(lng, lat) {
          var lat = +lat;
          var lng = +lng;
          var z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * x_PI);
          var theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * x_PI);
          var bd_lng = z * Math.cos(theta) + 0.0065;
          var bd_lat = z * Math.sin(theta) + 0.006;
          return [bd_lng, bd_lat]
        };
      
        /**
         * WGS-84 转 GCJ-02
         * @param lng
         * @param lat
         * @returns {*[]}
         */
        var wgs84togcj02 = function wgs84togcj02(lng, lat) {
          var lat = +lat;
          var lng = +lng;
          if (out_of_china(lng, lat)) {
            return [lng, lat]
          } else {
            var dlat = transformlat(lng - 105.0, lat - 35.0);
            var dlng = 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]
          }
        };
      
        /**
         * GCJ-02 转换为 WGS-84
         * @param lng
         * @param lat
         * @returns {*[]}
         */
        var gcj02towgs84 = function gcj02towgs84(lng, lat) {
          var lat = +lat;
          var lng = +lng;
          if (out_of_china(lng, lat)) {
            return [lng, lat]
          } else {
            var dlat = transformlat(lng - 105.0, lat - 35.0);
            var dlng = 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]
          }
        };
      
        var transformlat = function transformlat(lng, lat) {
          var lat = +lat;
          var lng = +lng;
          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
        };
      
        var transformlng = function transformlng(lng, lat) {
          var lat = +lat;
          var lng = +lng;
          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
        };
      
        /**
         * 判断是否在国内,不在国内则不做偏移
         * @param lng
         * @param lat
         * @returns {boolean}
         */
        var out_of_china = function 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);
        };
      
        return {
          bd09togcj02: bd09togcj02,
          gcj02tobd09: gcj02tobd09,
          wgs84togcj02: wgs84togcj02,
          gcj02towgs84: gcj02towgs84
        }
    }));
    

    转载地址:https://blog.csdn.net/xialong_927/article/details/100208002

    测试后发现判断经纬度是否在中国代码不精确的,这个博客的思路可以做参考http://www.scaperow.com/posts/e3b2258e.html

    我用的地图是mapbox如果使用turf https://npmcdn.com/@turf/turf@6.3.0/turf.min.js判断这个坐标必须是封闭的坐标First and last Position are not equivalent.见如下代码实现,在灰色地域不在红色地域,这个思路就是比纬度 3.86~53.55, 经度 73.66~135.05稍微精确些;

    绘制范围区域代码

    var path = [
    [
      [79.446200, 49.220400],
      [79.446200, 42.889900],
      [96.330000, 42.889900],
      [96.330000, 49.220400],
      [79.446200, 49.220400]
    ],
    [
      [109.687200, 54.141500],
      [109.687200, 39.374200],
      [135.000200, 39.374200],
      [135.000200, 54.141500],
      [109.687200, 54.141500]
    ],
    [
      [73.124600, 42.889900],
      [73.124600, 29.529700],
      [124.143255, 29.529700],
      [124.143255, 42.889900],
      [73.124600, 42.889900]
    ],
    [
      [82.968400, 29.529700],
      [82.968400, 26.718600],
      [97.035200, 26.718600],
      [97.035200, 29.529700],
      [82.968400, 29.529700]
    ],
    [
      [97.025300, 29.529700],
      [97.025300, 20.414096],
      [124.367395, 20.414096],
      [124.367395, 29.529700],
      [97.025300, 29.529700]
    ],
    [
      [107.975793, 20.414096],
      [107.975793, 17.871542],
      [111.744104, 17.871542],
      [111.744104, 20.414096],
      [107.975793, 20.414096]
    ]
    ]
    for(var i = 0, len = path.length;i < len;i ++) {
    this.map.addLayer({
      'id': 'maine_' + i,
      'type': 'fill',
      'source': {
        'type': 'geojson',
        'data': {
          'type': 'Feature',
          'geometry': {
            'type': 'Polygon',
            'coordinates': [
              path[i]
            ]
          }
        }
      },
      'layout': {},
      'paint': {
        'fill-color': '#c7cacf',
        'fill-opacity': 0.3
      }
    });
    this.map.addLayer({
        "id": "state-borders_" + i,
        "type": "line",
        'source': {
          'type': 'geojson',
          'data': {
            'type': 'Feature',
            'geometry': {
              'type': 'Polygon',
              'coordinates': [
                path[i]
              ]
            }
          }
        },
        "layout": {},
        "paint": {
          "line-color": "#FF4F4B",
          "line-dasharray": [4, 4]
        }
      });
    }
    let path2 = [
    [
      [119.921265, 25.398623],
      [119.921265, 21.785006],
      [122.497559, 21.785006],
      [122.497559, 25.398623],
      [119.921265, 25.398623]
    ],
    [
      [101.865200, 22.284000],
      [101.865200, 20.098800],
      [106.665000, 20.098800],
      [106.665000, 22.284000],
      [101.865200, 22.284000]
    ],
    [
      [106.452500, 21.542200],
      [106.452500, 20.487800],
      [108.051000, 20.487800],
      [108.051000, 21.542200],
      [106.452500, 21.542200]
    ],
    [
      [109.032300, 55.817500],
      [109.032300, 50.325700],
      [119.127000, 50.325700],
      [119.127000, 55.817500],
      [109.032300, 55.817500]
    ],
    [
      [127.456800, 55.817500],
      [127.456800, 49.557400],
      [137.022700, 49.557400],
      [137.022700, 55.817500],
      [127.456800, 55.817500]
    ],
    [
      [131.266200, 44.892200],
      [131.266200, 42.569200],
      [137.022700, 42.569200],
      [137.022700, 44.892200],
      [131.266200, 44.892200]
    ]
    ]
    for(var i = 0, len = path2.length;i < len;i ++) {
    this.map.addLayer({
      'id': 'maine_——' + i,
      'type': 'fill',
      'source': {
        'type': 'geojson',
        'data': {
          'type': 'Feature',
          'geometry': {
            'type': 'Polygon',
            'coordinates': [
              path2[i]
            ]
          }
        }
      },
      'layout': {},
      'paint': {
        'fill-color': 'red',
        'fill-opacity': 0.3
      }
    });
    this.map.addLayer({
        "id": "state-borders_——" + i,
        "type": "line",
        'source': {
          'type': 'geojson',
          'data': {
            'type': 'Feature',
            'geometry': {
              'type': 'Polygon',
              'coordinates': [
                path2[i]
              ]
            }
          }
        },
        "layout": {},
        "paint": {
          "line-color": "blue",
          "line-dasharray": [4, 4]
        }
      });
    }
    

    使用import { booleanPointInPolygon, polygon, point } from '@turf/turf' 结合path坐标可以判断是否是国内/国外

    var pt = point([data.position.lng, data.position.lat])
    var flag = false; var flag2 = false
    for (let i = 0, len = self.path.length; i < len; i++) {
      var poly = polygon([self.path[i]])
      if (booleanPointInPolygon(pt, poly)) {
        flag = true
        break
      }
    }
    if (flag) {
      for (let i = 0, len = self.path2.length; i < len; i++) {
        const poly_path2 = polygon([self.path2[i]])
        if (booleanPointInPolygon(pt, poly_path2)) {
          flag2 = true
          break
        }
      }
    }
    if (flag && !flag2) { // 国内
      self.center = self.gcj02towgs84(data.position.lng, data.position.lat)
    // gcj02towgs84 这里的转换方法是我从coordtransform.js中抽取出来的方法,因为这个方法中判断是否是国内范围太大
    } else {
      self.center = [data.position.lng, data.position.lat]
    }
    

    高德地图的逆地理编码根据经纬度https://restapi.amap.com/v3/geocode/regeo?location=134.954189,44.134656&key=mapkey 如果在中国境内就返回具体地址,不在的话就返回[]了,也可以实现,如果绘制区域还需要转坐标,这种请求有点不太适合,如果有更好的思路可以交流!

  • 相关阅读:
    docker介绍与安装
    HTML5之Notification简单使用
    移动端实现复制内容至剪贴板
    flex基本概念
    nodejs建立websocket通信
    使用FileReader实现前端预览所选图片
    去除字符串中的空格
    用swing做一个简单的正则验证工具
    使用命令行生成jar包
    C#语言 语句
  • 原文地址:https://www.cnblogs.com/lisaShare/p/14479511.html
Copyright © 2020-2023  润新知