【MAPBOX基础功能】31、实现mapbox的测面功能

汪同学丶

已于 2022-06-24 09:43:13 修改

阅读量1.1k

点赞数 4

分类专栏： MAPBOX基础功能文章标签： MAPBOX

于 2021-12-23 11:22:23 首次发布

本文链接：https://blog.csdn.net/weixin_44402694/article/details/122102450

版权

MAPBOX基础功能专栏收录该内容

32 篇文章 49 订阅

订阅专栏

前言

官网指引，生成accesstoken，下载相关依赖请翻阅[https://blog.csdn.net/weixin_44402694/article/details/125414381?spm=1001.2014.3001.5501](https://blog.csdn.net/weixin_44402694/article/details/125414381?spm=1001.2014.3001.5501)
本文使用官网accesstoken，请自行生成私人token
实现mapbox的测面功能

效果

在这里插入图片描述

实现代码

步骤1、前置资源

<link
  rel="stylesheet"
  href="http://resource.geointech.cn:8040/mapbox/mapbox-gl.css"
/>
<script src="http://resource.geointech.cn:8040/mapbox/mapbox-gl.js"></script>
// turfjs工具计算面积
<script src="http://resource.geointech.cn:8040/turf/turf.js"></script>
// 步骤2的html代码中引入了measure-area.js，当前文件在步骤3
import { measureArea, closeMeasureArea } from './measure-area.js'

步骤2、创建以下html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>测面</title>
    <link
      rel="stylesheet"
      href="http://resource.geointech.cn:8040/mapbox/mapbox-gl.css"
    />
    <script src="http://resource.geointech.cn:8040/mapbox/mapbox-gl.js"></script>
    <script src="http://resource.geointech.cn:8040/turf/turf.js"></script>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      html,
      body,
      #map {
        width: 100%;
        height: 100%;
        position: relative;
      }
      .btns {
        position: absolute;
        top: 40px;
        right: 40px;
      }
      button {
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div class="btns">
      <button class="open-btn">开始测面</button>
      <button class="close-btn">结束测面</button>
    </div>

    <script type="module">
      import { measureArea, closeMeasureArea } from './measure-area.js'

      mapboxgl.accessToken = 'mytoken'
      let map = null
      window.onload = function () {
        initCreateMapHandler()
      }

      // 初始化创建地图
      function initCreateMapHandler(params) {
        map = new mapboxgl.Map({
          container: 'map', // container id
          style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
          center: [108, 35], // starting position [lng, lat]
          zoom: 2, // starting zoom
        })
        btnBindingEventHandler()
      }

      // 地图创建后按钮绑定事件
      function btnBindingEventHandler() {
        const openBtn = document.querySelector('.open-btn')
        const closeBtn = document.querySelector('.close-btn')
        openBtn.addEventListener('click', () => {
          measureArea(map)
        })
        closeBtn.addEventListener('click', () => {
          closeMeasureArea(map)
        })
      }
    </script>
  </body>
</html>

步骤3: 创建measure-area.js

let isMeasure = true // 测面的状态
let points = []
let jsonPoint = {
  type: 'FeatureCollection',
  features: []
}
let jsonLine = {
  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.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)
  } else {
    map.addSource('measure-area-points', {
      type: 'geojson',
      data: jsonPoint
    })
    map.addSource('measure-area-line', {
      type: 'geojson',
      data: jsonLine
    })
    map.addLayer({
      id: 'measure-area-line',
      type: 'fill',
      source: 'measure-area-line',
      paint: {
        'fill-color': '#0000ff',
        'fill-opacity': 0.1
      }
    })
    map.addLayer({
      id: 'line-area-stroke',
      type: 'line',
      source: 'measure-area-line',
      paint: {
        'line-color': '#0000ff',
        'line-width': 2,
        'line-opacity': 0.65
      }
    })
    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': '#0000ff'
      }
    })
  }

  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) {
    const coords = [e.lngLat.lng, e.lngLat.lat]
    const map = e.target
    points.push(coords)
    isMeasure = false
    measureAreaEle.innerHTML = getArea(coords).split(',')[0]
    tooltip.setLngLat(coords)
    // 添加关闭按钮
    const _ele = document.createElement('div')
    _ele.setAttribute('class', 'measure-area-result close')
    const option = {
      element: _ele,
      anchor: 'bottom-left',
      offset: [-5, -10]
    }
    _ele.innerHTML = '×'
    new mapboxgl.Marker(option).setLngLat(coords).addTo(map)
    _ele.onclick = function (__e) {
      __e.stopPropagation()
      map.doubleClickZoom.enable()
      clearMeasure(map)
      _ele.remove()
    }
  }
}

// 绘制鼠标跟随时的相关内容
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 if (len === 1) {
      measureAreaEle.innerHTML = '点击地图继续绘制'
    } else {
      let pts = points.concat([coords])
      pts = pts.concat([points[0]])
      const json = {
        type: 'Feature',
        geometry: {
          type: 'Polygon',
          coordinates: [pts]
        }
      }
      map.getSource('measure-area-line').setData(json)
      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)
  }
  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)
}