mapbox测量工具2.0

于 2022-12-28 16:26:05 发布
阅读量601 收藏 2
点赞数
分类专栏： 地图 文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44733660/article/details/128470165
版权
  • 之前写过一个基于mapbox-gl-draw的maobox-gl测量工具。
  • 在使用到一般项目中没啥问题，可在一些加载底图耗时较长的项目中，就有了问题：图层层级低或者工具加载慢的问题。
  • 所以就更新一个原生的测量工具。
一、依赖库与版本
  • mapbox-gl（2.6.1） 和@turf/turf（6.5.0）
二、测量距离源码文件
  • map_measure_distance.js
import mapboxgl from "mapbox-gl"
import * as turf from "@turf/turf"

const initData = {
  clickMeasurePointsFunction: null,
  mapClickFunction: null,
  mapMousemoveFunction: null,
  mapDblClickFunction: null,
  map: null,
  isMeasure: true,
  jsonPoint: { type: "FeatureCollection", features: [] },
  jsonLine: { type: "FeatureCollection", features: [] },
  points: [],
}
let before = null
let after = null

/**
 * 测距
 * @param mapObject
 */
export function measureLineLength(mapObject) {
  const currentMapContainerId = mapObject._container.getAttribute("id")
  currentMapContainerId.indexOf("-after") !== -1
    ? (after = JSON.parse(JSON.stringify(initData)))
    : (before = JSON.parse(JSON.stringify(initData)))
  const resultData = getBeforeOrAfterDataByMapContainerIdHandler(mapObject)
  resultData.isMeasure = true
  resultData.map = mapObject
  resultData.map.doubleClickZoom.disable() // 禁止双击缩放
  resultData.map.getCanvas().style.cursor = "default"
  clearMeasureLine(mapObject)
  resultData.jsonPoint = { type: "FeatureCollection", features: [] }
  resultData.jsonLine = { type: "FeatureCollection", features: [] }
  resultData.points = []
  const { mouseLabel, ele } = createMeasurLineLabelMarkerHandler(mapObject)
  createMeasureLinePLLHandler(resultData.jsonPoint, resultData.jsonLine, mapObject)

  let timer = null
  function mapClickHandler(_e) {
    timer = setTimeout(() => {
      clearTimeout(timer)
      if (resultData.isMeasure) {
        const coords = [_e.lngLat.lng, _e.lngLat.lat]
        addMeasureLineRes(resultData.points, resultData.jsonPoint, coords, mapObject)
        addMeasureLinePoint(resultData.jsonPoint, resultData.jsonLine, coords, mapObject)
        resultData.points.push(coords)
      }
    }, 100)
  }
  resultData.mapClickFunction = mapClickHandler
  resultData.map.off("click", mapClickHandler)
  resultData.map.on("click", mapClickHandler)
  function mousemoveHandler(_e) {
    if (resultData.isMeasure) {
      const coords = [_e.lngLat.lng, _e.lngLat.lat]
      if (resultData.jsonPoint.features.length > 0) {
        const prev = resultData.jsonPoint.features[resultData.jsonPoint.features.length - 1]
        const json = {
          type: "Feature",
          geometry: {
            type: "LineString",
            coordinates: [prev.geometry.coordinates, coords],
          },
        }
        resultData.map.getSource("measure-line-move").setData(json)
        let resultText = "起点"
        if (resultData.points.length !== 0) {
          const prev = resultData.jsonPoint.features[resultData.jsonPoint.features.length - 1]
          const prevCoordinates = prev ? prev.geometry.coordinates : ""
          const resultAngle = prevCoordinates
            ? getAngleHandle(prevCoordinates[0], prevCoordinates[1], coords[0], coords[1]).toFixed(1) + "°"
            : ""
          resultText = `<span>${getMeasureLineLength(
            resultData.points,
            coords
          )} / ${resultAngle}</span><span>单击确定地点，双击结束</span>`
        }
        ele.innerHTML = resultText
      } else {
        ele.style.display = "block"
        ele.innerHTML = "点击地图开始测量"
      }
      mouseLabel.setLngLat(coords)
    }
  }
  resultData.mapMousemoveFunction = mousemoveHandler
  resultData.map.off("mousemove", mousemoveHandler)
  resultData.map.on("mousemove", mousemoveHandler)
  function dblclickHandler(_e) {
    if (timer) {
      clearTimeout(timer)
    }
    if (resultData.isMeasure) {
      const coords = [_e.lngLat.lng, _e.lngLat.lat]
      addMeasureLinePoint(resultData.jsonPoint, resultData.jsonLine, coords, mapObject)
      resultData.isMeasure = false
      resultData.map.getCanvas().style.cursor = ""
      mouseLabel.remove()
      // 当前已关闭点击测距，所以清除move的线段
      resultData.map.getSource("measure-line-move").setData({ type: "FeatureCollection", features: [] })
      // 鼠标移入当前测距的点位，动态显示tips提示语
      resultData.map.on("mouseover", "measure-line-points", (event) => {
        if (resultData.isMeasure) {
          return
        }
        resultData.map.getCanvas().style.cursor = "pointer"
        const tipsCoords = [event.lngLat.lng, event.lngLat.lat]
        const tipsEle = document.createElement("div")
        tipsEle.setAttribute("class", "measure-line-result delete-tips")
        tipsEle.innerHTML = "单击可删除此点"
        const tipsOption = {
          element: tipsEle,
          anchor: "left",
          offset: [10, 20],
        }
        // eslint-disable-next-line no-undef
        new mapboxgl.Marker(tipsOption).setLngLat(tipsCoords).addTo(resultData.map)
      })
      // 鼠标移出当前测距的点位，移除tips提示语
      resultData.map.on("mouseout", "measure-line-points", () => {
        if (resultData.isMeasure) {
          resultData.map.getCanvas().style.cursor = "default"
        } else {
          resultData.map.getCanvas().style.cursor = ""
        }
        const deleteTips = resultData.map._container.querySelector(".delete-tips")
        if (deleteTips) {
          deleteTips.remove()
        }
      })
      /**
       * 点击测距点位触发
       * @param event
       * */
      // eslint-disable-next-line no-undef,no-inner-declarations
      function clickMeasurePointsHandler(event) {
        if (resultData.jsonPoint.features.length > 2) {
          const features = resultData.map.queryRenderedFeatures(event.point)
          if (features.length > 0) {
            const measureResult = resultData.map._container.querySelectorAll(".measure-line-result")
            if (measureResult && measureResult.length > 0) {
              Array.from(measureResult).forEach((m) => {
                m.remove()
              })
            }
            const { index } = features[0].properties
            resultData.jsonPoint.features = resultData.jsonPoint.features.filter(
              (feature) => feature.properties.index !== index
            )
            resultData.jsonLine.features = []
            const featuresArr = [...resultData.jsonPoint.features]
            const resultPoints = []
            featuresArr.forEach((feature, index) => {
              const nextIndex = index + 1
              if (featuresArr[nextIndex]) {
                const current = featuresArr[index]
                const next = featuresArr[nextIndex]
                resultData.jsonLine.features.push({
                  type: "Feature",
                  geometry: {
                    type: "LineString",
                    coordinates: [current.geometry.coordinates, next.geometry.coordinates],
                  },
                })
              }
              resultPoints.push(feature.geometry.coordinates)
              const ele = document.createElement("div")
              ele.style.color = "#e73f32"
              ele.style.fontSize = "16px"
              ele.style.fontWeight = "700"
              ele.setAttribute("class", "measure-line-result")
              if (index === 0) {
                ele.innerHTML = "起点"
              } else {
                const prevIndex = index - 1
                const prevCoordinates = featuresArr[prevIndex].geometry.coordinates
                const currentCoordinates = feature.geometry.coordinates
                const resultAngle = prevCoordinates
                  ? getAngleHandle(
                      prevCoordinates[0],
                      prevCoordinates[1],
                      currentCoordinates[0],
                      currentCoordinates[1]
                    ).toFixed(1) + "°"
                  : ""
                ele.innerHTML = `${getMetersHandler(resultPoints, currentCoordinates)} / ${resultAngle}`
              }
              if (nextIndex === featuresArr.length) {
                // 终点需要再加一个marker
                // 添加关闭按钮
                createCloseMarkerHandler(clickMeasurePointsHandler, feature.geometry.coordinates, mapObject)
              }
              const left = window.document.documentElement.clientWidth > 7000 ? 20 : 8
              const option = {
                element: ele,
                anchor: "left",
                offset: [left, 0],
              }
              // eslint-disable-next-line no-undef
              new mapboxgl.Marker(option).setLngLat(feature.geometry.coordinates).addTo(resultData.map)
            })
            resultData.map.getSource("measure-line-points").setData(resultData.jsonPoint)
            resultData.map.getSource("measure-line").setData(resultData.jsonLine)
            resultData.map.getSource("measure-line-move").setData({ type: "FeatureCollection", features: [] })
          }
        } else {
          closeMeasureLine(mapObject)
        }
      }
      resultData.clickMeasurePointsFunction = clickMeasurePointsHandler
      resultData.map.off("click", "measure-line-points", clickMeasurePointsHandler)
      resultData.map.on("click", "measure-line-points", clickMeasurePointsHandler)
      // 添加关闭按钮
      createCloseMarkerHandler(clickMeasurePointsHandler, coords, mapObject)
    }
  }
  resultData.mapDblClickFunction = dblclickHandler
  resultData.map.off("dblclick", dblclickHandler)
  resultData.map.on("dblclick", dblclickHandler)
}

