使用leaflet在高德地图中渲染轨迹(线条)

使用leaflet在高德地图上渲染轨迹,废话少说,上代码:

vue页面:

<template>
  <div class="mapBox">
    <div>在vue2中使用leaflet渲染线</div>
    <!-- 地图容器 -->
    <div id="lineMap"></div>
  </div>
</template>

<script>
  import lineData from '@/utils/data.js' // 模拟数据
  import GPS from '@/utils/change.js' // 解决坐标偏移
  export default {
    name: 'LeafletLine',
    data() {
      return {
        mapLine: null,
        dataArr: []
      }
    },
    mounted() {
      // 地图初始化
      lineData.lineData.forEach((i) => {
        let item = i[0]
        i[0] = i[1]
        i[1] = item
        i = GPS.gcj_encrypt(
          Number(i[0]),
          Number(i[1])
        )
        this.dataArr.push(i)
      })
      this.initMap()
    },
    methods: {
      // 使用id为map的div容器初始化地图，同时指定地图的中心点和缩放级别
      initMap() {
        let map = L.map("lineMap", {
          center: [24.485666, 118.0865615286], // 中心位置
          zoom: 12, // 缩放等级
          attributionControl: true, // 版权控件
          zoomControl: true //缩放控件
        });
        this.mapLine = map; // data上需要挂载
        L.tileLayer(
          "http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}"
        ).addTo(map) // 加载底图
        let polyline = L.polyline(this.dataArr, { // 点的集合
          color: 'red',
          opacity: 6,
          fillColor: '#0000ed'
        }).addTo(map);
      }
    }
  }
</script>
<style scoped>
  #lineMap {
    width: 800px;
    height: 500px;
    margin: 50px auto;
  }

  .lmap-image {
    width: 32px;
    height: 32px;
  }

  .lmap-span {
    display: inline-block;
    margin-left: 5px;
    padding: 5px;
    font-weight: bold;
    /*     background: #66cdb1; */
    line-height: 20px;
    font-size: 14px;
    color: #fff;
    white-space: nowrap;
  }

  .lmap-text {
    display: inline-block;
    margin-left: 5px;
    padding: 5px;
    font-weight: bold;
    /*     background: #66cdb1; */
    line-height: 20px;
    font-size: 16px;
    color: #fff;
    width: 500px;
    white-space: nowrap;
    position: absolute;
    text-align: center;
    top: 25px;
    left: -250px;
  }
</style>

怎么引入leaflet使用leaflet,可以参考之前文章 https://www.cnblogs.com/foxing/p/15714191.html

效果如下:

 

要是轨迹更加美观,动态化,可用插件 Leaflet Ant Path 

遇到问题如下:

1. 数据获取后注意经纬度是否错乱,网上获取的经纬度可能与leaflet使用的相反.

2.数据坐标的转换,本例子中使用的数据是通过LocaSpace 的软件获取,获取后的数据为GPS坐标(WGS-84),在高德地图上会偏差,需要纠偏,转换成高的坐标(GCJ-02)

　　WGS-84：是国际标准，GPS坐标（Google Earth使用、或者GPS模块）　
　　GCJ-02：中国坐标偏移标准，Google Map、高德、腾讯使用
　　BD-09：百度坐标偏移标准，Baidu Map使用

var GPS = {
  PI: 3.14159265358979324,
  x_pi: 3.14159265358979324 * 3000.0 / 180.0,
 
  transformLat: function(x, y) {
    var 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 * this.PI) + 20.0 * Math.sin(2.0 * x * this.PI)) * 2.0 / 3.0
    ret += (20.0 * Math.sin(y * this.PI) + 40.0 * Math.sin(y / 3.0 * this.PI)) * 2.0 / 3.0
    ret += (160.0 * Math.sin(y / 12.0 * this.PI) + 320 * Math.sin(y * this.PI / 30.0)) * 2.0 / 3.0
    return ret
  },
  transformLon: function(x, y) {
    var 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 * this.PI) + 20.0 * Math.sin(2.0 * x * this.PI)) * 2.0 / 3.0
    ret += (20.0 * Math.sin(x * this.PI) + 40.0 * Math.sin(x / 3.0 * this.PI)) * 2.0 / 3.0
    ret += (150.0 * Math.sin(x / 12.0 * this.PI) + 300.0 * Math.sin(x / 30.0 * this.PI)) * 2.0 / 3.0
    return ret
  },
  // 坐标转换
  delta: function(lat, lon) {
    var a = 6378245.0 //  a: 卫星椭球坐标投影到平面地图坐标系的投影因子。
    var ee = 0.00669342162296594323 //  ee: 椭球的偏心率。
    var dLat = this.transformLat(lon - 105.0, lat - 35.0)
    var dLon = this.transformLon(lon - 105.0, lat - 35.0)
    var radLat = lat / 180.0 * this.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) * this.PI)
    dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * this.PI)
    return { 'lat': dLat, 'lon': dLon }
  },
  // 判断是否为国外坐标
  outOfChina: function(lat, lon) {
    if (lon < 72.004 || lon > 137.8347) { return true }
    if (lat < 0.8293 || lat > 55.8271) { return true }
    return false
  },
  // GPS---高德
  gcj_encrypt: function(wgsLat, wgsLon) {
    if (this.outOfChina(wgsLat, wgsLon)) { return { 'lat': wgsLat, 'lon': wgsLon } }
 
    var d = this.delta(wgsLat, wgsLon)
    return { 'lat': wgsLat + d.lat, 'lon': wgsLon + d.lon }
  }
}
 
export default GPS

详细代码: https://gitee.com/yuexiayunsheng/leaflet-map