mapbox-gl绘制经纬网格（Graticule）
在mapbox-gl上实现经纬网格，是按照经度、纬度的一定间隔，将同经度（纬度）的坐标点，连接成直线，实现绘制经纬度网格的形式。
//纬线
function makeMeridian(lng) {
lng = lngFix(lng);
const coords = [];
for (var lat = -90; lat <= 90; lat += 1) {
coords.push([lng, lat]);
}
return coords;
}
//经线
function makeParallel(lat) {
const coords = [];
for (var lng = -180; lng <= 180; lng += 1) {
coords.push([lngFix(lng), lat]);
}
return coords;
}
//创建geojson数据
function makeFeature(coordinates, properties) {
return {
type: 'Feature',
geometry: {
type: 'LineString',
coordinates
},
properties
};
}
//修整经度，防止最大值溢出
function lngFix(lng) {
if (lng >= 180) return 179.999999;
if (lng <= -180) return -179.999999;
return lng;
}
//主函数
function graticule(interval) {
interval = +interval || 20;
const features = [];
for (var lng = 0; lng <= 180; lng += interval) {
features.push(makeFeature(makeMeridian(lng), {
name: (lng) ? lng.toString() + "° E" : "本初子午线"
}));
if (lng !== 0) {
features.push(makeFeature(makeMeridian(-lng), {
name: lng.toString() + "° W"
}));
}
}
for (var lat = 0; lat <= 90; lat += interval) {
features.push(makeFeature(makeParallel(lat), {
name: (lat) ? lat.toString() + "° N" : "赤道"
}));
if (lat !== 0) {
features.push(makeFeature(makeParallel(-lat), {
"name": lat.toString() + "° S"
}));
}
}
return {
type: 'FeatureCollection',
features
};
}
//添加经纬度图层
const _griddata = graticule(5);
map.addSource('gridline', {
'type': 'geojson',
'data': _griddata
});
map.addLayer({
'id': 'gridid',
'type': 'line',
'source': 'gridline',
'layout': {
'line-join': 'round',
'line-cap': 'round'
},
'paint': {
'line-color': '#f00',
'line-width': 1
}
});
效果图如下：
以上是5度为间隔画的经纬度网格，拉到最北边和最南边，会清楚的看到，只能显示到+-85多的坐标位置。
引用内容：
https://github.com/turban/Leaflet.Graticule
https://github.com/dereklieu/cool-grid