/**
 * 清除测距相关
 */
function clearMeasureLine(mapObject) {
  const resultData = getBeforeOrAfterDataByMapContainerIdHandler(mapObject)
  const measureResult = resultData.map._container.querySelectorAll(".measure-line-result")
  if (measureResult && measureResult.length > 0) {
    Array.from(measureResult).forEach((m) => {
      m.remove()
    })
  }
  const source = resultData.map.getSource("measure-line-points")
  const json = {
    type: "FeatureCollection",
    features: [],
  }
  if (source) {
    resultData.map.getSource("measure-line-points").setData(json)
    resultData.map.getSource("measure-line-move").setData(json)
    resultData.map.getSource("measure-line").setData(json)
  }
}

/**
 * 创建label marker
 * @returns {*} 返回marker对象
 */
function createMeasurLineLabelMarkerHandler(mapObject) {
  const resultData = getBeforeOrAfterDataByMapContainerIdHandler(mapObject)
  const ele = document.createElement("div")
  ele.style.color = "#e73f32"
  ele.style.fontSize = "16px"
  ele.style.fontWeight = "700"
  ele.style.display = "none"
  ele.setAttribute("class", "measure-line-result")
  const windowW = document.documentElement.clientWidth
  const top = windowW > 7000 ? 120 : 44
  const left = window.document.documentElement.clientWidth > 7000 ? 20 : 8
  const option = {
    element: ele,
    anchor: "left",
    offset: [left, top],
  }
  // eslint-disable-next-line no-undef
  const mouseLabel = new mapboxgl.Marker(option).setLngLat([0, 0]).addTo(resultData.map)
  return {
    mouseLabel,
    ele,
  }
}

