ol-simple-map/src/gridPolygon.js

openlayers 的集成开发

/**
 * 
 * @description create grid for map
 * 
 * @author OctopusRoe
 * 
 * @version 0.0.1
 * 
 */

import Feature from 'ol/Feature'
import Polygon from 'ol/geom/Polygon'
import Select from 'ol/interaction/Select'
import { Vector as VectorLayer } from 'ol/layer'
import { Vector as VectorSource } from 'ol/source'
import { click, pointerMove } from 'ol/events/condition'
import { rightMouseDown } from '../utils/condition'
import { Style, Fill, Stroke, Text } from 'ol/style'


/**
 * 
 * @description 用于创建 gridArray 的每项结构
 * 
 * @param {Object} options 运行方法时需要传入的参数对象
 * @param {String} options.gridName 网格名称,默认为 null
 * @param {String} options.gridCode 网格 Code
 * @param {String} options.fillColor 网格的填充颜色,默认为 null
 * @param {Number[][]} options.pointArray 网格的经纬度数组
 * @returns 
 */
export function returnGridItem (options) {
  return {
    gridName: options.gridName || null,
    GridCode: options.GridCode | null,
    fillColor: options.fillColor || null,
    pointArray: [options.pointArray]
  }
}

/**
 * 
 * @description 创建网格的工具封装类
 * 
 * @param {Object} options 实例化对象时需要传入的参数类
 * @param {import('ol/Map').default} options.map openlayers 的 map 实例
 * @param {String} options.fontColor 网格标注的字体颜色
 * @param {String} options.fontStyle 网格标注的字体样式, 和 css 中的 font 字段一样
 * @param {String} options.hoverColor 选中网格后的颜色
 * @param {Array<Number>} options.lineDash 控制网格的外边框是否是虚线
 * @param {Number} options.strokeWidth 网格外边框宽度
 * @param {String} options.strokeColor 网格的外边框颜色
 * @param {Number} options.showZoom 显示文字的最小缩放级别
 * @param {Array<Object>} options.gridArray 网格的数组类型
 */
export default class DrawGridPolygon {
  constructor (options) {
    this.options = options
    this.source = null
    this.vector = null
    this._selectArray = []
    this._init()
  }

  /**
   * @description 初始化方法
   */
  _init () {
    // 初始化源
    this.source = new VectorSource({ wrapX: false })
    // 初始化矢量图层
    this.vector = new VectorLayer({
      source: this.source,
      style: (feature) => this._returnStyle(feature, false)
    })
    this.addFeatures()
  }

  /**
   * 
   * @description 返回 feature 组成的 数组 
   * 
   * @param {Array} gridArray 经纬度的数组
   * @returns feature 所组成的数组
   */
  _returnFeatures (gridArray) {
    return gridArray.map( item => {
      const feature = new Feature({
        name: item.gridName,
        value: item,
        color: item.fillColor,
        geometry: new Polygon(item.pointArray)
      })
      return feature
    })
  }

  /**
   * 
   * @description 返回样式的方法
   * 
   * @param {Feature} feature feature 的实例
   * @param {Boolean} isSelect 是否选中
   * @returns 返回多边形样式的实例
   */
  _returnStyle (feature, isSelect) {

    let _name =  feature.get('name') || ''

    let _color = feature.get('color') || 'rgba(0,0,255,0.1)'

    if (isSelect) {
      _color = this.options.hoverColor || 'rgba(0,0,255,0.9)'
    }

    // 设置线段样式
    const stroke = new Stroke({
      color: this.options.strokeColor || 'yellow',
      width: this.options.strokeWidth || 0,
      lineDash: this.options.lineDash || []
    })

    // 设置填充样式
    let fill = new Fill({
      color: _color
    })

    if (this.options.map.getView().getZoom() < this.options.showZoom) {
      _name = ''
    }

    // 设置文字样式
    const text = new Text({
      font: this.options.fontStyle || '15px Microsoft YaHei',
      text: _name,
      fill: new Fill({
        color: this.options.fontColor || 'black'
      })
    })

    return new Style({
      stroke: stroke,
      fill: fill,
      text: text
    })
  }

  /**
   * 
   * @description 禁止鼠标右键的默认事件
   * 
   * @param {Event} event event 事件参数
   */
  _prohibitDefaultMouseRightButton (event) {
    event.preventDefault()
  }

  /**
   * @description 把 feature 的数组添加进 source
   */
  addFeatures () {
    this.source.addFeatures(this._returnFeatures(this.options.gridArray))
    this.options.map.addLayer(this.vector)
  }

  /**
   * @description 添加选择高亮功能
   */
  addSelect () {
    this._selectArray.push(
      new Select({
        name: 'select',
        condition: pointerMove,
        layers: [this.vector],
        style: (feature) => this._returnStyle(feature, true)
      })
    )
    this.options.map.addInteraction(this._selectArray[this._selectArray.length - 1])
  }

  /**
   * 
   * @description 添加鼠标左键功能
   * 
   * @param {function} callBack call back function
   */
  addLeftClick (callBack) {
    this._selectArray.push(
      new Select({
        name: 'leftClick',
        condition: click,
        layers: [this.vector],
        style: (feature) => this._returnStyle(feature, false)
      })
    )
    this.options.map.addInteraction(this._selectArray[this._selectArray.length - 1])
    this._selectArray[this._selectArray.length - 1].on('select', (e) => {
      if (e.selected.length === 0) {
        return
      }
      callBack && callBack({zoom: this.options.map.getZoom(), value: e.selected[e.selected.length - 1].get('value')})
    })
  }

  /**
   * 
   * @description 添加鼠标右键功能
   * 
   * @param {function} callBack call back function
   */
  addRightClick (callBack) {
    this._selectArray.push(
      new Select({
        condition: rightMouseDown,
        layers: [this.vector],
        style: (feature) => this._returnStyle(feature, false)
      })
    )
    /** 禁止鼠标右键事件 */
    document.querySelector('body').addEventListener('contextmenu', this._prohibitDefaultMouseRightButton)
    this.options.map.addInteraction(this._selectArray[this._selectArray.length - 1])
    this._selectArray[this._selectArray.length - 1].on('select', (e) => {
      if (e.selected.length === 0) {
        return
      }
      callBack && callBack({zoom: this.options.map.getZoom(), value: e.selected[e.selected.length - 1].get('value')})
    })
  }

  /**
   * @description 移除 layer 层
   */
  removeLayer () {
    this.options.map.removeLayer(this.vector)
    this.removeInteraction()
  }

  /**
   * @description 移除全部 interaction
   */
  removeInteraction () {

    /** 解除禁止鼠标右键事件 */
    document.querySelector('body').removeEventListener('contextmenu', this._prohibitDefaultMouseRightButton)

    this._selectArray.forEach(item => {
      this.options.map.removeInteraction(item)
    })

    this._selectArray = []
  }
}