首页 > 其他分享> 文章详细

记录：实现mapbox的测面功能

2021-12-23 11:31:34 阅读：225 来源： 互联网

标签：测面 const map 记录 area points coords measure mapbox

前言

系统实现过程中存在测面的需求，系统选用mapbox二维引擎，所以记录下使用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)
}

记录：供后续查阅使用

标签：测面,const,map,记录,area,points,coords,measure,mapbox
来源： https://blog.csdn.net/weixin_44402694/article/details/122102450

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

记录：实现mapbox的测面功能

前言

效果

实现代码

步骤1、前置资源

步骤2、创建以下html

步骤3: 创建measure-area.js