/**
 * 创建测距需要的layers，points、line、measure-line-move
 * @param jsonPoint
 * @param jsonLine
 * @param mapObject
 */
function createMeasureLinePLLHandler(jsonPoint, jsonLine, mapObject) {
  const resultData = getBeforeOrAfterDataByMapContainerIdHandler(mapObject)
  const source = resultData.map.getSource("measure-line-points")
  if (source) {
    resultData.map.getSource("measure-line-points").setData(jsonPoint)
    resultData.map.getSource("measure-line-move").setData(jsonLine)
    resultData.map.getSource("measure-line").setData(jsonLine)
  } else {
    resultData.map.addSource("measure-line-points", {
      type: "geojson",
      data: jsonPoint,
    })
    resultData.map.addSource("measure-line", {
      type: "geojson",
      data: jsonLine,
    })
    resultData.map.addSource("measure-line-move", {
      type: "geojson",
      data: jsonLine,
    })
    const windowW = document.documentElement.clientWidth
    const LW = windowW > 7000 ? 6 : 2
    const RW = windowW > 7000 ? 10.5 : 3.5
    const CW = windowW > 7000 ? 7.5 : 2.5
    resultData.map.addLayer({
      id: "measure-line-move",
      type: "line",
      source: "measure-line-move",
      paint: {
        "line-color": "#ffdf40",
        "line-width": LW,
        "line-opacity": 1,
        "line-dasharray": [0.5, 1],
      },
    })
    resultData.map.addLayer({
      id: "measure-line",
      type: "line",
      source: "measure-line",
      paint: {
        "line-color": "#ffdf40",
        "line-width": LW,
        "line-opacity": 1,
        "line-dasharray": [0.5, 1],
      },
    })
    resultData.map.addLayer({
      id: "measure-line-points",
      type: "circle",
      source: "measure-line-points",
      paint: {
        "circle-color": "#ffffff",
        "circle-radius": RW,
        "circle-stroke-width": CW,
        "circle-stroke-color": "#ffdf40",
      },
    })
  }
  moveLayerHandler(resultData.map)
}

