@mapcatch/util 1.0.0

package/src/util.js

@@ -0,0 +1,332 @@
+import { v4 as uuidv4 } from 'uuid'
+import moment from 'moment'
+import SparkMD5 from 'spark-md5'
+import _ from 'lodash'
+import {getPhotoTags} from './exif'
+import cameras from './constants/cameras'
+import * as turf from '@turf/turf'
+
+export function generateId() { // 生成随机id
+  return uuidv4()
+}
+export function formatDate(date) {
+  if (!date) {
+    return '-'
+  }
+  return moment().format('YYYY-MM-DD HH:mm:ss')
+}
+export function formatLocalDate() {
+  return moment().format('YYYY/M/D HH:mm:ss')
+}
+export function formatFileSize (value) { // 文件大小格式化，自动换算kb\mb\gb
+  value = parseInt(value)
+  value = value.toString()
+  const length = value.length
+  if (length > 6) {
+    value = (Number(value) / 1000000).toFixed(2)
+    return value + ' MB'
+  } else {
+    value = (Number(value) / 1000).toFixed(2)
+    return value + ' KB'
+  }
+}
+export async function getPhotoInfo(file) { // 获取照片的经纬度
+  let sliceFile = file.slice(0, 65536)
+  sliceFile.name = file.name
+  let exif = await getPhotoTags(sliceFile)
+  let {GPSAltitude, GPSLatitude, GPSLatitudeRef, GPSLongitude, GPSLongitudeRef, DateTimeOriginal, Model} = exif
+  if (!GPSLongitude || !GPSLatitude) {
+    return {}
+  }
+  let date = DateTimeOriginal.split(' ')[0].replaceAll(':', '-')
+  return {
+    date,
+    Model,
+    position: {
+      lng: getGeoCoordOperator(GPSLongitudeRef) * toRadian(GPSLongitude),
+      lat: getGeoCoordOperator(GPSLatitudeRef) * toRadian(GPSLatitude),
+      alt: +GPSAltitude
+    }
+  }
+}
+export function getPhotoMeta(file) {  // 获取照片的元数据，包括exif和md5，为了提高计算效率，只取前64k进行计算
+  return new Promise((resolve, reject) => {
+    let md5, exif
+    let sliceFile = file.slice(0, 65536)
+    sliceFile.name = file.name
+    getPhotoTags(sliceFile).then(data => {
+      exif = data
+      done()
+    })
+    let fileReader = new FileReader()
+    let spark = new SparkMD5.ArrayBuffer()
+    fileReader.readAsArrayBuffer(sliceFile)
+    fileReader.onload = e => {
+      spark.append(e.target.result)
+      md5 = spark.end()
+      done()
+    }
+    function done() {
+      if (!md5 || !exif) {
+        return
+      }
+      resolve({md5, exif})
+      fileReader = null
+      spark = null
+    }
+  })
+}
+export function getGeoCoordOperator(flag) { // 将照片的中的经纬度方位字母换成正负号
+  if (flag === 'N' || flag === 'E') {
+    return 1
+  }
+  return -1
+}
+export function toRadian(arr) { // 度分秒转弧度
+  return arr[0] + (arr[1] / 60) + (arr[2] / 3600)
+}
+export function diffLayers(newList, oldList = []) { // 任务详情中的任务成果树进行差异计算，获取图层更新的操作
+  newList = _formatTree(newList)
+  oldList = _formatTree(oldList)
+  let cmds = []
+  for(let group of newList) {
+    let {visible: groupVisible} = group
+    for(let layer of group.items || []) {
+      let {id, type, opacity, visible, color, geometry} = layer
+      if (!groupVisible) {
+        visible = false
+      }
+      if (['point', 'line', 'polygon'].includes(type) && cmds.find(d => d[0] === 'updateAnnotations')) {
+        continue
+      }
+      let oldNode = findNodeInTree(id, oldList)
+      if (!oldNode && !visible) {
+        continue
+      }
+      if (!oldNode) {
+        if (['point', 'line', 'polygon'].includes(type)) {
+          cmds.push(['updateAnnotations', layer])
+        } else {
+          cmds.push(['addLayer', layer])
+        }
+        continue
+      }
+      let {opacity: oldOpacity, visible: oldVisible} = oldNode
+      if (_.isEqual(layer, oldNode)) {
+        continue
+      }
+      if (['point', 'line', 'polygon'].includes(type)) {
+        cmds.push(['updateAnnotations', layer])
+      } if (opacity !== oldOpacity) {
+        cmds.push(['updateLayer', layer])
+      } else if (visible !== oldVisible){
+        cmds.push([visible?'addLayer':'removeLayer', layer])
+      }
+    }
+  }
+  for(let group of oldList) {
+    for(let layer of group.items || []) {
+      let {id, type} = layer
+      let newNode = findNodeInTree(id, newList)
+      if (!newNode) {
+        if (!['point', 'line', 'polygon'].includes(type)) {
+          cmds.push(['removeLayer', layer])
+        } else if (!cmds.find(d => d[0] === 'updateAnnotations')){
+          cmds.push(['updateAnnotations', layer])
+        }
+      }
+    }
+  }
+  return cmds
+}
+export function findNodeInTree(id, tree) { // 从图层树中查找指定
+  for(let node of tree) {
+    if (node.id === id) {
+      return node
+    }
+    if (node.items?.length) {
+      let subNode = findNodeInTree(id, node.items)
+      if (subNode) {
+        return subNode
+      }
+    }
+  }
+  return null
+}
+function _formatTree(treeList) {
+  let tree = _.cloneDeep(treeList)
+  for(let group of tree) {
+    for(let layer of group.items || []) {
+      if (!group.visible) {
+        layer.visible = false
+      }
+    }
+  }
+  return tree
+}
+// 获取比当前图层，层级更低的图层id
+export function getBeforeId (map,layer){
+  let layersForFilter = map.style._layers
+  let orders = map.style.order
+  let {layerType:insertType} = layer.metadata
+  // 获取到level比当前大的
+  // 如果同级，则添加到最后
+  let beforeLayer = orders.find(id=>{
+    let targetData = layersForFilter[id].metadata
+    if(_.isEmpty(targetData)) {
+      targetData = {
+        layerType: 'dsm'
+      }
+    }
+    return getLevelByLayerType(insertType,layer.id) < getLevelByLayerType(targetData.layerType,id) ? true : false
+  })
+  return beforeLayer || ''
+
+  function getLevelByLayerType (type,id){
+    // 此数组维护一个图层类型的先后关系
+    // 越在前，则代表此图层层级越低
+    const layerTypeLevel = [
+      ['bmap'],
+      ['dom'],
+      ['ndvi'],
+      ['dsm'],
+      ['circle'],
+      ['annotation'],
+      ['label']
+    ]
+    let level = -1
+    if (id.startsWith('gl-draw')) {
+      level = 5
+    } else {
+      level = layerTypeLevel.findIndex(types=>{
+        return types.includes(type)
+      })
+    }
+    
+    if(level === -1){
+      //console.error(`id为${id}的图层层级未知`)
+      return 100
+    }
+    return level
+  }
+}
+export function isTokenExpired(response) {
+  if (!response) {
+    return false
+  }
+  let {message = '', msg =''} = response.data
+  return response.status == 401 && (msg.toLowerCase().includes('expired') || message.toLowerCase().includes('expired'))
+}
+export function getDataType(model) { // 根据相机型号获取照片的类型
+  for(let type in cameras) {
+    if (cameras[type].includes(model)) {
+      return type
+    }
+  }
+  return 'normal'
+}
+export function downloadImage(base64) {
+  let filename = `快照${moment().format('YYYYMMDD')}${new Date().getTime()}.png`
+  let a = document.createElement('a')
+  a.href = base64
+  a.download = filename
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(a)
+}
+export function getGeometryType(feature) {
+  let type = turf.getType(feature)
+  if (['Point', 'MultiPoint'].includes(type)) {
+    return 'point'
+  } else if (['LineString', 'MultiLineString'].includes(type)) {
+    return 'line'
+  } else {
+    return 'polygon'
+  }
+}
+export function rgbaToFloat(v) {
+  let a = v[3] > 128.0 ? 0 : 1
+  let sign = -1 * (1 - a) + a;
+  let expo = Math.floor((v[3] + 0.1) % 128.0) * 2.0 + Math.floor((v[2] + 0.1) / 128.0) - 127.0;
+  let sig = v[0] + v[1] * 256.0 + Math.floor((v[2] + 0.1) % 128.0) * 256.0 * 256.0;
+  return sign * (1.0 + sig / 8388607.0) * Math.pow(2.0, expo);
+}
+export function getAnnotationFeature(annotationItem) {
+  let {geometry} = annotationItem
+  let properties = _.cloneDeep(annotationItem)
+  delete properties.geometry
+  return {
+    id: properties.id,
+    type: 'Feature',
+    properties,
+    geometry: _.cloneDeep(geometry)
+  }
+}
+export function getAnnotationName(annotations, type) {
+  let indexs = []
+  let name = type === 'point' ? '点注记' : (type === 'line' ? '线注记' : '面注记')
+  annotations.forEach(item => {
+    if (item.name === name) {
+      indexs.push(0)
+      return
+    }
+    if (item.name.startsWith(`${name} `)) {
+      let i = Number(item.name.split(' ').pop())
+      if (!Number.isNaN(i)) {
+        indexs.push(i)
+      }
+    }
+  })
+  indexs = indexs.sort((a, b) => a-b)
+  for(let i = 0;i < indexs.length;i++) {
+    if (indexs[i] !== i) {
+      return i === 0 ? name : `${name} ${i}`
+    }
+  }
+  return indexs.length === 0 ? name : `${name} ${indexs.length}`
+}
+export function getLineLabelFeature(lineFeature) {
+  let coordinates = lineFeature.geometry.coordinates
+  let temps = []
+  for(let i = 1;i < coordinates.length;i++) {
+    let distance = turf.distance(coordinates[i-1], coordinates[i], {units: 'meters'})
+    if (distance > 30) {
+      temps.push([coordinates[i-1], coordinates[i]])
+    }
+  }
+  let labelLine = []
+  if (!temps.length) {
+    let mid = Math.floor(coordinates.length / 2 - 1)
+    labelLine = [coordinates[mid], coordinates[mid+1]]
+  } else {
+    let mid = Math.floor(temps.length / 2)
+    labelLine = temps[mid]
+  }
+  let start = project(labelLine[0])
+  let end = project(labelLine[1])    
+  let angle = 360 - (Math.atan((start.y - end.y) / (end.x - start.x)) * 180) / Math.PI
+  let midPoint = turf.midpoint(labelLine[0], labelLine[1])
+  midPoint.properties = lineFeature.properties
+  midPoint.properties.angle = angle
+  midPoint.geometry.coordinates.push(((labelLine[0][2] || 0) + (labelLine[1][2] || 0)) / 2)
+  return midPoint
+}
+export function project(lngLat) { // 经纬度转墨卡托像素坐标
+  let [lng, lat] = lngLat
+  let x = (180 + lng) / 360
+  let y = (180 - (180 / Math.PI) * Math.log(Math.tan(Math.PI / 4 + (lat * Math.PI) / 360))) / 360
+  return {
+    x: x * Math.pow(2, 12) * 512,
+    y: y * Math.pow(2, 12) * 512
+  }
+}
+export function addIcons2Map (map, icons) {
+  icons.forEach(path => {
+    map.loadImage(path, (error, image) => {
+      let iconName = path.split('/').pop().split('.')[0]
+      if(map.hasImage(iconName)) return
+      if (error) throw error
+      map.addImage(iconName, image)
+    })
+  })
+}

