随笔分类 - GIS / leaflet.js
摘要：当使用 Leaflet 初始化地图并在后续操作中动态更改地图容器的宽度时，可能会出现地图新增加的部分没有请求瓦片的情况。这是因为 Leaflet 在初始化时计算并缓存了地图的尺寸，当容器的尺寸发生变化时，地图没有自动刷新来适应新的尺寸。 为了解决这个问题，需要在动态更改容器宽度后调用 Leaflet
阅读全文
摘要：然后改动窗口大小才会正常 在map容器所在的vue页面中，在方法中加入 nextTick(()=>{ let map = L.map(...)； }) nextTick作用是在所有dom元素加载完毕之后才执行 因为这种情况一般是容器dom还没调整到相应大小，地图就已经创建了，所以在加载完毕之后会显示
阅读全文
摘要：https://leafletjs.cn/reference.html#gridlayer 使用了maxNativeZoom属性 示例 let map = L.map("map", { attributionControl: false, maxZoom: 18, }).setView([62, -
阅读全文
摘要：需求 https://leafletjs.cn/reference.html#tilelayer-wms 官方文档这里说了可以添加自定义参数，但是这里的写法，值是固定的 如果我们需要添加的参数的值是动态变化的，那么，直接写在options的方式固然是行不通的 解决办法 重写getTileUrl方法，
阅读全文
摘要：leaflet加载mapbox矢量图层-最佳方案推荐 闪烁问题 比如现在有卫星图和mapboxgl矢量图层，两者有时常常需要切换，但在切换回矢量图层时，会出先短暂的空白问题(就是初始化图层)，那有什么办法，可以实现平滑过渡切换呢 解决思路 大概讲一下思路，就是在切换卫星图时，矢量图层不要立刻移除，通
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Leaflet Pol
阅读全文
摘要：一、问题背景 问题是这样发生的，因为项目中需要实现热力图的功能，所以使用了第三方的库 heatmap.js。 但是在一些浏览器中使用它时，会出现这个错误： > Uncaught TypeError: Cannot assign to read only property 'data' of obje
阅读全文
摘要：一、createtile方法 1、同步使用 要创建自定义层，请扩展GridLayer并实现createTile()方法，该方法将通过一个带有x、y和z(缩放级别)坐标的点对象来绘制瓦片。 代码示例： var CanvasLayer = L.GridLayer.extend({ createTile:
阅读全文
摘要：### Demo示例 ```html LeafletVelocity Demo ``` ### 示例效果  点击查看
阅读全文
摘要：https://github.com/turban/Leaflet.Graticule import "leaflet-graticule"; L.graticule().addTo(map); 解决办法： import "leaflet-graticule"; L.LatLngGraticule.
阅读全文
摘要：while (Math.abs(lon) > 180) { lon -= Math.sign(lon) * 360 }
阅读全文
摘要：在初始化地图的时候，设置attributionControl为false即可 var map = L.map("mapDiv",{attributionControl: false}); https://leafletjs.com/reference.html#map-attributioncont
阅读全文
摘要：1、比例控件 一个简单的比例控件，以公制 （m/km） 和英制 （mi/ft） 系统显示当前屏幕中心的比例，可扩展。 使用示例 L.control.scale().addTo(map); 创造 | 构造 | 描述 | | : | : | | L.control.scale(<Control.Scal
阅读全文
摘要：1、初始化 L.map(<String> id , options ?) //用地图div的id创建 L.map(<HTMLElement>el , options?) //用地图div的name创建 // 简单示例 // initialize the map on the "map" div wi
阅读全文
摘要：一、介绍 leaflet使用百度地图，叠加层使用谷歌坐标；leaflet默认使用谷歌坐标，使用百度地图需要进行坐标偏移，就是把谷歌坐标转换成百度坐标，此方法是直接在地图投影方法出设置偏移。 具体如下： 1、引入支持leaflet的proj4(https://github.com/kartena/Pr
阅读全文