/**
 * 将测距的三个图层移到最上层级
 */
function moveLayerHandler(mapObject) {
  const { map } = getBeforeOrAfterDataByMapContainerIdHandler(mapObject)
  const { layers } = map.getStyle()
  const length = layers.length
  const lastLayerId = map.getStyle().layers[length - 1].id
  if (lastLayerId !== "measure-line-points") {
    map.moveLayer("measure-line-points", map.getStyle().layers[length - 1].id)
    map.moveLayer("measure-line", "measure-line-points")
    map.moveLayer("measure-line-move", "measure-line")
  }
}

/**
 * 添加点位layer
 * @param jsonPoint
 * @param jsonLine
 * @param coords
 * @param mapObject
 */
function addMeasureLinePoint(jsonPoint, jsonLine, coords, mapObject) {
  const { map } = getBeforeOrAfterDataByMapContainerIdHandler(mapObject)
  if (jsonPoint.features.length > 0) {
    const prev = jsonPoint.features[jsonPoint.features.length - 1]
    jsonLine.features.push({
      type: "Feature",
      geometry: {
        type: "LineString",
        coordinates: [prev.geometry.coordinates, coords],
      },
    })
    map.getSource("measure-line").setData(jsonLine)
  }
  jsonPoint.features.push({
    type: "Feature",
    geometry: {
      type: "Point",
      coordinates: coords,
    },
    properties: {
      index: jsonPoint.features.length,
    },
  })
  // 重新整理point点位，若是重复点位则不添加
  const data = [...jsonPoint.features]
  const result = []
  data.forEach((feature, index) => {
    if (data[index - 1]) {
      if (
        data[index - 1].geometry.coordinates[0] !== feature.geometry.coordinates[0] ||
        data[index - 1].geometry.coordinates[1] !== feature.geometry.coordinates[1]
      ) {
        result.push(feature)
      }
    } else {
      result.push(feature)
    }
  })
  jsonPoint.features = [...result]
  map.getSource("measure-line-points").setData(jsonPoint)
}

/**
 * 获取两坐标点之间的距离
 * @param points
 * @param coords
 * @returns {string}
 */
function getMeasureLineLength(points, coords) {
  const _points = points.concat([coords])
  // eslint-disable-next-line no-undef
  const line = turf.lineString(_points)
  // eslint-disable-next-line no-undef
  let len = turf.length(line)
  if (len < 1) {
    len = Math.round(len * 1000) + "米"
  } else {
    len = len.toFixed(2) + "千米"
  }
  return len
}

/**
 * 点击地图添加点位触发给当前点位绑定测距结果的labelMarker
 * @param points
 * @param jsonPoint
 * @param coords
 * @param mapObject
 * */
