23年12月-24年1月工作笔记整理（前端）

一、css知识

1.css实现文字描边（白底黑边）

-webkit-text-stroke: 1px #000;
color: #fff;
font-weight: 900;

2.css子元素平分父元素的宽度

父元素{ display:flex;} 
子元素{flex:1}

二、js知识

1.dayjs拿月份的最后一天日期

// 2020年2月结束日期时间
dayjs('2020-02').endOf('month').format('YYYY-MM-DD')

2.坐标系转换
坐标系分为：WGS84(国际通用) ，GCJ02(高德、QQ地图) ，BD09(百度地图) ，CGCS2000(2000国家大地坐标)

/**
 * 判断坐标是否在国内（国外坐标不需转换）
 * @param lng
 * @param lat
 * @returns {boolean}
 */
const outOfChina = (lng, lat) => {
  // 纬度3.86~53.55,经度73.66~135.05
  return !(lng > 73.66 && lng < 135.05 && lat > 3.86 && lat < 53.55)
}

/**
 * 国测局J02（火星坐标系 (GCJ-02)）坐标转WGS84
 * @param lng
 * @param lat
 * @returns {[*,*]}
 */
const gcj02towgs84 = (lng, lat) => {
  if (outOfChina(lng, lat)) {
    return [lng, lat]
  } else {
    let dlat = transformlat(lng - 105.0, lat - 35.0)
    let dlng = transformlng(lng - 105.0, lat - 35.0)
    const radlat = (lat / 180.0) * PI
    let magic = Math.sin(radlat)
    magic = 1 - ee * magic * magic
    const sqrtmagic = Math.sqrt(magic)
    dlat = (dlat * 180.0) / (((a * (1 - ee)) / (magic * sqrtmagic)) * PI)
    dlng = (dlng * 180.0) / ((a / sqrtmagic) * Math.cos(radlat) * PI)
    const mglat = lat + dlat
    const mglng = lng + dlng
    return [lng * 2 - mglng, lat * 2 - mglat]
  }
}

/**
 * WGS84转国测局J02（火星坐标系 (GCJ-02)）
 * @param lng
 * @param lat
 * @returns {[*,*]}
 */
const wgs84togcj02 = (lng, lat) => {
  if (outOfChina(lng, lat)) {
    return [lng, lat]
  } else {
    let dlat = transformlat(lng - 105.0, lat - 35.0)
    let dlng = transformlng(lng - 105.0, lat - 35.0)
    const radlat = (lat / 180.0) * PI
    let magic = Math.sin(radlat)
    magic = 1 - ee * magic * magic
    const sqrtmagic = Math.sqrt(magic)
    dlat = (dlat * 180.0) / (((a * (1 - ee)) / (magic * sqrtmagic)) * PI)
    dlng = (dlng * 180.0) / ((a / sqrtmagic) * Math.cos(radlat) * PI)
    const mglat = lat + dlat
    const mglng = lng + dlng
    return [mglng, mglat]
  }
}
// wgs84坐标转百度坐标
const wgs84tobd = (lat, lon) => {
  const _wgs2gcj = wgs84togcj02(lat, lon)
  const _gcj2bd = gcj02tobd(_wgs2gcj[0], _wgs2gcj[1])
  return _gcj2bd
}

/**
 * 国测局J02（火星坐标系 (GCJ-02)）转百度坐标系
 * @param lng
 * @param lat
 * @returns {[*,*]}
 */
const gcj02tobd = (lng, lat) => {
  const z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * X_PI)
  const theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * X_PI)
  const bdLng = z * Math.cos(theta) + 0.0065
  const bdLat = z * Math.sin(theta) + 0.006
  return [bdLng, bdLat]
}

/**
 * 百度坐标系转国测局J02（火星坐标系 (GCJ-02)）
 * @param lon
 * @param lat
 * @returns {[*,*]}
 */
const bdtogcj02 = (lon, lat) => {
  const x = lon - 0.0065
  const y = lat - 0.006
  const z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * X_PI)
  const theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * X_PI)
  const ggLng = z * Math.cos(theta)
  const ggLat = z * Math.sin(theta)
  return [ggLng, ggLat]
}

3.路由的两种参数写法

// 命名的路由 (这里的name 要跟路由的name一致)
router.push({ name: 'user', params: { userId: '123' }})
// 带查询参数，变成 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' }})

4.echarts Y轴有负值时的坐标轴对齐

 xAxis: {
        axisLine: {
          onZero: false  // 坐标轴与负刻度对齐
     }
}

三、需求技术

1.图片解析专题
注意点：
1）用exif-js解析图片信息的话，必须要上传原图，照片用苹果手机拍摄数据最全
2）使用exif-js解析出了图片的时间和地址信息，地址信息需要对数据进行计算出经纬度，并经过坐标系转换后再用高德地图geocoder.getAddress()获取。
3）pc端图片解析数据预研结论：前提得是原图且不被修改，苹果手机照片可以解析出位置和时间，安卓手机（华为、oppo、vivo、小米手机）只能解析出时间。
当前页引入：import EXIF from ‘exif-js’

//img标签加id
//js代码
  const img = document.getElementById(file.uid)
        EXIF.getData(img, async function () {
          const info = EXIF.getAllTags(this)
          console.log('图片时间', info.DateTime)
          //获取经度数据数组
          const tagj = EXIF.getTag(this, 'GPSLongitude')
         //获取纬度数据数组
          const tagw = EXIF.getTag(this, 'GPSLatitude')
          if (tagj && tagw) {
           //计算经度
            const lng = tagj[0] + tagj[1] / 60 + tagj[2] / 60 / 60
          //计算纬度
            const lat = tagw[0] + tagw[1] / 60 + tagw[2] / 60 / 60
          //初始化AMap，创建Geocoder()
            this.geocoder = new AMap.Geocoder()
            this.geocoder.getAddress(
           //WGS84转国测局J02（火星坐标系 (GCJ-02)）方法 
              wgs84togcj02(lng, lat),
              function (status, result) {
                if (status === 'complete' && result.info === 'OK') {
                  // result为对应的地理位置详细信息
                  console.log('result===', result)
                  console.log('address', result.regeocode.formattedAddress)
                }
              }
            )
          }
        })

2.联级组件的懒加载为了不让最后一级可以加载，需要在数组里加上leaf: true
3.计算字符数量，中文+1，其他+0.5，为了方便做宽度外悬浮显示，宽度内悬浮不显示

export function countFullNum(str) {
  let count = 0
  const arr = str.split('')
  arr.forEach(item => {
    //如果是中文的话就只算1个字符，其他的都算半个字符
    if (item.match(/[\u4e00-\u9fa5]/g)) {
      count = count + 1
    } else {
      count = count + 0.5
    }
  })
  return count
}