package/vite.config.js

@@ -0,0 +1,52 @@
+import { defineConfig } from "vite";
+import glslify from 'vite-plugin-glslify'
+
+const path = require("path");
+
+const config = defineConfig({
+  target: "es2015",
+  plugins: [glslify()],
+  server: {
+    port: 5173,
+  },
+  build: {
+    outDir: path.resolve(__dirname, "./dist"),
+    lib: {
+      entry: path.resolve(__dirname, "./src/index.js"),
+      name: "catchUtil",
+    },
+    rollupOptions: {
+      context: "globalThis",
+      preserveEntrySignatures: "strict",
+      output: [
+        {
+          format: "umd",
+          exports: "named",
+          sourcemap: false,
+          entryFileNames: "catchUtil.min.js",
+          chunkFileNames: "[name].js",
+          assetFileNames: "[name].[ext]",
+          namespaceToStringTag: true,
+          inlineDynamicImports: false,
+          manualChunks: undefined
+        },
+        {
+          format: "es",
+          exports: "named",
+          sourcemap: false,
+          entryFileNames: "catchUtil.min.esm.js",
+          chunkFileNames: "[name].js",
+          assetFileNames: "[name].[ext]",
+          namespaceToStringTag: true,
+          inlineDynamicImports: false,
+          manualChunks: undefined
+        },
+      ],
+    },
+  },
+  resolve: {
+    extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],
+  },
+});
+
+export default config;