xy-map 1.0.60 → 1.1.2

package/src/util/mapTools.js

@@ -1,169 +0,0 @@
-import mapSdk from '../map'
-import * as turf from '@turf/turf'
-
-// 工具
-import {
-  measureLineLength,
-  closeMeasureLine
-} from './measure-distance.js'
-import {
-  measureArea,
-  closeMeasureArea
-} from './measure-area.js'
-
-// list转geoJson
-export const toGeoJson = (list, type, props = 'position') => {
-  let pointsData = list.map((item, index) => {
-    return {
-      id: item.id || '',
-      type: 'Feature',
-      geometry: {
-        type: type,
-        coordinates: item[props]
-      },
-      properties: item
-    }
-  })
-
-  let data = {
-    type: 'FeatureCollection',
-    features: pointsData
-  }
-  return data
-}
-
-/**
- * 加载图片
- */
-export const loadImage = (src, width = 24, height = 24) => {
-  return new Promise((resolve) => {
-    let image = new Image(width, height)
-    image.src = src
-    image.onload = () => {
-      resolve(image)
-    }
-  })
-}
-
-// 测距
-export const ranging = () => {
-  let {
-    map
-  } = mapSdk
-  measureLineLength(map)
-}
-
-// 测面积
-export const drawArea = () => {
-  let {
-    map
-  } = mapSdk
-  measureArea(map)
-}
-
-// 清除测量
-export const clearDraw = () => {
-  let {
-    map
-  } = mapSdk
-  closeMeasureLine(map)
-  closeMeasureArea(map)
-}
-
-// 判断点是否在区域内
-export const pointInPolygon = (point, area) => {
-  // point = [-77, 44]
-  /* area = [
-    [
-      [-81, 41],
-      [-81, 47],
-      [-72, 47],
-      [-72, 41],
-      [-81, 41]
-    ]
-  ]*/
-
-  let pt = turf.point(point)
-  let poly = turf.polygon(area)
-  return turf.booleanPointInPolygon(pt, poly)
-}
-
-// 计算两点间的距离
-export const distance = (fromLngLat, toLngLat) => {
-  // from = [-75.343, 39.984]
-  // to = [-75.534, 39.123]
-
-  let from = turf.point(fromLngLat)
-  let to = turf.point(toLngLat)
-  let distance = turf.distance(from, to, {
-    units: 'miles'
-  })
-  return distance
-}
-
-// 两点间中点坐标
-export const lineCenter = (LngLat1, LngLat2) => {
-  // LngLat1 = [-75.343, 39.984]
-  // LngLat2 = [-75.534, 39.123]
-
-  var point1 = turf.point(LngLat1)
-  var point2 = turf.point(LngLat2)
-
-  var midpoint = turf.midpoint(point1, point2)
-  return midpoint
-}
-
-// 多边形的中点坐标
-export const polygonCenter = (area) => {
-  /* area = [
-    [
-      [-81, 41],
-      [-81, 47],
-      [-72, 47],
-      [-72, 41],
-      [-81, 41]
-    ]
-  ]*/
-
-  let polygon = turf.polygon(area)
-  let center = turf.centerOfMass(polygon)
-  return center
-}
-
-// 获取点到线的最近一点坐标
-export const nearestPointOnLine = (line, point) => {
-  // line = [
-  //   [-77.031669, 38.878605],
-  //   [-77.029609, 38.881946],
-  //   [-77.020339, 38.884084],
-  //   [-77.025661, 38.885821],
-  //   [-77.021884, 38.889563],
-  //   [-77.019824, 38.892368]
-  // ]
-  // point = [-77.037076, 38.884017]
-
-  const l = turf.lineString(line)
-  const p = turf.point(point)
-
-  var snapped = turf.nearestPointOnLine(l, p)
-  return snapped
-}
-
-/**
- * type 面平移(polygon)、 点平移(point)、 线平移(lineString)
- * data 点线面的坐标数组
- * xy偏移值
- */
-export const transformTranslate = (type, data, x, y) => {
-  return turf.transformTranslate(turf[type](data), x, y)
-}
-
-
-/**
- * 根据中线点获取对应半径圆坐标
- * center 中心点坐标[131.073341552, 45.800152475]
- * radius 半径单位km
- */
-export const pointToCircleGeoJson = (center, radius) => {
-  return turf.circle(center, radius)
-}

package/src/util/measure-area.js

@@ -1,215 +0,0 @@
-import mapboxgl from 'mapbox-gl'
-import * as turf from '@turf/turf'
-
-let isMeasure = true // 测面的状态
-let points = []
-let jsonPoint = {
-  type: 'FeatureCollection',
-  features: []
-}
-let jsonLine = {
-  type: 'FeatureCollection',
-  features: []
-}
-let measureAreaEle = null
-let tooltip = null
-
-let textColor = '#fff'
-let lineColor = '#ff0'
-
-// 测面
-export function measureArea(map) {
-  clearMeasure(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': lineColor,
-        'fill-opacity': 0.1
-      }
-    })
-    map.addLayer({
-      id: 'line-area-stroke',
-      type: 'line',
-      source: 'measure-area-line',
-      paint: {
-        'line-color': lineColor,
-        'line-width': 2,
-        'line-opacity': 0.65
-      }
-    })
-    map.addLayer({
-      id: 'measure-area-points',
-      type: 'circle',
-      source: 'measure-area-points',
-      paint: {
-        'circle-color': textColor,
-        'circle-radius': 3,
-        'circle-stroke-width': 2,
-        'circle-stroke-color': lineColor
-      }
-    })
-  }
-
-  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 = '清除'
-    _ele.style.color = '#ccc'
-    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)
-    }
-    measureAreaEle.style.color = textColor
-    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)
-}