function addMeasureLineRes(points, jsonPoint, coords, mapObject) {
  const { map } = getBeforeOrAfterDataByMapContainerIdHandler(mapObject)
  const ele = document.createElement("div")
  ele.style.color = "#e73f32"
  ele.style.fontSize = "16px"
  ele.style.fontWeight = "700"
  ele.setAttribute("class", "measure-line-result")
  const left = window.document.documentElement.clientWidth > 7000 ? 20 : 8
  const option = {
    element: ele,
    anchor: "left",
    offset: [left, 0],
  }
  let resultText = "起点"
  if (points.length !== 0) {
    resultText = `${getMeasureLineLength(points, coords)}`
  }
  ele.innerHTML = resultText
  // eslint-disable-next-line no-undef
  new mapboxgl.Marker(option).setLngLat(coords).addTo(map)
}

/**
 * 点击测距点位重新触发计算两点位之间的距离
 * @param resultPoints
 * @param coords
 * @returns {string}
 */
function getMetersHandler(resultPoints, coords) {
  if (resultPoints.length > 1) {
    const _points = [...resultPoints]
    // eslint-disable-next-line no-undef
    const line = turf.lineString(_points)
    // eslint-disable-next-line no-undef
    let len = turf.length(line)
    if (len < 1) {
      len = Math.round(len * 1000) + "米"
    } else {
      len = len.toFixed(2) + "公里"
    }
    return len
  }
}

/**
 * 获取两点位之间的角度
 * @param lng1
 * @param lat1
 * @param lng2
 * @param lat2
 * @returns {number}
 */
function getAngleHandle(lng1, lat1, lng2, lat2) {
  const a = ((90 - lat2) * Math.PI) / 180
  const b = ((90 - lat1) * Math.PI) / 180
  const AOC_BOC = ((lng2 - lng1) * Math.PI) / 180
  const cosc = Math.cos(a) * Math.cos(b) + Math.sin(a) * Math.sin(b) * Math.cos(AOC_BOC)
  const sinc = Math.sqrt(1 - cosc * cosc)
  const sinA = (Math.sin(a) * Math.sin(AOC_BOC)) / sinc
  const A = (Math.asin(sinA) * 180) / Math.PI
  let res = 0
  if (lng2 > lng1 && lat2 > lat1) {
    res = A
  } else if (lng2 > lng1 && lat2 < lat1) {
    res = 180 - A
  } else if (lng2 < lng1 && lat2 < lat1) {
    res = 180 - A
  } else if (lng2 < lng1 && lat2 > lat1) {
    res = 360 + A
  } else if (lng2 > lng1 && lat2 === lat1) {
    res = 90
  } else if (lng2 < lng1 && lat2 === lat1) {
    res = 270
  } else if (lng2 === lng1 && lat2 > lat1) {
    res = 0
  } else if (lng2 === lng1 && lat2 < lat1) {
    res = 180
  }
  return res
}

/**
 * 创建关闭按钮
 * @param clickMeasurePointsHandler
 * @param coords
 * @param mapObject
 */
function createCloseMarkerHandler(clickMeasurePointsHandler, coords, mapObject) {
  const resultData = getBeforeOrAfterDataByMapContainerIdHandler(mapObject)
  const ele = document.createElement("div")
  ele.setAttribute("class", "measure-line-result close")
  const left = window.document.documentElement.clientWidth > 7000 ? 20 : 8
  const top = window.document.documentElement.clientWidth > 7000 ? -50 : -11
  const option = {
    element: ele,
    anchor: "bottom-left",
    offset: [left, top],
  }
  ele.innerHTML = "×"
  // eslint-disable-next-line no-undef
  new mapboxgl.Marker(option).setLngLat(coords).addTo(resultData.map)
  ele.onclick = function (__e) {
    __e.stopPropagation()
    closeMeasureLine(resultData.map)
  }
}

/**
 * 关闭触发
 */
