iovmap/src/marker/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 { Config } from '../config'

export class Marker {
  constructor(map) {
    this.map = map
    this.config = new Config()
  }
  /**
   * 绘制
   * @param {*} cb
   */
  draw(cb) {
    let that = this
    let okClickEvent = function (e) {
      if (cb) {
        cb(that.latlng)
      }
      that.removeEdit()
      that.map.off('click', clickEvent)
    }
    let cancelClickEvent = function (e) {
      that.remove()
      that.map.off('click', clickEvent)
    }
    let dragEvent = function (e) {
      let latlng = e.target.getLatLng()
      that.latlng = [latlng.lat, latlng.lng]
      that.okMarker.setLatLng(latlng)
      that.cancelMarker.setLatLng(latlng)
    }
    let clickEvent = function (e) {
      that.latlng = [e.latlng.lat, e.latlng.lng]
      // 绘制marker
      that.marker = L.marker(that.latlng, {
        icon: that.config.MARKER_ICON,
        draggable: true,
      })
      that.marker.addTo(that.map)
      that.marker.on('drag', dragEvent)
      // 确认marker
      that.okMarker = L.marker(that.latlng, {
        icon: that.config.OK_ICON,
      })
      that.okMarker.on('click', okClickEvent)
      that.okMarker.addTo(that.map)
      // 取消marker
      that.cancelMarker = L.marker(that.latlng, {
        icon: that.config.CANCEL_ICON,
      })
      that.cancelMarker.on('click', cancelClickEvent)
      that.cancelMarker.addTo(that.map)
      // 注销事件
      that.map.off('click', clickEvent)
    }
    this.map.on('click', clickEvent)
  }
  edit(lat, lng, cb) {
    this.latlng = [lat, lng]
    let that = this
    let okClickEvent = function (e) {
      if (cb) {
        cb(that.latlng)
      }
      that.removeEdit()
    }
    let cancelClickEvent = function (e) {
      that.remove()
    }
    let dragEvent = function (e) {
      let latlng = e.target.getLatLng()
      that.latlng = [latlng.lat, latlng.lng]
      that.okMarker.setLatLng(latlng)
      that.cancelMarker.setLatLng(latlng)
    }
    // 绘制marker
    that.marker = L.marker(that.latlng, {
      icon: that.config.MARKER_ICON,
      draggable: true,
    })
    that.marker.addTo(that.map)
    that.marker.on('drag', dragEvent)
    // 确认marker
    that.okMarker = L.marker(that.latlng, {
      icon: that.config.OK_ICON,
    })
    that.okMarker.on('click', okClickEvent)
    that.okMarker.addTo(that.map)
    // 取消marker
    that.cancelMarker = L.marker(that.latlng, {
      icon: that.config.CANCEL_ICON,
    })
    that.cancelMarker.on('click', cancelClickEvent)
    that.cancelMarker.addTo(that.map)
  }
  /**
   * 加载
   * @param {*} lat
   * @param {*} lng
   * @param {*} imgPath
   * @param {*} size
   * @param {*} anchor
   * @param {*} tip
   * @param {*} infowin
   * @function infowinOpenEvent
   * @param {*} isPanTo
   */
  load(lat, lng, imgPath, size, anchor, tip, infowin, infowinOpenEvent, isPanTo) {
    this.latlng = [lat, lng]
    if (imgPath) {
      let myIcon = L.icon({
        iconUrl: imgPath,
        iconSize: size,
        iconAnchor: anchor,
      })
      this.marker = L.marker(this.latlng, {
        icon: myIcon,
      })
    } else {
      this.marker = L.marker(this.latlng)
    }
    this.marker.addTo(this.map)
    if (tip) {
      this.marker.bindTooltip(tip).openTooltip()
    }
    if (infowin) {
      this.marker.bindPopup(infowin).openPopup()
      if (typeof infowinOpenEvent === 'function') {
        this.marker.on('popupopen', function (e) {
          infowinOpenEvent(tip || '')
        })
      }
    }
    if (isPanTo !== undefined) {
      if (isPanTo) {
        this.map.setView(this.marker.getLatLng(), 16)
      }
    } else {
      this.map.setView(this.marker.getLatLng(), 16)
    }
  }
  /**
   * 改变icon图标
   * @param {string} imgPath
   */
  change(imgPath, size, anchor) {
    if (imgPath) {
      let myIcon = L.icon({
        iconUrl: imgPath,
        iconSize: size,
        iconAnchor: anchor,
      })
      this.marker.setIcon(myIcon)
    }
  }
  /**
   * 改变infowin内容
   * @param {*} infowin
   */
  changeInfoWin(infowin) {
    if (infowin) {
      this.marker.setPopupContent(infowin)
      this.marker.update()
    }
  }
  /**
   * 移动
   * @param {*} lat
   * @param {*} lng
   */
  moveTo(lat, lng) {
    if (typeof lat === 'string') {
      lat = parseFloat(lat)
    }
    if (typeof lng === 'string') {
      lng = parseFloat(lng)
    }
    this.latlng = [lat, lng]
    if (this.marker) {
      this.marker.setLatLng([lat, lng])
    }
    if (this.okMarker) {
      this.okMarker.setLatLng([lat, lng])
    }
    if (this.cancelMarker) {
      this.cancelMarker.setLatLng([lat, lng])
    }
  }
  /**
   * 移除
   */
  remove() {
    if (this.marker) {
      this.marker.remove()
    }
    if (this.okMarker) {
      this.okMarker.remove()
    }
    if (this.cancelMarker) {
      this.cancelMarker.remove()
    }
  }
  /**
   * 移除编辑状态
   */
  removeEdit() {
    if (this.okMarker) {
      this.okMarker.remove()
    }
    if (this.cancelMarker) {
      this.cancelMarker.remove()
    }
  }
}