iovmap/src/trackline/index.js

a map sdk base on leaflet

/*
 * Copyright (C) 2017 dehai.site All Rights Reserved.
 *
 * @author level <dehai168@gmail.com>
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import carIconSrc from '../assets/car.png'
import polylineDecorator from '../plugin/leaflet.polylineDecorator'
export class TrackLine {
  constructor(map) {
    this.map = map
    this.icon = null
    this.marker = null
    this.infoWindow = null
    this.decorator = null
    this.lineArray = []
  }
  /**
   * 加载普通轨迹
   * @param {*} latlngs
   * @param {*} drawOptions
   */
  loadTrack(latlngs, drawOptions) {
    const routeLine = L.polyline(latlngs, drawOptions).addTo(this.map)
    this.lineArray.push(routeLine)
    return routeLine
  }
  /**
   * 加载彩色轨迹
   * @param {*} latlngs 包含速度
   * @param {*} drawOptions
   * @returns
   */
  loadColorTrack(latlngs, drawOptions) {
    let that = this
    let _draw = function (latlngArray, color) {
      if (latlngArray.length > 0) {
        let polyline = L.polyline(latlngArray, { color: color, weight: drawOptions.weight || 5 })
        polyline.addTo(that.map)
        that.lineArray.push(polyline)
      }
    }
    if (latlngs.length < 2) return
    let first = latlngs[0]
    let color = that._getColor(first.speed)
    let latlngArray = []
    latlngArray.push([first.lat, first.lng])
    for (let index = 1; index < latlngs.length; index++) {
      let ele = latlngs[index]
      let tempColor = that._getColor(ele.speed)
      latlngArray.push([ele.lat, ele.lng])
      if (color !== tempColor) {
        // 当前点已作为本段终点加入，直接绘制后回退索引让下次迭代作新段起点
        _draw(latlngArray, color)
        latlngArray.length = 0
        color = tempColor
        index = index - 1
      }
    }
    _draw(latlngArray, color)
  }
  /**
   * 获取颜色
   * @param {number} speed
   */
  _getColor(speed) {
    if (speed <= 60) {
      return '#228B22'
    } else if (speed <= 80) {
      return '#FF8C00'
    } else {
      return '#FF0000'
    }
  }
  /**
   * 加载轨迹箭头（每两点中间各一个箭头）
   * @param {*} track
   * @param {*} drawOptions
   */
  loadTrackDecorator(track, drawOptions) {
    const latlngs = track.getLatLngs()
    const group = L.layerGroup()
    const arrowSymbol = L.Symbol.arrowHead({
      pixelSize: 5,
      headAngle: 75,
      polygon: false,
      pathOptions: drawOptions,
    })
    for (let i = 0; i < latlngs.length - 1; i++) {
      L.polylineDecorator([latlngs[i], latlngs[i + 1]], {
        patterns: [{ offset: '50%', repeat: 0, symbol: arrowSymbol }],
      }).addTo(group)
    }
    this.decorator = group.addTo(this.map)
  }
  /**
   * 移除轨迹箭头
   */
  removeTrackDecorator() {
    if (this.decorator) {
      this.decorator.remove()
      this.decorator = null
    }
  }
  _getIcon(drawOptions) {
    const iconSize = drawOptions.iconSize || [25, 37]
    const icon = L.divIcon({
      className: 'myIconClass',
      iconSize: iconSize,
      html:
        '<img src="' +
        (drawOptions.iconUrl || carIconSrc) +
        '" style="transform: rotate(' +
        drawOptions.direction +
        'deg); transform-origin: center center; width:' +
        iconSize[0] +
        'px;height:' +
        iconSize[1] +
        'px"/>',
    })
    return icon
  }
  /**
   * 加载marker
   * @param {*} drawOptions
   */
  loadMarker(drawOptions) {
    this.drawOptions = drawOptions
    const icon = this._getIcon(drawOptions)
    this.marker = L.marker([drawOptions.lat, drawOptions.lng], {
      icon: icon,
    }).addTo(this.map)
  }
  /**
   * 更新图标
   * @param {*} updateOptions
   */
  updateMarker(updateOptions) {
    if (!this.marker) return
    const megObj = Object.assign(this.drawOptions, updateOptions)
    const icon = this._getIcon(megObj)
    this.marker.setLatLng([updateOptions.lat, updateOptions.lng])
    this.marker.setIcon(icon)
    if (this.marker.getPopup() && updateOptions.content) {
      this.marker.setPopupContent(updateOptions.content)
    }
  }
  /**
   * 加载Popup
   * @param {*} content
   */
  loadPopup(content) {
    if (this.marker) {
      this.marker
        .bindPopup(content || '', {
          maxWidth: 600,
        })
        .openPopup()
    }
  }
  /**
   * 移除Popup
   */
  removePopup() {
    if (this.marker) {
      this.marker.closePopup()
      this.marker.unbindPopup()
    }
  }
  /**
   * 清理
   */
  remove() {
    while (this.lineArray.length > 0) {
      let element = this.lineArray.shift()
      element.remove()
    }
    this.removeTrackDecorator()
    if (this.marker) {
      this.marker.remove()
    }
  }
}