js绘制地图示例

最新推荐文章于 2024-05-08 21:39:03 发布

外星喵

最新推荐文章于 2024-05-08 21:39:03 发布

阅读量1.2w

点赞数 6

分类专栏：前端文章标签： js

本文链接：https://blog.csdn.net/c15158032319/article/details/79989055

版权

前端专栏收录该内容

2 篇文章 2 订阅

订阅专栏

js地图绘制：

1.准备一个简单的html文件，添加一个div，其id为"mapDiv"

<div id="mapDiv" style="position:absolute;width:800px; height:500px"></div>

2.引入地图的JavaScript API文件：

<script src="http://api.tianditu.com/api?v=4.0" type="text/javascript"></script>

3.创建地图对象

var map = new T.Map('mapDiv');

4.初始化坐标点对象，确定经纬度坐标和层级

var zoom = 12;
var t = new T.LngLat(116.40769, 39.89945);

5.绘制地图

 map.centerAndZoom(t, zoom);

通过经纬度查询地图位置的示例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>HELLO WORLD</title>
    <script type="text/javascript" src="http://api.tianditu.com/api?v=4.0"></script>
    <script>
        var map;               //地图对象123
        var zoom = 12;         //层级，值越大，地图范围越小
        var lon = 116.40769;   //经度
        var lat = 39.89945;    //纬度
        var t = new T.LngLat(lon, lat);
        function onLoad() {
            map = new T.Map('mapDiv');
            map.centerAndZoom(t, zoom);
        }

        function query(){
            lon = document.getElementById('lon').value;
            lat = document.getElementById('lat').value;
            if(lon == '' || lon == null) lon = 116.40769;
            if(lat == '' || lat == null) lat = 39.89945;
            t = new T.LngLat(lon, lat);
            map.centerAndZoom(t, zoom);
        }
    </script>
</head>
<body onLoad="onLoad()">
<div>
	经度：<input type='text' id='lon'/>&nbsp;&nbsp;&nbsp;&nbsp;
	纬度：<input type='text' id='lat'/>
	<input type = 'button' value = '查询坐标点' onclick='query();'/>
</div>
<div id="mapDiv" style="position:absolute;width:800px; height:500px"></div>
</body>
</html>

地图偏移问题

坐标体系分类

在各种web端平台，或者高德、腾讯、百度上取到的坐标，都不是GPS坐标，都是GCJ-02坐标，或者自己的偏移坐标系。
比如，你在谷歌地图API，高德地图API，腾讯地图API上取到的，都是GCJ-02坐标，他们三家都是通用的，也适用于大部分地图API产品，以及他们的地图产品。
例外，百度API上取到的，是BD-09坐标，只适用于百度地图相关产品。
例外，搜狗API上取到的，是搜狗坐标，只适用于搜狗地图相关产品。
例外，谷歌地球，google earth上取到的，是GPS坐标，而且是度分秒形式的经纬度坐标。在国内不允许使用。必须转换为GCJ-02坐标。

主要分为以下几类

GPS，WGS-84，原始坐标体系。一般用国际标准的GPS记录仪记录下来的坐标，都是GPS的坐标。很可惜，在中国，任何一个地图产品都不允许使用GPS坐标，据说是为了保密。
GCJ-02，国测局02年发布的坐标体系。又称“火星坐标”。在中国，必须至少使用GCJ-02的坐标体系。比如谷歌，腾讯，高德都在用这个坐标体系。GCJ-02也是国内最广泛使用的坐标体系。
其他坐标体系。一般都是由GCJ-02进过偏移算法得到的。这种体系就根据每个公司的不同，坐标体系都不一样了。比如，百度和搜狗就使用自己的坐标体系，与其他坐标体系不兼容。

百度地图偏移的校准算法

/**
 * 各地图API坐标系统比较与转换;
 * WGS84坐标系：即地球坐标系，国际上通用的坐标系。设备一般包含GPS芯片或者北斗芯片获取的经纬度为WGS84地理坐标系,
 * 谷歌地图采用的是WGS84地理坐标系（中国范围除外）;
 * GCJ02坐标系：即火星坐标系，是由中国国家测绘局制订的地理信息系统的坐标系统。由WGS84坐标系经加密后的坐标系。
 * 谷歌中国地图和搜搜中国地图采用的是GCJ02地理坐标系; BD09坐标系：即百度坐标系，GCJ02坐标系经加密后的坐标系;
 * 搜狗坐标系、图吧坐标系等，估计也是在GCJ02基础上加密而成的。 chenhua
 */
public class PositionUtil {
 
    public static final String BAIDU_LBS_TYPE = "bd09ll";
 
    public static double pi = 3.1415926535897932384626;
    public static double a = 6378245.0;
    public static double ee = 0.00669342162296594323;
 
