![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
leaflet
文章平均质量分 84
leaflet
Dawn_www
这个作者很懒,什么都没留下…
展开
-
leaflet:入门基础(五)之结束篇
前言 到此差不多把 leaflet 官方入门教程中的一些案例写完了,接下来把剩余的一些案例简单说一下。 官方教程:Leaflet Tutorials交互式地图 程序在接受到编程人员相应的指令后而相应地做出反应,这一过程及行为,我们称之为交互。在这张美国人口密度图中,我们指到哪个州,就会告诉我们相应州的人口密度,比起直接展示全国的数据,这样的展示更容易让人聚焦到想知道的地方情况,印象更深刻,体验感更佳。[ 具体实现请查看 leaflet 官方教程]缩放等级...原创 2020-08-04 12:08:47 · 3487 阅读 · 0 评论 -
leaflet:入门基础(四)之加载图标
前言 之前讲过如何在图层上添加点数据,有时候一个简单的圆点虽然表达了其地理位置,但却无法让人一下明白其代表了什么,这一篇将讲解如何使用多样的图标来替代简单的一个圆点,更直观的表达它的含义。图标资源 这里提供一个图标资源网站:easyicon 之前该网站不用登录就能下载到很多图标,但现在需要注册登录,并且每天只能有限的下载,但也足够我们使用了。把图标下载到本地即可。当然还有很多其他图标网站,如:阿里巴巴矢量图标库加载图标 设置一个图标的属性,并加载到地...原创 2020-08-03 18:40:04 · 5160 阅读 · 2 评论 -
Geoserver 发布矢量瓦片 leaflet 调用不显示
前言 在学习 leaflet 时,想要调用 geoserver 发布的数据,结果代码写好后运行却没有成功显示调用的数据。搞了两天之后终于解决了,所以看了不等于学会了,得动手才行。资源 下载的是 geoserver 2.15.1 windows安装版 [链接] 同时还要下载一个同版本的 geoserver-2.15.1-vectortiles-plugin.zip (上面的链接拉到底部 注:如果用的是windows installer,则插件解压出来......原创 2020-07-17 19:21:17 · 3361 阅读 · 6 评论 -
leaflet:入门基础(三)之加载数据
前言 上一篇 leaflet:入门基础(二) 讲了如何加载底图 这一篇将讲解如何加载自己已有的数据(未更完1:加载Geojson数据 需要的数据:一个geojson数据(可以是点/线/面 注:如果手上有shp数据,可以通过https://mapshaper.org/转换得到geojson数据(使用说明[链接])var map = new L.Map('map', { center: new L.LatLng(39.86,116...原创 2020-07-17 19:17:09 · 13996 阅读 · 10 评论 -
leaflet:入门基础(二)之加载图层
前言 上一篇 leaflet 入门基础 讲了如何使用leaflet,包括加载地图、绘制图层等。 这一篇将讲解如何加载多种图层,以及如何寻找底图。底图资源 这里提供一个底图资源网站:open whatever map 打开网址,就可以看到丰富的底图资源 点击喜欢的底图,会弹出一个信息框,把提供的网址复制下来加载底图 leaflet有两种类型的图层: (1)base layer:互斥的图...原创 2020-07-09 18:04:48 · 16660 阅读 · 7 评论 -
leaflet:入门基础(一)
登陆官网,下载leaflet,其实也就是一个js包点击download选择第一个,下载下来后解压就好了创建一个Web项目,添加一个html文件把解压后的leaflet.css和leaflet.js添加到项目里在head标签里添加下面两句 <link rel="stylesheet" href="./leaflet.css"/> <scrip...原创 2019-03-28 21:06:04 · 33174 阅读 · 17 评论