leaflet

2024-09-24基于Leaflet和天地图的直箭头标绘实战-源码分析
目录前言一、Leaflet的特种标绘库1、特种标绘对象的定义2、Plot基类定义3、直线箭头的设计与实现二、在天地图中进行对象绘制1、引入天地图资源2、标绘对象的调用时序3、实际调用过程三、总结前言在博客中介绍过geoman标绘的具体实现，使用LeafletGeoMan结合天地图
2024-09-14GIS进阶-Openlayers、Vue+Openlayers、Leaflet、Geoserver、PostGis、Java集成Geotools、QGIS等前后端使用工具安装、使用、集成、调用三方组件
场景作为一名非专业GIS开发者，在日常企业级开发中遇到GIS领域相关业务需求时，参考资料较少，各种体系生态不明确。往往因为错过了好多大神封装好的工具、借口、三方框架、api等白白浪费时间。最主要的是此专栏会持续更新，毕竟GIS的知识体系远不止如此，后续会持续记录、共同积累、共同
2024-08-05leaflet实现绘制省市区域边界并填充颜色
leaflet实现绘制省市区域边界并填充颜色asyncinitMap(){this.map=L.map("map",{center:[30.998257,103.653534],zoom:11,attributionControl:false,//隐藏logozoomControl:false,crs:L.CRS.Baidu,});
2024-08-02解决Leaflet地图初始化后更改容器宽度，新增部分瓦片没有请求问题
当使用Leaflet初始化地图并在后续操作中动态更改地图容器的宽度时，可能会出现地图新增加的部分没有请求瓦片的情况。这是因为Leaflet在初始化时计算并缓存了地图的尺寸，当容器的尺寸发生变化时，地图没有自动刷新来适应新的尺寸。为了解决这个问题，需要在动态更改容器宽度后调用L
2024-07-20openwrt之luci界面开发------问题解析
查阅视频：我取不来名字的https://space.bilibili.com/320467466在openwrt的luci界面开发中，用到的这个E()函数，其功能是在网页界面创建各种各种视图效果，如按钮，文字等等。其原函数：functionE(){ returnL.dom.create.apply(L.dom,arguments)}这个E()函数定义实
2024-07-17如何给地图瓦片底图添加滤镜，实现自己想要的主题色
核心：使用css的filter滤镜属性，然而搭配svg实现想要的效果首先确认底图服务提供的瓦片是否为浅色主题（透明瓦片不适用）实现步骤：截取原浅色底图图片，类似于下图，最好是带上海洋部分的截图SVGGradientMapFilter这个网站调整自己想要的底图主题效果，网址：https://yoksel.github.
2024-07-12Uniapp 使用 Leaflet
在Uniapp中使用Leaflet，可以按照以下步骤进行：安装Leaflet：如果您使用的是H5平台，可以通过以下命令在项目根目录安装Leaflet：npminstallleaflet对于其他平台（如小程序），可能无法直接通过npm安装，需要手动引入Leaflet的相关资源文件。在页面中引入Leaflet：在需
2024-07-05Leaflet-vue 热力图（设置热力图颜色）
使用的热力图是heatmap.js因为是Leaflet，所以还要引入一个对应的插件leaflet-heatmap.js，这个插件就在heatmap目录下的plugins里面。代码如下：import"heatmap.js";importHeatmapOverlayfrom"@/utils/leaflet-heatmap.js";letcfg={radius:0.5,//半径maxOpacity
2024-06-22leaflet动态更改wms瓦片请求参数
需求https://leafletjs.cn/reference.html#tilelayer-wms官方文档这里说了可以添加自定义参数，但是这里的写法，值是固定的如果我们需要添加的参数的值是动态变化的，那么，直接写在options的方式固然是行不通的解决办法重写getTileUrl方法，可以选择继承TilelayerWMS重写一个类，也可
2024-06-18地图技术选型
目录一、地图效果与技术栈对比二、Mapbox收费情况三、leaflet集成①瓦片服务器②添加图层控件到leaflet一、地图效果与技术栈对比效果\技术栈leafletmapbox（MapboxGLJS）三方地图支持高德（免费）OSM（免费）mapbox（StaticImagesAPI）mapbox卫星图高德卫星（免费）mapbox
2024-05-28vue leaflet 引入热力图
实现效果：安装：//通过npm安装heatmap.jsnpminstall--saveheatmap.jsimport"heatmap.js";importHeatmapOverlayfrom"@/assets/Leaflet/leaflet-heatmap.js";代码：//配置letcfg={radius:0.05,//半径maxOp
2024-05-26Leaflet地图
Leaflet是一个为建设移动设备友好的互动地图，而开发的现代的、开源的JavaScript库。Leaflet设计坚持简便、高性能和可用性好的思想，在所有主要桌面和移动平台能高效运作，在现代浏览器上会利用HTML5和CSS3的优势，同时也支持旧的浏览器访问。1、安装配置在官网中下载上方
2024-03-20leaflet频繁切换mapbox矢量图层-短暂空白问题
leaflet加载mapbox矢量图层-最佳方案推荐闪烁问题比如现在有卫星图和mapboxgl矢量图层，两者有时常常需要切换，但在切换回矢量图层时，会出先短暂的空白问题(就是初始化图层)，那有什么办法，可以实现平滑过渡切换呢解决思路大概讲一下思路，就是在切换卫星图时，矢量图层不要立刻移除，通过
2024-03-01Leaflet实现极地坐标投影
<!DOCTYPEhtml><htmllang="en"><head> <metacharset="utf-8"> <metaname="viewport"content="width=device-width,initial-scale=1"> <title>LeafletPolarGraticule-Arctic<
2024-02-20通用方式实现Map
通用方式实现MapChatGpt实现展示地图并在地图上提供操作选项的技术栈可以包括：Web开发技术：HTML、CSS、JavaScript地图API：如GoogleMapsAPI、MapboxAPI、Leaflet等前端框架：如React、Vue.js、Angular等后端技术：如Node.js、Django、Flask等（如果需要与后端交互）数据库：如MySQL
2024-01-19在vue2中使用leaflet.AnimatedMarker来移动某个目标
需求是:点击某个按钮后让扫描仪沿着某条线移动进行扫描效果: 扫描仪是沿着河流移动的，河流的生成方式通过geojson数据生成，geojson里包含了河流的一些点位的经纬度，扫描仪根据经纬度来移动leaflet:1.9.4 leaflet.AnimatedMarker:1.0.0 1.引入 importLfrom'leaf
2023-12-26Leaflet 使用图片作为地图
Leaflet使用图片作为地图关键代码：L.CRS.Simple.transformation=newL.Transformation(1,0,1,0);//坐标原点切换为左上角varmap=newL.Map('map',{crs:L.CRS.Simple,//设置地图坐标模式为简单模式center:[0,0],//地图中心zoom:-0.5,//缩放
2023-12-21Leaflet 使用图片作为地图
Leaflet使用图片作为地图关键代码：L.CRS.Simple.transformation=newL.Transformation(1,0,1,0);//坐标原点切换为左上角varmap=newL.Map('map',{crs:L.CRS.Simple,//设置地图坐标模式为简单模式center:[0,0],//地图中心zoom:-0.5,//缩
2023-12-19leaflet在vue2中标点加载geoJSON
lealfet版本1.9.4vue版本2.6引入:importLfrom'leaflet' import'leaflet/dist/leaflet.css' //记得引入样式不然加载瓦片图后地图会错乱1.初始化this.map=L.map(this.mapId,mapInitOptionNew)//this.mapId是容器的idletcenter=[32.666,129.547]const
2023-11-16利用leafletCN包在R里绘制可交互地图（叠加高德地图替代）
Leaflet是一个开源并且对移动端友好的交互式地图JavaScript库。在R语言中也使用相应的leaflet包调用。然而，在国内，一些国外的地图资源在加载或使用中会存在问题。为此，需要一个适应国情的扩展包leafletCN（GitHub-Lchiffon/leafletCN:AnRgalleryforChinaandothergeoj
2023-10-12【leaflet】动态轨迹
使用插件：leaflet.motionhttps://github.com/Igor-Vladyka/leaflet.motion//执行轨迹回放doShowTraces(latLngs){latLngs=[[39.123595,110.561176],[39.123041,110.566147],[39.116309,110.566799],[39.115508,110.
2023-10-12leaflet | GridLayer扩展土层
一、createtile方法1、同步使用要创建自定义层，请扩展GridLayer并实现createTile()方法，该方法将通过一个带有x、y和z(缩放级别)坐标的点对象来绘制瓦片。代码示例：varCanvasLayer=L.GridLayer.extend({createTile:function(coords){//createa<canvas>elem
2023-09-07@supermap/iclient-leaflet使用tiledMapLayer报错
使用leaflet加载超图的时候有时候超图无法加载有时候报如下错误因为手上有好几个项目都在使用leaflet但是同样都使用@supermap/iclient-leaflet(版本11.1.0-a)加载超图，有的项目可行，有的不可行最后打开项目根目录下node_modules里查看@supermap文件夹里的iclient-leafl
2023-08-14leaflet.js气象风场图制作
Demo示例<!DOCTYPEhtml><html><head><title>LeafletVelocityDemo</title><metacharset="utf-8"/></head><body><div
2023-06-29003-Leaflet-各地图切换
一、代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="