    /**
     * 84 to 火星坐标系 (GCJ-02) World Geodetic System ==> Mars Geodetic System
     */
    public static Gps gps84_To_Gcj02(double lat, double lon) {
        if (outOfChina(lat, lon)) {
            return null;
        }
        double dLat = transformLat(lon - 105.0, lat - 35.0);
        double dLon = transformLon(lon - 105.0, lat - 35.0);
        double radLat = lat / 180.0 * pi;
        double magic = Math.sin(radLat);
        magic = 1 - ee * magic * magic;
        double sqrtMagic = Math.sqrt(magic);
        dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi);
        dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi);
        double mgLat = lat + dLat;
        double mgLon = lon + dLon;
        return new Gps(mgLat, mgLon);
    }
 
    /**
     * * 火星坐标系 (GCJ-02) to 84 
     * */
    public static Gps gcj_To_Gps84(double lat, double lon) {
        Gps gps = transform(lat, lon);
        double lontitude = lon * 2 - gps.getWgLon();
        double latitude = lat * 2 - gps.getWgLat();
        return new Gps(latitude, lontitude);
    }
 
    /**
     * 火星坐标系 (GCJ-02) 与百度坐标系 (BD-09) 的转换算法 将 GCJ-02 坐标转换成 BD-09 坐标
     */
    public static Gps gcj02_To_Bd09(double gg_lat, double gg_lon) {
        double x = gg_lon, y = gg_lat;
        double z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * pi);
        double theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * pi);
        double bd_lon = z * Math.cos(theta) + 0.0065;
        double bd_lat = z * Math.sin(theta) + 0.006;
        return new Gps(bd_lat, bd_lon);
    }
 
    /**
     * * 火星坐标系 (GCJ-02) 与百度坐标系 (BD-09) 的转换算法 * * 将 BD-09 坐标转换成GCJ-02 坐标 
     */
    public static Gps bd09_To_Gcj02(double bd_lat, double bd_lon) {
        double x = bd_lon - 0.0065, y = bd_lat - 0.006;
        double z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * pi);
        double theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * pi);
        double gg_lon = z * Math.cos(theta);
        double gg_lat = z * Math.sin(theta);
        return new Gps(gg_lat, gg_lon);
    }
 
    /**
     * (BD-09)-->84
     * @param bd_lat
     * @param bd_lon
     * @return
     */
    public static Gps bd09_To_Gps84(double bd_lat, double bd_lon) {
 
        Gps gcj02 = PositionUtil.bd09_To_Gcj02(bd_lat, bd_lon);
        Gps map84 = PositionUtil.gcj_To_Gps84(gcj02.getWgLat(),
                gcj02.getWgLon());
        return map84;
 
    }
 
    public static boolean outOfChina(double lat, double lon) {
        if (lon < 72.004 || lon > 137.8347)
            return true;
        if (lat < 0.8293 || lat > 55.8271)
            return true;
        return false;
    }
 
    public static Gps transform(double lat, double lon) {
        if (outOfChina(lat, lon)) {
            return new Gps(lat, lon);
        }
        double dLat = transformLat(lon - 105.0, lat - 35.0);
        double dLon = transformLon(lon - 105.0, lat - 35.0);
        double radLat = lat / 180.0 * pi;
        double magic = Math.sin(radLat);
        magic = 1 - ee * magic * magic;
        double sqrtMagic = Math.sqrt(magic);
        dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi);
        dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi);
        double mgLat = lat + dLat;
        double mgLon = lon + dLon;
        return new Gps(mgLat, mgLon);
    }
 
    public static double transformLat(double x, double y) {
        double ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y
                + 0.2 * Math.sqrt(Math.abs(x));
        ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
        ret += (20.0 * Math.sin(y * pi) + 40.0 * Math.sin(y / 3.0 * pi)) * 2.0 / 3.0;
        ret += (160.0 * Math.sin(y / 12.0 * pi) + 320 * Math.sin(y * pi / 30.0)) * 2.0 / 3.0;
        return ret;
    }
 
    public static double transformLon(double x, double y) {
        double ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1
                * Math.sqrt(Math.abs(x));
        ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
        ret += (20.0 * Math.sin(x * pi) + 40.0 * Math.sin(x / 3.0 * pi)) * 2.0 / 3.0;
        ret += (150.0 * Math.sin(x / 12.0 * pi) + 300.0 * Math.sin(x / 30.0
                * pi)) * 2.0 / 3.0;
        return ret;
    }
 
    public static void main(String[] args) {
        // 北斗芯片获取的经纬度为WGS84地理坐标 31.426896,119.496145
        Gps gps = new Gps(31.426896, 119.496145);
        System.out.println("gps :" + gps);
        Gps gcj = gps84_To_Gcj02(gps.getWgLat(), gps.getWgLon());
        System.out.println("gcj :" + gcj);
        Gps star = gcj_To_Gps84(gcj.getWgLat(), gcj.getWgLon());
        System.out.println("star:" + star);
        Gps bd = gcj02_To_Bd09(gcj.getWgLat(), gcj.getWgLon());
        System.out.println("bd  :" + bd);
        Gps gcj2 = bd09_To_Gcj02(bd.getWgLat(), bd.getWgLon());
        System.out.println("gcj :" + gcj2);
    }
}

外星喵

关注

6
点赞
踩
10

收藏

觉得还不错? 一键收藏
2
评论
js绘制地图示例

js地图绘制：1.准备一个简单的html文件，添加一个div，其id为”mapDiv”&lt;div id="mapDiv" style="position:absolute;width:800px; height:500px"&gt;&lt;/div&gt;2.引入地图的JavaScript API文件：&lt;script src="http://api.tiandit...
复制链接

扫一扫