leaflet 矢量 经纬网格

1. 绘制需求1每层级网格像素大小不变即每层级网格经纬度距离加密一次2页面顶部和右侧标注经度、纬度值3经纬度值精度随层级变化4尽量避免显示区域外的多余绘制同时保证拖动时不会出现没有网格的情况2. 代码实现1确定网格线间隔经线范围-180~180纬线-90~90间隔值应当为180、90的公约数这样能保证过0°经线比如1级-180、-90、0、90、1802级-180、-135、-90、-45、0、45、90、135、180......let zoom map.getZoom(); // 经纬度间隔 let d 90 / Math.pow(2, zoom - 1);2) 只绘制当前视野内的线3在边界上添加标注let zoom map.getZoom(); let bounds map.getBounds(); let north bounds.getNorth(); let east bounds.getEast(); // 经纬度间隔 let d 90 / Math.pow(2, zoom - 1); // 经线网格 for (let index -180; index 360; index d) { // 判断当前视野内 if (bounds.contains([north, index])) { // 绘制经线 let lonLine L.polyline( [ [-90, index], [90, index], ], { weight: 1, color: blue } ); lonLatGridLineLayer.addLayer(lonLine); // 标注 let text index.toFixed(1) °; // 动态计算小数位数 if (zoom 10) { text index.toFixed((zoom - 8) / 2) °; } let divIcon L.divIcon({ html: div stylewhite-space: nowrap;color:red;${text}/div, iconAnchor: [0, -5], }); let textMarker L.marker([north, index], { icon: divIcon }); lonLatGridLineLayer.addLayer(textMarker); } }4缩放和拖动事件重绘网格map.on(zoomend move, () { lonLatGridLineLayer.clearLayers(); addLonLatLine(); });3.全部代码!DOCTYPE html html langen head meta charsetUTF-8 / meta http-equivX-UA-Compatible contentIEedge / meta nameviewport contentwidthdevice-width, initial-scale1.0 / link relstylesheet hrefhttps://unpkg.com/leaflet1.7.1/dist/leaflet.css / script srchttps://unpkg.com/leaflet1.7.1/dist/leaflet.js/script titleleaflet-经纬网格/title style html, body { width: 100%; height: 100%; padding: 0; margin: 0; } .leaflet-div-icon { background: none; border: none; } /style /head body div idmap styleheight: 100%; width: 100%/div script let map L.map(map, { renderer: L.canvas({ padding: 0.5 }) }).setView( [25.127879288597576, 118.37905883789064], 4 ); // 添加背景图层 L.tileLayer(https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png, { attribution: copy; a hrefhttps://www.openstreetmap.org/copyrightOpenStreetMap/a contributors, }).addTo(map); // 创建图层 let lonLatGridLineLayer L.featureGroup().addTo(map); // 经纬网格生成方法 let addLonLatLine () { let zoom map.getZoom(); let bounds map.getBounds(); let north bounds.getNorth(); let east bounds.getEast(); // 经纬度间隔 let d 90 / Math.pow(2, zoom - 1); // 经线网格 for (let index -180; index 360; index d) { // 判断当前视野内 if (bounds.contains([north, index])) { // 绘制经线 let lonLine L.polyline( [ [-90, index], [90, index], ], { weight: 1, color: blue } ); lonLatGridLineLayer.addLayer(lonLine); // 标注 let text index.toFixed(1) °; // 动态计算小数位数 if (zoom 10) { text index.toFixed((zoom - 8) / 2) °; } let divIcon L.divIcon({ html: div stylewhite-space: nowrap;color:red;${text}/div, iconAnchor: [0, -5], }); let textMarker L.marker([north, index], { icon: divIcon }); lonLatGridLineLayer.addLayer(textMarker); } } if(d90)d90; // 纬线网格 for (let index -90; index 90; index d) { if (bounds.contains([index, east])) { let lonLine L.polyline( [ [index, -180], [index, 360], ], { weight: 1, color: blue } ); lonLatGridLineLayer.addLayer(lonLine); // 标注 let text index.toFixed(1) °; if (zoom 10) { text index.toFixed((zoom - 8) / 2) °; } let divIcon L.divIcon({ html: div stylewhite-space: nowrap;color:red;${text}/div, iconAnchor: [(text.length 1) * 6, 0], }); let textMarker L.marker([index, east], { icon: divIcon }); lonLatGridLineLayer.addLayer(textMarker); } } }; addLonLatLine(); map.on(zoomend move, () { lonLatGridLineLayer.clearLayers(); addLonLatLine(); }); /script /body /html