BMapGL -- 使用Class在 Vue3 ts 中封装创建标记和多边形标签-Toy模板网

这篇具有很好参考价值的文章主要介绍了BMapGL -- 使用Class在 Vue3 ts 中封装创建标记和多边形标签。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

代码：

useSymbol.ts 文件

import { featureCollection, point, center } from '@turf/turf'

const labSty = {
  color: '#fff',
  backgroundColor: 'rgba(0, 0, 0, 0.5)',
  borderRadius: '10px',
  padding: '0 10px',
  fontSize: '14px',
  lineHeight: '20px',
  border: '0',
  textAlign: 'center',
  whiteSpace: 'normal',
  textOverflow: 'ellipsis',
  transform: 'translateX(-50%)'
}

export interface MarkConfig {
  point: any
  labelStyle?: any
  name?: string
  identifier?: string
  url?: string
  size?: number
  options?: any
}

export interface PolConfig {
  points: [number, number][]
  poyStyle: any
  labelStyle?: any
  name: string
}

export class MarkerLabel {
  private _marker: any
  private _label: any
  private _map: any
  constructor(
    { point, labelStyle = {}, name = '', identifier = '', url = '/resource/img/logo.png', size = 32, options = {} } = {} as MarkConfig
  ) {
    const labelStyles = { ...labSty, ...labelStyle, width: name?.length * 16 + 20 + 'px' }
    this._label = new BMapGL.Label(name, {
      position: point,
      styles: labelStyles
    })
    this._marker = new BMapGL.Marker(point, {
      ...options,
      label: this._label,

      identifier,
      icon: new BMapGL.Icon(url, new BMapGL.Size(size, size), {
        anchor: new BMapGL.Size(size / 2, size)
      })
    })
    this._marker.identifier = identifier
  }

  addTo(map) {
    this._map = map
    this._map.addOverlay(this._marker)
  }
  remove() {
    this._map && this._map.removeOverlay(this._marker)
  }
  addEventListener(event: string, handler: Fn) {
    this._marker.addEventListener(event, handler)
  }
  removeEventListener(event: string, handler: Fn) {
    this._marker.removeEventListener(event, handler)
  }
  get marker() {
    return this._marker
  }
}

// 多边形标签
export class PolygonLabel {
  private _polygon: any
  private _label: any
  private _map: any
  constructor({ points, poyStyle, labelStyle = {}, name } = {} as PolConfig) {
    const _features = <any>[]
    const _points = points.map((item) => {
      _features.push(point([item[0], item[1]]))
      return new BMapGL.Point(item[0], item[1])
    })
    const features = featureCollection(_features)
    const { geometry } = center(features)
    this._label = new BMapGL.Label(name, {
      position: new BMapGL.Point(geometry?.coordinates[0], geometry?.coordinates[1]),
      styles: { ...labSty, ...labelStyle }
    })
    this._polygon = new BMapGL.Polygon(_points, poyStyle)
  }

  addTo(map) {
    this._map = map
    map.addOverlay(this._label)
    map.addOverlay(this._polygon)
  }

  remove() {
    this._map && this._map.removeOverlay(this._label)
    this._map && this._map.removeOverlay(this._polygon)
  }

  addEventListener(event: string, handler: Fn) {
    this._polygon.addEventListener(event, handler)
  }
  removeEventListener(event: string, handler: Fn) {
    this._polygon.removeEventListener(event, handler)
  }
  get polygon() {
    return this._polygon
  }
}

使用

MarkerLabel 使用

import { MarkerLabel } from '@/hooks/map/useSymbol'

// 创建Marker并监听点击事件
// 创建Marker并监听点击事件
function createMarker({ location, url, policeNumber, size, policeName } = {} as any) {
  const map = mapInstance()
  let point = new BMapGL.Point(location?.longitude, location?.latitude)
  let mar = new MarkerLabel({ point, url, size, name: policeName, identifier: 'policeNumber=' + policeNumber })
  markers[policeNumber] = mar.marker
  mar.addTo(map)
  // 创建信息弹窗
  map.setViewport(point)
  mar.marker.addEventListener('click', async () => {
    const res = await getStaff({ policeNumber: policeNumber })
    Object.assign(staffdetails, res)
    visible.value = true
    await nextTick()
    const infoWindow = new BMapGL.InfoWindow(detailsRef.value, opts)
    map.openInfoWindow(infoWindow, point)
  })
}

PolygonLabel使用

import { PolygonLabel, MarkerLabel } from '@/hooks/map/useSymbol'

 let _polygonLabel = new PolygonLabel({
   points: polygonArr,
   poyStyle: {
     polygonId: item.id,
     strokeColor: 'rgba(36,104,242,1)',
     strokeWeight: 2,
     fillColor: item.areaColor || 'rgba(36,104,242,0.70)'
   },
   labelStyle: { backgroundColor: '', width: item.areaName.length * 16 + 10 + 'px' },
   name: item.areaName
 })

_polygonLabel.addTo(map.value)
 _polygonLabel.addEventListener('click', async function (event) {
   resetVisibleDrawing(OverlayTypeEnum.POLYGON)
   const { target, domEvent } = event
   domEvent?.stopPropagation() // 阻止事件冒泡
 })

思路：

这段代码定义了两个类：MarkerLabel 和 PolygonLabel，分别用于创建标记和多边形标签，并将它们添加到地图上。
MarkerLabel 类接收一个 markConfig 对象作为参数，该对象包含创建标记所需的各种配置信息，例如标记的位置、标记的样式、标记的名称、标记的标识符等。该类的主要功能是创建一个标记，并将其添加到地图上。
PolygonLabel 类接收一个 polConfig 对象作为参数，该对象包含创建多边形标签所需的各种配置信息，例如多边形的顶点坐标、多边形的样式、多边形的名称等。该类的主要功能是创建一个多边形标签，并将其添加到地图上。
在 MarkerLabel 类中，它使用了 BMapGL 对象来创建标记和标记标签，其中 BMapGL.Marker 和 BMapGL.Label 分别用于创建标记和标记标签。MarkerLabel 类的 addTo 方法和 remove 方法分别用于将标记添加到地图上和从地图上移除标记。
在 PolygonLabel 类中，它使用了 turf 库来计算多边形的中心点坐标，然后使用 BMapGL.Polygon 和 BMapGL.Label 分别创建多边形和多边形标签。PolygonLabel 类的 addTo 方法和 remove 方法分别用于将多边形和多边形标签添加到地图上和从地图上移除。
这段代码的主要功能是封装了地图 API 的使用，使得在 Vue 3 中创建标记和多边形标签更加方便和简洁。文章来源地址https://www.toymoban.com/news/detail-614855.html

到了这里，关于BMapGL -- 使用Class在 Vue3 ts 中封装创建标记和多边形标签的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！