【Leaflet·1】从加载出第一幅地图开始
本leaflet系列总结适合初学者阅读学习，不太适合中级学习者及以上。nn阅读者编程要求：初级HTML、初级JS。稍有点入门即可。nn初学者推荐时间：3小时。nn软件准备：任何一款代码编辑器即可，哪怕记事本也行。nn关键内容：如何显示出一张地图，顺带介绍一些地图原理，如瓦片地图技术。
Tagged: leaflet
leaflet 结合D3 svg画图
首先获取： var svg = d3.selectAll(“svg”); var defs = svg.append(“defs”);然后 var linearGradient = defs.append(“linearGradient”) .attr(“id”, i…
使用Leaflet-imageoverlay加载本地图片实现拖拽和缩放
nn先上代码（本文写于18年7月17日，在原文作者的源代码中更新了使用最新的leaflet包）：nnnnn
Leaflet.js/Proj4.js自定义地图投影
Leaflet.js/Proj4.js自定义地图投影Leaflet自定义投影方法Proj4rnLeaflet自定义投影方法rn最近在做海图的web版本，网络上提供了很多地图加载瓦片的方法。rn1、主流是引入Proj4作为插件使用，如果想做循环显示，会发现这个插件对于L.Map中worldcopyjump此类的方法支持并不好。
LeafLet 地图展示のwms和tms
Leaflet作为一款轻量级的地图展示JavaScript类库，其具备全开源、易上手、细节少、模型结构简单等优势，可用于小型、简单的GIS项目展示。同时，因其良好的可扩展性，也为兼容实际业务需求，提供了必要支持，而新晋的MapBox项目，其JS类库（非GL类库）就是基于LeafLet进行构建的。
制作Leaflet调用高德地图环境下的图片覆盖图层切片
以前写的相关介绍rn 部分资源rn 要求为：leaflet调用高德地图的底层切片；显示或者不显示高德地图的切片；覆盖自定义图片切片；自定义模板颜色；rn结合切片工具来进行操作。实际操作中，需求可能五花八门，需要对生成的代码进行灵活修改。rn第一步：rnrnrn第二步：rnrnrnrnrn第三步：配准法设置。rn看演示，很简单。
独立坐标的栅格瓦片与矢量（geoJson）地图在Leaflet下加载
但是在实际过程中，也存在非WGS 84的独立地理坐标，如：游戏地图、CAD作图….我查看了许多开源的地图map容器，leaflet (https://leafletjs.com/) 与 openLayers (http://openlayers.org/) 支持这种独立坐标，窗体的话可以利用sharpMap（h…
基于leaflet地图对行政区进行维诺图区域划分
可视化功能：基于leaflet地图，对长春市进行维诺图的划分。实现技术：leaflet地图，D3运行效果： 初始状态： 缩放后效果：单击事件：alert维诺图的编号。实验过程：将数据点按经纬度进行K-MEANS聚类（人为设定聚成100类），获取各类中心的坐标，即100个类中心点坐标作为D3维诺图布局的输入，得到维诺图布局的数据。将其在leaflet地图上展示，并添加单击事件获取指定区域的编号，…
leaflet中地图交互事件(map interaction events)的触发顺序
地图交互事件(map interaction events)有以下类型：n”preclick”, “click”, “dblclick”, “mouseover”, “mousemove”, “mousedown”, “mouseup”, “mouseout”, “keypress”, “contextmenu”nn//双击过程nmouseovernnnhtml>nhead>n meta c
使按钮不相应leaflet的地图事件
此文是博主原创，仅做为工作积累背景系统应用了leaflet的地图库，库自带的zoom、fullscreen、layers等也都有用到，业务需要自己添加了几个按钮，样式为:class=’leaflet-control leaflet-bar’与leaflet库自带功能的按钮样式一样，看上去很漂亮，但是在自添加按钮上点击、双击、拖动时会产生地图事件。解决方法给leaflet的dom添加事件监听，若自添加
leaflet动态添加路线–L.Polyline.AntPath
1. 下载leaflet-ant-path依赖包nnnnpm install leaflet-ant-pathnn 2. 在项目中引用此js文件nnn”src/assets/js/ant-path/leaflet-ant-path.js”,nn 3. 在js中写入调用即可nnnnn//循环获取经纬度 nconst latlngs = data.map(e => n ret…
Leaflet地图框架使用手册——L.Map
L.MapnnAPI各种类中的核心部分，用来在页面中创建地图并操纵地图。nnConstructor（构造器）nn通过div元素和带有地图选项的描述的文字对象来实例化一个地图对象，其中文字对象是可选的。nnOptions（选项）nnMap State Options（地图状态选项）ncentre（中心）：初始化地图的地理中心。nzoom（缩放）：初始化地图的缩放。nlayers（图层）：初始化后加载…
leaflet系列二 加载arcgis自定义坐标系服务
leaflet目前只支持以下几种坐标系nnnn而且对于EPSG4236的支持也不是很好需要更改一些参数，才能正常加载切片服务，那么如何正确加载arcgis自定义服务呢？nn首先，我们需要知道如何计算瓦片服务的行列；可以去看这篇文章（WebGIS前端地图显示之根据地理范围换算出瓦片行列号的原理(核心)），这里就不过多赘述。
leaflet中文API说明
L.MaprnrnrnrnAPI各种类中的核心部分，用来在页面中创建地图并操纵地图.rnrnrnrn使用 examplern// initialize the map on the “map” div with a given center and zoomnvar map = L.map(‘map’, n center: [51.505, -0.09],n zoom: 13n);rnrn构造
leaflet 使用 wmts
leaflet 使用 wmts一直做地图方面的页面开发，这次接到一个新需求，使用leaflet对接公司的WMTS服务。n开始干活，查看leaflet文档nhttp://leafletjs.com/examples/wms/wms.html，原生只支持WMS接入。于是想到了必然会有大牛添加leaflet编写支持WMTS的插件，在Plugins去找，果然: n 根据插件demo，按需求写入参数
leaflet-div上禁止地图的拖动，放大缩小双击事件
1. 先把dom的div对象获取到，可用document.getEleementById(“divId”);nnnn //获取当前的this对象n const that = this;nn //获取要操作的div对象，可根据docoment.getElementById(“divId”);n const el = document.getElementById(“divId…
leaflet地图联动的简单实现
地图联动，基于leaflet.n拖拽或放大一个地图的时候，其他地图进行相同操作。
leaflet学习笔记一(初识GeoJSON)
近期公司需要开发遥感方面的项目，故需要学习leaflet相关的知识，尤其是在地图上工具GeoJSON绘制图形，下面简介GeoJSON。n简介Geojson是一个很重要的数据格式，结构清晰，表达简洁。与ESRI的shapefile相比更加小巧简单，但是表现的数据内容却是一样的，我觉得GeoJson大有取代shapefile的势头。
LeaFlet中切片图层使用自定义坐标系
解决方法只有一个那就是自定义坐标系,由于leaflet是轻量性的，自定义坐标系需要借助Proj4Leaflet，leaflet的生态非常好，插件很多，这是他的有点也是它的缺点。nnn一、如何定义坐标系nn1、引入插件nn2、查询所要的定义的坐标系的EPSG，然后https://epsg.io/…
Leaflet学习之路三——地图控件
Leaflet有四个控件:zoom,contribution,layers,scale。
Leaflet Marker自定义图片，及Marker覆盖问题的解决
描述：上图是百度地图的功能界面，原来是红色的Marker，当鼠标移到上面时变成了蓝色。实现：var Icon = L.Icon.Default.extend(noptions:niconUrl:”your blue img url”nn);nvar myIcon = new Icon();nmyMarker.setIcon(myIcon);//改变当前红色Marker的Icon为蓝色其它问…
leaflet选中要素，设置矢量样式，点击要素获取其属性
leaflet自身没有选择的控制，需要自己写代码实现nn主要是通过featurelayer的onclick事件来设置点击要素的style，并获取对应feature的属性信息nnnlet featureLayer = L.esri.featureLayer(n url:’http://mgr.easylinking.net:6080/arcgis/rest/services
leaflet开源地图库源码解析
一、leaflet的源码地址：https://github.com/Leaflet/Leaflet。
Leaflet地图框架使用手册——L.Popup
L.PopupnnConstructor（函数构造器）nnL.Popup()：通过给定一些选项构造一个弹出框对象，对象用来描述出现形式和位置还有一个可选对象来根据指向的资源对象标注弹出框。nmaxWidth（最大宽度）：弹出框的最大宽度。nminWidth（最小宽度）：弹出框的最小宽度。nmaxHeight（最大高度）：设置后，如果内容超过弹出窗口的给定高度则产生一个可以滚动的容器。nautoPa…
leaflet—marker总结
今天公司的app需要完成一个需求：nn在地图上通过自己手动添加一个marker点，然后将坐标等数据(经纬度)传给另个方法中，去获取地理编码信息。最后将坐标信息和地理编码信息以及手动添加的相关点数据一起传给后台去存储。并且在查看信息的时候定位到该坐标位置。nn分析：nn0.按钮触发nn1.需要在地图上获取人手点击的位置(经纬度)nn2.将经纬度传给marker并在地图上生成nn3.并且marker点…
igraph的中国/世界地图可视化—用leaflet实现
/*********地图上的图可视化************/n#中国地图绘制nlibrary(raster)nlibrary(igraph)nchina <- getData('GADM', country='CN', level=1)ndf<-data.frame("from" = c("Zhengzhou", "Beijing"), "to"= c("Beijing", &q
地图组件Leaflet地图偏移问题
转自：http://blog.csdn.net/liufeng0209/article/details/41896935Leaflet的好处就不多说了，简单的几点：轻量、支持HTML5、插件多，在与图形组件（如HT组件）结合后，可以开发出丰富的GIS应用，可以说几乎所有的GIS场景都能支持。在使用GIS的时候，想必有个问题一直困扰开发者，就是我们的底图基本上都是有偏移的，如果使用GPS采集的资源（…
leaflet加载百度地图(矫正篇)
leaflet加载百度地图(矫正篇)n 前段时间发布了Leaflet加载百度地图的示例，但是机智的网友发现，从百度地图上提取的坐标在Leaflet加载的百度地图上并不能很好的叠加在一起，于是决定一探究竟。
leaflet 单个或者多个marker图标切换清除
小谢博客地址https://xgs888.top/post/view?id=74nnnleaflet.js中清除marker图标，切换marker位置查看官方文档nn单个marker点的位置切换直接使用nnmarker.setLatLng([ajaxarr[0], ajaxarr[1]]);nnnn多个图标实时位置的切换需要先把图层清除，之前是直接是addTo(mymap)的
Leaflet自定义一个Control(L.Control)
本文介绍利用Leaflet基类L.Control创建自定义控件的方法…
leaflet加载百度地图
转自：http://blog.csdn.net/u012087400/article/details/52847614rnrnrn由于百度地图的切片规则和普通的互联网地图的切片规则不那么一样，所以大多数的文章介绍了如何加载例如：天地图，高德地图，腾讯地图等地图，但是唯独百度地图的介绍的不多也有一些感觉是不太合适的，我从这篇文章了解到了他的一些切片规则，然后决定将百度地图拓展出来，给需要他的人使用。
leaflet常用插件地址整理
现在发现只要项目用得到的，在leaflet插件中都可找到应用或者类似应用，给开发带来很大方便。笔者之前做arcgis js api，刚开始更换leaflet有很大的抵触情…
leaflet加载天地图
leaflet是一个轻量级的并且开源的地图框架，是由esri发起的，由于其轻量、简单而被大家喜欢，本文带你学习如何在leaflet中加载天地图。
Leaflet中的L.geoJSON一个坑
最近在使用 SuperMap iClient 9D for Leaflet 中的 L.supermap.queryService(url).queryByGeometry()接口 来定位某个建筑图斑时，发现2个问题。
Leaflet插件整理——Tile/image layers插件
[Basemap formats插件](Basemap formats插件)rn1.前言rnLeaflet以体积小、轻量著称，但这也是它的缺点，和openlayers相比，rnLeaflet主体程序实现的功能非常少，比如加载leaflet默认只支持WMS服务，rn好在它有丰富的插件…
Leaflet Routing Machine基于Leaflet的路径引擎
Leaflet Routing Machine（以下简称LRM）试图给复杂的问题提供一个简单的解决方案：现实中，路径可以是多方面的，并且用于各种场景的用户界面也大不相同； 大多数站点都希望用自己的样式实现用户界面。LRM 通过默认值来解决这一问题：只需要几行代码就可以添加基本的路径功能。
esri-leaflet入门教程（1）-leaflet介绍
esri-leaflet入门教程（1）-esri leaflet介绍 by 李远祥 关于leaflet，可能很多人比较陌生，如果搭上esri几个字母，可能会有更多的人关注。如果没有留意过leaflet的人，稍微百度一下，也就知道，它是一个轻量级的地图js框架。leaflet的种种好处，似乎已经有不少人写过相关的文章，这里就不多累赘去说明了。
LeaFlet结合leaflet-dvf实现数据可视化
前言：说起来GIS我觉得侧重于分析，渲染展示，做出来一些直观的专题图让人一眼就能了解数据的含义，今天结合的leaflet的插件实现数据的可视化，该插件可以做很多的功能，下面是一些地址：nnapi插件地址：https://github.com/humangeo/leaflet-dvf/wiki/6.
记一次leaflet 初始加载即为最小，设定的zoom失效情况
因为在L.map之后设置了fitBounds，所以zoom直接就加载为最小，所以把fitBounds去掉就好了
LeaFlet如何和canvas结合进行绘图
前言：canvas是一个非常好的东西，但是这个东西如何与leaflet进行结合，翻了一遍LeaFlet的API没有发现如何用canvas和LeaFlet相结合，难道两者无法集合天无绝人之路，最终我还是找到了DivIcon相结合，能达到目的。
leaflet聚合（MarkerCluster）-标记过多，缩小后显示数量
参考官方文档：https://github.com/Leaflet/Leaflet.markerclusternn2.效果图如图所示：nn nn3. npm install leaflet.markercluster 运行此命令下载leaflet的markercluster插件nn4. angular4中放入到angular.json中（css样式和js文件）nnn”node_mo…
Leaflet初体验0x2：使用自定义标记图标
准备图片：nnnn创建图标：nnn//通过L.Icon定义图标对象nvar greenIcon = L.icon(n iconUrl:’./leaf-green.png’,n shadowUrl:’./leaf-sahdow.png’,nn iconSize:[38,95],n shadowSize:[50,64],n iconAnchor:[22,94],//标记点在图标上位置n shadow…
Leaflet.js imageOverlay无法触发点击事件
公司项目需求为用户上传光栅图，然后在图上标注监控点位，因百度地图API不支持不使用地图直接操作一张图片，于是选择Leaflet.js实现业务功能。nn看网上代码将光栅图以 imageOverlay 对象添加到地图容器，后发现无法触发点击事件，关键代码如下nnnvar image = L.imageOverlay(‘images/timg.jpg’, bounds).addTo(map);nimag…
leaflet中文文档
L.MapAPI各种类中的核心部分，用来在页面中创建地图并操纵地图.使用 example// initialize the map on the “map” div with a given center and zoomnvar map = L.map(‘map’, n center: [51.505, -0.09],n zoom: 13n);构造器构造器使用描述L.Map(
leaflet加载离线瓦片地图
首先我们要明白瓦片地图的请求原理。nn其实瓦片地图并不是什么特殊的文件，就是最普通的png图片。之所以为地图，就是带有了地理坐标。nn打开network，查看其请求的的url就能明白其请求的原理了。nnnn主要在于最后三位，含义依次是14级的13528行，6250列。（或者13528列，6250行。）nn14就是下图中的level，而行列号对应每一级level里面的唯一一个瓦片（图片），那么地图框…
Leaflet.Icon 使用记录
NormalIcon = L.icon.pulse(n iconSize: [20, 20],n color: ‘#4169E1’,n animate: false,n heartbeat:0n );n WarningIcon = L.icon.pulse(n ic…
使用 angularjs 扩展 leaflet 的控件
leaflet提供了扩展控件的方法，可以自定义control，但现在想在自定义控件中使用angular的模板（templateUrl）和控制器（controller）机制绑定控件的属性和行为，类似于这种ui-router中定义路由或ui-bootstrap中定义弹出模态窗口的方式：nnnthis.
Leaflet+Geoserver+Oracle/Postgis项目搭建（二）
拖延症真的很可怕，距上一篇文章已经差不多半年的时间了，突然想到了还有东西要写。感谢在前一篇文章里面的留言，是你给了我动力，废话不多说了，一步一步来吧。Shape数据入库关于上一篇文章中写了使用到的技术，这里主要从数据入手，开始介绍。这里也分成两个库来说，Oracle和postgis，又因为大多的GIS数据都是可以转化为Shapefile的格式的，所以这里只介绍Shape格式的文件如何入库。Oracl
angular4总结项目中的知识点-leaflet相关调用，组件传值看下一章
1.ng-template 是angular4中的用于获取#id的值，例子如下：nnnn
[leaflet] 1 esri-leaflet
esri-leafletesri为WebGiS开发提供dojo与leaflet两种API rn官网 : http://www.esri.com/ rngithub：http://esri.github.io/leaflet是轻量级的地图JS开源框架 rn相比dojo，leaflet更轻，也更好与jQuery框架一起使用 rn官网: http://leafletjs.com
leaflet级别无限放大
var osmUrl = ‘https://s.tile.openstreetmap.org/z/x/y.png’;nvar maprow = L.map(‘maprow’).setView([37.8542800187483, 112.534177962463], 6);nL.tileLayer(osmUrl,n maxNativeZoom: 18,n maxZoom: 100…
Leaflet官方教程（二）——Leaflet on Mobile
Leaflet on Mobile在这个例子中，你将学习到在移动设备中创建全屏地图，并且如何探测和使用用户当前位置。Preparing the page首先我们看一下html和CSS代码。为了让map div元素拉伸到整个屏幕，我们要用如下CSS代码。
基于Leaflet和高德Web API扩展地理编码服务
需求背景：nn需求很简单就是想调用高德地图的地理编码服务，单独扩展一个类出来。nn参考地址：nnLeaflet类扩展：https://leafletjs.com/examples/extending/extending-1-classes.html?tdsourcetag=s_pcqq_aiomsgnn高德Web服务：https://lbs.amap.com/api/webservice/guid…
leaflet加载GeoServer的WFS服务
ngeoserver 能很好地和ol进行结合，geoserver是一个很好的开源的服务器，免费开源，虽然在使用上还比不上ArcGerser但是开源，leaflet主框架支持加载wms服务，没有WFS服务，加载WFS需要用个WFS插件，但是限制太多，在这里选用的方式为nnAjax的方式加载，加载返回geojson数据结合散点聚合插件。
leaflet 地图容器大小改变时,地图自适应新容器
nn nnn每次窗口大小改变后调用这个方法nmap.invalidateSize(true);nn
leaflet通过WFS服务加载geoserver 矢量数据
leaflet通过WFS服务加载geoserver 矢量数据1.前言2.从geoserver获得geojson数据3.geoserver跨域配置4.根据请求结果生成layer5.完整代码rn1.前言rnleaflet默认支持的服务只有WMS，因此不能加载WFS数据，但是leaflet提供了另一个方法geoJson，它的作用是从一个geojson文件中加载地图，所以利用leaflet加载WFS数据的一个…
Leaflet学习笔记-加载北京地铁线路
Leaflet学习笔记-加载北京地铁线路先上效果图 本文主要由两部分组成： 获取线路和站点json Leaflet加载线路和站点GeoJson 获取线路和站点json高德地图-地铁路线json（包含站点坐标） http://map.amap.com/service/subway?
react+leaflet入门Demo
1 代码架构使用create-react-app脚手架创建react工程 n2 引用leaflet的js和css文件在Index.html中引用上述文件ncss文件n
iClient for Leaflet子图层控制实现方法
作者：Lilynn背景n 在使用SuperMap iClient for JavaScript 9D产品过程中，经常有一些小伙伴会问如何用iClient for Leaflet实现子图层控制，本文就是针对这个问题写了一个例子，供大家参考和借鉴。
leaflet常用插件
我只是搬运工:nnhttp://www.360doc.com/content/18/0710/10/55991356_769234504.shtml