iovmap/src/rectangle/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 Rectangle {
  constructor(map) {
    this.map = map
    this.config = new Config()
    this.latlngs = []
    this.rectangle = null
    this.dragMarkerList = []
  }
  /**
   * 加载
   * @param {*} latlngs
   * @param {*} option
   */
  load(latlngs, option) {
    if (latlngs.length > 0) {
      if (option && option.color) {
        this.rectangle = L.rectangle(latlngs, { color: option.color, weight: option.weight })
      } else {
        this.rectangle = L.rectangle(latlngs, { color: this.config.BORDER_COLOR, weight: this.config.BORDER_WEIGHT })
      }
      this.rectangle.addTo(this.map)
      if (option && option.isFit) {
        this.map.fitBounds(this.rectangle.getBounds())
      }
    }
  }
  /**
   * 绘制
   * @param {*} cb
   */
  draw(cb) {
    let that = this
    let okClickEvent = function (e) {
      if (cb) {
        cb(that.latlngs)
      }
      that.removeEdit()
      that.map.off('click', clickEvent)
    }
    let cancelClickEvent = function (e) {
      that.remove()
      that.map.off('click', clickEvent)
    }
    let dragEvent = function (e) {
      let dragIndex = that._dragMarkerIndex(e.target)
      let latlng = that.dragMarkerList[dragIndex].getLatLng()
      if (dragIndex === 0) {
        that.latlngs[0] = [latlng.lat, latlng.lng]
      } else {
        that.latlngs[1] = [latlng.lat, latlng.lng]
        that.okMarker.setLatLng(latlng)
        that.cancelMarker.setLatLng(latlng)
      }
      that.rectangle.setBounds(that.latlngs)
    }
    let clickEvent = function (e) {
      that.latlngs.push([e.latlng.lat, e.latlng.lng])
      let dragMarker = L.marker(e.latlng, { icon: that.config.POINT_ICON, draggable: true })
      dragMarker.on('drag', dragEvent)
      dragMarker.addTo(that.map)
      that.dragMarkerList.push(dragMarker)
      if (that.latlngs.length === 2) {
        that.rectangle = L.rectangle(that.latlngs, {
          color: that.config.BORDER_COLOR,
          weight: that.config.BORDER_WEIGHT,
        })
        that.rectangle.addTo(that.map)
        that.map.off('click', clickEvent)

        that.okMarker = L.marker(e.latlng, { icon: that.config.OK_ICON })
        that.cancelMarker = L.marker(e.latlng, { icon: that.config.CANCEL_ICON })

        that.okMarker.on('click', okClickEvent)
        that.cancelMarker.on('click', cancelClickEvent)

        that.okMarker.addTo(that.map)
        that.cancelMarker.addTo(that.map)
      }
    }
    that.map.on('click', clickEvent)
  }
  /**
   * 编辑
   * @param {*} latlngs
   * @param {*} cb
   */
  edit(latlngs, cb) {
    if (latlngs.length !== 2) return
    let that = this
    that.latlngs = latlngs
    let okClickEvent = function (e) {
      if (cb) {
        cb(that.latlngs)
      }
      that.removeEdit()
    }
    let cancelClickEvent = function (e) {
      that.remove()
    }
    let dragEvent = function (e) {
      let dragIndex = that._dragMarkerIndex(e.target)
      let latlng = that.dragMarkerList[dragIndex].getLatLng()
      if (dragIndex === 0) {
        that.latlngs[0] = [latlng.lat, latlng.lng]
      } else {
        that.latlngs[1] = [latlng.lat, latlng.lng]
        that.okMarker.setLatLng(latlng)
        that.cancelMarker.setLatLng(latlng)
      }
      that.rectangle.setBounds(that.latlngs)
    }
    that.latlngs.forEach((latlng) => {
      let dragMarker = L.marker(latlng, { icon: that.config.POINT_ICON, draggable: true })
      dragMarker.on('drag', dragEvent)
      dragMarker.addTo(that.map)
      that.dragMarkerList.push(dragMarker)
    })

    that.rectangle = L.rectangle(that.latlngs, { color: that.config.BORDER_COLOR, weight: that.config.BORDER_WEIGHT })
    that.rectangle.addTo(that.map)
    that.map.fitBounds(that.rectangle.getBounds())

    let latlng = that.latlngs[1]
    that.okMarker = L.marker(latlng, { icon: that.config.OK_ICON })
    that.cancelMarker = L.marker(latlng, { icon: that.config.CANCEL_ICON })

    that.okMarker.on('click', okClickEvent)
    that.cancelMarker.on('click', cancelClickEvent)

    that.okMarker.addTo(that.map)
    that.cancelMarker.addTo(that.map)
  }
  /**
   * 清理编辑状态（拖拽点、确认/取消按钮），不移除矩形本体
   * remove() 和 removeEdit() 的公共逻辑提取，避免代码重复
   */
  _cleanupEditState() {
    this.latlngs.length = 0
    while (this.dragMarkerList.length > 0) {
      this.dragMarkerList.shift().remove()
    }
    if (this.okMarker) {
      this.okMarker.remove()
      this.okMarker = null
    }
    if (this.cancelMarker) {
      this.cancelMarker.remove()
      this.cancelMarker = null
    }
  }
  /**
   * 移除
   */
  remove() {
    this._cleanupEditState()
    if (this.rectangle !== null) {
      this.rectangle.remove()
      this.rectangle = null
    }
  }
  /**
   * 移除编辑状态（矩形本体保留在地图上）
   */
  removeEdit() {
    this._cleanupEditState()
  }
  _dragMarkerIndex(obj) {
    return this.dragMarkerList.findIndex((v, i, o) => {
      return v === obj
    })
  }
}