maplibre显示经纬线,(动态若干条)

效果图:

实现思路是:
1.获取当前视图的上下左右四个经纬度坐标
2,通过经纬度坐标生成10条经度线,10条纬度线, 这个数量可以根据需求来进行修改
3, 新增geojson文件,并且当图层缩放或者拖拽后重新生成

代码:

   <!--
 * @Author: 老范
 * @Date: 2022-03-16 13:24:33
 * @LastEditors: 老范
 * @LastEditTime: 2022-03-25 15:37:46
 * @Description: 请填写简介
-->

<template>
    <div id="app-map" @dragover="dragover">
        <div style="height: 100%; width: 100%; text-align: left">
            <div ref="mapbox" style="height: 100%; width: 100%">
                <div class="bottom">
                    <div class="calculation-box">
                        <div id="calculated-area"></div>
                    </div>
                    <pre id="coordinates" class="coordinates" style="margin: 0; line-height: 28px">
                      经度：<span id="lng"></span>纬度：<span id="lat"></span>
                    </pre>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import gridLayer from '@/utils/gridLayer'
    export default {
        data() {
            return {
                range: 5, //地图缩放等级,
                bounds: { _sw: { lng: -180, lat: -180 }, _ne: { lng: 180, lat: 180 } }, //地图显示边界,
                realData: {},
                style: {
                    line: {
                        "line-dasharray": [2, 2, 2, 2],
                        //设置线颜色
                        "line-color": "#b09e8f",
                        //设置线宽度，像素单位
                        "line-width": 1.5
                    },
                    point: {
                        "text-color": "#c4bb00",
                        "text-halo-width": 2,
                    }
                }
            };
        },
        mounted() {
            this.init();
        },
        methods: {
            //初始化
            init() {
                // 初始化地图
                // refs标签，用于访问代码中的DOM元素 //地图实例自行创建配置
                this.map = this.$utils.createMap(this.$refs.mapbox);
                // 鼠标移动
                this.map.addControl(this.$utils.creatScale());
                let map = this.map;
                let that = this;
                map.on("load", function () {
                    that.loadGrid()
                    layerAdd(map);
                });
                // 地图右下角坐标
                map.on("mousemove", function (e) {
                    if (e.lngLat.lng < -180) e.lngLat.lng += 360;
                    if (e.lngLat.lng > 180) e.lngLat.lng -= 360;
                    let lng = document.getElementById("lng");
                    lng.innerHTML = e.lngLat.lng;
                    let lat = document.getElementById("lat");
                    lat.innerHTML = e.lngLat.lat;
                });
                map.on('moveend', function (e) {
                    gridLayer.initStyle(that.style)
                    gridLayer.initProperty(that.map);
                    gridLayer.initGrid();
                });
                map.on('zoomend', function (e) {
                    gridLayer.initStyle(that.style)
                    gridLayer.initProperty(that.map);
                    gridLayer.initGrid();
                });
            },
            loadGrid() {
                gridLayer.initStyle(this.style)
                gridLayer.initProperty(this.map);
                gridLayer.addSourceData([]);
                gridLayer.addLayerData()
                gridLayer.initGrid();
            },
            // 拖拽触发时调用
            dragover(event) {
                event.preventDefault();
                event.dataTransfer.dropEffect = "move";
            }
        }
    };
</script>

<style scoped>
    #app-map {
        width: 100vw;
        height: 100vh;
    }

    /*底部*/
    .bottom {
        width: 100%;
        height: 3%;
        min-height: 20px;
        background: rgba(16, 37, 63, 0.7);
        position: absolute;
        bottom: 0;
        display: flex;
        justify-content: space-between;
        color: #ffffff;
    }
</style>

核心layer代码:
gridLayer.js

/*
 * @Author: 老范
 * @Date: 2022-03-24 16:13:39
 * @LastEditors: 老范
 * @LastEditTime: 2022-03-25 13:46:46
 * @Description: 请填写简介
 */
