vue中使用coordtransform 互相转换坐标系

最新推荐文章于 2024-09-12 08:24:10 发布

stephen Curry_

最新推荐文章于 2024-09-12 08:24:10 发布

阅读量1.2k

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_65544665/article/details/133930891

版权

本文介绍了在使用高德SDK时，由于坐标系统的差异可能导致地图显示偏移。通过coordtransform库中的wgs84togcj02方法，将WGS84坐标转换为GCJ02（火星坐标），解决了在项目中使用高德地图时的坐标匹配问题。

摘要由CSDN通过智能技术生成

官方网站：https://www.npmjs.com/package/coordtransform

在使用高德sdk时，其返回的坐标在地图上显示时有几百米的偏移，这是由于高德用的是火星坐标（GCJ02），而不是wgs84坐标。为了消除偏移，将GCJ02转为wgs84即可，可通coordtransform库来转换。

安装coordtransform

npm install coordtransform

引入

import coordtransform from 'coordtransform';

使用

安装完成后可以看到

根据自己的需要选择方法进行转换

例如我的JXRoad 是一个json文件里面是取好的坐标系，只不过坐标是wgs84类型的,但项目中使用的是高德地图,这时把JXRoad 文件放入地图中就会出现偏移,这时就可以用到这个转换工具,高德地图所需要的坐标是国测局的也就是gcj02类型(又称火星坐标系)

// 将其坐标逐个转换为火星坐标系
    JXRoad.features.forEach(function (feature) {
      if (feature.geometry.type === "LineString") {
        feature.geometry.coordinates = feature.geometry.coordinates.map(
          function (coord) {
            var lngLat = coordtransform.wgs84togcj02(coord[0], coord[1]);
            return [lngLat[0], lngLat[1]];
          }
        );
      }
    });

// 转换调用
 coordtransform.wgs84togcj02()
// 高德的方法 geojson
    var geojson = new AMap.GeoJSON({
      geoJSON: JXRoad,
    });