export function closeMeasureLine(mapObject) {
  if (!mapObject) return
  const resultData = getBeforeOrAfterDataByMapContainerIdHandler(mapObject)
  if (!resultData) return
  resultData.map.doubleClickZoom.enable()
  clearMeasureLine(resultData.map)
  resultData.map.off("click", resultData.mapClickFunction)
  resultData.map.off("mousemove", resultData.mapMousemoveFunction)
  resultData.map.off("dblclick", resultData.mapDblClickFunction)
  resultData.map.off("click", "measure-line-points", resultData.clickMeasurePointsFunction)
  resultData.isMeasure = false
  resultData.map.getCanvas().style.cursor = ""
  resultData.map.getSource("measure-line-move").setData({ type: "FeatureCollection", features: [] })
  resultData.jsonPoint = { type: "FeatureCollection", features: [] }
  resultData.jsonLine = { type: "FeatureCollection", features: [] }
  resultData.points = []
}

// 根据地图对象的id来输出当前获取对应的全局变量数据
function getBeforeOrAfterDataByMapContainerIdHandler(mapObject) {
  if (!mapObject) return
  const currentMapContainerId = mapObject._container.getAttribute("id")
  return currentMapContainerId.indexOf("-after") !== -1 ? after : before
}
三、测量面积源码文件
  • map_measure_area.js
import mapboxgl from "mapbox-gl"
import * as turf from "@turf/turf"
import { Message } from "element-ui"
import { map as mapboxMap } from "./map_fun"

let isMeasure = true // 测面的状态
let points = []
let jsonPoint = {
  type: "FeatureCollection",
  features: [],
}
let jsonLine = {
  type: "FeatureCollection",
  features: [],
}
let jsonFirstLine = {
  type: "FeatureCollection",
  features: [],
}
let measureAreaEle = null
let tooltip = null

// 测面
export function measureArea(map) {
  isMeasure = true
  // 禁止双击缩放
  map.doubleClickZoom.disable()
  map.getCanvas().style.cursor = "default"
  measureAreaEle = document.createElement("div")
  measureAreaEle.style.color = "#e73f32"
  measureAreaEle.style.fontSize = "16px"
  measureAreaEle.style.fontWeight = "700"
  measureAreaEle.setAttribute("class", "measure-area-result")

  const option = {
    element: measureAreaEle,
    anchor: "left",
    offset: [8, 0],
  }

  tooltip = new mapboxgl.Marker(option).setLngLat([0, 0]).addTo(map)

  const source = map.getSource("measure-area-points")

  if (source) {
    map.getSource("measure-area-points").setData(jsonPoint)
    map.getSource("measure-area-line").setData(jsonLine)
    map.getSource("measure-area-first-line").setData(jsonFirstLine)
  } else {
    map.addSource("measure-area-points", {
      type: "geojson",
      data: jsonPoint,
    })
    map.addSource("measure-area-line", {
      type: "geojson",
      data: jsonLine,
    })
    map.addSource("measure-area-first-line", {
      type: "geojson",
      data: jsonLine,
    })
    map.addLayer({
      id: "measure-area-line",
      type: "fill",
      source: "measure-area-line",
      paint: {
        "fill-color": "#ffdf40",
        "fill-opacity": 0.1,
      },
    })
    map.addLayer({
      id: "line-area-stroke",
      type: "line",
      source: "measure-area-line",
      paint: {
        "line-color": "#ffdf40",
        "line-width": 2,
        "line-opacity": 1,
        "line-dasharray": [0.5, 1],
      },
    })
    map.addLayer({
      id: "measure-area-first-line",
      type: "line",
      source: "measure-area-first-line",
      paint: {
        "line-color": "#ffdf40",
        "line-width": 2,
        "line-opacity": 1,
        "line-dasharray": [0.5, 1],
      },
    })
    map.addLayer({
      id: "measure-area-points",
      type: "circle",
      source: "measure-area-points",
      paint: {
        "circle-color": "#ffffff",
        "circle-radius": 3,
        "circle-stroke-width": 2,
        "circle-stroke-color": "#ffdf40",
      },
    })
  }

  map.on("click", drawPointHandler)

  map.on("dblclick", drawResultHandler)

  map.on("mousemove", drawMoveHandler)
}

// 获取面积
function getArea(coords) {
  let pts = points.concat([coords])

  pts = pts.concat([points[0]])

  const polygon = turf.polygon([pts])

  let area = turf.area(polygon)

  if (area < 1000) {
    area = Math.round(area) + "m²" + ", 双击结束绘制"
  } else {
    area = (area / 1000000).toFixed(4) + "km²" + ", 双击结束绘制"
  }

  return area
}

