xy-map 1.0.0

package/util/mapHoverHtml.js

@@ -0,0 +1,54 @@
+import mapSdk from '../map'
+import '../style/hoverHtml.css'
+
+/**
+ * 地图hover、array生成html
+ * @param {*} arr = [{
+ *  label: 名称
+ *  key: data的属性名
+ *  dicData: 字典数据、label,value
+ *  suffixText: 后缀文字
+ *  customItemClass: 自定义行类型
+ *  customLabelClass: 自定义label类型
+ *  customValueClass: 自定义value类名
+ * }]
+ * @param {*} e mapHover 回调函数返回的值
+ * @param {*} beforeHtml: 放到前面的html
+ * @param {*} afterHtml: 放到后面的html
+ * @returns
+ */
+
+export const mapHoverHtml = (arr, e, beforeHtml, afterHtml) => {
+  const data = e.properties
+  if (!Array.isArray(arr)) {
+    console.error('hover-html:入参异常！')
+    console.log(data)
+    console.log(arr)
+    return
+  }
+  if (arr.length === 0) {
+    console.error('hover-html:入参数组为空！')
+    return
+  }
+
+  let html = ''
+  let content = []
+  if (beforeHtml) html += beforeHtml
+  arr.forEach(item => {
+    let label = item.label || ''
+    let value = data[item.key] || '-'
+    if (item.dicData && item.dicData.length > 0) {
+      value = item.dicData.find(f => f.value == data[item.key]).label || '-'
+    }
+    // 是否有后缀
+    if (item.suffixText) value += item.suffixText
+    content.push(`<p class="hover-item ${item.customItemClass || ''}">
+      <span class="label ${item.labelValueClass || ''}">${label}:</span>
+      <span class="value ${item.customValueClass || ''}">${value}</span>
+    </p>`)
+  })
+  content.map(m => html += m)
+  if (afterHtml) html += afterHtml
+  mapSdk.addPopup([e.properties.lgtd, e.properties.lttd], `<div class="xy-hover-html line-height-2">${html}</div>`)
+}
+

package/util/mapTools.js

@@ -0,0 +1,117 @@
+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 {
+      type: 'Feature',
+      geometry: {
+        type: type,
+        coordinates: item[props]
+      },
+      properties: item
+    }
+  })
+
+  let data = {
+    type: 'FeatureCollection',
+    features: pointsData
+  }
+  return data
+}
+
+// 测距
+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
+}

package/util/measure-area.js

@@ -0,0 +1,215 @@
+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)
+}