驻场外包前端日记

最近遇到一个需求，让我陷入知识盲区。

页面有一张东莞地图，然后以30多个镇区作为区块，鼠标点击或者划过的时候，该区块高亮，并弹出一些文本内容，大概如下图：

这不是东莞地图的地图

作为一个土味前端，我粗暴地觉得，这个问题的实质，不规则图形监听鼠标事件，第一时间想到三个方案：

方案一：把每个镇区切成单独图片，放div，然后用样式定位来还原，非常蠢，并且我不确定抠图的难度，但我确定如果能够拼回来，我的精神境界应该能上一个台阶。而且有个问题，div都是矩形的，反正我不百度不知道怎么判别鼠标点击的地方是不是透明区域。

方案二：还是把每个镇区切成单独图片，放canvas，canvas可判别是否透明区域，然后通过坐标把每个镇区位置还原，那我的精神境界又能上一个台阶。因为用上canvas，感觉高级，犹如在精心炮制巧克力味的屎。

方案三： 让设计切好图，导出svg，然后我在每个svg元素上设置class来监听——这是看起来是个美好的方案，但根据以往经验，看导出的svg源码基本也是在吃巧克力味的屎。

我大概用5分钟分析完这几个方案后，大概用10秒钟就把它们全部否定。然后动用我锤炼了接近十多年的百度能力，这是我作为前端核心能力之一。得出结论是地图有api可以生成这样的区块。可见http://datav.aliyun.com/tools/atlas/#&lat=33.521903996156105&lng=104.29849999999999&zoom=4
一个名为geoJson的东西，也可以自己去画（可见http://geojson.io/），然后把导出的json数据来用，大概是这样弄出来https://leafletjs.com/reference-1.6.0.html#geojson

啊。知识焦虑，我真是个文盲。

使用地图来做这种效果，无疑是最好的方案。

那么问题的核心转移到如何获取东莞各镇街的什么鬼geojson数据。

然后不幸地发现，官方并没有公开具体到东莞的乡镇级的区域边界数据，最多就到区，但东莞没有区，感觉受到地域歧视。手残的我，必不可能画出这么精致的边界。

但我坚信这个方向没有错，所以继续深入地百度。

皇天不负有心人，我在csdn找到由网友自制的数据，但需要积分。我不能就此而充一个vip，太没性价比了。这时候我动用第二个核心能力，通过淘宝获取盗版商品，果然，一元钱就买到了这堆数据，真是得来不易。最后伴随着不间断地百度且一顿api的拼凑——作为职业前端又一核心能力，不太充分验证了这个方案的可行性。不充分是指，例如产品或者甲方突然丧心病狂，让我调整增加各种区域边界，又或者内网的地图坐标会有偏移导致整个色块变形。

驻场外包的工作，就是这么朴实无华，且枯燥。

坦率地讲，我应该可以耍赖推掉这个需求。我们都知道，项目是有周期的，而且我们是一支人均80后的项目团队，哪怕保持人员稳定，也终将被遗弃。摆正自我位置后，除非甲方强烈要求，所以互相都不必要求那么高，反正结果也都差不多。而我，不仅作为驻场外包人员，而且是个前端，更加是一路走到黑。

但毕竟工作占了日常一大部分时间，总是要在麻木、茫然中，找点乐子——比如上周传来年终奖过完年才发的噩耗，隔壁的同事居然讨论起spring的事务传播机制，刹那间，感觉这位同学背后有光。

偶尔吃完晚饭，都会在公园溜一下自己。有时候在想，这可能是最后一份前端工作了，以后要干嘛好呢。又觉得想那么多很无谓，不如欣赏好此刻的黄昏。

这是一篇技术分享，看出来了吗。