// 绘制测面的点位
function drawPointHandler(e) {
  if (isMeasure) {
    const coords = [e.lngLat.lng, e.lngLat.lat]
    const map = e.target

    points.push(coords)
    jsonPoint.features.push({
      type: "Feature",
      geometry: {
        type: "Point",
        coordinates: coords,
      },
    })
    map.getSource("measure-area-points").setData(jsonPoint)
  }
}

// 绘制显示结果
function drawResultHandler(e) {
  if (isMeasure) {
    if (points.length === 3) {
      Message.error("测量时至少需要三个点，请才重新测量")
      closeMeasureArea(mapboxMap)
      measureArea(mapboxMap)
    }

    const kinks = turf.kinks(turf.polygon([[...points, points[0]]]))

    if (kinks.features.length > 1) {
      Message.error("测量时不能相交，请重新测量")
      closeMeasureArea(mapboxMap)
      measureArea(mapboxMap)
    } else {
      const coords = [e.lngLat.lng, e.lngLat.lat]

      points.push(coords)

      const features = turf.featureCollection(
        points.map((item) => {
          return turf.point(item)
        })
      )

      const center = turf.center(features)

      isMeasure = false
      measureAreaEle.innerHTML = getArea(coords).split(",")[0]
      tooltip.setLngLat(center.geometry.coordinates)
    }
  }
}

// 绘制鼠标跟随时的相关内容
function drawMoveHandler(e) {
  if (isMeasure) {
    const coords = [e.lngLat.lng, e.lngLat.lat]
    const map = e.target
    const len = jsonPoint.features.length

    if (len === 0) {
      measureAreaEle.innerHTML = "点击地图开始测量"
    } else {
      let pts = points.concat([coords])

      pts = pts.concat([points[0]])

      const jsonFill = {
        type: "Feature",
        geometry: {
          type: "Polygon",
          coordinates: [pts],
        },
      }

      const jsonLine = {
        type: "Feature",
        geometry: {
          type: "LineString",
          coordinates: [...pts],
        },
      }

      map.getSource("measure-area-line").setData(jsonFill)
      map.getSource("measure-area-first-line").setData(jsonLine)

      if (len === 1) {
        measureAreaEle.innerHTML = "点击地图继续绘制"
      } else {
        measureAreaEle.innerHTML = getArea(coords)
      }
    }

    tooltip.setLngLat(coords)
  }
}

// 清除
function clearMeasure(map) {
  const measureResult = map._container.querySelectorAll(".measure-area-result")

  if (measureResult && measureResult.length > 0) {
    Array.from(measureResult).forEach((m) => {
      m.remove()
    })
  }

  const json = {
    type: "FeatureCollection",
    features: [],
  }
  const sourceArea = map.getSource("measure-area-points")

  if (sourceArea) {
    map.getSource("measure-area-points").setData(json)
    map.getSource("measure-area-line").setData(json)
    map.getSource("measure-area-first-line").setData(json)
  }

  isMeasure = true
  points = []
  jsonPoint = {
    type: "FeatureCollection",
    features: [],
  }
  jsonLine = {
    type: "FeatureCollection",
    features: [],
  }
  measureAreaEle = null
  tooltip = null
  map.off("click", drawPointHandler)

  map.off("dblclick", drawResultHandler)

  map.off("mousemove", drawMoveHandler)
}

// 关闭测面
export function closeMeasureArea(map) {
  if (!map) return
  map.doubleClickZoom.enable()
  clearMeasure(map)
}
四、使用方式
//map:基于mapbox创建的实例
export const MEASURE_LINE = () => {
  MEASURE_CLEAR()
  measureLineLength(map)
}

/**
 * 地图测量功能-测面
 */
export const MEASURE_AREA = () => {
  MEASURE_CLEAR()
  measureArea(map)
}

/**
 * 地图测量功能-清除
 */
export const MEASURE_CLEAR = () => {
  closeMeasureLine(map)
  closeMeasureArea(map)
}
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值