我正在参与掘金创作者训练营第6期，点击了解活动详情

背景

有一天产品经理说我们的网页上要仿照某某某网站，做个地图，然后标记一下关键地点的位置；

我说道：“做个图片，加个地图链接不就行了吗？让用户到地图网站上去交互去。”；

产品说：“不行，这样体验不好，必须要做成可以拖动的！”

我说：“做成可拖动的这个耗时很久啊，可能不能按时交付了！”

产品说：“你先给我估计个时间吧？”

我想拖一拖时间就说：“起码要个五天吧？”

产品说：“五天的时间你都可以做一版迭代了，不行！最多给你半天，你要把他做好！其他的需求还有很多，这一期不止这一个需求！”

我想一想也不敢多说什么，但是怎么办呢？完全没有做过地图啊，半天的时间怎么够啊？一顿搜索猛如虎，地图有百度地图、高德地图、腾讯地图、Google地图，但是这些都不是用来npm包，我们需要一个npm包。后来就找到l7，l7+高德地图开发文档我们就可以开始进行了，做地图开发首先还需要了解到地图的组成，我们一边了解地图的组成一边用l7来实践

地图的组成与绘制

瓦片底图为什么叫瓦片呢，地图其实是很多张图片拼成的，一小片一小片的地图就被称作瓦片，而底图一般都是高德地图、天地图这样的机构提供的，我们平常用到的地图其实都是底图，上面没有什么箭头标记

高德底图样式切换，我们先不看文档先看一下类型定义，看能不能找到蛛丝马迹，结果好家伙就是这样的类型定义：

懒得吐槽了只能去百度搜索了，找到了高德的官方API，这其实应该是个联合类型或者枚举类型;这里有超多样式可以选择:lbs.amap.com/demo/javasc…

图层Layer 比方说要把背景圈出来然后填充一个颜色的话，这就算是图层
覆盖物覆盖物比如我们经常使用到的打车软件，一般会在司机的位置那里画一个车，这个车就是覆盖物，l7里面怎么添加覆盖物呢？直接new Marker就行了，要自定义元素的话传一个这个dom节点，然后将这个节点背景替换为我们需要的背景就行了

import L7 from '@antv/l7'
import Maps from '@antv/l7-maps'

const container = document.getElementById('container')
const marker = document.getElementById('marker')
if(container){
    const map =  new Maps.GaodeMap({
        style:'normal',
        pitch:0,
        center:[0,0],
        zoom:17.5,
      });

    const scene =  L7.Scene({
        id:container,
        map,
        logoVisible:false
    })

    if(marker){
        const marker = new L7.Marker({
         element:marker
        })
        scene.addMarker(marker)
    }

}

坐标系

WGS-84坐标系：地心坐标系，GPS原始坐标体系

GCJ-02 坐标系：国测局坐标，火星坐标系（高德使用的坐标系）

CGCS2000坐标系：国家大地坐标系

BD-09坐标系,百度用的坐标系

搜狗坐标系，搜狗地图使用的坐标系，其实我没听说过，也没用过

图吧坐标系

每个地图的坐标系好像都不同，那么如果接口获取的坐标系是另外一个的，那么就需要进行坐标系转换，这个接口当然也是地图数据提供方去提供了

最后需要注意的是地图上的每一张图片其实都和坐标有关，在地图进行请求的时候都会带上x，y坐标的值

总结

地图由底图、图层、覆盖物、坐标系四部分组成，不同坐标系之间转换需要提供接口；写地图方面的需求用L7搭配高德地图js API文档就够了。

前端搞地图

背景

地图的组成与绘制

总结