const gridLayer = {
    map: null,
    bounds: null,//当前地图的四个顶点
    style: null,
    initStyle(style) {
        this.style = style;
    },
    addSourceData(Lines, Points) {
        if (this.map.getSource('gridLine') || this.map.getSource('gridPoint')) {
            if (this.map.getLayer('Linegrid') || this.map.getLayer('Pointgrid')) {
                this.map.removeLayer("Linegrid");
                this.map.removeLayer("Pointgrid");
            }
            this.map.removeSource("gridLine");
            this.map.removeSource("gridPoint");
            this.map.addSource('gridLine', {
                'type': 'geojson',
                'data': {
                    'type': 'FeatureCollection',
                    'features': Lines
                }
            });
            this.map.addSource('gridPoint', {
                'type': 'geojson',
                'data': {
                    'type': 'FeatureCollection',
                    'features': Points
                }
            });
            this.addLayerData();
        } else {
            this.map.addSource('gridLine', {
                'type': 'geojson',
                'data': {
                    'type': 'FeatureCollection',
                    'features': []
                }
            });
            this.map.addSource('gridPoint', {
                'type': 'geojson',
                'data': {
                    'type': 'FeatureCollection',
                    'features': []
                }
            });
        }
    },
    addLayerData(style) {
        //将线添加到一个图层中，在地图中显示
        this.map.addLayer({
            //此id可随意设置，但是要唯一
            "id": "Linegrid",
            //指定类型为线
            "type": "line",
            //设置数据来源
            "source": 'gridLine',
            //设置线型
            "layout": {
                //线条末端样式
                'line-cap': 'round',
                //线条相交处样式  
                'line-join': 'round'
            },
            //设置绘制参数
            "paint": this.style.line
        });
        this.map.addLayer({
            "id": "Pointgrid",
            "type": "symbol",
            "source": "gridPoint",
            'layout': {
                'text-field': ['get', 'name'],
                'text-font': [
                    'NotoSans-Black'
                ],
                'text-offset': [6, 3],
                'text-anchor': 'bottom',
                "text-size": [
                    "interpolate",
                    ["linear"],
                    ["zoom"],
                    4, 9,
                    6, 12
                ],
            },
            "paint": this.style.point
        })
    },
    initProperty: function (map) {//初始化当前地图的状态
        this.map = map;
        // this.level = this.map.getZoom();
        // this.initCenter = map.getCenter();
        this.bounds = {
            x1: this.map.getBounds().getSouthWest().lng,
            y1: this.map.getBounds().getSouthWest().lat,
            x2: this.map.getBounds().getNorthEast().lng,
            y2: this.map.getBounds().getNorthEast().lat,
        };
    },
    initGrid: function () {//初始化网格
        //获取当前网格跨度
        //初始化地图上的网格
        let points = [];
        let geometryLine = [];
        let geometryPoint = [];
        let betweenX = (this.bounds.x2 - this.bounds.x1) / 10 //差额十等分,需要几等分更改即可
        let betweenY = (this.bounds.y2 - this.bounds.y1) / 10  
        this.XY = this.bounds;
        for (var i = this.XY.x1; i < this.XY.x2; i = i + betweenX) {
            points = [];
            points.push([i, this.XY.y1], [i, this.XY.y2]);
            geometryLine.push({
                "type": "Feature",
                "geometry": {
                    "type": "LineString",
                    "coordinates": points
                }
            });
            geometryPoint.push({
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": points[1]
                },
                'properties': {
                    'name': "" + i + "° 0'0'E"
                }
            });
        }
        for (var i = this.XY.y1; i < this.XY.y2; i = i + betweenY) { 
            points = [];
            points.push([this.XY.x1, i], [this.XY.x2, i])
            geometryLine.push({
                "type": "Feature",
                "geometry": {
                    "type": "LineString",
                    "coordinates": points
                }
            });
            geometryPoint.push({
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": points[0]
                },
                'properties': {
                    'name': "" + i + "° 0'0'N"
                }
            });
        }
        this.addSourceData(geometryLine, geometryPoint);
    }
}
export default gridLayer