Leaflet.js爬坑记录(1)
转载请注明出处：王亟亟的大牛之路
初衷以及传送门：
因为要做一个防碰撞的警报/预警系统，所以带着小伙伴最近在整地图相关的技术，有一些特殊要求
- 不使用收费的地图源
- 非瓦片图加载性能在秒级
- 丰富的API
- 成熟的实际商业案例
综合上述需要和朋友的推荐，使用/学习了Leaflet.js。基于播撒欢笑播撒爱的初衷，把体验过程中遇到的一些情况和积累，分享给大家。
不想看介绍，想直接看源码的可以进传送门
运行的案例地址在src/html下，3个demo拽浏览器都能跑
Leaflet倒包的小要点
倒包需要样式的css和功能的js,但是js一定要在css后加载
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"
integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"
integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
crossorigin=""></script>
地图的坑：
地图的坑是做的过程中遇到的第一个问题
- 国内的地图源和国外的地图源有偏差
- 免费的地图加载多数偏慢
- mapbox奇卡无比而且很难玩
- 其他
为什么相同的GPS坐标在不同地图上结果不同？
知识解释来源于：
https://www.zhihu.com/question/20982283
http://www.cnblogs.com/cglNet/archive/2013/11/26/3443637.html
谷歌用的WGS84坐标系，但是中国这边国家测绘要求用GCJ-02加密一次
百度在GCJ-02要求加密的基础上，又自己对坐标加密了一次，它官方文档里说叫BD-09,从GPS坐标转到百度坐标有接口提供，反过来不提供
解决方法：使用第三方算法库来解决相关问题
https://github.com/kartena/Proj4Leaflet
//倒包
<script src="../lib/proj4-compressed.js"></script>
<script src="../js/proj4leaflet.js"></script>
官方的支持：http://leafletjs.com/reference-1.2.0.html#crs
解决的具体代码：
var crs = new L.Proj.CRS(
'EPSG:3395',
'+proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs',
{
resolutions: function () {
level = 19;
var res = [];
res[0] = Math.pow(2, 18);
for (var i = 1; i < level; i++) {
res[i] = Math.pow(2, (18 - i))
}
return res;
}(),
origin: [0, 0],
bounds: L.bounds([20037508.342789244, 0], [0, 20037508.342789244])
}
);
然后定义L.map对象时，作为属性传入即可
事件分发:
地图本身和地图上面的元素都可以拦截事件，已知场景下是从上层图层自上而下传递事件。
常规元素添加监听姿式如下：
L.marker(testLatLng, {icon: myIcon, rotationAngel: 180})
.addTo(leafletMap)
.on('click', function (e) {
L.popup()
.setLatLng(e.latlng)
.setContent('这个标记的经纬度是：</br>纬度：' + e.latlng.lat + '</br>经度：' + e.latlng.lng)
.openOn(leafletMap);
console.log(e);
});
地图添加监听姿式如下：
leafletMap.on('click', function () {
console.log('--->click 点击事件')
});
leafletMap.on('mousedown', function () {
console.log('--->mousedown 按下不抬起')
});
leafletMap.on('mouseup', function () {
console.log('--->mouseup 按下抬起');
});
leafletMap.on('dblclick', function () {
console.log('--->dblclick 双击触发');
});
// leafletMap.on('mouseover', function () {
// console.log('--->mouseover 鼠标移出移进地图都会触发');
// });
//触发极度频繁
// leafletMap.on('mousemove', function () {
// console.log('--->mousemove 鼠标在地图上移动触发');
// });
leafletMap.on('viewreset', function () {
console.log('--->viewreset 重绘内容时触发');
console.log('--->getCenter ' + leafletMap.getCenter());
console.log('--->getSize' + leafletMap.getSize());
console.log('--->hasLayer是否有此图层 ' + leafletMap.hasLayer(layout));
});
leafletMap.on('autopanstart', function () {
console.log('--->autopanstart 自动平移时触发');
});
leafletMap.on('whenReady', function () {
console.log('--->whenReady 页面完全加载完');
});
layout.on("load", function () {
console.log("--->layout 图层被加载一次")
});
效果如下：
这里写图片描述
各种有用没用的回调API都已经对外开放，都属于map这一层的功能
自定义Icon
系统默认的Icon是一个蓝色雨滴状的Icon,我们也完全可以自定义。
Icon其实有2层分别是实质Icon和阴影Icon，如果不需要高端的背景操作，shadow相关设置都可以不设置。
这里提一个不同缩放比情况下不同UI呈现的小实现
首先设定两种不同的Icon的类型
一大一小，在大区域显示小的，近景显示大的
var big = [50, 50];
var small = [20, 20];
var iconB = L.Icon.extend({
options: {
iconSize: big
}
});
var iconS = L.Icon.extend({
options: {
iconSize: small
}
});
然后获取地图的缩放回调进行不同的逻辑处理：
leafletMap.on('zoomend', function (ev) {
if (leafletMap.getZoom() > 14) {
custom.setIcon(bigIcon);
} else {
custom.setIcon(smallIcon);
}
});
高端操作：Icon角度旋转
普通的点/线/图形基础库已经完全满足了我们的需求，但是如果是做导航类的，就会有方向性的需要，就会有icon像车头一样变动。
找了一堆找到个比较好的实现Leaflet.RotatedMarker
简单易用就一个类，内部实现是对Icon的style进行修改旋转一个角度，造成了icon旋转的“假象”
像这样
这里写图片描述
L.marker([31.2303904, 121.45370209999997], {rotationAngle: 270}).addTo(cities);
实现简单，效果ok，使用简单，很棒的一个东西！
接下来一段时间会继续在Leaflet.js上做二次开发，会继续分享相关爬坑经历，谢谢各位观众老爷
