图片基于经纬度定位

前介：

        工作中遇到一个需求，用echarts渲染的地图无法下沉到村一级，也无法查看更详细的地图信息（项目架构原因，无法使用百度地图等地图服务）。所以只能考虑用图片来搞，在图片上再标点。

思路：

        要计算点位背景图的经纬度相差多少（左上角和右下角两个对角的经纬度），所有的点就基于左上角来定位，通过渲染图片的DOM的宽高，计算出每一经度/纬度等于多少PX。

地图定位：

       

如上图

左上角的经纬度是：108.34,22.98

右下角的经纬度是：108.40,22.94

计算每经纬度等于多少PX

经度相差 108.40 - 108.34 = 0.06

纬度相差 22.98 - 22.94 = 0.04

我渲染DOM的宽高为：686px * 375px

计算当前渲染的图片每PX等于多少经度：

// 传入左上角、右下角的经度

function returnOneLngPx(leftTopLng,rightBottomLng){
    // 计算相差多少经度
    let maxDiffLng = rightBottomLng - leftTopLng
    return 686 / maxDiffLng

}

计算当前渲染的图片每PX等于多少纬度：

// 传入左上角、右下角的经度
function returnOneLatPx(leftTopLat,rightBottomLat){
    // 计算相差多少经度
    let maxDiffLng = rightBottomLat - leftTopLat
    return 375 / maxDiffLng

}

通过点位的经纬度来计算点位的绝对定位的left和top

点位是基于左上角来定位的

计算点位的left

// 距离左上角的x轴有多少px，也就是left
function returnLng(ponitLng){
  let diffLng = ponitLng - leftTopLng // 左上角的经度
  return this.returnOneLngPx(leftTopLng,rightBottomLng) * diffLng
}

计算点位的top

// 距离左上角的y轴有多少px，也就是top
function returnLat(ponitLat){
  let diffLat = ponitLat - leftTopLat // 左上角的纬度
  return this.returnOneLatPx(leftTopLat,rightBottomLat) * diffLat
}

在点位上渲染

<img v-for="item in ponitList"
    class="mapImgIcon" :src="..." alt="" :title="..." 
    :style="`left:${returnLng(item.lng)}px;top:${returnLat(item.lat)}px`"
>

结语

        第一次发博客，只是一些经验之谈，有什么啥不对的地方欢迎指出、谈论。