使用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